Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -32,14 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Services", id: "features" },
-          name: "Services",          id: "features"},
+        { name: "About", id: "about" },
-        {
+        { name: "Testimonials", id: "testimonials" },
-          name: "About",          id: "about"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Testimonials",          id: "testimonials"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="CMJ Esthétique Auto"
     />
@@ -47,16 +43,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       title="Redéfinissez la Beauté de Votre Véhicule"
       description="Services d'esthétique automobile haut de gamme pour une brillance absolue et une protection durable. Faites confiance à l'expertise de CMJ Esthétique Auto."
-      buttons={[
+      buttons={[{ text: "Réserver Maintenant", href: "#contact" }]}
-        {
+      imageSrc="https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/hero-car-detailing.jpg"
-          text: "Réserver Maintenant",          href: "#contact"},
+      imageAlt="Services d'esthétique automobile haut de gamme"
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/young-handsome-man-choosing-car-car-showroom_1303-20435.jpg"
-      imageAlt="Luxury car detailing services"
     />
   </div>
 
@@ -64,15 +56,10 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
+        { type: "text", content: "Passionné par la perfection automobile." },
-          type: "text",          content: "Passionné par la perfection automobile."},
+        { type: "image", src: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/about-detailer.jpg", alt: "Expert en detailing" },
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22305.jpg",          alt: "About detailing"},
-      ]}
-      buttons={[
-        {
-          text: "En savoir plus",          href: "#contact"},
       ]}
+      buttons={[{ text: "En savoir plus", href: "#contact" }]}
     />
   </div>
 
@@ -84,11 +71,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Polissage Avancé",          description: "Élimination des rayures et tourbillons pour un fini miroir parfait.",          imageSrc: "http://img.b2bpic.net/free-photo/auto-service-salon-doign-car-wrapping_23-2149593856.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/front-view-clear-liquid-drops-leaf-surface_23-2148635078.jpg",          buttonText: "Découvrir"},
+          title: "Polissage Avancé",          description: "Élimination des rayures et tourbillons pour un fini miroir parfait.",          imageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/polissage-avance.jpg",          titleImageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/polishing-icon.jpg",          buttonText: "Découvrir"
+        },
         {
-          title: "Nettoyage Intérieur",          description: "Nettoyage en profondeur de vos cuirs, tissus et tapis pour un habitacle sain.",          imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934324.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/still-life-cleaning-tools_23-2150552293.jpg",          buttonText: "Découvrir"},
+          title: "Nettoyage Intérieur",          description: "Nettoyage en profondeur de vos cuirs, tissus et tapis pour un habitacle sain.",          imageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/nettoyage-interieur.jpg",          titleImageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/cleaning-icon.jpg",          buttonText: "Découvrir"
+        },
         {
-          title: "Céramique de Protection",          description: "Protection durable contre les contaminants et intempéries.",          imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-26065.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193558.jpg",          buttonText: "Découvrir"},
+          title: "Céramique de Protection",          description: "Protection durable contre les contaminants et intempéries.",          imageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/ceramique-protection.jpg",          titleImageSrc: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/ceramic-icon.jpg",          buttonText: "Découvrir"
+        },
       ]}
       title="Nos Services Experts"
       description="Une gamme complète de soins pour votre véhicule."
@@ -101,15 +91,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", icon: CheckCircle, title: "Véhicules Traités", value: "500+" },
-          id: "m1",          icon: CheckCircle,
+        { id: "m2", icon: Award, title: "Clients Satisfaits", value: "100%" },
-          title: "Véhicules Traités",          value: "500+"},
+        { id: "m3", icon: Sparkles, title: "Années d'Expérience", value: "10+" },
-        {
-          id: "m2",          icon: Award,
-          title: "Clients Satisfaits",          value: "100%"},
-        {
-          id: "m3",          icon: Sparkles,
-          title: "Années d'Expérience",          value: "10+"},
       ]}
       title="L'Expertise en Chiffres"
       description="Des résultats qui parlent d'eux-mêmes."
@@ -120,10 +104,9 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
+      names={["Gyeon Certified", "Koch-Chemie Partner", "Swissvax Official"]}
-        "Partenaire A",        "Partenaire B",        "Partenaire C",        "Partenaire D",        "Partenaire E",        "Partenaire F",        "Partenaire G"]}
       title="Nos Partenaires de Confiance"
-      description="Reconnus dans le secteur automobile."
+      description="Utilisation de produits de qualité professionnelle certifiée."
     />
   </div>
 
@@ -134,16 +117,8 @@ export default function LandingPage() {
       rating={5}
       author="Jean D."
       avatars={[
-        {
+        { src: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/client1.jpg", alt: "Jean D." },
-          src: "http://img.b2bpic.net/free-photo/man-hugging-car-car-showroom_1303-15203.jpg",          alt: "Customer 1"},
+        { src: "https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/client2.jpg", alt: "Marie L." },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212217.jpg",          alt: "Customer 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/pretty-woman-taking-photo-by-car_1303-15168.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580607.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/expert-informs-woman-car-motor-costs_482257-96392.jpg",          alt: "Customer 5"},
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="blur-reveal"
@@ -155,14 +130,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "q1", title: "Combien de temps prend un nettoyage?", content: "Cela dépend du niveau de prestation, généralement de 4 à 8 heures." },
-          id: "q1",          title: "Combien de temps prend un nettoyage?",          content: "Cela dépend du niveau de prestation, généralement de 4 à 8 heures."},
+        { id: "q2", title: "Est-ce sur rendez-vous?", content: "Oui, nous travaillons exclusivement sur rendez-vous pour assurer une qualité optimale." },
-        {
+        { id: "q3", title: "Quels produits utilisez-vous?", content: "Nous n'utilisons que des produits professionnels certifiés et respectueux des matériaux." },
-          id: "q2",          title: "Est-ce sur rendez-vous?",          content: "Oui, nous travaillons exclusivement sur rendez-vous pour assurer une qualité optimale."},
-        {
-          id: "q3",          title: "Quels produits utilisez-vous?",          content: "Nous n'utilisons que des produits professionnels certifiés et respectueux des matériaux."},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193621.jpg"
+      imageSrc="https://cmjesthetiqueauto.com/wp-content/uploads/2024/05/faq-process.jpg"
       mediaAnimation="slide-up"
       title="Questions Fréquentes"
       description="Tout ce que vous devez savoir."
@@ -173,15 +145,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain"}}
       tag="Contact"
       title="Prêt pour une Brillance Ultime?"
       description="Contactez-nous pour réserver votre créneau ou obtenir un devis personnalisé."
-      buttons={[
+      buttons={[{ text: "Contactez-nous", href: "mailto:info@cmjesthetiqueauto.com" }]}
-        {
-          text: "Contactez-nous",          href: "mailto:info@cmjesthetiqueauto.com"},
-      ]}
     />
   </div>
 
@@ -191,18 +159,14 @@ export default function LandingPage() {
       columns={[
         {
           title: "Navigation",          items: [
-            {
+            { label: "Services", href: "#features" },
-              label: "Services",              href: "#features"},
+            { label: "À propos", href: "#about" },
-            {
-              label: "À propos",              href: "#about"},
           ],
         },
         {
           title: "Légal",          items: [
-            {
+            { label: "Mentions Légales", href: "#" },
-              label: "Mentions Légales",              href: "#"},
+            { label: "Confidentialité", href: "#" },
-            {
-              label: "Confidentialité",              href: "#"},
           ],
         },
       ]}
@@ -212,4 +176,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f9f9f9;
-  --foreground: #1c1c1c;
+  --foreground: #000612e6;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #15479c;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
+  --accent: #e2e2e2;
-  --background-accent: #a8cce8;
+  --background-accent: #15479c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);