Aran Roig
770f302bc3
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 2m26s
122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
|
|
import StickyHeader from '~/components/parts/StickyHeader.vue';
|
|
import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
|
|
|
|
useHead({
|
|
title: 'Thanks | Aran Roig',
|
|
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
|
});
|
|
|
|
const localePath = useLocalePath();
|
|
</script>
|
|
|
|
<template>
|
|
<FullscreenLayout>
|
|
<HiboliaScene class="thanks-scene" aria-hidden="true" />
|
|
|
|
<Container class="full-bg">
|
|
<div class="thanks-layout">
|
|
<div class="thanks-panel">
|
|
<h1 class="thanks-title">✓ {{ $t('order.hibolia.thanks.title') }}</h1>
|
|
<p class="thanks-message">{{ $t('order.hibolia.thanks.message') }}</p>
|
|
<p class="thanks-next">{{ $t('order.hibolia.thanks.next') }}</p>
|
|
<NuxtLink class="thanks-back" :to="localePath('/')">
|
|
> {{ $t('order.hibolia.thanks.back_home') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</FullscreenLayout>
|
|
<StickyHeader always-visible />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.tui-frame.full-bg {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: transparent;
|
|
|
|
:deep(.tui-inner) {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-top: 52px;
|
|
background: var(--color-background-fore);
|
|
}
|
|
|
|
:deep(.frame-corner-tr),
|
|
:deep(.frame-corner-br) {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.thanks-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.thanks-panel {
|
|
flex: 1;
|
|
max-width: 720px;
|
|
min-width: 0;
|
|
margin: 0 auto;
|
|
padding: 100px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.thanks-title {
|
|
font-family: 'Hurmit', monospace;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.thanks-message {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 1.05rem;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.thanks-next {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.9rem;
|
|
opacity: 0.75;
|
|
margin: 12px 0 32px;
|
|
}
|
|
|
|
.thanks-back {
|
|
display: inline-block;
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 1.05rem;
|
|
color: #d4d4d4;
|
|
background: #000;
|
|
border: 1px solid var(--color-border-color);
|
|
padding: 14px 42px;
|
|
text-decoration: none;
|
|
transition: all 120ms steps(3);
|
|
|
|
&:hover {
|
|
border-color: var(--color-link);
|
|
}
|
|
}
|
|
|
|
.thanks-scene {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
filter: blur(10px);
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.no-sprite .undertable-wrapper {
|
|
display: none;
|
|
}
|
|
</style>
|