From 113573866d3a64d9787d633fd9f6e9f10b6d8a9c Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:28:06 +0300
Subject: [PATCH] english

---
 app/Http/Controllers/StripeController.php     |   4 +-
 resources/css/app.css                         |   4 +-
 .../components/landing/CallBookingSection.vue |  18 +-
 .../js/components/landing/HeroSection.vue     |  16 +-
 .../js/components/landing/HowSection.vue      | 270 +++++++++---------
 .../components/landing/ManuscritSection.vue   |  12 +-
 .../js/components/landing/OfferSection.vue    |  30 +-
 .../landing/TestimonialsSection.vue           |  10 +-
 .../ShuffleCard/ShuffleCardPresentation.vue   |   9 +-
 .../template/CardShuffleTemplate.vue          |   6 +-
 resources/js/layouts/app/LandingLayout.vue    |  34 +--
 resources/js/pages/cards/FreeCardResult.vue   |  86 +++++-
 resources/js/pages/cards/cardSelection.vue    |  36 +--
 resources/js/pages/cards/resultat.vue         | 121 +++++---
 14 files changed, 376 insertions(+), 280 deletions(-)

diff --git a/app/Http/Controllers/StripeController.php b/app/Http/Controllers/StripeController.php
index a73c638..d574939 100644
--- a/app/Http/Controllers/StripeController.php
+++ b/app/Http/Controllers/StripeController.php
@@ -29,8 +29,8 @@ class StripeController extends Controller
         $clientSessionId = Str::uuid();
 
         $priceIds = [
-            3 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
-            21 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
+            6 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
+            18 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
         ];
 
         if (!isset($priceIds[$count])) {
diff --git a/resources/css/app.css b/resources/css/app.css
index 3d85ded..3e6ee07 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -9,8 +9,8 @@
 
 @theme inline {
     --font-title: 'Montserrat ExtraBold', sans-serif;
-    --font-sub-title: 'Poppins', cursive;
-    --font-text: 'Roboto', sans-serif;
+    --font-sub-title: 'Roboto', sans-serif;
+    --font-text: 'Poppins', cursive;
 
     --font-body: var(--font-text);
     --font-heading: var(--font-title);
diff --git a/resources/js/components/landing/CallBookingSection.vue b/resources/js/components/landing/CallBookingSection.vue
index 0e33547..38aad86 100644
--- a/resources/js/components/landing/CallBookingSection.vue
+++ b/resources/js/components/landing/CallBookingSection.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="relative overflow-hidden py-20 sm:py-24">
+    <section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24">
         <!-- Background image with overlay -->
         <div class="absolute inset-0">
             <img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" />
@@ -11,11 +11,9 @@
 
         <div class="relative z-10 mx-auto max-w-5xl px-4">
             <div
-                class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
+                class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
             >
                 <!-- Soft radial glows -->
-                <div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#4c1d95]/25 blur-3xl"></div>
-                <div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[#f59e0b]/20 blur-3xl"></div>
 
                 <!-- Subtle pattern overlay -->
                 <div class="absolute inset-0 opacity-10 mix-blend-soft-light">
@@ -26,13 +24,13 @@
 
                 <div class="relative z-10 flex flex-col items-center">
                     <span
-                        class="mb-4 inline-flex items-center rounded-full bg-[#4c1d95]/40 px-3 py-1 text-xs font-bold tracking-wider text-white/90 ring-1 ring-[#4c1d95]/40 backdrop-blur-sm"
+                        class="rounded-fullbg-gradient-to-br mb-4 inline-flex items-center from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
                         >Consultation</span
                     >
 
-                    <h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
+                    <h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplify Your Oracle</h2>
                     <p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
-                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
+                        For deeper guidance, book a personalized consultation with Kris.
                     </p>
 
                     <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
@@ -40,7 +38,7 @@
                             @click="goToBooking"
                             class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
                         >
-                            <span class="relative z-10">Réserver une Consultation</span>
+                            <span class="relative z-10">Book a Consultation Discover the Readings</span>
                             <span
                                 class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"
                             ></span>
@@ -49,11 +47,11 @@
                             @click="goToOffers"
                             class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
                         >
-                            Découvrir les Lectures
+                            Book a Consultation
                         </button>
                     </div>
 
-                    <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Paiements sécurisés. Annulation possible 24h avant la session.</p>
+                    <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Secure payment.</p>
                 </div>
             </div>
         </div>
diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index e4337f6..188af78 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -48,20 +48,20 @@
                     :class="{ 'animate-fade-in-up': isMounted }"
                     style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
                 >
-                    Découvrez Votre
+                    Discover Your
                     <span class="relative text-6xl text-purple-300 md:text-8xl">
-                        <span class="purple-glow">Chemin</span>
+                        <span class="purple-glow">Mystical</span>
                         <!-- Purple underline accent -->
                     </span>
-                    Mystique
+                    Path
                 </h1>
 
                 <p
                     class="mx-auto mb-8 max-w-2xl text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl"
                     :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
                 >
-                    Débloquez la sagesse de l'univers grâce à des lectures de cartes oracle personnalisées. Choisissez votre tirage et commencez votre
-                    voyage de découverte de soi.
+                    Unlock the wisdom of the universe with personalized oracle card readings. Choose your spread and begin your journey of
+                    self-discovery.
                 </p>
 
                 <!-- Buttons -->
@@ -81,7 +81,7 @@
                             class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
                         ></span>
 
-                        <span class="relative z-10 flex items-center gap-2 truncate"> Découvrir Mon Tirage Gratuit </span>
+                        <span class="relative z-10 flex items-center gap-2 truncate"> Reveal my free reading </span>
 
                         <!-- Animated arrow icon -->
                     </button>
@@ -91,8 +91,8 @@
                         class="text-center transition-all delay-700 duration-1000"
                         :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
                     >
-                        <p class="text-sm text-white/60 md:text-base">
-                            🎴 <span class="font-semibold text-purple-300">Votre première carte est offerte</span> - Aucune carte bancaire requise
+                        <p class="text-sm text-white/80 md:text-base">
+                            🎴 <span class="font-semibold text-purple-300"> Get your first reading free</span> - No credit card required
                         </p>
                     </div>
                 </div>
diff --git a/resources/js/components/landing/HowSection.vue b/resources/js/components/landing/HowSection.vue
index c5c07b7..a83b012 100644
--- a/resources/js/components/landing/HowSection.vue
+++ b/resources/js/components/landing/HowSection.vue
@@ -1,16 +1,21 @@
 <template>
-    <section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.10), rgba(76, 29, 149, 0.05));">
-        <!-- Single elegant background image -->
-        <div class="absolute inset-0">
-            <div class="absolute inset-0 bg-[url('/image002.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
+    <section
+        class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden bg-gradient-to-b from-black via-[#1a0b2e] to-black py-20 sm:py-24"
+        style="background: linear-gradient(to bottom, #1a0b2e, #2d1b69, #1a0b2e)"
+    >
+        <!-- Full width background image with better visibility -->
+        <div class="absolute inset-0 w-screen">
+            <div class="absolute inset-0 w-screen bg-[url('/image002.jpg')] bg-cover bg-center opacity-40 mix-blend-soft-light"></div>
+            <!-- Dark overlay for better text contrast -->
+            <div class="absolute inset-0 w-screen bg-[#1a0b2e]/40"></div>
         </div>
 
         <!-- Subtle floating elements -->
-        <div class="pointer-events-none absolute inset-0 overflow-hidden">
+        <div class="pointer-events-none absolute inset-0 w-screen overflow-hidden">
             <div
                 v-for="i in 12"
                 :key="'float-' + i"
-                class="absolute opacity-10"
+                class="absolute opacity-15"
                 :class="{
                     'text-[var(--c-gold)]': i % 3 === 0,
                     'text-[var(--c-purple)]': i % 3 === 1,
@@ -28,130 +33,133 @@
             </div>
         </div>
 
-        <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
-            <span class="relative inline-block">
-                Comment cela fonctionne
-                <span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
-            </span>
-        </h2>
+        <!-- Container with full width content -->
+        <div class="relative w-full">
+            <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
+                <span class="relative inline-block">
+                    How It Works ?
+                    <span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
+                </span>
+            </h2>
 
-        <div class="relative mx-auto max-w-4xl">
-            <!-- Elegant connecting line -->
-            <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
-                <div class="relative h-full w-full">
-                    <div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div>
-                    <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
+            <div class="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+                <!-- Elegant connecting line -->
+                <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
+                    <div class="relative h-full w-full">
+                        <div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60"></div>
+                        <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/20 to-transparent"></div>
+                    </div>
                 </div>
+
+                <!-- Minimal orbs along the line -->
+                <div
+                    v-for="i in 3"
+                    :key="'orb-' + i"
+                    class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-90 shadow-lg"
+                    :style="{
+                        top: `${i * 33}%`,
+                    }"
+                ></div>
+
+                <div class="relative z-10 flex flex-col gap-16">
+                    <!-- Step 1 -->
+                    <div class="group flex items-center gap-8">
+                        <div class="relative flex-shrink-0">
+                            <div
+                                class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
+                            >
+                                <span class="z-10">1</span>
+                                <div
+                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
+                                ></div>
+                            </div>
+                            <!-- Subtle sparkles -->
+                            <div
+                                class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
+                            >
+                                ✦
+                            </div>
+                        </div>
+                        <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
+                            <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
+                                <span>Choose Your Reading </span>
+                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                            </h3>
+                            <p
+                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
+                            >
+                                Select the type of reading that matches your current needs and aspirations.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Step 2 -->
+                    <div class="group flex items-center justify-end gap-8 text-right">
+                        <div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
+                            <h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
+                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                                <span>Receive Your Interpretation</span>
+                            </h3>
+                            <p
+                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
+                            >
+                                Get a personalized, detailed analysis of your spread delivered straight to your inbox.
+                            </p>
+                        </div>
+                        <div class="relative flex-shrink-0">
+                            <div
+                                class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
+                            >
+                                <span class="z-10">2</span>
+                                <div
+                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
+                                ></div>
+                            </div>
+                            <!-- Subtle sparkles -->
+                            <div
+                                class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
+                            >
+                                ✦
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Step 3 -->
+                    <div class="group flex items-center gap-8">
+                        <div class="relative flex-shrink-0">
+                            <div
+                                class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
+                            >
+                                <span class="z-10">3</span>
+                                <div
+                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
+                                ></div>
+                            </div>
+                            <!-- Subtle sparkles -->
+                            <div
+                                class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
+                            >
+                                ✦
+                            </div>
+                        </div>
+                        <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
+                            <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
+                                <span>Apply the Wisdom </span>
+                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                            </h3>
+                            <p
+                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
+                            >
+                                Put the guidance and insights into practice to transform your daily life.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Subtle decorative elements -->
+                <div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/20 blur-xl"></div>
+                <div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/30 blur-xl"></div>
             </div>
-
-            <!-- Minimal orbs along the line -->
-            <div
-                v-for="i in 3"
-                :key="'orb-' + i"
-                class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-80"
-                :style="{
-                    top: `${i * 33}%`,
-                }"
-            ></div>
-
-            <div class="relative z-10 flex flex-col gap-16">
-                <!-- Step 1 -->
-                <div class="group flex items-center gap-8">
-                    <div class="relative flex-shrink-0">
-                        <div
-                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
-                        >
-                            <span class="z-10">1</span>
-                            <div
-                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
-                            ></div>
-                        </div>
-                        <!-- Subtle sparkles -->
-                        <div
-                            class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                        >
-                            ✦
-                        </div>
-                    </div>
-                    <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
-                        <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
-                            <span>Choisissez Votre Lecture</span>
-                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
-                        </h3>
-                        <p
-                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
-                        >
-                            Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
-                        </p>
-                    </div>
-                </div>
-
-                <!-- Step 2 -->
-                <div class="group flex items-center justify-end gap-8 text-right">
-                    <div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
-                        <h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
-                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
-                            <span>Recevez Votre Interprétation</span>
-                        </h3>
-                        <p
-                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
-                        >
-                            Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
-                        </p>
-                    </div>
-                    <div class="relative flex-shrink-0">
-                        <div
-                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
-                        >
-                            <span class="z-10">2</span>
-                            <div
-                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
-                            ></div>
-                        </div>
-                        <!-- Subtle sparkles -->
-                        <div
-                            class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                        >
-                            ✦
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Step 3 -->
-                <div class="group flex items-center gap-8">
-                    <div class="relative flex-shrink-0">
-                        <div
-                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
-                        >
-                            <span class="z-10">3</span>
-                            <div
-                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
-                            ></div>
-                        </div>
-                        <!-- Subtle sparkles -->
-                        <div
-                            class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                        >
-                            ✦
-                        </div>
-                    </div>
-                    <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
-                        <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
-                            <span>Appliquez la Sagesse</span>
-                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
-                        </h3>
-                        <p
-                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
-                        >
-                            Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Subtle decorative elements -->
-            <div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
-            <div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/20 blur-xl"></div>
         </div>
     </section>
 </template>
@@ -195,21 +203,21 @@ export default {
     0%,
     100% {
         transform: translateY(0) rotate(0deg);
-        opacity: 0.1;
+        opacity: 0.15;
     }
     50% {
         transform: translateY(-10px) rotate(180deg);
-        opacity: 0.3;
+        opacity: 0.4;
     }
 }
 
 @keyframes pulse-slow {
     0%,
     100% {
-        opacity: 0.4;
+        opacity: 0.6;
     }
     50% {
-        opacity: 0.8;
+        opacity: 1;
     }
 }
 
diff --git a/resources/js/components/landing/ManuscritSection.vue b/resources/js/components/landing/ManuscritSection.vue
index 44749fa..3141617 100644
--- a/resources/js/components/landing/ManuscritSection.vue
+++ b/resources/js/components/landing/ManuscritSection.vue
@@ -10,12 +10,12 @@
         <div class="relative z-10">
             <h2 class="transform text-4xl font-bold text-[var(--midnight-blue)] transition-all duration-700 md:text-5xl">
                 <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-[var(--midnight-blue)]/90">
-                    Plus Qu’un Guide,
+                    Beyond a Guide,
                 </span>
                 <span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
-                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Un</span>
-                    <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscrit</span>
-                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Stratégique</span>
+                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">A</span>
+                    <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Strategic</span>
+                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscript</span>
                 </span>
             </h2>
 
@@ -49,10 +49,10 @@
 
             <p class="mx-auto mt-6 max-w-3xl transform text-lg text-[var(--midnight-blue)]/80 transition-all delay-200 duration-1000">
                 <span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
-                    L'Oracle de Kris Saint Ange est une boussole pour votre voyage personnel et professionnel.
+                    Kris Saint Ange’s Oracle is a compass for your personal and professional journey.
                 </span>
                 <span class="mt-2 inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
-                    Chaque carte est une clé pour débloquer votre potentiel et prendre des décisions éclairées.
+                    Each card is a key to unlocking your potential and making enlightened decisions.
                 </span>
             </p>
         </div>
diff --git a/resources/js/components/landing/OfferSection.vue b/resources/js/components/landing/OfferSection.vue
index 99d62f8..f0c9c01 100644
--- a/resources/js/components/landing/OfferSection.vue
+++ b/resources/js/components/landing/OfferSection.vue
@@ -34,7 +34,7 @@
         <div class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
             <!-- Free Tier -->
             <div
-                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
+                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
             >
                 <!-- Animated border effect -->
                 <div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
@@ -51,11 +51,9 @@
                 </div>
 
                 <div class="relative z-10 text-center">
-                    <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300">
-                        Lecture Gratuite
-                    </h3>
+                    <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300">Free Reading</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">Gratuit</p>
+                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Free</p>
                         <div
                             class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                         >
@@ -93,7 +91,7 @@
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
                 >
-                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
+                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">BEGIN</span>
                     <svg
                         class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                         fill="none"
@@ -140,10 +138,10 @@
 
                 <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)]">
-                        Profilage
+                        Insight Profile
                     </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">29€</p>
+                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">9.99 €</p>
                         <div
                             class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
                         ></div>
@@ -178,7 +176,7 @@
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg"
                 >
-                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Découvrir</span>
+                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">DISCOVER</span>
                     <svg
                         class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                         fill="none"
@@ -195,7 +193,7 @@
 
             <!-- Premium Tier -->
             <div
-                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
+                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
             >
                 <!-- Golden particles -->
                 <div
@@ -218,10 +216,10 @@
 
                 <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)]">
-                        Tirage complet de cartes
+                        Full card spread
                     </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>
+                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">15.90 €</p>
                         <div class="absolute inset-0 flex items-center justify-center">
                             <div
                                 class="animate-spin-slow h-20 w-20 rounded-full border border-[var(--c-gold)]/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@@ -258,7 +256,7 @@
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
                 >
-                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
+                    <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">EXPLORE</span>
                     <svg
                         class="relative z-10 ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                         fill="none"
@@ -278,11 +276,11 @@
 
 <script setup lang="ts">
 // Define features for each tier
-const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];
+const freeFeatures = ['Single‑card Reading', 'General Interpretation', 'Quick Tips'];
 
-const featuredFeatures = ['Lecture de trois cartes', 'Analyse personnalisée', 'Recommandations ciblées'];
+const featuredFeatures = ['six‑card Reading', 'Personalized Analysis', 'Tailored Recommendations'];
 
-const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie', 'Stratégie complète'];
+const premiumFeatures = ['Eigtheen‑card reading', 'In‑depth exploration', 'Complete strategy'];
 </script>
 
 <style scoped>
diff --git a/resources/js/components/landing/TestimonialsSection.vue b/resources/js/components/landing/TestimonialsSection.vue
index dcf6d6c..f4fcb27 100644
--- a/resources/js/components/landing/TestimonialsSection.vue
+++ b/resources/js/components/landing/TestimonialsSection.vue
@@ -1,13 +1,13 @@
 <template>
-    <section class="py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.1), rgba(76, 29, 149, 0.05))">
+    <section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24" id="testimonials">
         <h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
-            Ce Que Nos Initiés Disent
+            Testimonials from Our Initiates
         </h2>
 
         <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
             <!-- Testimonial 1 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@@ -60,7 +60,7 @@
 
             <!-- Testimonial 2 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@@ -116,7 +116,7 @@
 
             <!-- Testimonial 3 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
diff --git a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
index a094bd5..73ed742 100644
--- a/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
+++ b/resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
@@ -233,7 +233,7 @@ defineExpose({ setDrawnCards });
                     <div class="progress-bar">
                         <div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></div>
                     </div>
-                    <div class="progress-text">Distribution automatique en cours... {{ Math.round(autoDrawProgress) }}%</div>
+                    <div class="progress-text">Automatic distribution in progress... {{ Math.round(autoDrawProgress) }}%</div>
                 </div>
 
                 <!-- Always show the card stack -->
@@ -254,8 +254,7 @@ defineExpose({ setDrawnCards });
 
                         <!-- Auto-draw prompt -->
                         <div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt">
-                            <div class="prompt-icon">✨</div>
-                            <div class="prompt-text">Cliquez pour une distribution automatique</div>
+                            <div class="prompt-text">Click for automatic distribution</div>
                         </div>
 
                         <div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
@@ -290,13 +289,13 @@ defineExpose({ setDrawnCards });
                     @click="goToSelection"
                     class="group mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 text-base font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 hover:from-[var(--c-purple)]/40 hover:to-[var(--c-purple)]/50 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
                 >
-                    <span class="transition-transform duration-300 group-hover:translate-x-1">Retourner à la sélection des cartes</span>
+                    <span class="transition-transform duration-300 group-hover:translate-x-1">Return to card selection</span>
                 </button>
                 <button
                     @click="goToResult"
                     class="group mt-4 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-base font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:cursor-not-allowed disabled:opacity-60"
                 >
-                    <span class="relative z-10">Résultat du tirage</span>
+                    <span class="relative z-10">Draw result</span>
                     <svg
                         class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                         fill="none"
diff --git a/resources/js/components/template/CardShuffleTemplate.vue b/resources/js/components/template/CardShuffleTemplate.vue
index 2bf5a5a..e868c47 100644
--- a/resources/js/components/template/CardShuffleTemplate.vue
+++ b/resources/js/components/template/CardShuffleTemplate.vue
@@ -3,10 +3,10 @@
         <!-- Header / intro kept centered and constrained -->
         <div class="relative z-10 mx-auto max-w-4xl text-center">
             <h1 class="text-5xl font-bold text-[var(--midnight-blue)] md:text-6xl">
-                L'Oracle de votre<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destinée</span>
+                The Oracle of your<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destiny</span>
             </h1>
-            <p class="mt-4 mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80">
-                Puisez dans la sagesse ancestrale pour éclairer votre chemin. Tirez une carte et recevez le message qui vous est destiné aujourd'hui.
+            <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--midnight-blue)]/80">
+                Draw on ancient wisdom to light your path. Draw a card and receive the message intended for you today.
             </p>
         </div>
 
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 9553f3e..17575f7 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -24,7 +24,7 @@ onMounted(() => {
 <template>
     <div
         class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
-        style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000);"
+        style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000)"
     >
         <div class="layout-container flex h-full grow flex-col">
             <!-- Enhanced Header with Bigger Font -->
@@ -46,7 +46,7 @@ onMounted(() => {
                                 class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/"
                             >
-                                Accueil
+                                Home
                                 <span
                                     class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                 ></span>
@@ -55,7 +55,7 @@ onMounted(() => {
                                 class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/tirage"
                             >
-                                Tirages
+                                Readings
                                 <span
                                     class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                 ></span>
@@ -64,7 +64,7 @@ onMounted(() => {
                                 class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/#testimonials"
                             >
-                                Témoignages
+                                Testimonials
                                 <span
                                     class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                 ></span>
@@ -75,7 +75,7 @@ onMounted(() => {
                                 class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
                                 @click="goToBooking"
                             >
-                                <span class="relative z-10 truncate">Réserver</span>
+                                <span class="relative z-10 truncate">Book</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>
@@ -151,7 +151,7 @@ onMounted(() => {
                                 <img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
                             </div>
                             <p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
-                                Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
+                                Guidance and clarity through inspired readings and personalized support.
                             </p>
                             <div class="mt-6 flex gap-3">
                                 <a class="social-icon group" href="#" aria-label="Instagram">
@@ -181,27 +181,27 @@ onMounted(() => {
                                 <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
                                 <ul class="space-y-3 text-base sm:space-y-4">
                                     <li>
-                                        <Link class="footer-link group" href="/">Accueil</Link>
+                                        <Link class="footer-link group" href="/">Home</Link>
                                     </li>
                                     <li>
-                                        <a class="footer-link group" href="#testimonials">Témoignages</a>
+                                        <a class="footer-link group" href="#testimonials">Testimonials</a>
                                     </li>
                                     <li>
-                                        <Link class="footer-link group" href="/tirage">Lectures</Link>
+                                        <Link class="footer-link group" href="/tirage">Readings</Link>
                                     </li>
                                     <li>
-                                        <Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link>
+                                        <Link class="footer-link group" href="/rendez-vous">Book</Link>
                                     </li>
                                 </ul>
                             </div>
                             <div>
-                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Légal</h4>
+                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Legal</h4>
                                 <ul class="space-y-3 text-base sm:space-y-4">
                                     <li>
-                                        <Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
+                                        <Link class="footer-link group" href="/politique-confidalite">Confidentiality</Link>
                                     </li>
                                     <li>
-                                        <Link class="footer-link group" href="/term-condition">Conditions</Link>
+                                        <Link class="footer-link group" href="/term-condition">Terms</Link>
                                     </li>
                                 </ul>
                             </div>
@@ -211,28 +211,28 @@ onMounted(() => {
                         <div class="md:col-span-1 lg:col-span-1">
                             <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
                             <p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
-                                Recevez des inspirations et offres directement dans votre boîte mail.
+                                Receive inspiration and offers directly in your inbox.
                             </p>
                             <form
                                 class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row"
                             >
                                 <input
                                     type="email"
-                                    placeholder="Votre e-mail"
+                                    placeholder="Your e-mail"
                                     class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
                                 />
                                 <button
                                     type="button"
                                     class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
                                 >
-                                    S'abonner
+                                    Subscribe
                                 </button>
                             </form>
                         </div>
                     </div>
 
                     <div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
-                        © 2024 Kris Saint Ange. Tous droits réservés.
+                        © 2025 Kris Saint Ange. All rights reserved.
                     </div>
                 </div>
             </footer>
diff --git a/resources/js/pages/cards/FreeCardResult.vue b/resources/js/pages/cards/FreeCardResult.vue
index c992b50..e0d9425 100644
--- a/resources/js/pages/cards/FreeCardResult.vue
+++ b/resources/js/pages/cards/FreeCardResult.vue
@@ -112,22 +112,80 @@
                     <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
 
                     <div class="relative z-10">
+                        <!-- En-tête -->
                         <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
-                            <span class="text-2xl">💫</span>
-                            <span class="text-lg font-bold text-white">Guidance Approfondie</span>
+                            <span class="text-2xl">🔮</span>
+                            <span class="text-lg font-bold text-white">Pathfinder Offer</span>
+                        </div>
+
+                        <!-- Contenu principal -->
+                        <div class="space-y-6 text-left">
+                            <!-- Introduction -->
+                            <div class="text-center">
+                                <h3 class="mb-4 font-title text-xl font-bold text-white md:text-2xl">Dear Explorer of Symbols,</h3>
+                                <p class="leading-relaxed text-white/80">
+                                    These revelations are only a prelude to what we could accomplish in a direct consultation. Because the arcana:
+                                </p>
+                            </div>
+
+                            <!-- Points clés -->
+                            <div class="space-y-3">
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Adapt</strong> to your voice and micro-expressions</p>
+                                </div>
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Deepen</strong> through intuitive real-time dialogue</p>
+                                </div>
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Transmute</strong> into a tailored action plan</p>
+                                </div>
+                            </div>
+
+                            <!-- Offre -->
+                            <div class="space-y-4">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-xl text-[var(--c-gold)]">➤</span>
+                                    <h4 class="font-title text-lg font-bold text-white">Pathfinder Offer:</h4>
+                                </div>
+                                <p class="text-white/80">Receive an in‑depth analysis where we will:</p>
+                                <div class="space-y-3 pl-4">
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">1.</span>
+                                        <p class="text-white/80">Decode the synchronicities between your reading and the one we'll do together</p>
+                                    </div>
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">2.</span>
+                                        <p class="text-white/80">Activate the hidden bridges between past, present, and future</p>
+                                    </div>
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">3.</span>
+                                        <p class="text-white/80">Crystallize a strategic compass for your next choices</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Bouton CTA et informations -->
+                        <div class="mt-8 space-y-4">
+                            <button
+                                @click="goToBooking"
+                                class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
+                            >
+                                <span class="relative z-10">Book my amplified session here</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>
+
+                            <!-- Informations tarif et durée -->
+                            <div class="space-y-2">
+                                <p class="text-sm font-semibold text-[var(--c-gold)]">Limited to 15 days</p>
+                                <p class="text-lg font-bold text-white">Special rate for digital reading holders: €390</p>
+                            </div>
                         </div>
-                        <p class="relative z-10 mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">
-                            Pour une analyse personnalisée et une guidance plus approfondie, réservez une consultation privée avec Kris Saint Ange.
-                        </p>
-                        <button
-                            @click="goToBooking"
-                            class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
-                        >
-                            <span class="relative z-10">Réserver une Consultation</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>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/pages/cards/cardSelection.vue b/resources/js/pages/cards/cardSelection.vue
index 4a675b0..e5a01ae 100644
--- a/resources/js/pages/cards/cardSelection.vue
+++ b/resources/js/pages/cards/cardSelection.vue
@@ -73,14 +73,14 @@ const clearHover = () => {
 <template>
     <section class="px-4 py-16 sm:py-20">
         <h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
-            Explorez Nos <span class="text-[var(--c-gold)]">Lectures</span>
+            Explore Our <span class="text-[var(--c-gold)]">Readings</span>
         </h2>
 
         <p
             v-if="isFreeDrawUsed"
             class="mx-auto mb-8 max-w-2xl rounded-lg border border-[var(--c-gold)]/30 bg-gray-900 p-4 text-center text-lg font-semibold text-[var(--c-gold)]"
         >
-            Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
+            You've used your free print! Choose a paid option to continue.
         </p>
 
         <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
@@ -125,18 +125,16 @@ const clearHover = () => {
                             </svg>
                         </div>
                     </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Lecture Gratuite</h3>
-                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Gratuit</p>
-                    <p class="mt-4 text-sm text-gray-300 md:text-base">
-                        Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
-                    </p>
+                    <h3 class="text-xl font-bold text-white md:text-2xl">Free Reading</h3>
+                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Free</p>
+                    <p class="mt-4 text-sm text-gray-300 md:text-base">Single‑card Reading General Interpretation Quick Tips</p>
                 </div>
                 <button
                     :disabled="isFreeDrawUsed"
                     class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
                     @click="handleSelection(1)"
                 >
-                    <span class="relative z-10">Commencer</span>
+                    <span class="relative z-10">Begin</span>
                     <div
                         class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                     ></div>
@@ -189,21 +187,19 @@ const clearHover = () => {
                             </svg>
                         </div>
                     </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
-                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">29€</p>
-                    <p class="mt-4 text-sm text-gray-200 md:text-base">
-                        Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
-                    </p>
+                    <h3 class="text-xl font-bold text-white md:text-2xl">Insight Profile</h3>
+                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">9.99 €</p>
+                    <p class="mt-4 text-sm text-gray-200 md:text-base">six‑card Reading Personalized Analysis Tailored Recommendations</p>
                 </div>
                 <button
                     class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--c-gold)] px-6 font-bold tracking-wide text-black transition-all duration-300 hover:bg-white hover:shadow-lg"
-                    @click="handleSelection(3)"
+                    @click="handleSelection(6)"
                 >
                     <!-- Button shine effect -->
                     <span
                         class="absolute inset-0 -translate-x-full -skew-x-12 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>
+                    <span class="relative z-10">Discover</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"
@@ -254,17 +250,15 @@ const clearHover = () => {
                             </svg>
                         </div>
                     </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Tirage complet</h3>
+                    <h3 class="text-xl font-bold text-white md:text-2xl">Full card spread</h3>
                     <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">99€</p>
-                    <p class="mt-4 text-sm text-gray-300 md:text-base">
-                        Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
-                    </p>
+                    <p class="mt-4 text-sm text-gray-300 md:text-base">Eigtheen‑card reading In‑depth exploration Complete strategy</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-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white"
-                    @click="handleSelection(21)"
+                    @click="handleSelection(18)"
                 >
-                    <span class="relative z-10">Explorer</span>
+                    <span class="relative z-10">EXPLORE</span>
                     <div
                         class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                     ></div>
diff --git a/resources/js/pages/cards/resultat.vue b/resources/js/pages/cards/resultat.vue
index b0ed6d0..56557db 100644
--- a/resources/js/pages/cards/resultat.vue
+++ b/resources/js/pages/cards/resultat.vue
@@ -131,51 +131,92 @@ onMounted(async () => {
 
                 <!-- Consultation CTA -->
                 <div
-                    v-if="!loading && !error && hasCards"
-                    class="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-purple-800/30 p-8 shadow-2xl backdrop-blur-sm md:p-12"
+                    v-if="!loading && !error"
+                    class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
                 >
-                    <!-- Background decoration -->
+                    <!-- Animated background -->
                     <div
-                        class="absolute top-0 right-0 h-32 w-32 translate-x-16 -translate-y-16 rounded-full bg-gradient-to-br from-purple-700/20 to-purple-600/10"
+                        class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
                     ></div>
-                    <div
-                        class="absolute bottom-0 left-0 h-24 w-24 -translate-x-12 translate-y-12 rounded-full bg-gradient-to-tr from-purple-700/20 to-purple-600/10"
-                    ></div>
-                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent"></div>
 
-                    <div class="relative z-10 text-center">
-                        <div
-                            class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full border border-purple-400/30 bg-gradient-to-br from-purple-500 to-purple-400"
-                        >
-                            <div class="text-2xl text-purple-950">🌟</div>
+                    <div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
+                    <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
+
+                    <div class="relative z-10">
+                        <!-- En-tête -->
+                        <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
+                            <span class="text-2xl">🔮</span>
+                            <span class="text-lg font-bold text-white">Pathfinder Offer</span>
+                        </div>
+
+                        <!-- Contenu principal -->
+                        <div class="space-y-6 text-left">
+                            <!-- Introduction -->
+                            <div class="text-center">
+                                <h3 class="mb-4 font-title text-xl font-bold text-white md:text-2xl">Dear Explorer of Symbols,</h3>
+                                <p class="leading-relaxed text-white/80">
+                                    These revelations are only a prelude to what we could accomplish in a direct consultation. Because the arcana:
+                                </p>
+                            </div>
+
+                            <!-- Points clés -->
+                            <div class="space-y-3">
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Adapt</strong> to your voice and micro-expressions</p>
+                                </div>
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Deepen</strong> through intuitive real-time dialogue</p>
+                                </div>
+                                <div class="flex items-start space-x-3">
+                                    <span class="mt-1 text-[var(--c-gold)]">•</span>
+                                    <p class="text-white/80"><strong>Transmute</strong> into a tailored action plan</p>
+                                </div>
+                            </div>
+
+                            <!-- Offre -->
+                            <div class="space-y-4">
+                                <div class="flex items-center space-x-3">
+                                    <span class="text-xl text-[var(--c-gold)]">➤</span>
+                                    <h4 class="font-title text-lg font-bold text-white">Pathfinder Offer:</h4>
+                                </div>
+                                <p class="text-white/80">Receive an in‑depth analysis where we will:</p>
+                                <div class="space-y-3 pl-4">
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">1.</span>
+                                        <p class="text-white/80">Decode the synchronicities between your reading and the one we'll do together</p>
+                                    </div>
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">2.</span>
+                                        <p class="text-white/80">Activate the hidden bridges between past, present, and future</p>
+                                    </div>
+                                    <div class="flex items-start space-x-3">
+                                        <span class="mt-1 text-[var(--c-gold)]">3.</span>
+                                        <p class="text-white/80">Crystallize a strategic compass for your next choices</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Bouton CTA et informations -->
+                        <div class="mt-8 space-y-4">
+                            <button
+                                @click="goToBooking"
+                                class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
+                            >
+                                <span class="relative z-10">Book my amplified session here</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>
+
+                            <!-- Informations tarif et durée -->
+                            <div class="space-y-2">
+                                <p class="text-sm font-semibold text-[var(--c-gold)]">Limited to 15 days</p>
+                                <p class="text-lg font-bold text-white">Special rate for digital reading holders: €390</p>
+                            </div>
                         </div>
-                        <h3 class="mb-4 bg-gradient-to-r from-purple-300 to-purple-200 bg-clip-text text-2xl font-black text-transparent md:text-3xl">
-                            Approfondissez Votre Voyage
-                        </h3>
-                        <p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-purple-300/80">
-                            Pour une guidance personnalisée et une compréhension plus profonde de votre chemin de vie, réservez une consultation
-                            privée avec Kris Saint Ange.
-                        </p>
-                        <button
-                            @click="goToBooking"
-                            class="group relative transform rounded-full border border-purple-400/30 bg-gradient-to-r from-purple-500 to-purple-400 px-8 py-4 text-lg font-bold tracking-wide text-purple-950 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:from-purple-400 hover:to-purple-300 hover:shadow-xl"
-                        >
-                            <span class="relative z-10 flex items-center justify-center">
-                                Réserver une Consultation
-                                <svg
-                                    class="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                                </svg>
-                            </span>
-                            <div
-                                class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-purple-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-                            ></div>
-                        </button>
-                        <p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
                     </div>
                 </div>