Cards!

frontend/app/pages/projects/hibolia/thanks.vue

@@ -0,0 +1,121 @@
+<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('/')">
+            &gt; {{ $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>