Fix landing page

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>

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>

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
                         >