From 2f1d95e54e78c0255963629a8e5cbf36936c8e03 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Fri, 26 Sep 2025 19:41:20 +0300
Subject: [PATCH] Fix landing page

---
 .../js/components/landing/HeroSection.vue     | 70 +++++++++----------
 .../js/components/landing/OfferSection.vue    |  2 +-
 resources/js/layouts/app/LandingLayout.vue    |  4 +-
 resources/js/pages/cards/FullCardResult.vue   |  0
 4 files changed, 35 insertions(+), 41 deletions(-)
 delete mode 100644 resources/js/pages/cards/FullCardResult.vue

diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index efc5b43..8469536 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -50,25 +50,28 @@
 
                 <!-- Buttons -->
                 <div
-                    class="flex transform flex-wrap gap-4 transition-all delay-500 duration-1000"
+                    class="flex w-full transform flex-col gap-4 transition-all delay-500 duration-1000"
                     :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
                 >
                     <button
                         @click="goToShuffle"
-                        class="mystic-btn mystic-btn-primary group relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full px-6 font-bold tracking-wide text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
+                        class="mystic-btn mystic-btn-primary group relative inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-8 font-bold tracking-wide text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 md:h-16 md:px-10"
                     >
-                        <span class="relative z-10 truncate">Tirer 1 Carte</span>
+                        <span class="relative z-10 flex items-center gap-2 truncate text-lg md:text-xl"> ✨ Découvrir Mon Tirage Gratuit </span>
                         <span
                             class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
                         ></span>
                     </button>
 
-                    <button
-                        @click="goToShuffle"
-                        class="mystic-btn mystic-btn-secondary inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 px-6 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
+                    <!-- Small description -->
+                    <div
+                        class="transform text-center transition-all delay-700 duration-1000"
+                        :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-5 opacity-0'"
                     >
-                        <span class="truncate">Tirer 3 Cartes</span>
-                    </button>
+                        <p class="text-sm text-white/60 md:text-base">
+                            🎴 <span class="font-semibold text-emerald-300">Votre première carte est offerte</span> - Aucune carte bancaire requise
+                        </p>
+                    </div>
                 </div>
             </div>
 
@@ -362,39 +365,13 @@ const goToShuffle = () => {
 
 .mystic-btn-primary {
     background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
-    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
+    box-shadow: 0 0 30px rgba(125, 91, 166, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .mystic-btn-primary:hover {
-    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
-}
-
-.mystic-btn-secondary {
-    border-color: rgba(255, 215, 0, 0.5);
-    background: rgba(255, 215, 0, 0.1);
-    backdrop-filter: blur(10px);
-}
-
-.mystic-btn-secondary:hover {
-    background: rgba(255, 215, 0, 0.2);
-    border-color: rgba(255, 215, 0, 0.8);
-}
-
-.mystic-btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transform: translateX(-100%);
-    transition: transform 0.6s;
-    z-index: 1;
-}
-
-.mystic-btn:hover::before {
-    transform: translateX(100%);
+    box-shadow: 0 0 40px rgba(125, 91, 166, 1);
+    transform: translateY(-2px);
 }
 
 /* Text gradient */
@@ -438,4 +415,21 @@ const goToShuffle = () => {
         display: none;
     }
 }
+
+/* Animation for the emoji in button */
+.mystic-btn-primary span {
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.8;
+        transform: scale(1.05);
+    }
+}
 </style>
diff --git a/resources/js/components/landing/OfferSection.vue b/resources/js/components/landing/OfferSection.vue
index eb0cfcb..78ddf45 100644
--- a/resources/js/components/landing/OfferSection.vue
+++ b/resources/js/components/landing/OfferSection.vue
@@ -218,7 +218,7 @@
 
                 <div class="relative z-10 text-center">
                     <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]">
-                        Quadrige Doré
+                        Tirage complet de cartes
                     </h3>
                     <div class="relative mt-2 inline-block">
                         <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p>
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 3ee16d0..86cf8e9 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -61,7 +61,7 @@ onMounted(() => {
                             </Link>
                             <Link
                                 class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
-                                href="/"
+                                href="/#testimonials"
                             >
                                 Témoignages
                                 <span
@@ -118,7 +118,7 @@ onMounted(() => {
                         >
                         <Link
                             class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
-                            href="/"
+                            href="/#testimonials"
                             @click="toggleMobileMenu"
                             >Témoignages</Link
                         >
diff --git a/resources/js/pages/cards/FullCardResult.vue b/resources/js/pages/cards/FullCardResult.vue
deleted file mode 100644
index e69de29..0000000