From d8b0825c5591e43ddd49e3a3a55041a4bf701442 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:20:02 +0300
Subject: [PATCH] fix colo

---
 .../js/components/landing/HeroSection.vue     | 13 +--
 .../js/components/landing/OfferSection.vue    | 72 +++++++++-----
 resources/js/layouts/app/LandingLayout.vue    | 12 +--
 resources/js/pages/cards/cardSelection.vue    | 97 ++++++++-----------
 4 files changed, 91 insertions(+), 103 deletions(-)

diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index 8eb31de..447b3aa 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -58,13 +58,13 @@ const goToShuffle = () => {
         <div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
             <!-- Animated title -->
             <h1
-                class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl"
+                class="font text-5xl text-[var(--pure-white)] md:text-7xl"
                 :class="{ 'animate-fade-in-up': isMounted }"
                 style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
             >
                 Révélez Votre
                 <span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl">
-                    <span class="gold-glow">Voyage</span>
+                    <span class="gold-glow">Empire</span>
                     <!-- Gold underline accent -->
                     <span
                         class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent transition-transform duration-1000"
@@ -99,15 +99,6 @@ const goToShuffle = () => {
                 <span class="relative z-10 truncate">Découvrir Votre Oracle</span>
 
                 <!-- Animated arrow icon -->
-                <svg
-                    class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
-                    :class="{ 'translate-x-1': buttonHover }"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                </svg>
             </button>
         </div>
     </div>
diff --git a/resources/js/components/landing/OfferSection.vue b/resources/js/components/landing/OfferSection.vue
index d0c896f..c707397 100644
--- a/resources/js/components/landing/OfferSection.vue
+++ b/resources/js/components/landing/OfferSection.vue
@@ -2,8 +2,9 @@
     <section class="py-20 sm:py-24">
         <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
         <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <!-- Carte Lecture Gratuite -->
             <div
-                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <div class="text-center">
                     <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
@@ -14,32 +15,38 @@
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Lecture d'une carte
+                            ></path>
+                        </svg>
+                        Lecture d'une carte
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Interprétation générale
+                            ></path>
+                        </svg>
+                        Interprétation générale
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Conseils rapides
+                            ></path>
+                        </svg>
+                        Conseils rapides
                     </li>
                 </ul>
                 <button
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
+                    @click="goToShuffle"
+                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
                 >
                     Commencer
                 </button>
             </div>
+
+            <!-- Carte Profilage (mise en avant) -->
             <div
-                class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="flex scale-105 flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--midnight-blue)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <div class="text-center">
                     <h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
@@ -50,32 +57,38 @@
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Lecture de trois cartes
+                            ></path>
+                        </svg>
+                        Lecture de trois cartes
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Analyse personnalisée
+                            ></path>
+                        </svg>
+                        Analyse personnalisée
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Recommandations ciblées
+                            ></path>
+                        </svg>
+                        Recommandations ciblées
                     </li>
                 </ul>
                 <button
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
+                    @click="goToShuffle"
+                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:text-[var(--midnight-blue)]"
                 >
                     Découvrir
                 </button>
             </div>
+
+            <!-- Carte Quadrige Doré -->
             <div
-                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
+                class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
             >
                 <div class="text-center">
                     <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
@@ -86,26 +99,30 @@
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Lecture de quatre cartes
+                            ></path>
+                        </svg>
+                        Lecture de quatre cartes
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Exploration approfondie
+                            ></path>
+                        </svg>
+                        Exploration approfondie
                     </li>
                     <li class="flex items-center gap-3">
                         <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-                            ></path></svg
-                        >Stratégie complète
+                            ></path>
+                        </svg>
+                        Stratégie complète
                     </li>
                 </ul>
                 <button
-                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
+                    @click="goToShuffle"
+                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
                 >
                     Explorer
                 </button>
@@ -113,3 +130,10 @@
         </div>
     </section>
 </template>
+<script lang="ts" setup>
+import { router } from '@inertiajs/vue3';
+
+const goToShuffle = () => {
+    router.visit('/tirage');
+};
+</script>
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 654004f..064270d 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -104,17 +104,7 @@ onMounted(() => {
                         @click="goToShuffle"
                         class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl"
                     >
-                        <span class="relative z-10 flex items-center gap-2">
-                            Commencer
-                            <svg
-                                class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                            </svg>
-                        </span>
+                        <span class="relative z-10 flex items-center gap-2"> Commencer </span>
                         <div
                             class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                         ></div>
diff --git a/resources/js/pages/cards/cardSelection.vue b/resources/js/pages/cards/cardSelection.vue
index 4948011..356a855 100644
--- a/resources/js/pages/cards/cardSelection.vue
+++ b/resources/js/pages/cards/cardSelection.vue
@@ -101,10 +101,16 @@ const clearHover = () => {
                     @mouseenter="setHover(1)"
                     @mouseleave="clearHover"
                 >
+                    <!-- Card shine effect -->
+                    <div
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
+                        :class="{ 'opacity-100': hoveredCard === 1 }"
+                    ></div>
+
                     <!-- Decorative elements -->
                     <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
 
-                    <div class="text-center">
+                    <div class="relative z-10 text-center">
                         <div class="mb-4 flex justify-center">
                             <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
                                 <svg
@@ -125,54 +131,43 @@ const clearHover = () => {
                         </div>
                         <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
                         <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
-                        <p class="mt-4 text-sm text-gray-600 md:text-base">
+                        <p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
                             Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
                         </p>
                     </div>
                     <button
                         :disabled="isFreeDrawUsed"
-                        class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+                        class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
                         @click="handleSelection(1)"
                     >
-                        <span>Commencer</span>
-                        <svg
-                            v-if="!isFreeDrawUsed"
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                        </svg>
+                        <!-- Button shine effect -->
+                        <span
+                            class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                        ></span>
+                        <span class="relative">Commencer</span>
                     </button>
                 </div>
 
                 <!-- Premium option -->
                 <div
-                    class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2d3748] to-[#1a202c] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
+                    class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-br from-[var(--midnight-blue)] via-[#2a3446] to-[var(--midnight-blue)] p-6 shadow-xl transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl md:scale-[1.02] md:p-8"
                     @mouseenter="setHover(2)"
                     @mouseleave="clearHover"
                 >
                     <!-- Premium badge -->
                     <div class="absolute -top-3 left-1/2 z-20 -translate-x-1/2 transform">
                         <span
-                            class="rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
+                            class="rounded-full bg-[var(--subtle-gold)] px-4 py-1.5 text-xs font-bold tracking-wide text-[var(--midnight-blue)] uppercase shadow-sm"
                             >Populaire</span
                         >
                     </div>
 
-                    <!-- Shine effect on hover -->
+                    <!-- Card shine effect -->
                     <div
-                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/15 to-transparent opacity-0 transition-opacity duration-500"
                         :class="{ 'opacity-100': hoveredCard === 2 }"
                     ></div>
 
-                    <!-- Subtle pattern overlay -->
-                    <div
-                        class="absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px] opacity-5"
-                    ></div>
-
                     <div class="relative z-10 text-center">
                         <div class="mb-4 flex justify-center">
                             <div class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 shadow-sm backdrop-blur-sm">
@@ -189,28 +184,19 @@ const clearHover = () => {
                         </div>
                         <h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
                         <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
-                        <p class="mt-4 text-sm text-gray-200 md:text-base">
+                        <p class="mt-4 text-sm text-[var(--linen)] md:text-base">
                             Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
                         </p>
                     </div>
                     <button
-                        class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--subtle-gold)] to-amber-300 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:from-white hover:to-amber-50 hover:shadow-lg"
+                        class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
                         @click="handleSelection(3)"
                     >
                         <!-- Button shine effect -->
                         <span
-                            class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/60 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                            class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
                         ></span>
-                        <span class="relative z-10">Découvrir</span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                        </svg>
+                        <span class="relative">Découvrir</span>
                     </button>
                 </div>
 
@@ -220,17 +206,19 @@ const clearHover = () => {
                     @mouseenter="setHover(3)"
                     @mouseleave="clearHover"
                 >
-                    <!-- Gold corner accents -->
-                    <div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--subtle-gold)]"></div>
-                    <div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
-                    <div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
-                    <div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
+                    <!-- Card shine effect -->
+                    <div
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
+                        :class="{ 'opacity-100': hoveredCard === 3 }"
+                    ></div>
+                    <!-- Decorative elements -->
+                    <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
 
-                    <div class="text-center">
+                    <!-- Gold corner accents -->
+
+                    <div class="relative z-10 text-center">
                         <div class="mb-4 flex justify-center">
-                            <div
-                                class="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--light-ivory)] to-amber-50 shadow-sm"
-                            >
+                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     class="h-6 w-6 text-[var(--subtle-gold)]"
@@ -249,24 +237,19 @@ const clearHover = () => {
                         </div>
                         <h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
                         <p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
-                        <p class="mt-4 text-sm text-gray-600 md:text-base">
+                        <p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
                             Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
                         </p>
                     </div>
                     <button
-                        class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-amber-50 px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-amber-200 hover:text-[var(--midnight-blue)]"
+                        class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300"
                         @click="handleSelection(4)"
                     >
-                        <span>Explorer</span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                        </svg>
+                        <!-- Button shine effect -->
+                        <span
+                            class="absolute inset-0 -translate-x-full transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                        ></span>
+                        <span class="relative">Explorer</span>
                     </button>
                 </div>
             </div>