From 90b8137b4de9258fdc0be6be23955daf60d0c2b7 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Mon, 6 Oct 2025 13:07:03 +0300
Subject: [PATCH] fix gradient safari

---
 .../components/landing/CallBookingSection.vue | 39 +++++++------------
 .../js/components/landing/HeroSection.vue     |  2 +-
 .../components/landing/ManuscritSection.vue   |  6 +--
 .../js/components/landing/OfferSection.vue    | 13 +++----
 .../landing/TestimonialsSection.vue           | 34 ++++++++--------
 5 files changed, 39 insertions(+), 55 deletions(-)

diff --git a/resources/js/components/landing/CallBookingSection.vue b/resources/js/components/landing/CallBookingSection.vue
index e214215..0e33547 100644
--- a/resources/js/components/landing/CallBookingSection.vue
+++ b/resources/js/components/landing/CallBookingSection.vue
@@ -3,21 +3,19 @@
         <!-- Background image with overlay -->
         <div class="absolute inset-0">
             <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" style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.70), rgba(30, 27, 75, 0.80));"></div>
+            <div
+                class="absolute inset-0 bg-[#1e1b4b]/80"
+                style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.7), rgba(30, 27, 75, 0.8))"
+            ></div>
         </div>
 
         <div class="relative z-10 mx-auto max-w-5xl px-4">
             <div
-                class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/80 to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-12"
+                class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
             >
                 <!-- Soft radial glows -->
-                <div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
-                <div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
-
-                <!-- Hover gold sweep -->
-                <!-- <div
-                    class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
-                ></div> -->
+                <div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#4c1d95]/25 blur-3xl"></div>
+                <div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[#f59e0b]/20 blur-3xl"></div>
 
                 <!-- Subtle pattern overlay -->
                 <div class="absolute inset-0 opacity-10 mix-blend-soft-light">
@@ -28,19 +26,19 @@
 
                 <div class="relative z-10 flex flex-col items-center">
                     <span
-                        class="mb-4 inline-flex items-center rounded-full bg-[var(--c-purple)]/40 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm"
+                        class="mb-4 inline-flex items-center rounded-full bg-[#4c1d95]/40 px-3 py-1 text-xs font-bold tracking-wider text-white/90 ring-1 ring-[#4c1d95]/40 backdrop-blur-sm"
                         >Consultation</span
                     >
 
-                    <h2 class="text-4xl font-black text-[var(--c-white)] drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
-                    <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-white)]/90 drop-shadow-md">
+                    <h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
+                    <p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
                         Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
                     </p>
 
                     <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                         <button
                             @click="goToBooking"
-                            class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
+                            class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
                         >
                             <span class="relative z-10">Réserver une Consultation</span>
                             <span
@@ -49,15 +47,13 @@
                         </button>
                         <button
                             @click="goToOffers"
-                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] backdrop-blur-sm transition-all hover:bg-[var(--c-purple)]"
+                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
                         >
                             Découvrir les Lectures
                         </button>
                     </div>
 
-                    <p class="mt-6 text-xs text-[var(--c-white)]/70 backdrop-blur-sm">
-                        Paiements sécurisés. Annulation possible 24h avant la session.
-                    </p>
+                    <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Paiements sécurisés. Annulation possible 24h avant la session.</p>
                 </div>
             </div>
         </div>
@@ -100,13 +96,4 @@ const goToOffers = () => router.visit('/tirage');
     transition-property: color, background-color, transform, opacity, box-shadow;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-/* Custom color variables */
-:root {
-    --c-purple: #4c1d95;
-    --c-deep-navy: #1e1b4b;
-    --c-white: #ffffff;
-    --c-gold: rgba(245, 158, 11, 0.9);
-    --card: #1e1b4b;
-}
 </style>
diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index 744a9da..e4337f6 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -71,7 +71,7 @@
                 >
                     <button
                         @click="goToShuffle"
-                        class="gold-button group relative mt-4 flex h-14 w-full 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:w-auto md:px-10"
+                        class="gold-button group relative mt-4 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-600 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:w-auto md:px-10"
                         :class="{ 'shadow-lg shadow-amber-500/40': buttonHover }"
                         @mouseenter="buttonHover = true"
                         @mouseleave="buttonHover = false"
diff --git a/resources/js/components/landing/ManuscritSection.vue b/resources/js/components/landing/ManuscritSection.vue
index c5c5b8c..44749fa 100644
--- a/resources/js/components/landing/ManuscritSection.vue
+++ b/resources/js/components/landing/ManuscritSection.vue
@@ -13,9 +13,9 @@
                     Plus Qu’un Guide,
                 </span>
                 <span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
-                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Un</span>
-                    <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110 hover:-rotate-2">Manuscrit</span>
-                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Stratégique</span>
+                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Un</span>
+                    <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscrit</span>
+                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Stratégique</span>
                 </span>
             </h2>
 
diff --git a/resources/js/components/landing/OfferSection.vue b/resources/js/components/landing/OfferSection.vue
index 17020bd..99d62f8 100644
--- a/resources/js/components/landing/OfferSection.vue
+++ b/resources/js/components/landing/OfferSection.vue
@@ -34,7 +34,7 @@
         <div class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
             <!-- Free Tier -->
             <div
-                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
+                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
             >
                 <!-- Animated border effect -->
                 <div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
@@ -91,7 +91,7 @@
                 </ul>
 
                 <button
-                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
+                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
                 >
                     <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
                     <svg
@@ -110,7 +110,7 @@
 
             <!-- Featured Tier -->
             <div
-                class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-purple)] to-purple-900 p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
+                class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[#4c1d95] to-[#371a70] p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
             >
                 <!-- Popular badge with animation -->
                 <div class="absolute top-4 right-4 z-10">
@@ -195,7 +195,7 @@
 
             <!-- Premium Tier -->
             <div
-                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
+                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
             >
                 <!-- Golden particles -->
                 <div
@@ -256,7 +256,7 @@
                 </ul>
 
                 <button
-                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
+                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
                 >
                     <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
                     <svg
@@ -276,7 +276,7 @@
     </section>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // Define features for each tier
 const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];
 
@@ -368,7 +368,6 @@ const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie',
     --c-purple: #4c1d95;
     --c-white: #ffffff;
     --c-gold: rgba(245, 158, 11, 0.5);
-    --card: #1e1b4b;
 }
 
 /* Smooth transitions for all elements */
diff --git a/resources/js/components/landing/TestimonialsSection.vue b/resources/js/components/landing/TestimonialsSection.vue
index 663146d..dcf6d6c 100644
--- a/resources/js/components/landing/TestimonialsSection.vue
+++ b/resources/js/components/landing/TestimonialsSection.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.10), rgba(76, 29, 149, 0.05));">
+    <section class="py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.1), rgba(76, 29, 149, 0.05))">
         <h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
             Ce Que Nos Initiés Disent
         </h2>
@@ -7,7 +7,7 @@
         <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
             <!-- Testimonial 1 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@@ -15,14 +15,14 @@
                 <div class="relative z-10">
                     <div class="mb-4 flex items-center gap-4">
                         <div
-                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
+                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                             style="
                                 background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">Sophie Dubois</p>
-                            <div class="flex text-[var(--c-gold)]">
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophie Dubois</p>
+                            <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
                                         d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@@ -60,22 +60,22 @@
 
             <!-- Testimonial 2 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
-                    class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+                    class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                 ></div>
                 <div class="relative z-10">
                     <div class="mb-4 flex items-center gap-4">
                         <div
-                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
+                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                             style="
                                 background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">Jean Martin</p>
-                            <div class="flex text-[var(--c-gold)]">
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Jean Martin</p>
+                            <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
                                         d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@@ -97,7 +97,7 @@
                                     ></path>
                                 </svg>
                                 <svg
-                                    class="h-5 w-5 transform text-[var(--c-purple)]/30 transition-all duration-300"
+                                    class="h-5 w-5 transform text-[#4c1d95]/30 transition-all duration-300"
                                     fill="currentColor"
                                     viewBox="0 0 256 256"
                                 >
@@ -116,7 +116,7 @@
 
             <!-- Testimonial 3 -->
             <div
-                class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
+                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
             >
                 <div
                     class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@@ -124,16 +124,14 @@
                 <div class="relative z-10">
                     <div class="mb-4 flex items-center gap-4">
                         <div
-                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
+                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                             style="
                                 background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">
-                                Isabelle Lefevre
-                            </p>
-                            <div class="flex text-[var(--c-gold)]">
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabelle Lefevre</p>
+                            <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
                                         d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@@ -202,7 +200,7 @@ export default {
 .testimonial-quote::before {
     content: '"';
     font-size: 2rem;
-    color: var(--c-gold);
+    color: #f59e0b;
     position: absolute;
     left: -0.5rem;
     top: -1rem;