add image

resources/js/components/landing/CallBookingSection.vue

@@ -2,7 +2,7 @@
     <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" />
+            <img src="/image005.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>
 

resources/js/components/landing/HeroSection.vue

@@ -1,48 +1,67 @@
 <template>
     <section
-        class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black px-4 py-24"
+        class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-br from-purple-900 via-violet-900 to-black px-4 py-24"
     >
         <!-- Background mystical elements -->
         <div class="absolute inset-0 overflow-hidden">
-            <!-- Subtle cosmic pattern -->
+            <!-- Background image with softer blur and higher brightness for visibility -->
-            <div class="absolute inset-0 opacity-10">
+            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(2px) brightness(0.7)"></div>
-                <div class="cosmic-pattern"></div>
+            <div class="absolute inset-0 bg-gradient-to-t from-purple-900/20 via-transparent to-transparent"></div>
-            </div>
 
-            <!-- Mystic glow effects -->
+            <!-- Smooth purple particles -->
-            <div class="mystic-glow glow-1"></div>
-            <div class="mystic-glow glow-2"></div>
-            <div class="mystic-glow glow-3"></div>
-
-            <!-- Gold particles -->
             <div
-                v-for="i in 25"
+                v-for="i in 15"
                 :key="i"
-                class="gold-particle absolute"
+                class="purple-particle absolute"
                 :style="{
-                    left: `${Math.random() * 100}%`,
+                    left: `${10 + Math.random() * 80}%`,
-                    top: `${Math.random() * 100}%`,
+                    top: `${10 + Math.random() * 80}%`,
-                    width: `${Math.random() * 6 + 2}px`,
+                    width: `${Math.random() * 8 + 4}px`,
-                    height: `${Math.random() * 6 + 2}px`,
+                    height: `${Math.random() * 8 + 4}px`,
+                    animationDelay: `${Math.random() * 2}s`,
+                    animationDuration: `${Math.random() * 15 + 15}s`,
+                }"
+            ></div>
+
+            <!-- Larger, slower purple elements -->
+            <div
+                v-for="i in 5"
+                :key="'large-' + i"
+                class="large-purple-particle absolute"
+                :style="{
+                    left: `${15 + Math.random() * 70}%`,
+                    top: `${15 + Math.random() * 70}%`,
+                    width: `${Math.random() * 20 + 15}px`,
+                    height: `${Math.random() * 20 + 15}px`,
                     animationDelay: `${Math.random() * 5}s`,
-                    animationDuration: `${Math.random() * 8 + 8}s`,
+                    animationDuration: `${Math.random() * 25 + 25}s`,
                 }"
             ></div>
         </div>
 
         <div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center lg:flex-row lg:items-center">
-            <!-- Text Content - Left Side -->
+            <!-- Text Content - Centered -->
-            <div class="mb-10 lg:mb-0 lg:w-1/2 lg:pr-10">
+            <div class="mb-10 lg:mb-0 lg:w-1/2 lg:pr-10 text-center mx-auto">
                 <h1
-                    class="mb-6 transform text-4xl font-black text-white transition-all duration-700 md:text-5xl lg:text-6xl"
+                    class="mb-6 text-center text-4xl font-black text-white md:text-5xl lg:text-6xl"
-                    :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
+                    :class="{ 'animate-fade-in-up': isMounted }"
+                    style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
                 >
-                    <span class="text-accent-gradient">Découvrez Votre Chemin</span> avec les Lectures Mystiques
+                    Découvrez Votre
+                    <span class="relative text-6xl text-purple-300 md:text-8xl">
+                        <span class="purple-glow">Chemin</span>
+                        <!-- Purple underline accent -->
+                        <span
+                            class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-purple-400 to-transparent transition-transform duration-1000"
+                            :class="{ 'scale-x-100': isMounted }"
+                        ></span>
+                    </span>
+                    Mystique
                 </h1>
 
                 <p
-                    class="mb-8 transform text-lg text-white/80 transition-all delay-200 duration-1000 md:text-xl"
+                    class="mb-8 max-w-2xl mx-auto text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl"
-                    :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
+                    :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.
@@ -50,68 +69,48 @@
 
                 <!-- Buttons -->
                 <div
-                    class="flex w-full transform flex-col gap-4 transition-all delay-500 duration-1000"
+                    class="flex w-full flex-col items-center gap-4 transition-all delay-500 duration-1000"
-                    :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
+                    :class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
                 >
                     <button
                         @click="goToShuffle"
-                        class="mystic-btn mystic-btn-primary group relative inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-8 font-bold tracking-wide text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 md:h-16 md:px-10"
+                        class="gold-button group relative mt-4 flex h-14 w-full md:w-auto cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-amber-400 to-yellow-500 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:px-10"
+                        :class="{ 'shadow-lg shadow-amber-500/40': buttonHover }"
+                        @mouseenter="buttonHover = true"
+                        @mouseleave="buttonHover = false"
                     >
-                        <span class="relative z-10 flex items-center gap-2 truncate text-lg md:text-xl"> ✨ Découvrir Mon Tirage Gratuit </span>
+                        <!-- Purple shine effect -->
                         <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%]"
+                            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>
+
+                        <!-- Animated arrow icon -->
+                        <svg
+                            class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
+                            :class="{ 'translate-x-1': buttonHover }"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                        </svg>
                     </button>
 
                     <!-- Small description -->
                     <div
-                        class="transform text-center transition-all delay-700 duration-1000"
+                        class="text-center transition-all delay-700 duration-1000"
-                        :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-5 opacity-0'"
+                        :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-emerald-300">Votre première carte est offerte</span> - Aucune carte bancaire requise
+                            🎴 <span class="font-semibold text-purple-300">Votre première carte est offerte</span> - Aucune carte bancaire requise
                         </p>
                     </div>
                 </div>
             </div>
 
-            <!-- Oracle Images - Right Side -->
+            <!-- Right Side - Simple Mystic Element -->
-            <div class="relative lg:w-1/2">
-                <div class="oracle-images-container relative h-80 w-full md:h-96 lg:h-[500px]">
-                    <!-- Main oracle image -->
-                    <div class="oracle-image-main absolute inset-0 flex items-center justify-center">
-                        <div class="relative h-full w-full max-w-md">
-                            <img
-                                src="/background/IMG_2230.jpg"
-                                alt="Oracle Card"
-                                class="oracle-img h-full w-full rounded-2xl object-cover shadow-2xl"
-                            />
-                            <div class="border-gold/50 absolute inset-0 rounded-2xl border-2 shadow-lg"></div>
-                            <div class="gold-frame"></div>
-                        </div>
-                    </div>
-
-                    <!-- Secondary image floating to the side -->
-                    <div class="oracle-image-secondary absolute right-0 bottom-10 z-10 md:right-10">
-                        <div class="relative h-48 w-32 md:h-56 md:w-40">
-                            <img
-                                src="/background/IMG_2245.jpg"
-                                alt="Oracle Card"
-                                class="oracle-img h-full w-full rounded-xl object-cover shadow-xl"
-                            />
-                            <div class="border-gold/30 absolute inset-0 rounded-xl border-2 shadow-lg"></div>
-                        </div>
-                    </div>
-
-                    <!-- Decorative elements -->
-                    <div class="floating-symbols">
-                        <div class="symbol symbol-1">✦</div>
-                        <div class="symbol symbol-2">✧</div>
-                        <div class="symbol symbol-3">☆</div>
-                        <div class="symbol symbol-4">★</div>
-                    </div>
-                </div>
-            </div>
         </div>
     </section>
 </template>
@@ -121,6 +120,7 @@ import { router } from '@inertiajs/vue3';
 import { onMounted, ref } from 'vue';
 
 const isMounted = ref(false);
+const buttonHover = ref(false);
 
 onMounted(() => {
     setTimeout(() => {
@@ -134,187 +134,95 @@ const goToShuffle = () => {
 </script>
 
 <style scoped>
-@keyframes float {
+/* Purple particle animation */
-    0%,
+.purple-particle {
-    100% {
+    background: radial-gradient(circle, #a855f7 30%, transparent 70%);
-        transform: translateY(0);
+    border-radius: 50%;
-    }
-    50% {
-        transform: translateY(-10px);
-    }
-}
-
-@keyframes floatSlow {
-    0%,
-    100% {
-        transform: translateY(0) rotate(0deg);
-    }
-    33% {
-        transform: translateY(-8px) rotate(2deg);
-    }
-    66% {
-        transform: translateY(4px) rotate(-2deg);
-    }
-}
-
-@keyframes textShine {
-    0% {
-        background-position: 0% 50%;
-    }
-    100% {
-        background-position: 100% 50%;
-    }
-}
-
-@keyframes goldParticle {
-    0% {
-        transform: translateY(0) rotate(0deg);
-        opacity: 0;
-    }
-    10% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(-100vh) rotate(360deg);
-        opacity: 0;
-    }
-}
-
-@keyframes mysticGlow {
-    0%,
-    100% {
-        opacity: 0.3;
-        transform: scale(1);
-    }
-    50% {
     opacity: 0.6;
-        transform: scale(1.1);
+    animation: gentle-float 20s infinite ease-in-out;
-    }
+    pointer-events: none;
+    transform-origin: center;
 }
 
-@keyframes symbolFloat {
+.large-purple-particle {
+    background: radial-gradient(circle, #8b5cf6 20%, transparent 70%);
+    border-radius: 50%;
+    opacity: 0.3;
+    animation: gentle-float 30s infinite ease-in-out;
+    pointer-events: none;
+    transform-origin: center;
+}
+
+@keyframes gentle-float {
     0%,
     100% {
-        transform: translateY(0) rotate(0deg);
+        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+        opacity: 0.6;
+    }
+    25% {
+        transform: translateY(-10px) translateX(5px) rotate(2deg) scale(1.02);
+    }
+    50% {
+        transform: translateY(-5px) translateX(8px) rotate(4deg) scale(1.05);
         opacity: 0.7;
     }
-    50% {
+    75% {
-        transform: translateY(-15px) rotate(180deg);
+        transform: translateY(3px) translateX(3px) rotate(2deg) scale(1.02);
+    }
+}
+
+/* Title animation */
+.animate-fade-in-up {
+    animation: fadeInUp 1.2s ease-out forwards;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
-/* Cosmic pattern background */
+/* Purple text glow */
-.cosmic-pattern {
+.purple-glow {
-    position: absolute;
+    text-shadow:
-    inset: 0;
+        0 0 10px rgba(168, 85, 247, 0.5),
-    background-image:
+        0 0 20px rgba(168, 85, 247, 0.3),
-        radial-gradient(circle at 20% 30%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
+        0 0 30px rgba(168, 85, 247, 0.2);
-        radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
-        radial-gradient(circle at 40% 80%, rgba(125, 91, 166, 0.1) 0%, transparent 50%);
-    background-size:
-        50% 50%,
-        30% 30%,
-        40% 40%;
-    background-position:
-        0 0,
-        100% 100%,
-        50% 50%;
 }
 
-/* Mystic glow effects */
+/* Button styling - Gold theme */
-.mystic-glow {
+.gold-button {
-    position: absolute;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
-    border-radius: 50%;
+    transition: all 0.3s ease;
-    filter: blur(60px);
-    animation: mysticGlow 8s ease-in-out infinite;
-    pointer-events: none;
 }
 
-.glow-1 {
+.gold-button:hover {
-    width: 300px;
+    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
-    height: 300px;
+    transform: translateY(-2px);
-    background: radial-gradient(circle, rgba(125, 91, 166, 0.3) 0%, transparent 70%);
-    top: 10%;
-    left: 10%;
-    animation-delay: 0s;
 }
 
-.glow-2 {
+.gold-button:active {
-    width: 400px;
+    transform: translateY(1px);
-    height: 400px;
-    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
-    bottom: 10%;
-    right: 10%;
-    animation-delay: 2s;
 }
 
-.glow-3 {
+/* Orb styling */
-    width: 250px;
+.orb-glow {
-    height: 250px;
+    animation: orb-pulse 8s ease-in-out infinite;
-    background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation-delay: 4s;
 }
 
-/* Gold particles */
+@keyframes orb-pulse {
-.gold-particle {
+    0%,
-    position: absolute;
-    background: radial-gradient(circle, #ffd700 30%, transparent 70%);
-    border-radius: 50%;
-    animation: goldParticle linear infinite;
-    pointer-events: none;
-}
-
-/* Oracle images styling */
-.oracle-images-container {
-    perspective: 1000px;
-}
-
-.oracle-image-main {
-    animation: floatSlow 8s ease-in-out infinite;
-}
-
-.oracle-image-secondary {
-    animation: float 6s ease-in-out infinite;
-    animation-delay: 1s;
-}
-
-.oracle-img {
-    transition: transform 0.3s ease;
-}
-
-.oracle-image-main:hover .oracle-img,
-.oracle-image-secondary:hover .oracle-img {
-    transform: scale(1.02);
-}
-
-.gold-frame {
-    position: absolute;
-    top: -5px;
-    left: -5px;
-    right: -5px;
-    bottom: -5px;
-    border: 2px solid transparent;
-    border-radius: 24px;
-    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.5), transparent) border-box;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0);
-    mask-composite: exclude;
-    animation: frameGlow 3s ease-in-out infinite alternate;
-}
-
-@keyframes frameGlow {
-    0% {
-        opacity: 0.5;
-    }
     100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    50% {
+        transform: scale(1.05);
         opacity: 1;
     }
 }
@@ -328,108 +236,68 @@ const goToShuffle = () => {
 
 .symbol {
     position: absolute;
-    color: rgba(255, 215, 0, 0.6);
+    color: rgba(168, 85, 247, 0.8);
     font-size: 1.5rem;
-    animation: symbolFloat 10s ease-in-out infinite;
+    animation: symbol-orbit 15s linear infinite;
 }
 
 .symbol-1 {
     top: 10%;
-    left: 15%;
+    left: 10%;
     animation-delay: 0s;
 }
 
 .symbol-2 {
-    top: 70%;
+    top: 80%;
     left: 20%;
-    animation-delay: 2s;
+    animation-delay: 3s;
 }
 
 .symbol-3 {
     top: 30%;
-    right: 25%;
+    right: 10%;
-    animation-delay: 4s;
-}
-
-.symbol-4 {
-    top: 80%;
-    right: 15%;
     animation-delay: 6s;
 }
 
-/* Buttons */
+.symbol-4 {
-.mystic-btn {
+    top: 70%;
-    position: relative;
+    right: 20%;
-    overflow: hidden;
+    animation-delay: 9s;
 }
 
-.mystic-btn-primary {
+@keyframes symbol-orbit {
-    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    0% {
-    box-shadow: 0 0 30px rgba(125, 91, 166, 0.8);
+        transform: rotate(0deg) translateX(80px) rotate(0deg);
-    border: 1px solid rgba(255, 255, 255, 0.2);
     }
-
+    100% {
-.mystic-btn-primary:hover {
+        transform: rotate(360deg) translateX(80px) rotate(-360deg);
-    box-shadow: 0 0 40px rgba(125, 91, 166, 1);
-    transform: translateY(-2px);
     }
-
-/* Text gradient */
-.text-accent-gradient {
-    background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    background-size: 200% auto;
-    animation: textShine 3s ease-in-out infinite alternate;
-}
-
-/* Custom color variables */
-:root {
-    --c-purple: #4c1d95;
-    --c-deep-navy: #1e1b4b;
-    --c-gold: rgba(245, 158, 11, 0.7);
-}
-
-.border-gold {
-    border-color: rgba(255, 215, 0, 0.5);
 }
 
 /* Responsive adjustments */
 @media (max-width: 1024px) {
-    .oracle-images-container {
+    .mystic-orb {
         height: 400px;
     }
+
+    .orb-glow {
+        height: 200px;
+        width: 200px;
+    }
 }
 
 @media (max-width: 768px) {
-    .oracle-images-container {
+    .mystic-orb {
         height: 300px;
     }
 
-    .oracle-image-secondary {
+    .orb-glow {
-        display: none;
+        height: 150px;
+        width: 150px;
     }
 
     .floating-symbols {
         display: none;
     }
 }
-
-/* Animation for the emoji in button */
-.mystic-btn-primary span {
-    animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 0.8;
-        transform: scale(1.05);
-    }
-}
 </style>

resources/js/components/landing/HowSection.vue

@@ -2,8 +2,7 @@
     <section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
         <!-- Single elegant background image -->
         <div class="absolute inset-0">
-            <div class="absolute inset-0 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
+            <div class="absolute inset-0 bg-[url('/image002.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
-            <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/30"></div>
         </div>
 
         <!-- Subtle floating elements -->

resources/js/components/landing/ManuscritSection.vue

@@ -23,7 +23,7 @@
             <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"
+                        src="/image003.jpg"
                         alt="Oracle de Kris Saint Ange"
                         class="w-full rounded-2xl shadow-2xl transition-all duration-500 hover:scale-105"
                     />

resources/js/pages/Agenda.vue

@@ -48,210 +48,257 @@ const redirectToStipeCheckout = async () => {
 
 <template>
     <LandingLayout>
-        <!-- Background elements - all with pointer-events-none -->
+        <!-- Background container with dark mystic theme -->
-        <div class="pointer-events-none absolute inset-0 overflow-hidden">
+        <div class="relative min-h-screen bg-gradient-to-br from-purple-900 via-violet-900 to-indigo-900">
-            <div class="absolute top-0 left-0 h-1/3 w-1/3 opacity-10">
+            <!-- Animated background elements -->
-                <img src="/background/IMG_2230.jpg" alt="Decorative background" class="h-full w-full rounded-full object-cover" />
+            <div class="absolute inset-0 overflow-hidden">
-            </div>
+                <!-- Floating particles -->
-            <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"
+                    v-for="i in 12"
                     :key="'particle-' + i"
-                class="animate-float absolute rounded-full opacity-20"
+                    class="floating-particle absolute rounded-full bg-white/10"
-                :class="{
-                    'bg-[var(--c-gold)]': i % 2 === 0,
-                    'bg-[var(--c-purple)]': i % 2 === 1,
-                }"
                     :style="{
-                    width: `${10 + i * 2}px`,
+                        width: `${Math.random() * 6 + 2}px`,
-                    height: `${10 + i * 2}px`,
+                        height: `${Math.random() * 6 + 2}px`,
-                    top: `${(i * 12) % 100}%`,
+                        top: `${Math.random() * 100}%`,
-                    left: `${(i * 10) % 100}%`,
+                        left: `${Math.random() * 100}%`,
-                    animationDelay: `${i * 0.5}s`,
+                        animationDelay: `${Math.random() * 5}s`,
                     }"
                 ></div>
+
+                <!-- Glow effects -->
+                <div class="glow-effect glow-1"></div>
+                <div class="glow-effect glow-2"></div>
+                <div class="glow-effect glow-3"></div>
             </div>
 
-        <main class="relative z-10 flex flex-1 justify-center px-6 py-16 sm:px-8 lg:px-10">
+            <!-- Main content -->
-            <div class="layout-content-container flex w-full max-w-5xl flex-col items-center gap-12">
+            <main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
-                <!-- Header with decorative elements -->
+                <div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
-                <div class="relative text-center">
+                    <!-- Header Section -->
-                    <h1 class="relative mb-4 text-4xl font-black text-white md:text-5xl">
+                    <div class="max-w-3xl text-center">
-                        <span class="relative z-10">Réservez votre consultation</span>
+                        <h1 class="mb-6 text-4xl font-bold text-white sm:text-5xl lg:text-6xl">Réservez votre consultation</h1>
-                        <span
+                        <p class="mx-auto max-w-2xl text-lg text-white/80 sm:text-xl">
-                            class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"
+                            Choisissez la date de votre consultation spirituelle et laissez-vous guider vers l'éclaircissement
-                        ></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 with pointer-events-none -->
-                    <div class="pointer-events-none absolute -top-6 -right-6 text-2xl text-[var(--c-gold)] opacity-60">✦</div>
-                    <div class="pointer-events-none 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">
+                    <!-- Main Content Container -->
-                    <!-- Date Picker with decorative frame -->
+                    <div class="flex w-full flex-col items-center justify-center gap-12 lg:flex-row lg:items-start lg:gap-16 xl:gap-20">
-                    <div class="relative">
+                        <!-- Date Picker Card -->
-                        <div
+                        <div class="w-full max-w-md lg:max-w-lg">
-                            class="pointer-events-none 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 class="rounded-2xl border border-white/20 bg-black/30 p-6 shadow-2xl backdrop-blur-sm">
-                        ></div>
+                                <div class="mb-6 text-center">
+                                    <h2 class="text-2xl font-bold text-white">Choisissez votre date</h2>
+                                    <p class="mt-2 text-white/70">Sélectionnez le moment parfait pour votre guidance</p>
+                                </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 with pointer-events-none -->
-                        <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>
-
-                        <!-- Decorative corner images with pointer-events-none -->
-                        <div class="pointer-events-none 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="pointer-events-none 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 -->
+                        <!-- Form Card -->
-                        <div class="relative z-10 text-center">
+                        <div class="w-full max-w-md">
-                            <div
+                            <div class="rounded-2xl border border-white/20 bg-black/30 p-8 shadow-2xl backdrop-blur-sm">
-                                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"
+                                <div class="mb-8 text-center">
-                            >
+                                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/20">
-                                <svg class="h-6 w-6 text-[var(--c-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <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>
+                                    <h2 class="text-2xl font-bold text-white">Vos informations</h2>
+                                    <p class="mt-2 text-white/70">Remplissez vos coordonnées pour finaliser la réservation</p>
                                 </div>
 
-                        <form class="relative z-10 flex flex-col gap-6" @submit.prevent="handleAppointment">
+                                <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
-                            <div>
+                                    <!-- Name Input -->
-                                <label class="mb-2 block flex items-center gap-2 text-sm font-black text-white" for="name">
+                                    <div class="group">
-                                    <span>Nom complet</span>
+                                        <label class="mb-3 block text-sm font-semibold text-white" for="name"> Nom complet </label>
-                                    <span class="text-[var(--c-gold)]">✦</span>
+                                        <div class="relative">
-                                </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 ring-0 backdrop-blur-sm transition-colors outline-none focus:border-[var(--c-purple)] focus:ring-0"
+                                                class="w-full rounded-xl border-2 border-purple-500/30 bg-black/40 p-4 text-base text-white transition-all duration-300 placeholder:text-white/40 focus:border-purple-400 focus:bg-black/60 focus:shadow-lg focus:ring-2 focus:ring-purple-400/20"
                                                 id="name"
                                                 name="name"
                                                 placeholder="Votre nom complet"
                                                 type="text"
                                                 v-model="userForm.fullname"
+                                                required
                                             />
                                         </div>
-                            <div>
+                                    </div>
-                                <label class="mb-2 block flex items-center gap-2 text-sm font-black text-white" for="email">
+
-                                    <span>Adresse e-mail</span>
+                                    <!-- Email Input -->
-                                    <span class="text-[var(--c-gold)]">✦</span>
+                                    <div class="group">
-                                </label>
+                                        <label class="mb-3 block text-sm font-semibold text-white" for="email"> Adresse e-mail </label>
+                                        <div class="relative">
                                             <input
-                                    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"
+                                                class="w-full rounded-xl border-2 border-purple-500/30 bg-black/40 p-4 text-base text-white transition-all duration-300 placeholder:text-white/40 focus:border-purple-400 focus:bg-black/60 focus:shadow-lg focus:ring-2 focus:ring-purple-400/20"
                                                 id="email"
                                                 name="email"
                                                 placeholder="Votre adresse e-mail"
                                                 type="email"
                                                 v-model="userForm.email"
+                                                required
                                             />
                                         </div>
+                                    </div>
+
+                                    <!-- Selected Date Display -->
+                                    <div class="rounded-xl border border-purple-500/20 bg-purple-900/20 p-4">
+                                        <p class="mb-1 text-sm font-medium text-white">Date sélectionnée :</p>
+                                        <p class="text-lg font-semibold text-purple-300">
+                                            {{
+                                                selectedDate.toLocaleDateString('fr-FR', {
+                                                    weekday: 'long',
+                                                    year: 'numeric',
+                                                    month: 'long',
+                                                    day: 'numeric',
+                                                })
+                                            }}
+                                        </p>
+                                    </div>
+
+                                    <!-- Submit Button -->
                                     <button
-                                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"
+                                        class="group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-purple-500 hover:to-violet-500 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
                                         type="submit"
-                                :disabled="loading"
+                                        :disabled="loading || !userForm.fullname || !userForm.email"
                                     >
-                                <span class="relative z-10 flex items-center gap-2">
+                                        <!-- Shine effect -->
+                                        <span
+                                            class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+                                        ></span>
+
+                                        <!-- Button content -->
+                                        <span class="relative z-10 flex items-center gap-3">
+                                            <svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                                <path
+                                                    class="opacity-75"
+                                                    fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                ></path>
+                                            </svg>
                                             <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">
+                                            <svg
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                                v-if="!loading"
+                                                class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                stroke="currentColor"
+                                            >
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                             </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 -->
+                                    <!-- Security Note -->
-                        <div class="relative z-10 mt-4 flex items-center justify-center gap-2 text-xs text-white/60">
+                                    <p class="mt-4 text-center text-xs text-white/60">
-                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        🔒 Paiement sécurisé via Stripe. Vos informations sont protégées.
+                                    </p>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Additional Information -->
+                    <div class="mt-8 max-w-2xl text-center">
+                        <div
+                            class="inline-flex items-center gap-4 rounded-2xl border border-white/20 bg-black/30 px-6 py-4 text-sm text-white/70 backdrop-blur-sm"
+                        >
+                            <svg class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <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"
+                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                                ></path>
+                                />
                             </svg>
-                            <span>Paiement sécurisé avec Stripe</span>
+                            <span>Consultation confidentielle • Guidance personnalisée • Support après séance</span>
-                        </div>
                         </div>
                     </div>
                 </div>
             </main>
+        </div>
     </LandingLayout>
 </template>
 
 <style scoped>
-/* Custom animations */
+/* Floating particles animation */
 @keyframes float {
     0%,
     100% {
         transform: translateY(0) rotate(0deg);
+        opacity: 0;
     }
-    33% {
+    50% {
-        transform: translateY(-5px) rotate(2deg);
+        opacity: 1;
     }
-    66% {
+    100% {
-        transform: translateY(3px) rotate(-2deg);
+        transform: translateY(-100px) rotate(180deg);
+        opacity: 0;
     }
 }
 
-.animate-float {
+.floating-particle {
     animation: float 8s ease-in-out infinite;
 }
 
-/* Gold trail effect */
+/* Glow effects */
-.gold-trail-btn {
+@keyframes glowPulse {
-    position: relative;
+    0%,
-    overflow: hidden;
+    100% {
+        opacity: 0.3;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.6;
+        transform: scale(1.1);
+    }
 }
 
-.gold-trail-btn::before {
+.glow-effect {
-    content: '';
     position: absolute;
-    top: 0;
+    border-radius: 50%;
-    left: 0;
+    filter: blur(60px);
-    width: 100%;
+    animation: glowPulse 8s ease-in-out infinite;
-    height: 100%;
+    pointer-events: none;
-    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 {
+.glow-1 {
-    transform: translateX(100%);
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
+    top: 20%;
+    left: 10%;
+    animation-delay: 0s;
 }
 
-/* Custom color variables */
+.glow-2 {
-:root {
+    width: 400px;
-    --c-purple: #4c1d95;
+    height: 400px;
-    --c-gold: rgba(245, 158, 11, 0.9);
+    background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
-    --card: #1e1b4b;
+    bottom: 20%;
+    right: 10%;
+    animation-delay: 4s;
 }
 
-/* Smooth transitions */
+.glow-3 {
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: 2s;
+}
+
+/* Smooth transitions for form elements */
 * {
-    transition-property: color, background-color, transform, opacity, box-shadow;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 </style>