fix design

resources/css/app.css

@@ -10,7 +10,7 @@
 @theme inline {
     --font-heading: 'Montserrat', sans-serif;
     --font-body: 'Montserrat', sans-serif;
-    --font-accent: 'Citadel Script', cursive;
+    --font-accent: 'Poppins', cursive;
 
     --font-sans: var(--font-body);
 
@@ -93,10 +93,10 @@
     }
 }
 :root {
-    /* Brand variables (used by arbitrary values like bg-[var(--c-purple)]) */
+    /* Brand variables */
     --c-black: #000000;
     --c-green: #9ACE8A;
-    --c-purple: #241352;
+    --c-purple: #7D5BA6; /* softer purple primary */
     --c-gold: #F0BA2D;
     --c-white: #FFFFFF;
     /* Additional accent stops for hero gradient */
@@ -105,54 +105,100 @@
     --c-orange: #f28c2a;
     --c-blue: #2cc5e5;
 
-    /* App theme (Tailwind CSS v4 design tokens) */
+    /* Light (default) theme — softer, not too bright */
-    --background: var(--c-black);
+    --background: #f5effa;
-    --foreground: var(--c-white);
+    --foreground: #1f1630;
 
-    --card: #0b0b0b;
+    --card: #ffffff;
-    --card-foreground: var(--c-white);
+    --card-foreground: #1f1630;
 
-    --popover: #0b0b0b;
+    --popover: #ffffff;
-    --popover-foreground: var(--c-white);
+    --popover-foreground: #1f1630;
 
     --primary: var(--c-purple);
     --primary-foreground: var(--c-white);
 
-    --secondary: #171717;
+    --secondary: #ede7f5;
-    --secondary-foreground: var(--c-white);
+    --secondary-foreground: #1f1630;
 
-    --muted: #0a0a0a;
+    --muted: #eee7f7;
-    --muted-foreground: #9ca3af;
+    --muted-foreground: #5b4b72;
 
-    --accent: var(--c-gold);
+    --accent: #B89BD6;
-    --accent-foreground: var(--c-black);
+    --accent-foreground: #1f1630;
 
     --destructive: #ef4444;
     --destructive-foreground: var(--c-white);
 
-    --border: #1f2937;
+    --border: #e2d7f2;
-    --input: #2d2d2d;
+    --input: #ded1ef;
     --ring: var(--c-purple);
 
     --chart-1: var(--c-purple);
-    --chart-2: var(--c-gold);
+    --chart-2: #B89BD6;
     --chart-3: var(--c-green);
-    --chart-4: #6b7280;
+    --chart-4: #7a6b91;
-    --chart-5: #374151;
+    --chart-5: #523f6a;
 
     --radius: 0.5rem;
 
     /* Sidebar */
-    --sidebar-background: #0b0b0b;
+    --sidebar-background: #faf7ff;
-    --sidebar-foreground: var(--c-white);
+    --sidebar-foreground: #1f1630;
     --sidebar-primary: var(--c-purple);
     --sidebar-primary-foreground: var(--c-white);
-    --sidebar-accent: var(--c-gold);
+    --sidebar-accent: #B89BD6;
-    --sidebar-accent-foreground: var(--c-black);
+    --sidebar-accent-foreground: #1f1630;
-    --sidebar-border: #1f2937;
+    --sidebar-border: #e2d7f2;
     --sidebar-ring: var(--c-purple);
 }
 
+/* Dim dark mode overrides */
+.dark {
+    --background: #221a2b;
+    --foreground: #ece6f4;
+
+    --card: #2b2136;
+    --card-foreground: #f1ecf7;
+
+    --popover: #2b2136;
+    --popover-foreground: #f1ecf7;
+
+    --primary: var(--c-purple);
+    --primary-foreground: var(--c-white);
+
+    --secondary: #2e2439;
+    --secondary-foreground: #eae4f3;
+
+    --muted: #3a2d49;
+    --muted-foreground: #c8bfe0;
+
+    --accent: #B89BD6;
+    --accent-foreground: #1f1630;
+
+    --destructive: #ff7676;
+    --destructive-foreground: var(--c-white);
+
+    --border: #4c3a60;
+    --input: #4c3a60;
+    --ring: #9c7ca5;
+
+    --chart-1: var(--c-purple);
+    --chart-2: #B89BD6;
+    --chart-3: var(--c-green);
+    --chart-4: #7a6b91;
+    --chart-5: #523f6a;
+
+    --sidebar-background: #2b2136;
+    --sidebar-foreground: #f1ecf7;
+    --sidebar-primary: var(--c-purple);
+    --sidebar-primary-foreground: var(--c-white);
+    --sidebar-accent: #B89BD6;
+    --sidebar-accent-foreground: #1f1630;
+    --sidebar-border: #4c3a60;
+    --sidebar-ring: #9c7ca5;
+}
+
 /* Legacy aliases so existing components using old variables keep working */
 :root {
     --midnight-blue: var(--c-white); /* legacy text color now maps to white for dark theme */
@@ -194,6 +240,22 @@
     .text-shadow-custom {
         text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
     }
+
+    /* Gentle hero overlay and background image helper */
+    .bg-hero {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)), var(--hero-image, url('/images/hero.jpg'));
+        background-size: cover;
+        background-position: center;
+    }
+
+    /* Softer lilac gradient for headings */
+    .text-accent-gradient {
+        background: linear-gradient(45deg, #B89BD6, #7D5BA6);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        color: transparent;
+    }
 }
 
 @font-face {
@@ -224,9 +286,17 @@
 }
 
 @font-face {
-    font-family: 'Montserrat';
+    font-family: 'Montserrat ExtraBold';
-    src: url('@/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
+    src: url('@/fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }
+
+@font-face {
+    font-family: 'Poppins';
+    src: url('@/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}

resources/js/components/landing/HeroSection.vue

@@ -1,54 +1,63 @@
 <template>
     <section
-        class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-cover bg-center bg-no-repeat px-4 py-24 text-center"
+        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"
     >
-        <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>
+        <!-- Background mystical elements -->
-
-        <!-- Gold particles background effect -->
         <div class="absolute inset-0 overflow-hidden">
+            <!-- Subtle cosmic pattern -->
+            <div class="absolute inset-0 opacity-10">
+                <div class="cosmic-pattern"></div>
+            </div>
+
+            <!-- Mystic glow effects -->
+            <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 30"
+                v-for="i in 25"
                 :key="i"
                 class="gold-particle absolute"
                 :style="{
                     left: `${Math.random() * 100}%`,
                     top: `${Math.random() * 100}%`,
-                    width: `${Math.random() * 8 + 2}px`,
+                    width: `${Math.random() * 6 + 2}px`,
-                    height: `${Math.random() * 8 + 2}px`,
+                    height: `${Math.random() * 6 + 2}px`,
                     animationDelay: `${Math.random() * 5}s`,
-                    animationDuration: `${Math.random() * 10 + 10}s`,
+                    animationDuration: `${Math.random() * 8 + 8}s`,
                 }"
             ></div>
         </div>
 
-        <div class="relative z-10 mx-auto flex max-w-5xl flex-col items-center justify-between lg:flex-row">
+        <div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center lg:flex-row lg:items-center">
-            <!-- Text Content -->
+            <!-- Text Content - Left Side -->
-            <div class="mb-10 lg:mb-0 lg:w-1/2">
+            <div class="mb-10 lg:mb-0 lg:w-1/2 lg:pr-10">
                 <h1
-                    class="mb-4 transform text-4xl font-black text-white transition-all duration-700 md:text-6xl"
+                    class="mb-6 transform text-4xl font-black text-white transition-all duration-700 md:text-5xl lg:text-6xl"
                     :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
                 >
-                    Révélez Votre Voyage Intérieur
+                    <span class="text-accent-gradient">Découvrez Votre Chemin</span> avec les Lectures Mystiques
                 </h1>
 
                 <p
                     class="mb-8 transform text-lg text-white/80 transition-all delay-200 duration-1000 md:text-xl"
                     :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
                 >
-                    Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
+                    Débloquez la sagesse de l'univers grâce à des lectures de cartes oracle personnalisées. Choisissez votre tirage et commencez votre
-                    confiance.
+                    voyage de découverte de soi.
                 </p>
 
                 <!-- Buttons -->
                 <div
-                    class="flex transform flex-wrap justify-center gap-6 transition-all delay-500 duration-1000"
+                    class="flex transform flex-wrap gap-4 transition-all delay-500 duration-1000"
                     :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
                 >
                     <button
                         @click="goToShuffle"
-                        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"
+                        class="mystic-btn mystic-btn-primary group relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full px-6 font-bold tracking-wide text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
                     >
-                        <span class="relative z-10 truncate">Essayez 1 carte gratuite</span>
+                        <span class="relative z-10 truncate">Tirer 1 Carte</span>
                         <span
                             class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
                         ></span>
@@ -56,39 +65,48 @@
 
                     <button
                         @click="goToShuffle"
-                        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)]"
+                        class="mystic-btn mystic-btn-secondary inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 px-6 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
                     >
-                        <span class="truncate">Découvrir les tirages</span>
+                        <span class="truncate">Tirer 3 Cartes</span>
                     </button>
                 </div>
             </div>
 
-            <!-- Vertical zig-zag with only two larger images -->
+            <!-- Oracle Images - Right Side -->
-            <div class="relative flex h-[32rem] items-center justify-center lg:w-1/2">
+            <div class="relative lg:w-1/2">
-                <div class="relative h-full w-[26rem]">
+                <div class="oracle-images-container relative h-80 w-full md:h-96 lg:h-[500px]">
-                    <!-- First image (top left) -->
+                    <!-- Main oracle image -->
-                    <div class="zig-item zig-item-1">
+                    <div class="oracle-image-main absolute inset-0 flex items-center justify-center">
-                        <img class="zig-img" src="/background/IMG_2230.jpg" alt="Oracle Image 1" />
+                        <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>
 
-                    <!-- Second image (bottom right) -->
+                    <!-- Secondary image floating to the side -->
-                    <div class="zig-item zig-item-2">
+                    <div class="oracle-image-secondary absolute right-0 bottom-10 z-10 md:right-10">
-                        <img class="zig-img" src="/background/IMG_2245.jpg" alt="Oracle Image 2" />
+                        <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>
 
-                    <!-- gold particles -->
+                    <!-- Decorative elements -->
-                    <span
+                    <div class="floating-symbols">
-                        v-for="i in 18"
+                        <div class="symbol symbol-1">✦</div>
-                        :key="'gp-' + i"
+                        <div class="symbol symbol-2">✧</div>
-                        class="gold-particle"
+                        <div class="symbol symbol-3">☆</div>
-                        :style="{
+                        <div class="symbol symbol-4">★</div>
-                            left: `${5 + ((i * 11) % 90)}%`,
+                    </div>
-                            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>
@@ -114,15 +132,25 @@ const goToShuffle = () => {
 
 <style scoped>
 @keyframes float {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes floatSlow {
     0%,
     100% {
         transform: translateY(0) rotate(0deg);
     }
     33% {
-        transform: translateY(-20px) rotate(5deg);
+        transform: translateY(-8px) rotate(2deg);
     }
     66% {
-        transform: translateY(10px) rotate(-5deg);
+        transform: translateY(4px) rotate(-2deg);
     }
 }
 
@@ -152,12 +180,83 @@ const goToShuffle = () => {
     }
 }
 
-.animate-float {
+@keyframes mysticGlow {
-    animation: float 10s ease-in-out infinite;
+    0%,
+    100% {
+        opacity: 0.3;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.6;
+        transform: scale(1.1);
+    }
 }
 
-.animate-text-shine {
+@keyframes symbolFloat {
-    animation: textShine 2s ease-in-out infinite alternate;
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0.7;
+    }
+    50% {
+        transform: translateY(-15px) rotate(180deg);
+        opacity: 1;
+    }
+}
+
+/* Cosmic pattern background */
+.cosmic-pattern {
+    position: absolute;
+    inset: 0;
+    background-image:
+        radial-gradient(circle at 20% 30%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
+        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 */
+.mystic-glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    animation: mysticGlow 8s ease-in-out infinite;
+    pointer-events: none;
+}
+
+.glow-1 {
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(125, 91, 166, 0.3) 0%, transparent 70%);
+    top: 10%;
+    left: 10%;
+    animation-delay: 0s;
+}
+
+.glow-2 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
+    bottom: 10%;
+    right: 10%;
+    animation-delay: 2s;
+}
+
+.glow-3 {
+    width: 250px;
+    height: 250px;
+    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 */
@@ -169,72 +268,143 @@ const goToShuffle = () => {
     pointer-events: none;
 }
 
-/* Gold trail effect */
+/* Oracle images styling */
-.gold-trail-btn {
+.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% {
+        opacity: 1;
+    }
+}
+
+/* Floating symbols */
+.floating-symbols {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.symbol {
+    position: absolute;
+    color: rgba(255, 215, 0, 0.6);
+    font-size: 1.5rem;
+    animation: symbolFloat 10s ease-in-out infinite;
+}
+
+.symbol-1 {
+    top: 10%;
+    left: 15%;
+    animation-delay: 0s;
+}
+
+.symbol-2 {
+    top: 70%;
+    left: 20%;
+    animation-delay: 2s;
+}
+
+.symbol-3 {
+    top: 30%;
+    right: 25%;
+    animation-delay: 4s;
+}
+
+.symbol-4 {
+    top: 80%;
+    right: 15%;
+    animation-delay: 6s;
+}
+
+/* Buttons */
+.mystic-btn {
     position: relative;
     overflow: hidden;
 }
 
-.gold-trail-btn::before {
+.mystic-btn-primary {
+    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
+}
+
+.mystic-btn-primary:hover {
+    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
+}
+
+.mystic-btn-secondary {
+    border-color: rgba(255, 215, 0, 0.5);
+    background: rgba(255, 215, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.mystic-btn-secondary:hover {
+    background: rgba(255, 215, 0, 0.2);
+    border-color: rgba(255, 215, 0, 0.8);
+}
+
+.mystic-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transform: translateX(-100%);
     transition: transform 0.6s;
     z-index: 1;
 }
 
-.gold-trail-btn:hover::before {
+.mystic-btn:hover::before {
     transform: translateX(100%);
 }
 
-/* Zig-zag images - Only two larger images */
+/* Text gradient */
-@keyframes floatSlow {
+.text-accent-gradient {
-    0%,
+    background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%);
-    100% {
+    -webkit-background-clip: text;
-        transform: translateY(0);
+    -webkit-text-fill-color: transparent;
-    }
+    background-clip: text;
-    50% {
+    background-size: 200% auto;
-        transform: translateY(-12px);
+    animation: textShine 3s ease-in-out infinite alternate;
-    }
-}
-
-.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;
-    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 */
@@ -244,25 +414,28 @@ const goToShuffle = () => {
     --c-gold: rgba(245, 158, 11, 0.7);
 }
 
-/* Gold particles (refined) */
+.border-gold {
-@keyframes driftShimmer {
+    border-color: rgba(255, 215, 0, 0.5);
-    0%,
+}
-    100% {
+
-        opacity: 0.35;
+/* Responsive adjustments */
-        transform: translateY(0) scale(1);
+@media (max-width: 1024px) {
-    }
+    .oracle-images-container {
-    50% {
+        height: 400px;
-        opacity: 0.9;
-        transform: translateY(-10px) scale(1.1);
     }
 }
 
-.gold-particle {
+@media (max-width: 768px) {
-    position: absolute;
+    .oracle-images-container {
-    border-radius: 9999px;
+        height: 300px;
-    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;
+    .oracle-image-secondary {
-    z-index: 3;
+        display: none;
+    }
+
+    .floating-symbols {
+        display: none;
+    }
 }
 </style>

resources/js/components/landing/HowSection.vue

@@ -1,33 +1,35 @@
 <template>
     <section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
-        <!-- Background images with transparency -->
+        <!-- Single elegant background image -->
-        <div class="absolute inset-0 opacity-10">
+        <div class="absolute inset-0">
-            <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 inset-0 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center opacity-20 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 class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/30"></div>
         </div>
 
-        <!-- Animated floating elements -->
+        <!-- Subtle floating elements -->
         <div class="pointer-events-none absolute inset-0 overflow-hidden">
             <div
-                v-for="i in 8"
+                v-for="i in 12"
                 :key="'float-' + i"
-                class="absolute rounded-full opacity-20"
+                class="absolute opacity-10"
                 :class="{
-                    'bg-[var(--c-gold)]': i % 2 === 0,
+                    'text-[var(--c-gold)]': i % 3 === 0,
-                    'bg-[var(--c-purple)]': i % 2 === 1,
+                    'text-[var(--c-purple)]': i % 3 === 1,
+                    'text-white': i % 3 === 2,
                 }"
                 :style="{
-                    width: `${15 + i * 3}px`,
+                    fontSize: `${8 + i * 2}px`,
-                    height: `${15 + i * 3}px`,
+                    top: `${(i * 15) % 100}%`,
-                    top: `${(i * 12) % 100}%`,
+                    left: `${(i * 12) % 100}%`,
-                    left: `${(i * 15) % 100}%`,
+                    animation: `float ${15 + i * 2}s ease-in-out infinite`,
-                    animation: `float ${12 + i}s ease-in-out infinite`,
+                    animationDelay: `${i * 0.3}s`,
-                    animationDelay: `${i * 0.5}s`,
                 }"
-            ></div>
+            >
+                {{ i % 3 === 0 ? '✦' : i % 3 === 1 ? '✧' : '☆' }}
+            </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">
+        <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
             <span class="relative inline-block">
                 Comment cela fonctionne
                 <span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
@@ -35,21 +37,21 @@
         </h2>
 
         <div class="relative mx-auto max-w-4xl">
-            <!-- Animated connecting line with glow effect -->
+            <!-- Elegant connecting line -->
-            <div class="absolute top-0 bottom-0 left-1/2 w-1 -translate-x-1/2">
+            <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
-                <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="relative h-full w-full">
-                    <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/30 to-transparent"></div>
+                    <div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div>
+                    <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
                 </div>
             </div>
 
-            <!-- Glowing orbs along the line -->
+            <!-- Minimal 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"
+                class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-80"
                 :style="{
                     top: `${i * 33}%`,
-                    animationDelay: `${i * 0.3}s`,
                 }"
             ></div>
 
@@ -58,35 +60,27 @@
                 <div class="group flex items-center gap-8">
                     <div class="relative flex-shrink-0">
                         <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"
+                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
                         >
                             <span class="z-10">1</span>
                             <div
-                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
                             ></div>
                         </div>
-                        <!-- Decorative sparkles -->
+                        <!-- Subtle sparkles -->
                         <div
-                            v-for="i in 3"
+                            class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                            :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 flex items-center gap-2 text-2xl font-bold text-white">
+                        <h3 class="mb-3 flex items-center gap-2 text-xl 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>
+                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                         </h3>
                         <p
-                            class="max-w-md rounded-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"
+                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
                         >
                             Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
                         </p>
@@ -96,36 +90,28 @@
                 <!-- 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 flex items-center justify-end gap-2 text-2xl font-bold text-white">
+                        <h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
-                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
+                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                             <span>Recevez Votre Interprétation</span>
                         </h3>
                         <p
-                            class="max-w-md rounded-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"
+                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
                         >
                             Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
                         </p>
                     </div>
                     <div class="relative flex-shrink-0">
                         <div
-                            class="relative flex h-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"
+                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
                         >
                             <span class="z-10">2</span>
                             <div
-                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
                             ></div>
                         </div>
-                        <!-- Decorative sparkles -->
+                        <!-- Subtle sparkles -->
                         <div
-                            v-for="i in 3"
+                            class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                            :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>
@@ -136,35 +122,27 @@
                 <div class="group flex items-center gap-8">
                     <div class="relative flex-shrink-0">
                         <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"
+                            class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
                         >
                             <span class="z-10">3</span>
                             <div
-                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
+                                class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
                             ></div>
                         </div>
-                        <!-- Decorative sparkles -->
+                        <!-- Subtle sparkles -->
                         <div
-                            v-for="i in 3"
+                            class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
-                            :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 flex items-center gap-2 text-2xl font-bold text-white">
+                        <h3 class="mb-3 flex items-center gap-2 text-xl 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>
+                            <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                         </h3>
                         <p
-                            class="max-w-md rounded-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"
+                            class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
                         >
                             Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
                         </p>
@@ -172,9 +150,9 @@
                 </div>
             </div>
 
-            <!-- Animated decorative elements -->
+            <!-- Subtle decorative elements -->
-            <div class="absolute -top-10 -left-10 h-24 w-24 animate-pulse rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
+            <div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
-            <div class="absolute -right-10 -bottom-10 h-32 w-32 animate-pulse rounded-full bg-[var(--c-purple)]/20 blur-xl delay-1000"></div>
+            <div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/20 blur-xl"></div>
         </div>
     </section>
 </template>
@@ -187,21 +165,27 @@ export default {
         const observerOptions = {
             root: null,
             rootMargin: '0px',
-            threshold: 0.2,
+            threshold: 0.1,
         };
 
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     entry.target.classList.add('animate-fade-in-up');
+                    // Stagger animation for each step
+                    const steps = entry.target.closest('.relative').querySelectorAll('.group');
+                    steps.forEach((step, index) => {
+                        step.style.transitionDelay = `${index * 0.2}s`;
+                    });
                 }
             });
         }, observerOptions);
 
-        // Observe each step
+        // Observe the container
-        document.querySelectorAll('.group').forEach((step) => {
+        const container = document.querySelector('.relative.mx-auto');
-            observer.observe(step);
+        if (container) {
-        });
+            observer.observe(container);
+        }
     },
 };
 </script>
@@ -212,12 +196,11 @@ export default {
     0%,
     100% {
         transform: translateY(0) rotate(0deg);
+        opacity: 0.1;
     }
-    33% {
+    50% {
-        transform: translateY(-8px) rotate(2deg);
+        transform: translateY(-10px) rotate(180deg);
-    }
+        opacity: 0.3;
-    66% {
-        transform: translateY(5px) rotate(-2deg);
     }
 }
 
@@ -231,61 +214,95 @@ export default {
     }
 }
 
-@keyframes orb-pulse {
+.animate-pulse-slow {
-    0%,
+    animation: pulse-slow 3s ease-in-out infinite;
-    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);
-    }
 }
 
+/* Scroll animation */
 .group {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(30px);
     transition:
         opacity 0.6s ease-out,
         transform 0.6s ease-out;
 }
 
-.group:nth-child(1) {
-    transition-delay: 0.1s;
-}
-
-.group:nth-child(2) {
-    transition-delay: 0.3s;
-}
-
-.group:nth-child(3) {
-    transition-delay: 0.5s;
-}
-
 .animate-fade-in-up {
     opacity: 1;
     transform: translateY(0);
 }
 
-.animate-pulse-slow {
+/* Button styles */
-    animation: pulse-slow 3s ease-in-out infinite;
+.mystic-btn {
+    position: relative;
+    overflow: hidden;
 }
 
-.animate-orb-pulse {
+.mystic-btn-primary {
-    animation: orb-pulse 2s infinite;
+    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
+}
+
+.mystic-btn-primary:hover {
+    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
+}
+
+.mystic-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
+}
+
+.mystic-btn:hover::before {
+    transform: translateX(100%);
 }
 
 /* Custom color variables */
 :root {
     --c-purple: #4c1d95;
     --c-gold: rgba(245, 158, 11, 0.9);
-    --linen: #faf0e6;
 }
 
-/* Smooth transitions for all elements */
+/* Responsive design */
+@media (max-width: 768px) {
+    .group {
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+    }
+
+    .group:nth-child(2) {
+        flex-direction: column-reverse;
+    }
+
+    .transform.pl-4,
+    .transform.pr-4 {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .relative.mx-auto {
+        padding: 0 1rem;
+    }
+
+    .absolute.left-1\/2 {
+        display: none;
+    }
+}
+
+/* Smooth transitions */
 * {
-    transition-property: color, background-color, transform, opacity, box-shadow, border-color;
+    transition:
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        color 0.3s ease,
+        background-color 0.3s ease,
+        transform 0.3s ease,
+        opacity 0.3s ease;
 }
 </style>

resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue

@@ -162,7 +162,7 @@ defineExpose({ setDrawnCards });
                         :class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
                         @click="handleDeckClick"
                     >
-                        <div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
+                        <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>
                         <div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
                             <div class="card-back">
@@ -185,9 +185,6 @@ defineExpose({ setDrawnCards });
                                 </div>
                                 <div class="card-face card-known-back">
                                     <img :src="`/cards/${card.id + 1}.png`" :alt="card.name" class="card-image" />
-                                    <div class="card-description-overlay">
-                                        <h3>{{ card.name }}</h3>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -229,8 +226,7 @@ defineExpose({ setDrawnCards });
 .card {
     width: 250px;
     height: 400px;
-    background: radial-gradient(circle at 30% 20%, rgba(240, 186, 45, 0.06), transparent 60%),
+    background: radial-gradient(circle at 30% 20%, rgba(240, 186, 45, 0.06), transparent 60%), linear-gradient(145deg, #111, #1b1b1b);
-        linear-gradient(145deg, #111, #1b1b1b);
     border-radius: 18px;
     border: 1px solid rgba(128, 90, 213, 0.25);
     box-shadow:

resources/js/fonts/Roboto/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

resources/js/fonts/Roboto/README.txt

@@ -0,0 +1,118 @@
+Roboto Variable Font
+====================
+
+This download contains Roboto as both variable fonts and static fonts.
+
+Roboto is a variable font with these axes:
+  wdth
+  wght
+
+This means all the styles are contained in these files:
+  Roboto-VariableFont_wdth,wght.ttf
+  Roboto-Italic-VariableFont_wdth,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Roboto:
+  static/Roboto_Condensed-Thin.ttf
+  static/Roboto_Condensed-ExtraLight.ttf
+  static/Roboto_Condensed-Light.ttf
+  static/Roboto_Condensed-Regular.ttf
+  static/Roboto_Condensed-Medium.ttf
+  static/Roboto_Condensed-SemiBold.ttf
+  static/Roboto_Condensed-Bold.ttf
+  static/Roboto_Condensed-ExtraBold.ttf
+  static/Roboto_Condensed-Black.ttf
+  static/Roboto_SemiCondensed-Thin.ttf
+  static/Roboto_SemiCondensed-ExtraLight.ttf
+  static/Roboto_SemiCondensed-Light.ttf
+  static/Roboto_SemiCondensed-Regular.ttf
+  static/Roboto_SemiCondensed-Medium.ttf
+  static/Roboto_SemiCondensed-SemiBold.ttf
+  static/Roboto_SemiCondensed-Bold.ttf
+  static/Roboto_SemiCondensed-ExtraBold.ttf
+  static/Roboto_SemiCondensed-Black.ttf
+  static/Roboto-Thin.ttf
+  static/Roboto-ExtraLight.ttf
+  static/Roboto-Light.ttf
+  static/Roboto-Regular.ttf
+  static/Roboto-Medium.ttf
+  static/Roboto-SemiBold.ttf
+  static/Roboto-Bold.ttf
+  static/Roboto-ExtraBold.ttf
+  static/Roboto-Black.ttf
+  static/Roboto_Condensed-ThinItalic.ttf
+  static/Roboto_Condensed-ExtraLightItalic.ttf
+  static/Roboto_Condensed-LightItalic.ttf
+  static/Roboto_Condensed-Italic.ttf
+  static/Roboto_Condensed-MediumItalic.ttf
+  static/Roboto_Condensed-SemiBoldItalic.ttf
+  static/Roboto_Condensed-BoldItalic.ttf
+  static/Roboto_Condensed-ExtraBoldItalic.ttf
+  static/Roboto_Condensed-BlackItalic.ttf
+  static/Roboto_SemiCondensed-ThinItalic.ttf
+  static/Roboto_SemiCondensed-ExtraLightItalic.ttf
+  static/Roboto_SemiCondensed-LightItalic.ttf
+  static/Roboto_SemiCondensed-Italic.ttf
+  static/Roboto_SemiCondensed-MediumItalic.ttf
+  static/Roboto_SemiCondensed-SemiBoldItalic.ttf
+  static/Roboto_SemiCondensed-BoldItalic.ttf
+  static/Roboto_SemiCondensed-ExtraBoldItalic.ttf
+  static/Roboto_SemiCondensed-BlackItalic.ttf
+  static/Roboto-ThinItalic.ttf
+  static/Roboto-ExtraLightItalic.ttf
+  static/Roboto-LightItalic.ttf
+  static/Roboto-Italic.ttf
+  static/Roboto-MediumItalic.ttf
+  static/Roboto-SemiBoldItalic.ttf
+  static/Roboto-BoldItalic.ttf
+  static/Roboto-ExtraBoldItalic.ttf
+  static/Roboto-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

resources/js/layouts/app/LandingLayout.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const isMobileMenuOpen = ref(false);
+const isScrolled = ref(false);
 
 const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value;
@@ -11,100 +12,155 @@ const toggleMobileMenu = () => {
 const goToBooking = () => {
     router.visit('/rendez-vous');
 };
+
+// Handle scroll effect for header
+onMounted(() => {
+    window.addEventListener('scroll', () => {
+        isScrolled.value = window.scrollY > 50;
+    });
+});
 </script>
 
 <template>
-    <div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
+    <div
+        class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
+    >
         <div class="layout-container flex h-full grow flex-col">
-            <header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm">
+            <!-- Enhanced Header -->
+            <header
+                class="fixed top-0 z-50 w-full transition-all duration-300"
+                :class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
+            >
                 <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 justify-between px-6 py-2 whitespace-nowrap">
                         <div class="flex items-center gap-3">
-                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
+                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30 transition-transform duration-300 hover:scale-105" />
                         </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>
+                            <Link
-                            <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/tirage">Tirages</Link>
+                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
-                            <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Testimonial</Link>
+                                href="/"
+                            >
+                                Accueil
+                                <span
+                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
+                                ></span>
+                            </Link>
+                            <Link
+                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
+                                href="/tirage"
+                            >
+                                Tirages
+                                <span
+                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
+                                ></span>
+                            </Link>
+                            <Link
+                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
+                                href="/"
+                            >
+                                Témoignages
+                                <span
+                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
+                                ></span>
+                            </Link>
                         </nav>
                         <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"
+                                class="mystic-btn mystic-btn-primary group relative inline-flex h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
                                 @click="goToBooking"
                             >
-                                <span class="truncate">Réserver une Session</span>
+                                <span class="relative z-10 truncate">Réserver une Session</span>
+                                <span
+                                    class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
+                                ></span>
                             </button>
-                            <button class="text-white md:hidden">
+                            <button class="text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
-                                <span class="material-symbols-outlined"> menu </span>
+                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                                </svg>
                             </button>
                         </div>
                     </div>
                 </div>
             </header>
 
-            <nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
+            <!-- Enhanced Mobile Menu -->
-                <Link
+            <div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
+                <div
-                    href="#"
+                    class="absolute top-0 right-0 h-full w-3/4 bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
-                    @click="toggleMobileMenu"
+                    @click.stop
-                    >Accueil</Link
                 >
+                    <div class="mb-8 flex items-center justify-between">
+                        <img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
+                        <button @click="toggleMobileMenu" class="text-white">
+                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <nav class="flex flex-col gap-6">
+                        <Link
+                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            href="/"
+                            @click="toggleMobileMenu"
+                            >Accueil</Link
+                        >
+                        <Link
+                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            href="/tirage"
+                            @click="toggleMobileMenu"
+                            >Tirages</Link
+                        >
+                        <Link
+                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            href="/"
+                            @click="toggleMobileMenu"
+                            >Témoignages</Link
+                        >
+                        <button
+                            class="mystic-btn mystic-btn-primary group relative mt-4 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300"
+                            @click="
+                                goToBooking;
+                                toggleMobileMenu();
+                            "
+                        >
+                            <span class="relative z-10 truncate">Réserver une Session</span>
+                        </button>
+                    </nav>
+                </div>
+            </div>
 
-                <Link
+            <main class="relative flex min-h-screen w-full flex-col items-center pt-20">
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >L'Oracle</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >Lectures</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="#"
-                    @click="toggleMobileMenu"
-                    >Témoignages</Link
-                >
-                <Link
-                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
-                    href="/rendez-vous"
-                    @click="toggleMobileMenu"
-                    >Booking</Link
-                >
-            </nav>
-
-            <main class="hero-gradient relative flex min-h-screen w-full flex-col items-center">
                 <slot />
             </main>
 
-            <footer class="relative border-t border-gray-800 bg-black text-white">
+            <!-- Enhanced Footer -->
+            <footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
                 <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
                 <div class="mx-auto max-w-7xl px-6 py-14">
                     <div class="grid gap-10 md:grid-cols-3">
                         <!-- Brand + tagline -->
                         <div>
                             <div class="flex items-center gap-3">
-                                <img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
+                                <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
                             </div>
                             <p class="mt-4 max-w-sm text-sm text-white/70">
                                 Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
                             </p>
-                            <div class="mt-4 flex gap-4">
+                            <div class="mt-6 flex gap-4">
-                                <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Instagram">
+                                <a class="social-icon group" href="#" aria-label="Instagram">
                                     <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <rect x="32" y="32" width="192" height="192" rx="48"></rect>
                                         <circle cx="128" cy="128" r="40" fill="black"></circle>
                                     </svg>
                                 </a>
-                                <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Facebook">
+                                <a class="social-icon group" href="#" aria-label="Facebook">
                                     <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
                                     </svg>
                                 </a>
-                                <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="X">
+                                <a class="social-icon group" href="#" aria-label="X">
                                     <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <path
                                             d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
@@ -115,34 +171,32 @@ const goToBooking = () => {
                         </div>
 
                         <!-- Quick links -->
-                        <div class="grid grid-cols-2 gap-8 md:grid-cols-1">
+                        <div class="grid grid-cols-2 gap-8 md:grid-cols-2">
                             <div>
-                                <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Navigation</h4>
+                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Navigation</h4>
-                                <ul class="space-y-2 text-sm">
+                                <ul class="space-y-3 text-sm">
-                                    <li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link></li>
                                     <li>
-                                        <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#testimonials">Témoignages</a>
+                                        <Link class="footer-link group" href="/">Accueil</Link>
                                     </li>
-                                    <li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/tirage">Lectures</Link></li>
                                     <li>
-                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/rendez-vous"
+                                        <a class="footer-link group" href="#testimonials">Témoignages</a>
-                                            >Rendez-vous</Link
+                                    </li>
-                                        >
+                                    <li>
+                                        <Link class="footer-link group" href="/tirage">Lectures</Link>
+                                    </li>
+                                    <li>
+                                        <Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link>
                                     </li>
                                 </ul>
                             </div>
                             <div>
-                                <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Légal</h4>
+                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Légal</h4>
-                                <ul class="space-y-2 text-sm">
+                                <ul class="space-y-3 text-sm">
                                     <li>
-                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/politique-confidalite"
+                                        <Link class="footer-link group" href="/politique-confidalite">Politique de Confidentialité</Link>
-                                            >Politique de Confidentialité</Link
-                                        >
                                     </li>
                                     <li>
-                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/term-condition"
+                                        <Link class="footer-link group" href="/term-condition">Conditions d'Utilisation</Link>
-                                            >Conditions d'Utilisation</Link
-                                        >
                                     </li>
                                 </ul>
                             </div>
@@ -150,17 +204,17 @@ const goToBooking = () => {
 
                         <!-- Newsletter -->
                         <div>
-                            <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Newsletter</h4>
+                            <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Newsletter</h4>
-                            <p class="text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
+                            <p class="mb-4 text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
-                            <form class="mt-4 flex max-w-md">
+                            <form class="mt-2 flex max-w-md overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm">
                                 <input
                                     type="email"
                                     placeholder="Votre e-mail"
-                                    class="w-full rounded-l-md border border-gray-700 bg-gray-900 px-4 text-sm text-white placeholder-gray-500 focus:border-[var(--c-purple)] focus:outline-none"
+                                    class="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none"
                                 />
                                 <button
                                     type="button"
-                                    class="hover:bg-opacity-90 rounded-r-md bg-[var(--c-purple)] px-4 text-sm font-bold text-white transition-colors"
+                                    class="mystic-btn mystic-btn-secondary px-4 text-sm font-bold whitespace-nowrap text-white transition-all"
                                 >
                                     S'abonner
                                 </button>
@@ -168,7 +222,7 @@ const goToBooking = () => {
                         </div>
                     </div>
 
-                    <div class="mt-10 border-t border-gray-800 pt-6 text-center text-xs text-white/60 sm:text-sm">
+                    <div class="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:text-sm">
                         © 2024 Kris Saint Ange. Tous droits réservés.
                     </div>
                 </div>
@@ -178,40 +232,139 @@ const goToBooking = () => {
 </template>
 
 <style scoped>
-.text-midnight-blue {
+/* Button styles matching the hero section */
-    color: var(--midnight-blue);
+.mystic-btn {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
 }
-.bg-midnight-blue {
+
-    background-color: var(--midnight-blue);
+.mystic-btn-primary {
+    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
 }
-.text-spiritual-earth {
+
-    color: var(--spiritual-earth);
+.mystic-btn-primary:hover {
+    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
+    transform: translateY(-2px);
 }
-.bg-spiritual-earth {
+
-    background-color: var(--spiritual-earth);
+.mystic-btn-secondary {
+    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
+    border: 1px solid rgba(255, 215, 0, 0.3);
+    backdrop-filter: blur(10px);
 }
-.text-subtle-gold {
+
-    color: var(--subtle-gold);
+.mystic-btn-secondary:hover {
+    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
+    border-color: rgba(255, 215, 0, 0.6);
+    transform: translateY(-1px);
 }
-.bg-subtle-gold {
+
-    background-color: var(--subtle-gold);
+.mystic-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
 }
-.text-linen {
+
-    color: var(--linen);
+.mystic-btn:hover::before {
+    transform: translateX(100%);
 }
-.bg-linen {
+
-    background-color: var(--linen);
+/* Social icons */
+.social-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
 }
-.text-pure-white {
+
-    color: var(--pure-white);
+.social-icon:hover {
+    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(125, 91, 166, 0.4);
 }
-.bg-pure-white {
+
-    background-color: var(--pure-white);
+/* Footer links */
+.footer-link {
+    position: relative;
+    color: rgba(255, 255, 255, 0.7);
+    transition: all 0.3s ease;
 }
-.text-light-ivory {
+
-    color: var(--light-ivory);
+.footer-link:hover {
+    color: #ffd700;
+    padding-left: 8px;
 }
-.bg-light-ivory {
+
-    background-color: var(--light-ivory);
+.footer-link::before {
+    content: '';
+    position: absolute;
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 4px;
+    background: #ffd700;
+    border-radius: 50%;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.footer-link:hover::before {
+    opacity: 1;
+    left: 0;
+}
+
+/* Custom color variables */
+:root {
+    --c-purple: #4c1d95;
+    --c-deep-navy: #1e1b4b;
+    --c-gold: rgba(245, 158, 11, 0.7);
+}
+
+/* Smooth transitions for all elements */
+* {
+    transition:
+        color 0.3s ease,
+        background-color 0.3s ease,
+        border-color 0.3s ease;
+}
+
+/* Mobile menu animation */
+.fixed {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Header scroll effect */
+header {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Newsletter form focus states */
+input:focus {
+    box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
 }
 </style>

resources/js/pages/cards/FreeCardResult.vue

@@ -30,7 +30,7 @@
                         class="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-2xl ring-1 ring-[var(--c-purple)]/40 md:p-10"
                     >
                         <!-- Ambient glows -->
-                        <div class="pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
+                        <div class="pointer-events-none absolute -top-20 -left-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
                         <div class="pointer-events-none absolute -right-20 -bottom-20 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
 
                         <!-- Card Header -->
@@ -51,7 +51,9 @@
                                         :alt="card.name"
                                         class="absolute inset-0 h-full w-full rounded-2xl object-cover"
                                     />
-                                    <div class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center">
+                                    <div
+                                        class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center"
+                                    >
                                         <p class="text-sm font-bold text-white">{{ card.name }}</p>
                                     </div>
                                 </div>
@@ -99,24 +101,34 @@
                 <!-- Consultation CTA -->
                 <div
                     v-if="!loading && !error"
-                    class="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-xl ring-1 ring-[var(--c-purple)]/40 md:p-12"
+                    class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
                 >
-                    <div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
+                    <!-- Animated background -->
-                    <div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
+                    <div
+                        class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
+                    ></div>
 
-                    <div class="relative z-10 mx-auto mb-6 h-1 w-16 rounded-full bg-[var(--c-gold)]"></div>
+                    <div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
-                    <p class="relative z-10 mx-auto mb-6 max-w-2xl text-base text-white/80 leading-relaxed md:mb-8 md:text-lg">
+                    <div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
-                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
+
-                    </p>
+                    <div class="relative z-10">
-                    <button
+                        <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
-                        @click="goToBooking"
+                            <span class="text-2xl">💫</span>
-                        class="relative z-10 inline-flex h-12 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:shadow-[var(--c-gold)]/40"
+                            <span class="text-lg font-bold text-white">Guidance Approfondie</span>
-                    >
+                        </div>
-                        <span class="relative z-10">Réserver une Consultation</span>
+                        <p class="relative z-10 mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">
-                        <span
+                            Pour une analyse personnalisée et une guidance plus approfondie, réservez une consultation privée avec Kris Saint Ange.
-                            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 hover:translate-x-[100%]"
+                        </p>
-                        ></span>
+                        <button
-                    </button>
+                            @click="goToBooking"
+                            class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
+                        >
+                            <span class="relative z-10">Réserver une Consultation</span>
+                            <span
+                                class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
+                            ></span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </main>
@@ -153,3 +165,48 @@ onMounted(async () => {
     }
 });
 </script>
+<style scoped>
+/* Button styles */
+.mystic-btn {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.mystic-btn-primary {
+    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
+    box-shadow: 0 0 25px rgba(125, 91, 166, 0.7);
+}
+
+.mystic-btn-primary:hover {
+    box-shadow: 0 0 35px rgba(125, 91, 166, 0.9);
+}
+
+.mystic-btn-secondary {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+.mystic-btn-secondary:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.mystic-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s;
+    z-index: 1;
+}
+
+.mystic-btn:hover::before {
+    transform: translateX(100%);
+}
+</style>

resources/js/pages/cards/cardSelection.vue

@@ -71,7 +71,7 @@ const clearHover = () => {
 };
 </script>
 <template>
-    <section class="bg-black px-4 py-16 sm:py-20">
+    <section class="px-4 py-16 sm:py-20">
         <h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
             Explorez Nos <span class="text-[var(--c-gold)]">Lectures</span>
         </h2>