fix color

resources/js/components/landing/CallBookingSection.vue

@@ -1,32 +1,46 @@
 <template>
-    <section class="py-20 sm:py-24">
-        <div class="mx-auto max-w-5xl px-4">
+    <section class="relative overflow-hidden py-20 sm:py-24">
+        <!-- Background image with overlay -->
+        <div class="absolute inset-0">
+            <img src="/background/IMG_2248.jpg" alt="Background" class="h-full w-full object-cover" />
+            <div class="absolute inset-0 bg-gradient-to-br from-[var(--c-purple)]/70 to-[var(--c-deep-navy)]/80"></div>
+        </div>
+
+        <div class="relative z-10 mx-auto max-w-5xl px-4">
             <div
-                class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 md:p-12"
+                class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/80 to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-12"
             >
                 <!-- Soft radial glows -->
-                <div class="pointer-events-none absolute -left-24 -top-24 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
+                <div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
                 <div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
+
                 <!-- Hover gold sweep -->
                 <div
                     class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                 ></div>
 
+                <!-- Subtle pattern overlay -->
+                <div class="absolute inset-0 opacity-10 mix-blend-soft-light">
+                    <div
+                        class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3N2Zz4=')]"
+                    ></div>
+                </div>
+
                 <div class="relative z-10 flex flex-col items-center">
                     <span
-                        class="mb-4 inline-flex items-center rounded-full bg-[var(--c-purple)]/30 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40"
+                        class="mb-4 inline-flex items-center rounded-full bg-[var(--c-purple)]/40 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm"
                         >Consultation</span
                     >
 
-                    <h2 class="text-4xl font-black text-[var(--c-white)] md:text-5xl">Amplifiez Votre Oracle</h2>
-                    <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-white)]/80">
+                    <h2 class="text-4xl font-black text-[var(--c-white)] drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
+                    <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-white)]/90 drop-shadow-md">
                         Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
                     </p>
 
                     <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                         <button
                             @click="goToBooking"
-                            class="relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
+                            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-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
                         >
                             <span class="relative z-10">Réserver une Consultation</span>
                             <span
@@ -35,13 +49,15 @@
                         </button>
                         <button
                             @click="goToOffers"
-                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] transition-all hover:bg-[var(--c-purple)]"
+                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] backdrop-blur-sm transition-all hover:bg-[var(--c-purple)]"
                         >
                             Découvrir les Lectures
                         </button>
                     </div>
 
-                    <p class="mt-6 text-xs text-[var(--c-white)]/60">Paiements sécurisés. Annulation possible 24h avant la session.</p>
+                    <p class="mt-6 text-xs text-[var(--c-white)]/70 backdrop-blur-sm">
+                        Paiements sécurisés. Annulation possible 24h avant la session.
+                    </p>
                 </div>
             </div>
         </div>
@@ -56,9 +72,41 @@ const goToOffers = () => router.visit('/tirage');
 </script>
 
 <style scoped>
+/* Gold trail effect for the primary button */
+.gold-trail-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.gold-trail-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
+}
+
+.gold-trail-btn:hover::before {
+    transform: translateX(100%);
+}
+
 /* Smooth transitions for all elements in this section */
 * {
     transition-property: color, background-color, transform, opacity, box-shadow;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+/* Custom color variables */
+:root {
+    --c-purple: #4c1d95;
+    --c-deep-navy: #1e1b4b;
+    --c-white: #ffffff;
+    --c-gold: rgba(245, 158, 11, 0.9);
+    --card: #1e1b4b;
+}
 </style>

resources/js/components/landing/HeroSection.vue

@@ -4,6 +4,23 @@
     >
         <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-[var(--c-purple)]/60 via-[var(--c-deep-navy)]/60 to-black/80"></div>
 
+        <!-- Gold particles background effect -->
+        <div class="absolute inset-0 overflow-hidden">
+            <div
+                v-for="i in 30"
+                :key="i"
+                class="gold-particle absolute"
+                :style="{
+                    left: `${Math.random() * 100}%`,
+                    top: `${Math.random() * 100}%`,
+                    width: `${Math.random() * 8 + 2}px`,
+                    height: `${Math.random() * 8 + 2}px`,
+                    animationDelay: `${Math.random() * 5}s`,
+                    animationDuration: `${Math.random() * 10 + 10}s`,
+                }"
+            ></div>
+        </div>
+
         <div class="relative z-10 mx-auto flex max-w-5xl flex-col items-center justify-between lg:flex-row">
             <!-- Text Content -->
             <div class="mb-10 lg:mb-0 lg:w-1/2">
@@ -29,7 +46,7 @@
                 >
                     <button
                         @click="goToShuffle"
-                        class="group relative inline-flex h-14 min-w-[180px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[var(--c-gold)]/40"
+                        class="gold-trail-btn group relative inline-flex h-14 min-w-[180px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[var(--c-gold)]/40"
                     >
                         <span class="relative z-10 truncate">Essayez 1 carte gratuite</span>
                         <span
@@ -39,44 +56,39 @@
 
                     <button
                         @click="goToShuffle"
-                        class="inline-flex h-14 min-w-[180px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-[var(--c-purple)]"
+                        class="gold-trail-btn inline-flex h-14 min-w-[180px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-[var(--c-purple)]"
                     >
                         <span class="truncate">Découvrir les tirages</span>
                     </button>
                 </div>
             </div>
 
-            <!-- Card Stack -->
-            <div class="relative flex h-96 items-center justify-center lg:w-1/2">
-                <div class="perspective-1000 relative h-96 w-64" @click.self="randomizeStack" title="Cliquez pour mélanger">
-                    <!-- Card Stack -->
-                    <div
-                        v-for="(card, index) in cardStack"
-                        :key="card.id"
-                        class="absolute h-full w-full cursor-pointer transition-all duration-500"
-                        :style="{
-                            transform: `translateY(${index * -4}px) rotate(${index * -2}deg)`,
-                            zIndex: cardStack.length - index,
-                        }"
-                        @click="flipCard(card)"
-                    >
-                        <div
-                            class="preserve-3d h-full w-full rounded-xl shadow-xl transition-transform duration-700"
-                            :class="{ 'rotate-y-180': card.isFlipped }"
-                        >
-                            <!-- Card Back -->
-                            <div
-                                class="border-gold/50 absolute h-full w-full overflow-hidden rounded-xl border-2 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 backface-hidden"
-                            >
-                                <img src="/cards/1.png" alt="Card Back" class="card-fill" />
-                            </div>
-
-                            <!-- Card Front -->
-                            <div class="absolute h-full w-full rotate-y-180 overflow-hidden rounded-xl backface-hidden">
-                                <img :src="card.image" class="card-fill" :alt="'Card ' + card.id" />
-                            </div>
-                        </div>
+            <!-- Vertical zig-zag with only two larger images -->
+            <div class="relative flex h-[32rem] items-center justify-center lg:w-1/2">
+                <div class="relative h-full w-[26rem]">
+                    <!-- First image (top left) -->
+                    <div class="zig-item zig-item-1">
+                        <img class="zig-img" src="/background/IMG_2230.jpg" alt="Oracle Image 1" />
                     </div>
+
+                    <!-- Second image (bottom right) -->
+                    <div class="zig-item zig-item-2">
+                        <img class="zig-img" src="/background/IMG_2245.jpg" alt="Oracle Image 2" />
+                    </div>
+
+                    <!-- gold particles -->
+                    <span
+                        v-for="i in 18"
+                        :key="'gp-' + i"
+                        class="gold-particle"
+                        :style="{
+                            left: `${5 + ((i * 11) % 90)}%`,
+                            top: `${10 + ((i * 17) % 80)}%`,
+                            width: `${6 + (i % 5)}px`,
+                            height: `${6 + (i % 5)}px`,
+                            animationDelay: `${(i % 7) * 0.3}s`,
+                        }"
+                    ></span>
                 </div>
             </div>
         </div>
@@ -88,77 +100,16 @@ import { router } from '@inertiajs/vue3';
 import { onMounted, ref } from 'vue';
 
 const isMounted = ref(false);
-const container = ref<HTMLDivElement | null>(null);
-
-// Sample card data
-const cardStack = ref([
-    { id: 2, title: "L'Intuition", image: '/cards/2.png', isFlipped: false },
-    { id: 3, title: 'La Sagesse', image: '/cards/3.png', isFlipped: false },
-    { id: 4, title: 'Le Destin', image: '/cards/4.png', isFlipped: false },
-]);
-
-// Background images
-const backgroundImages = Array.from({ length: 12 }, (_, i) => `/cards/${(i % 4) + 1}.png`);
 
 onMounted(() => {
     setTimeout(() => {
         isMounted.value = true;
     }, 100);
-
-    // Initialize GSAP animations for background
-    if (container.value) {
-        const cards = container.value.querySelectorAll('.bg-card');
-        cards.forEach((el: Element, idx: number) => {
-            const startY = Math.random() * 300 - 150;
-            const rot = Math.random() * 30 - 15;
-            const drift = Math.random() * 160 + 120;
-
-            // Set initial state
-            (el as HTMLElement).style.transform = `translate(-50%, -50%) rotate(${rot}deg) translateY(${startY}px)`;
-            (el as HTMLElement).style.opacity = '0.5';
-
-            // Animate with requestAnimationFrame for simplicity
-            // In a real implementation, you would use GSAP here
-            let startTime: number | null = null;
-            const duration = 20000 + Math.random() * 10000;
-
-            function animate(timestamp: number) {
-                if (!startTime) startTime = timestamp;
-                const elapsed = timestamp - startTime;
-                const progress = (elapsed % duration) / duration;
-
-                const yPos = startY + drift * progress;
-                const rotation = rot + 10 * Math.sin(progress * Math.PI * 2);
-
-                (el as HTMLElement).style.transform = `translate(-50%, -50%) rotate(${rotation}deg) translateY(${yPos}px)`;
-                (el as HTMLElement).style.opacity = `${0.5 + 0.35 * Math.sin(progress * Math.PI)}`;
-
-                requestAnimationFrame(animate);
-            }
-
-            requestAnimationFrame(animate);
-        });
-    }
 });
 
 const goToShuffle = () => {
     router.visit('/tirage');
 };
-
-function randomInt(min: number, max: number) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-function randomizeStack() {
-    const picked = new Set<number>();
-    while (picked.size < 3) picked.add(randomInt(1, 22));
-    const ids = Array.from(picked);
-    cardStack.value = ids.map((id, idx) => ({ id, title: `Carte ${id}`, image: `/cards/${id}.png`, isFlipped: false }));
-}
-
-const flipCard = (card: any) => {
-    card.isFlipped = !card.isFlipped;
-};
 </script>
 
 <style scoped>
@@ -184,6 +135,23 @@ const flipCard = (card: any) => {
     }
 }
 
+@keyframes goldParticle {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100vh) rotate(360deg);
+        opacity: 0;
+    }
+}
+
 .animate-float {
     animation: float 10s ease-in-out infinite;
 }
@@ -192,33 +160,81 @@ const flipCard = (card: any) => {
     animation: textShine 2s ease-in-out infinite alternate;
 }
 
-.card-fill {
+/* Gold particles */
+.gold-particle {
+    position: absolute;
+    background: radial-gradient(circle, #ffd700 30%, transparent 70%);
+    border-radius: 50%;
+    animation: goldParticle linear infinite;
+    pointer-events: none;
+}
+
+/* Gold trail effect */
+.gold-trail-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.gold-trail-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
+}
+
+.gold-trail-btn:hover::before {
+    transform: translateX(100%);
+}
+
+/* Zig-zag images - Only two larger images */
+@keyframes floatSlow {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-12px);
+    }
+}
+
+.zig-item {
+    position: absolute;
+    width: 18rem;
+    height: 24rem;
+    animation: floatSlow 7s ease-in-out infinite;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.zig-item-1 {
+    top: 5%;
+    left: 5%;
+    transform: rotate(-8deg);
+    animation-delay: 0s;
+}
+
+.zig-item-2 {
+    bottom: 5%;
+    right: 5%;
+    transform: rotate(6deg);
+    animation-delay: 0.5s;
+}
+
+.zig-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-}
-
-.perspective-1000 {
-    perspective: 1000px;
-}
-
-.preserve-3d {
-    transform-style: preserve-3d;
-}
-
-.rotate-y-180 {
-    transform: rotateY(180deg);
-}
-
-.backface-hidden {
-    backface-visibility: hidden;
-}
-
-.bg-card {
-    background-size: cover;
-    background-position: center;
-    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
-    mix-blend-mode: screen;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    border: 3px solid rgba(255, 215, 0, 0.4);
 }
 
 /* Custom color variables */
@@ -228,10 +244,25 @@ const flipCard = (card: any) => {
     --c-gold: rgba(245, 158, 11, 0.7);
 }
 
-@media (min-width: 1024px) {
-    .bg-card {
-        width: 10rem;
-        height: 15rem;
+/* Gold particles (refined) */
+@keyframes driftShimmer {
+    0%,
+    100% {
+        opacity: 0.35;
+        transform: translateY(0) scale(1);
+    }
+    50% {
+        opacity: 0.9;
+        transform: translateY(-10px) scale(1.1);
     }
 }
+
+.gold-particle {
+    position: absolute;
+    border-radius: 9999px;
+    background: radial-gradient(circle, rgba(255, 215, 128, 0.9) 0%, rgba(255, 215, 128, 0.45) 50%, transparent 70%);
+    filter: blur(0.5px);
+    animation: driftShimmer 8s ease-in-out infinite;
+    z-index: 3;
+}
 </style>

resources/js/components/landing/HowSection.vue

@@ -1,80 +1,174 @@
 <template>
-    <section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
-        <h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
-            Comment cela fonctionne
+    <section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
+        <!-- Background images with transparency -->
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute top-0 left-0 h-1/3 w-1/3 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
+            <div class="absolute right-0 bottom-0 h-1/3 w-1/3 bg-[url('/background/IMG_2252.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
+        </div>
+
+        <!-- Animated floating elements -->
+        <div class="pointer-events-none absolute inset-0 overflow-hidden">
+            <div
+                v-for="i in 8"
+                :key="'float-' + i"
+                class="absolute rounded-full opacity-20"
+                :class="{
+                    'bg-[var(--c-gold)]': i % 2 === 0,
+                    'bg-[var(--c-purple)]': i % 2 === 1,
+                }"
+                :style="{
+                    width: `${15 + i * 3}px`,
+                    height: `${15 + i * 3}px`,
+                    top: `${(i * 12) % 100}%`,
+                    left: `${(i * 15) % 100}%`,
+                    animation: `float ${12 + i}s ease-in-out infinite`,
+                    animationDelay: `${i * 0.5}s`,
+                }"
+            ></div>
+        </div>
+
+        <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 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>
 
         <div class="relative mx-auto max-w-4xl">
-            <!-- Animated connecting line -->
+            <!-- Animated connecting line with glow effect -->
             <div class="absolute top-0 bottom-0 left-1/2 w-1 -translate-x-1/2">
-                <div class="h-full w-full bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60"></div>
+                <div class="relative h-full w-full bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60">
+                    <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/30 to-transparent"></div>
+                </div>
             </div>
 
+            <!-- Glowing orbs along the line -->
+            <div
+                v-for="i in 3"
+                :key="'orb-' + i"
+                class="animate-orb-pulse absolute left-1/2 h-6 w-6 -translate-x-1/2 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-80 shadow-lg"
+                :style="{
+                    top: `${i * 33}%`,
+                    animationDelay: `${i * 0.3}s`,
+                }"
+            ></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 h-24 w-24 flex-shrink-0 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
-                    >
-                        <span class="z-10">1</span>
+                    <div class="relative flex-shrink-0">
                         <div
-                            class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
-                        ></div>
+                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
+                        >
+                            <span class="z-10">1</span>
+                            <div
+                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                            ></div>
+                        </div>
+                        <!-- Decorative sparkles -->
+                        <div
+                            v-for="i in 3"
+                            :key="'sparkle1-' + i"
+                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+                            :class="{
+                                'top-0 right-0 text-lg': i === 1,
+                                'bottom-0 left-0 text-sm': i === 2,
+                                'top-1/2 -right-2 text-xs': i === 3,
+                            }"
+                            :style="{ animationDelay: `${i * 0.2}s` }"
+                        >
+                            ✦
+                        </div>
                     </div>
                     <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
-                        <h3 class="mb-2 text-2xl font-bold text-white">Choisissez Votre Lecture</h3>
-                        <p class="max-w-md text-[var(--linen)]/80">
+                        <h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
+                            <span>Choisissez Votre Lecture</span>
+                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                        </h3>
+                        <p
+                            class="max-w-md rounded-xl 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)]/20 group-hover:bg-black/30"
+                        >
                             Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
                         </p>
                     </div>
-                    <!-- Decorative element -->
-                    <div
-                        class="absolute top-1/2 -left-4 h-0.5 w-12 -translate-y-1/2 bg-gradient-to-r from-transparent to-[var(--c-gold)]/50 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                    ></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-2 text-2xl font-bold text-white">Recevez Votre Interprétation</h3>
-                        <p class="max-w-md text-[var(--linen)]/80">
+                        <h3 class="mb-2 flex items-center justify-end gap-2 text-2xl font-bold text-white">
+                            <span class="text-xl 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-xl 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)]/20 group-hover:bg-black/30"
+                        >
                             Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
                         </p>
                     </div>
-                    <div
-                        class="relative flex h-24 w-24 flex-shrink-0 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
-                    >
-                        <span class="z-10">2</span>
+                    <div class="relative flex-shrink-0">
                         <div
-                            class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
-                        ></div>
+                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
+                        >
+                            <span class="z-10">2</span>
+                            <div
+                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                            ></div>
+                        </div>
+                        <!-- Decorative sparkles -->
+                        <div
+                            v-for="i in 3"
+                            :key="'sparkle2-' + i"
+                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+                            :class="{
+                                'top-0 left-0 text-lg': i === 1,
+                                'right-0 bottom-0 text-sm': i === 2,
+                                'top-1/2 -left-2 text-xs': i === 3,
+                            }"
+                            :style="{ animationDelay: `${i * 0.2}s` }"
+                        >
+                            ✦
+                        </div>
                     </div>
-                    <!-- Decorative element -->
-                    <div
-                        class="absolute top-1/2 -right-4 h-0.5 w-12 -translate-y-1/2 bg-gradient-to-l from-transparent to-[var(--c-gold)]/50 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                    ></div>
                 </div>
 
                 <!-- Step 3 -->
                 <div class="group flex items-center gap-8">
-                    <div
-                        class="relative flex h-24 w-24 flex-shrink-0 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
-                    >
-                        <span class="z-10">3</span>
+                    <div class="relative flex-shrink-0">
                         <div
-                            class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
-                        ></div>
+                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
+                        >
+                            <span class="z-10">3</span>
+                            <div
+                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                            ></div>
+                        </div>
+                        <!-- Decorative sparkles -->
+                        <div
+                            v-for="i in 3"
+                            :key="'sparkle3-' + i"
+                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+                            :class="{
+                                'top-0 right-0 text-lg': i === 1,
+                                'bottom-0 left-0 text-sm': i === 2,
+                                'top-1/2 -right-2 text-xs': i === 3,
+                            }"
+                            :style="{ animationDelay: `${i * 0.2}s` }"
+                        >
+                            ✦
+                        </div>
                     </div>
                     <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
-                        <h3 class="mb-2 text-2xl font-bold text-white">Appliquez la Sagesse</h3>
-                        <p class="max-w-md text-[var(--linen)]/80">
+                        <h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
+                            <span>Appliquez la Sagesse</span>
+                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                        </h3>
+                        <p
+                            class="max-w-md rounded-xl 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)]/20 group-hover:bg-black/30"
+                        >
                             Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
                         </p>
                     </div>
-                    <!-- Decorative element -->
-                    <div
-                        class="absolute top-1/2 -left-4 h-0.5 w-12 -translate-y-1/2 bg-gradient-to-r from-transparent to-[var(--c-gold)]/50 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                    ></div>
                 </div>
             </div>
 
@@ -114,6 +208,41 @@ export default {
 
 <style scoped>
 /* Custom animations */
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-8px) rotate(2deg);
+    }
+    66% {
+        transform: translateY(5px) rotate(-2deg);
+    }
+}
+
+@keyframes pulse-slow {
+    0%,
+    100% {
+        opacity: 0.4;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+@keyframes orb-pulse {
+    0%,
+    100% {
+        transform: translateX(-50%) scale(1);
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+    }
+    70% {
+        transform: translateX(-50%) scale(1.05);
+        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+    }
+}
+
 .group {
     opacity: 0;
     transform: translateY(20px);
@@ -139,9 +268,24 @@ export default {
     transform: translateY(0);
 }
 
+.animate-pulse-slow {
+    animation: pulse-slow 3s ease-in-out infinite;
+}
+
+.animate-orb-pulse {
+    animation: orb-pulse 2s infinite;
+}
+
+/* Custom color variables */
+:root {
+    --c-purple: #4c1d95;
+    --c-gold: rgba(245, 158, 11, 0.9);
+    --linen: #faf0e6;
+}
+
 /* Smooth transitions for all elements */
 * {
-    transition-property: color, background-color, transform, opacity, box-shadow;
+    transition-property: color, background-color, transform, opacity, box-shadow, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 </style>

resources/js/components/landing/ManuscritSection.vue

@@ -19,6 +19,34 @@
                 </span>
             </h2>
 
+            <!-- Image placed between heading and text -->
+            <div class="mx-auto mt-8 max-w-md transform transition-all duration-700">
+                <div class="relative inline-block">
+                    <img
+                        src="/background/IMG_2240.jpg"
+                        alt="Oracle de Kris Saint Ange"
+                        class="w-full rounded-2xl shadow-2xl transition-all duration-500 hover:scale-105"
+                    />
+                    <!-- Decorative frame -->
+                    <div class="pointer-events-none absolute inset-0 rounded-2xl border-2 border-[var(--spiritual-earth)]/30"></div>
+                    <div class="pointer-events-none absolute -inset-4 rounded-3xl border border-[var(--midnight-blue)]/20"></div>
+
+                    <!-- Floating particles around image -->
+                    <div
+                        v-for="i in 5"
+                        :key="'particle-' + i"
+                        class="absolute rounded-full bg-[var(--spiritual-earth)]/40"
+                        :class="[
+                            i === 1 ? '-top-2 -left-2 h-3 w-3' : '',
+                            i === 2 ? '-top-3 right-4 h-2 w-2' : '',
+                            i === 3 ? 'bottom-2 -left-3 h-4 w-4' : '',
+                            i === 4 ? '-right-2 bottom-4 h-2 w-2' : '',
+                            i === 5 ? 'top-4 -right-3 h-3 w-3' : '',
+                        ]"
+                    ></div>
+                </div>
+            </div>
+
             <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.
@@ -27,14 +55,6 @@
                     Chaque carte est une clé pour débloquer votre potentiel et prendre des décisions éclairées.
                 </span>
             </p>
-
-            <!-- Animated decorative elements -->
-            <div class="mt-8 flex items-center justify-center space-x-4">
-                <div class="h-8 w-8 animate-pulse rounded-full border-2 border-[var(--spiritual-earth)]"></div>
-                <div class="h-3 w-3 animate-bounce rounded-full bg-[var(--spiritual-earth)]" style="animation-delay: 0.2s"></div>
-                <div class="h-2 w-2 animate-bounce rounded-full bg-[var(--midnight-blue)]" style="animation-delay: 0.4s"></div>
-                <div class="h-8 w-8 animate-pulse rounded-full border-2 border-[var(--midnight-blue)]" style="animation-delay: 0.6s"></div>
-            </div>
         </div>
     </section>
 </template>
@@ -67,6 +87,12 @@ p span {
     transition: all 0.3s ease;
 }
 
+/* Custom color variables */
+:root {
+    --spiritual-earth: #a78bfa;
+    --midnight-blue: #1e1b4b;
+}
+
 /* Media queries for responsive adjustments */
 @media (max-width: 768px) {
     .citadel-script {

resources/js/components/landing/OfferSection.vue

@@ -1,77 +1,110 @@
 <template>
-    <section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
-        <h2 class="mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl">
-            Explorez Nos Lectures
+    <section class="overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
+        <!-- Animated background elements -->
+        <div class="pointer-events-none absolute inset-0 overflow-hidden">
+            <div
+                v-for="i in 15"
+                :key="'bg-' + i"
+                class="absolute rounded-full opacity-10"
+                :class="{
+                    'bg-[var(--c-gold)]': i % 3 === 0,
+                    'bg-[var(--c-purple)]': i % 3 === 1,
+                    'bg-white': i % 3 === 2,
+                }"
+                :style="{
+                    width: `${20 + ((i * 5) % 60)}px`,
+                    height: `${20 + ((i * 5) % 60)}px`,
+                    top: `${(i * 7) % 100}%`,
+                    left: `${(i * 10) % 100}%`,
+                    animation: `float ${15 + i * 2}s ease-in-out infinite`,
+                    animationDelay: `${i * 0.7}s`,
+                }"
+            ></div>
+        </div>
+
+        <h2
+            class="relative z-10 mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl"
+        >
+            <span class="relative inline-block">
+                Explorez Nos Lectures
+                <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="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
+        <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-gradient-to-b from-[var(--card)] to-[var(--card)]/90 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">
+                    <div
+                        class="animate-border-pulse absolute -inset-2 rounded-2xl bg-gradient-to-r from-[var(--c-purple)]/0 via-[var(--c-purple)]/30 to-[var(--c-purple)]/0"
+                    ></div>
+                </div>
+
+                <!-- Floating icon -->
                 <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"
-                ></div>
+                    class="absolute -top-6 -right-6 text-8xl text-[var(--c-gold)] opacity-5 transition-all duration-700 group-hover:scale-110 group-hover:opacity-10"
+                >
+                    ✦
+                </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>
-                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Gratuit</p>
+                    <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>
+                        <div
+                            class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                        >
+                            <div class="animate-ping-slow h-24 w-24 rounded-full border-2 border-[var(--c-gold)]/30"></div>
+                        </div>
+                    </div>
                 </div>
+
+                <!-- Animated checkmark list -->
                 <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
-                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
+                    <li
+                        v-for="(feature, index) in freeFeatures"
+                        :key="index"
+                        class="flex items-center gap-3 transition-all duration-300"
+                        :class="{
+                            'group-hover:-translate-x-1': index === 0,
+                            'group-hover:-translate-x-2': index === 1,
+                            'group-hover:-translate-x-3': index === 2,
+                        }"
+                        :style="{ transitionDelay: `${index * 100}ms` }"
+                    >
                         <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
+                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
                             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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
-                            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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
-                            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
+                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                     </li>
                 </ul>
+
                 <button
-                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
+                    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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
                 >
-                    <span class="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">Commencer</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"
+                        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"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
                     >
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
+                    <div
+                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
+                    ></div>
                 </button>
             </div>
 
@@ -79,72 +112,84 @@
             <div
                 class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-purple)] to-purple-900 p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
             >
-                <div class="absolute top-4 right-4 z-10 rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">
-                    POPULAIRE
+                <!-- Popular badge with animation -->
+                <div class="absolute top-4 right-4 z-10">
+                    <div class="relative">
+                        <div class="absolute -inset-1 animate-pulse rounded-full bg-[var(--c-gold)] opacity-75 blur"></div>
+                        <div class="relative rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">POPULAIRE</div>
+                    </div>
                 </div>
+
+                <!-- Sparkle effect -->
+                <div
+                    v-for="i in 3"
+                    :key="'sparkle-' + i"
+                    class="animate-sparkle absolute text-[var(--c-gold)] opacity-70"
+                    :class="{
+                        'top-4 left-4 text-xl': i === 1,
+                        'right-6 bottom-6 text-lg': i === 2,
+                        'top-1/2 left-1/4 text-sm': i === 3,
+                    }"
+                >
+                    ✦
+                </div>
+
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                 ></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-[var(--c-gold)]">
                         Profilage
                     </h3>
-                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">29€</p>
+                    <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>
+                        <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>
+                    </div>
                 </div>
+
                 <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/90">
-                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
+                    <li
+                        v-for="(feature, index) in featuredFeatures"
+                        :key="index"
+                        class="flex items-center gap-3 transition-all duration-300"
+                        :class="{
+                            'group-hover:-translate-x-1': index === 0,
+                            'group-hover:-translate-x-2': index === 1,
+                            'group-hover:-translate-x-3': index === 2,
+                        }"
+                        :style="{ transitionDelay: `${index * 100}ms` }"
+                    >
                         <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
+                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-white"
                             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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
-                            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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
-                            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
+                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                     </li>
                 </ul>
+
                 <button
-                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-300 group-hover:to-yellow-400 group-hover:shadow-lg"
+                    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-400 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-300 group-hover:to-yellow-400 group-hover:shadow-lg"
                 >
-                    <span class="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">Découvrir</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"
+                        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"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
                     >
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
+                    <div
+                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                    ></div>
                 </button>
             </div>
 
@@ -152,84 +197,183 @@
             <div
                 class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
             >
+                <!-- Golden particles -->
+                <div
+                    v-for="i in 5"
+                    :key="'particle-' + i"
+                    class="animate-float absolute rounded-full bg-[var(--c-gold)]/40"
+                    :class="{
+                        'top-4 left-4 h-3 w-3': i === 1,
+                        'right-6 bottom-6 h-2 w-2': i === 2,
+                        'top-1/4 right-4 h-4 w-4': i === 3,
+                        'bottom-4 left-6 h-3 w-3': i === 4,
+                        'top-3/4 left-4 h-2 w-2': i === 5,
+                    }"
+                    :style="{ animationDelay: `${i * 0.5}s` }"
+                ></div>
+
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                 ></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-[var(--c-gold)]">
                         Quadrige Doré
                     </h3>
-                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p>
+                    <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>
+                        <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"
+                            ></div>
+                        </div>
+                    </div>
                 </div>
+
                 <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
-                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
+                    <li
+                        v-for="(feature, index) in premiumFeatures"
+                        :key="index"
+                        class="flex items-center gap-3 transition-all duration-300"
+                        :class="{
+                            'group-hover:-translate-x-1': index === 0,
+                            'group-hover:-translate-x-2': index === 1,
+                            'group-hover:-translate-x-3': index === 2,
+                        }"
+                        :style="{ transitionDelay: `${index * 100}ms` }"
+                    >
                         <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
+                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
                             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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
-                            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
-                    </li>
-                    <li class="flex items-center gap-3 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
-                        <svg
-                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
-                            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
+                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                     </li>
                 </ul>
+
                 <button
-                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
+                    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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
                 >
-                    <span class="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">Explorer</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"
+                        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"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
                     >
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                     </svg>
+                    <div
+                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
+                    ></div>
                 </button>
             </div>
         </div>
     </section>
 </template>
 
+<script setup>
+// Define features for each tier
+const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];
+
+const featuredFeatures = ['Lecture de trois cartes', 'Analyse personnalisée', 'Recommandations ciblées'];
+
+const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie', 'Stratégie complète'];
+</script>
+
 <style scoped>
-/* Custom animations for the cards */
-.group:hover .group-hover\:-translate-x-1 {
-    transform: translateX(-4px);
+/* Custom animations */
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-5px) rotate(2deg);
+    }
+    66% {
+        transform: translateY(3px) rotate(-2deg);
+    }
+}
+
+@keyframes border-pulse {
+    0%,
+    100% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+@keyframes ping-slow {
+    0% {
+        transform: scale(0.8);
+        opacity: 1;
+    }
+    75%,
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+@keyframes sparkle {
+    0%,
+    100% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+}
+
+@keyframes spin-slow {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-border-pulse {
+    animation: border-pulse 2s ease-in-out infinite;
+}
+
+.animate-ping-slow {
+    animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.animate-sparkle {
+    animation: sparkle 3s ease-in-out infinite;
+}
+
+.animate-spin-slow {
+    animation: spin-slow 8s linear infinite;
+}
+
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Custom color variables */
+:root {
+    --c-purple: #4c1d95;
+    --c-white: #ffffff;
+    --c-gold: rgba(245, 158, 11, 0.9);
+    --card: #1e1b4b;
 }
 
 /* Smooth transitions for all elements */
 * {
-    transition-property: color, background-color, transform, opacity;
+    transition-property: color, background-color, transform, opacity, filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 </style>

resources/js/layouts/app/LandingLayout.vue

@@ -8,8 +8,8 @@ const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value;
 };
 
-const goToShuffle = () => {
-    router.visit('/tirage');
+const goToBooking = () => {
+    router.visit('/rendez-vous');
 };
 </script>
 
@@ -20,20 +20,7 @@ const goToShuffle = () => {
                 <div class="container mx-auto px-4">
                     <div class="flex items-center justify-between border-b border-solid border-gray-800 px-6 py-4 whitespace-nowrap">
                         <div class="flex items-center gap-3">
-                            <svg class="h-8 w-8 text-[var(--c-gold)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-                                <g clip-path="url(#clip0_6_319)">
-                                    <path
-                                        d="M8.57829 8.57829C5.52816 11.6284 3.451 15.5145 2.60947 19.7452C1.76794 23.9758 2.19984 28.361 3.85056 32.3462C5.50128 36.3314 8.29667 39.7376 11.8832 42.134C15.4698 44.5305 19.6865 45.8096 24 45.8096C28.3135 45.8096 32.5302 44.5305 36.1168 42.134C39.7033 39.7375 42.4987 36.3314 44.1494 32.3462C45.8002 28.361 46.2321 23.9758 45.3905 19.7452C44.549 15.5145 42.4718 11.6284 39.4217 8.57829L24 24L8.57829 8.57829Z"
-                                        fill="currentColor"
-                                    ></path>
-                                </g>
-                                <defs>
-                                    <clipPath id="clip0_6_319">
-                                        <rect fill="white" height="48" width="48"></rect>
-                                    </clipPath>
-                                </defs>
-                            </svg>
-                            <h2 class="text-xl font-bold text-white">Toutes les Clés du Succès</h2>
+                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
                         </div>
                         <nav class="hidden items-center gap-8 md:flex">
                             <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link>
@@ -43,6 +30,7 @@ const goToShuffle = () => {
                         <div class="flex items-center gap-4">
                             <button
                                 class="hover:bg-opacity-90 flex h-10 max-w-[480px] min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md bg-[var(--c-purple)] px-6 text-sm font-bold text-white shadow-[var(--c-purple)]/20 shadow-lg transition-all focus:ring-2 focus:ring-[var(--c-purple)] focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
+                                @click="goToBooking"
                             >
                                 <span class="truncate">Réserver une Session</span>
                             </button>

resources/js/pages/Agenda.vue

@@ -48,20 +48,101 @@ const redirectToStipeCheckout = async () => {
 
 <template>
     <LandingLayout>
-        <main class="flex flex-1 justify-center px-6 py-16 sm:px-8 lg:px-10">
+        <!-- Background elements -->
+        <div class="pointer-events-none absolute inset-0 overflow-hidden">
+            <div class="absolute top-0 left-0 h-1/3 w-1/3 opacity-10">
+                <img src="/background/IMG_2230.jpg" alt="Decorative background" class="h-full w-full rounded-full object-cover" />
+            </div>
+            <div class="absolute right-0 bottom-0 h-1/3 w-1/3 opacity-10">
+                <img src="/background/IMG_2245.jpg" alt="Decorative background" class="h-full w-full rounded-full object-cover" />
+            </div>
+            <div
+                v-for="i in 8"
+                :key="'particle-' + i"
+                class="animate-float absolute rounded-full opacity-20"
+                :class="{
+                    'bg-[var(--c-gold)]': i % 2 === 0,
+                    'bg-[var(--c-purple)]': i % 2 === 1,
+                }"
+                :style="{
+                    width: `${10 + i * 2}px`,
+                    height: `${10 + i * 2}px`,
+                    top: `${(i * 12) % 100}%`,
+                    left: `${(i * 10) % 100}%`,
+                    animationDelay: `${i * 0.5}s`,
+                }"
+            ></div>
+        </div>
+
+        <main class="relative z-10 flex flex-1 justify-center px-6 py-16 sm:px-8 lg:px-10">
             <div class="layout-content-container flex w-full max-w-5xl flex-col items-center gap-12">
-                <h1 class="text-center text-4xl font-black text-white md:text-5xl">Réservez votre consultation</h1>
+                <!-- Header with decorative elements -->
+                <div class="relative text-center">
+                    <h1 class="relative mb-4 text-4xl font-black text-white md:text-5xl">
+                        <span class="relative z-10">Réservez votre consultation</span>
+                        <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>
+                    </h1>
+                    <p class="mx-auto max-w-2xl text-lg text-white/80">
+                        Choisissez une date et laissez-vous guider vers une consultation transformative
+                    </p>
+
+                    <!-- Decorative sparkles -->
+                    <div class="absolute -top-6 -right-6 text-2xl text-[var(--c-gold)] opacity-60">✦</div>
+                    <div class="absolute -bottom-4 -left-6 text-xl text-[var(--c-purple)] opacity-60">✦</div>
+                </div>
+
                 <div class="flex w-full flex-wrap items-start justify-center gap-10 md:gap-16">
-                    <date-picker v-model:selectedDate="selectedDate" />
-                    <div class="relative flex min-w-[320px] max-w-md flex-1 flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-xl ring-1 ring-[var(--c-purple)]/40 md:p-8">
-                        <div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
+                    <!-- Date Picker with decorative frame -->
+                    <div class="relative">
+                        <div
+                            class="absolute -inset-4 rounded-2xl bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 opacity-0 blur-sm transition-opacity duration-500 group-hover:opacity-100"
+                        ></div>
+                        <date-picker v-model:selectedDate="selectedDate" />
+                    </div>
+
+                    <!-- Form Container -->
+                    <div
+                        class="relative flex max-w-md min-w-[320px] flex-1 flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/90 to-[var(--card)]/80 p-6 shadow-xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-8"
+                    >
+                        <!-- Background glow effects -->
+                        <div class="pointer-events-none absolute -top-16 -left-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
                         <div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
-                        <p class="relative z-10 text-center text-lg font-black text-white">Entrez vos informations</p>
+
+                        <!-- Decorative corner images -->
+                        <div class="absolute top-4 left-4 h-12 w-12 opacity-20">
+                            <img src="/background/IMG_2230.jpg" alt="Decorative corner" class="h-full w-full rounded-lg object-cover" />
+                        </div>
+                        <div class="absolute right-4 bottom-4 h-12 w-12 opacity-20">
+                            <img src="/background/IMG_2245.jpg" alt="Decorative corner" class="h-full w-full rounded-lg object-cover" />
+                        </div>
+
+                        <!-- Form header with icon -->
+                        <div class="relative z-10 text-center">
+                            <div
+                                class="mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)]/30 to-[var(--c-purple)]/20"
+                            >
+                                <svg class="h-6 w-6 text-[var(--c-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                    ></path>
+                                </svg>
+                            </div>
+                            <p class="text-lg font-black text-white">Entrez vos informations</p>
+                        </div>
+
                         <form class="relative z-10 flex flex-col gap-6" @submit.prevent="handleAppointment">
                             <div>
-                                <label class="mb-2 block text-sm font-black text-white" for="name">Nom complet</label>
+                                <label class="mb-2 block flex items-center gap-2 text-sm font-black text-white" for="name">
+                                    <span>Nom complet</span>
+                                    <span class="text-[var(--c-gold)]">✦</span>
+                                </label>
                                 <input
-                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
+                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 ring-0 backdrop-blur-sm transition-colors outline-none focus:border-[var(--c-purple)] focus:ring-0"
                                     id="name"
                                     name="name"
                                     placeholder="Votre nom complet"
@@ -70,9 +151,12 @@ const redirectToStipeCheckout = async () => {
                                 />
                             </div>
                             <div>
-                                <label class="mb-2 block text-sm font-black text-white" for="email">Adresse e-mail</label>
+                                <label class="mb-2 block flex items-center gap-2 text-sm font-black text-white" for="email">
+                                    <span>Adresse e-mail</span>
+                                    <span class="text-[var(--c-gold)]">✦</span>
+                                </label>
                                 <input
-                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
+                                    class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 ring-0 backdrop-blur-sm transition-colors outline-none focus:border-[var(--c-purple)] focus:ring-0"
                                     id="email"
                                     name="email"
                                     placeholder="Votre adresse e-mail"
@@ -81,17 +165,93 @@ const redirectToStipeCheckout = async () => {
                                 />
                             </div>
                             <button
-                                class="group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-lg font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:opacity-60"
+                                class="gold-trail-btn group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-lg font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:opacity-60"
                                 type="submit"
                                 :disabled="loading"
                             >
-                                <span class="relative z-10">Confirmer et Payer</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>
+                                <span class="relative z-10 flex items-center gap-2">
+                                    <span>{{ loading ? 'Traitement...' : 'Confirmer et Payer' }}</span>
+                                    <svg v-if="!loading" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </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>
                             </button>
                         </form>
+
+                        <!-- Security badge -->
+                        <div class="relative z-10 mt-4 flex items-center justify-center gap-2 text-xs text-white/60">
+                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                                ></path>
+                            </svg>
+                            <span>Paiement sécurisé avec Stripe</span>
+                        </div>
                     </div>
                 </div>
             </div>
         </main>
     </LandingLayout>
 </template>
+
+<style scoped>
+/* Custom animations */
+@keyframes float {
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-5px) rotate(2deg);
+    }
+    66% {
+        transform: translateY(3px) rotate(-2deg);
+    }
+}
+
+.animate-float {
+    animation: float 8s ease-in-out infinite;
+}
+
+/* Gold trail effect */
+.gold-trail-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.gold-trail-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
+}
+
+.gold-trail-btn:hover::before {
+    transform: translateX(100%);
+}
+
+/* Custom color variables */
+:root {
+    --c-purple: #4c1d95;
+    --c-gold: rgba(245, 158, 11, 0.9);
+    --card: #1e1b4b;
+}
+
+/* Smooth transitions */
+* {
+    transition-property: color, background-color, transform, opacity, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

resources/js/pages/Landing.vue

@@ -6,7 +6,6 @@
                 <div class="w-full max-w-7xl px-4 sm:px-6 lg:px-8">
                     <HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
                     <div id="after-hero-sentinel" class="h-px w-full"></div>
-                    <BackgroundCards />
                     <ManuscritSection />
                     <OfferSection />
                     <HowSection />
@@ -25,6 +24,5 @@ import HowSection from '@/components/landing/HowSection.vue';
 import ManuscritSection from '@/components/landing/ManuscritSection.vue';
 import OfferSection from '@/components/landing/OfferSection.vue';
 import TestimonialsSection from '@/components/landing/TestimonialsSection.vue';
-import BackgroundCards from '@/components/landing/BackgroundCards.vue';
 import LandingLayout from '@/layouts/app/LandingLayout.vue';
 </script>

resources/views/app.blade.php

@@ -28,9 +28,9 @@
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
-        <link rel="icon" href="/icon.jpg" sizes="any">
+        <link rel="icon" href="/logo-512-300x300.webp" sizes="any">
         <link rel="icon" href="/icin.jpg" >
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+        <link rel="apple-touch-icon" href="/logo-512-300x300.webp">
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>