new selfhosted version

dashboard/pages/payment_ok.vue

@@ -1,32 +1,83 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+const colorMode = useColorMode();
+const confetti = ref<HTMLElement | null>(null)
 
-definePageMeta({ layout: 'none' });
+onMounted(() => {
+  const total = 100
+  for (let i = 0; i < total; i++) {
+    const el = document.createElement('div')
+    el.className = 'confetti'
+    
+    // Posizione iniziale al centro in basso
+    el.style.left = '50%'
+    el.style.bottom = '40%'
+    
+    // Colore random
+    el.style.backgroundColor = ['#F44336', '#FFC107', '#4CAF50', '#2196F3'][Math.floor(Math.random() * 4)]
 
+    // Movimento random verso l'alto con angolazione
+    const angle = Math.random() * 2 * Math.PI
+    const distance = 100 + Math.random() * 200 // px
+    const x = Math.cos(angle) * distance
+    const y = Math.sin(angle) * distance
+
+    el.style.setProperty('--x', `${x}px`)
+    el.style.setProperty('--y', `${-Math.abs(y)}px`)
+    el.style.animationDuration = `${1 + Math.random()}s`
+
+    confetti.value?.appendChild(el)
+
+    setTimeout(() => el.remove(), 2000)
+  }
+})
 </script>
 
-
 <template>
+  <div class="relative flex justify-center items-center h-dvh poppins">
+    <!-- Confetti container -->
+    <div ref="confetti" class="absolute inset-0 pointer-events-none z-0 overflow-hidden" />
 
-    <div class="w-full h-full">
-
-
-        <div class="flex items-center h-full flex-col gap-4">
-
-            <div class="text-accent mt-[20vh] poppins font-semibold text-[1.5rem]">
-                Payment success
-            </div>
-
-            <div class="poppins">
-                We hope Lilyx can help you make better metrics-driven decision to help your business.
-            </div>
-
-            <NuxtLink to="/?just_logged=true" class="text-accent mt-10 bg-menu px-6 py-2 rounded-lg hover:bg-black font-semibold poppins cursor-pointer">
-                Go back to dashboard
-            </NuxtLink>
-
+    <Card class="flex items-center justify-center min-w-[52dvw] min-h-[72dvh]">
+      <CardContent class="flex flex-col gap-4 text-center m-8 z-2">
+        <div class="flex justify-center">
+          <img
+            :src="colorMode.value === 'dark' ? '/logo-white.svg' : '/logo-black.svg'"
+            class="object-contain w-40"
+          />
         </div>
-
-
-    </div>
-
+        <div>
+          <PageHeader
+            title="Payment Successfull!"
+            description="Thanks for choosing Litlyx. You're ready to go!"
+          />
+        </div>
+        <NuxtLink to="/"><Button class="w-full">Dashboard</Button></NuxtLink>
+      </CardContent>
+    </Card>
+  </div>
 </template>
+
+<style>
+.confetti {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: red;
+  border-radius: 50%;
+  opacity: 0.9;
+  transform: translate(-50%, 0);
+  animation: explode 2s ease-out forwards;
+}
+
+@keyframes explode {
+  0% {
+    transform: translate(-50%, 0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--x)), var(--y)) scale(0.8);
+    opacity: 0;
+  }
+}
+</style>
+