Switch to version 4: modified src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import TextAbout from '@/components/sections/about/TextAbout';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Clock, Heart, MapPin, Palette, Phone, Star } from "lucide-react";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import { Clock, MapPin, Phone } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,22 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Accueil",
-          id: "hero",
-        },
-        {
-          name: "À Propos",
-          id: "about",
-        },
-        {
-          name: "Collection",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Accueil", id: "hero" },
+        { name: "À Propos", id: "about" },
+        { name: "Collection", id: "products" },
+        { name: "Contact", id: "contact" }
       ]}
       brandName="L'Art du Bonheur"
     />
@@ -56,306 +44,121 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="L'Art du Bonheur... dans une Boutique !"
       description="Découvrez une collection unique d'œuvres d'art sélectionnées avec amour au cœur de Sainte-Thérèse."
       testimonials={[
         {
-          name: "Marie L.",
-          handle: "@mariel",
-          testimonial: "Un lieu magique, chaque tableau raconte une histoire.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-looking-out-window_23-2149622867.jpg?_wi=1",
-          imageAlt: "art gallery interior minimalist",
-        },
-        {
-          name: "Jean P.",
-          handle: "@jeanp",
-          testimonial: "Des pièces uniques qui ont transformé mon intérieur.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-gorgeous-beautiful-brunette-young-woman-designer-typing-text-message-mobile-phone-shopping-online-ordering-paint-canvas-frame-people-art-creativity-technology-concept_273609-366.jpg?_wi=1",
-          imageAlt: "art gallery interior minimalist",
-        },
-        {
-          name: "Sophie C.",
-          handle: "@sophiec",
-          testimonial: "Accueil chaleureux et sélection artistique incroyable.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-with-plant-red-orange-leaves_209303-11.jpg?_wi=1",
-          imageAlt: "art gallery interior minimalist",
-        },
-        {
-          name: "Thomas G.",
-          handle: "@thomasg",
-          testimonial: "Une découverte magnifique, je reviendrai.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/tubes-brushes-around-abstract-painting_23-2147895447.jpg?_wi=1",
-          imageAlt: "art gallery interior minimalist",
-        },
-        {
-          name: "Claire M.",
-          handle: "@clairem",
-          testimonial: "Service impeccable et conseils avisés.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-paper-hanging-wall_24972-2395.jpg?_wi=1",
-          imageAlt: "art gallery interior minimalist",
-        },
+          name: "Marie L.",          handle: "@mariel",          testimonial: "Un lieu magique, chaque tableau raconte une histoire.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-looking-out-window_23-2149622867.jpg?_wi=1"
+        }
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-looking-out-window_23-2149622867.jpg?_wi=2"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/art-gallery-with-abstract-paintings_23-2151984818.jpg",
-          alt: "Client profile 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/artistic-easel-canvas-studio_23-2148372231.jpg",
-          alt: "Client profile 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/thoughtful-model-black-coat-walks-chairs-studio_8353-5479.jpg",
-          alt: "Client profile 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/minimalist-sculpture-empty-white-room_23-2151984829.jpg",
-          alt: "Client profile 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/female-artist-painting-studio_1303-11425.jpg",
-          alt: "Client profile 5",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Art Local",
-        },
-        {
-          type: "text",
-          text: "Design Unique",
-        },
-        {
-          type: "text",
-          text: "Sur Mesure",
-        },
-        {
-          type: "text",
-          text: "Expertise",
-        },
-        {
-          type: "text",
-          text: "Inspiration",
-        },
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <TextAbout
       useInvertedBackground={false}
-      title="Notre Vision"
-      metrics={[
-        {
-          icon: Palette,
-          label: "Années de passion",
-          value: "15+",
-        },
-        {
-          icon: Heart,
-          label: "Client(e)s heureux",
-          value: "500+",
-        },
-        {
-          icon: Star,
-          label: "Œuvres uniques",
-          value: "1000+",
-        },
-      ]}
-      metricsAnimation="slide-up"
+      title="Notre Vision : Partager l'émotion artistique"
+      tag="À Propos"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyOne
+      <FeatureCardThree
       useInvertedBackground={true}
       title="Une sélection pour chaque espace"
       description="Nous dénichons pour vous des œuvres qui apportent caractère et lumière à votre maison."
-      accordionItems={[
+      gridVariant="three-columns-all-equal-width"
+      animationType="slide-up"
+      textboxLayout="split"
+      features={[
         {
-          id: "f1",
-          title: "Conseils personnalisés",
-          content: "Nous vous accompagnons dans le choix de l'œuvre qui correspond à votre style.",
+          title: "Conseils personnalisés",          description: "Nous vous accompagnons dans le choix de l'œuvre qui correspond à votre style.",          imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-gorgeous-beautiful-brunette-young-woman-designer-typing-text-message-mobile-phone-shopping-online-ordering-paint-canvas-frame-people-art-creativity-technology-concept_273609-366.jpg?_wi=2"
         },
         {
-          id: "f2",
-          title: "Artistes locaux",
-          content: "Mise en avant du talent et de la créativité de nos artistes régionaux.",
+          title: "Artistes locaux",          description: "Mise en avant du talent et de la créativité de nos artistes régionaux.",          imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-with-plant-red-orange-leaves_209303-11.jpg?_wi=2"
         },
         {
-          id: "f3",
-          title: "Encadrement sur-mesure",
-          content: "Sublimez vos acquisitions avec nos services d'encadrement professionnel.",
-        },
+          title: "Encadrement sur-mesure",          description: "Sublimez vos acquisitions avec nos services d'encadrement professionnel.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-paper-hanging-wall_24972-2395.jpg?_wi=2"
+        }
       ]}
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/indoor-shot-gorgeous-beautiful-brunette-young-woman-designer-typing-text-message-mobile-phone-shopping-online-ordering-paint-canvas-frame-people-art-creativity-technology-concept_273609-366.jpg?_wi=2"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardThree
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Abstrait Zen",
-          price: "250$",
-          imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-with-plant-red-orange-leaves_209303-11.jpg?_wi=2",
-        },
-        {
-          id: "p2",
-          name: "Lumière du Matin",
-          price: "400$",
-          imageSrc: "http://img.b2bpic.net/free-photo/tubes-brushes-around-abstract-painting_23-2147895447.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          name: "Rythmes Urbains",
-          price: "350$",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-paper-hanging-wall_24972-2395.jpg?_wi=2",
-        },
-        {
-          id: "p4",
-          name: "Silence Volé",
-          price: "500$",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-woman-with-painting_23-2150655723.jpg",
-        },
-        {
-          id: "p5",
-          name: "Bleu Profond",
-          price: "280$",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646528.jpg",
-        },
-        {
-          id: "p6",
-          name: "Esprit Libre",
-          price: "320$",
-          imageSrc: "http://img.b2bpic.net/free-photo/wedding-rings-with-ornaments_23-2148098828.jpg",
-        },
-      ]}
       title="Dernières nouveautés"
       description="Explorez notre collection actuelle pour trouver votre coup de cœur."
+      products={[
+        {
+          id: "p1",          brand: "Artiste Local",          name: "Abstrait Zen",          price: "250$",          rating: 5,
+          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-with-plant-red-orange-leaves_209303-11.jpg?_wi=2"
+        },
+        {
+          id: "p2",          brand: "Artiste Local",          name: "Lumière du Matin",          price: "400$",          rating: 5,
+          reviewCount: "8",          imageSrc: "http://img.b2bpic.net/free-photo/tubes-brushes-around-abstract-painting_23-2147895447.jpg?_wi=2"
+        }
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardOne
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          icon: MapPin,
-          title: "Boutique",
-          value: "Ste-Thérèse",
-        },
-        {
-          id: "m2",
-          icon: Clock,
-          title: "Disponibilité",
-          value: "7/7",
-        },
-        {
-          id: "m3",
-          icon: Phone,
-          title: "Info",
-          value: "951-9416",
-        },
-      ]}
+      gridVariant="uniform-all-items-equal"
       title="Quelques chiffres clés"
       description="La confiance de nos clients fait notre force."
+      metrics={[
+        {
+          id: "m1",          icon: MapPin,
+          title: "Boutique",          value: "Ste-Thérèse",          description: "Situés au 5 Rue Blainville E"
+        },
+        {
+          id: "m2",          icon: Clock,
+          title: "Disponibilité",          value: "7/7",          description: "Ouvert de 10h à 18h en semaine, 11h à 17h le week-end"
+        },
+        {
+          id: "m3",          icon: Phone,
+          title: "Info",          value: "951-9416",          description: "Appelez-nous"
+        }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      <TestimonialCardTwelve
+      cardAnimation="slide-up"
       useInvertedBackground={false}
+      cardTitle="Témoignages"
+      cardTag="Clients"
       testimonials={[
         {
-          id: "1",
-          name: "Julie",
-          role: "Décoratrice",
-          company: "DesignCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-shop-seller-helping-woman-try-new-dress-tying-waistband-customer-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11698.jpg",
-        },
-        {
-          id: "2",
-          name: "Marc",
-          role: "Architecte",
-          company: "Studio",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/curly-haired-blonde-woman-painting-home_23-2148982200.jpg",
-        },
-        {
-          id: "3",
-          name: "Chloé",
-          role: "Cliente",
-          company: "Habitation",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-couple-choosing-place-picture-frame-living-room-home_23-2148060097.jpg",
-        },
-        {
-          id: "4",
-          name: "Thomas",
-          role: "Collectionneur",
-          company: "ArtLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-painting_23-2148483101.jpg",
-        },
-        {
-          id: "5",
-          name: "Claire",
-          role: "Artiste",
-          company: "Créations",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-painting_23-2149050493.jpg",
-        },
+          id: "testimonial-1",          name: "Julie Déco",          imageSrc: "http://img.b2bpic.net/free-photo/female-shop-seller-helping-woman-try-new-dress-tying-waistband-customer-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11698.jpg"
+        }
       ]}
-      title="Ce que disent nos clients"
-      description="L'expérience L'Art du Bonheur au travers de nos visiteurs."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqBase
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
         {
-          id: "q1",
-          title: "Livrez-vous ?",
-          content: "Oui, nous proposons une livraison soignée dans toute la région.",
+          id: "faq-q1",          title: "Livrez-vous ?",          content: "Oui, nous proposons une livraison soignée dans toute la région."
         },
         {
-          id: "q2",
-          title: "Puis-je commander sur mesure ?",
-          content: "Tout à fait, contactez-nous pour toute demande spéciale.",
-        },
-        {
-          id: "q3",
-          title: "Quels sont les horaires ?",
-          content: "Nous sommes ravis de vous accueillir sur rendez-vous ou aux horaires d'ouverture affichés.",
-        },
+          id: "faq-q2",          title: "Puis-je commander sur mesure ?",          content: "Tout à fait, contactez-nous pour toute demande spéciale."
+        }
       ]}
       title="Des questions ?"
       description="Tout ce que vous devez savoir pour vos achats."
@@ -364,56 +167,32 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Newsletter"
+      <ContactSplitForm
       title="Restez en contact"
-      description="Inscrivez-vous pour découvrir nos nouvelles œuvres et événements en avant-première."
+      description="Nos heures d'ouverture : Lun-Ven 10h-18h | Sam-Dim 11h-17h. Inscrivez-vous pour nos nouveautés."
+      inputs={[
+        { name: "nom", type: "text", placeholder: "Votre nom" },
+        { name: "email", type: "email", placeholder: "Votre email" }
+      ]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterBaseCard
+      logoText="L'Art du Bonheur"
       columns={[
         {
-          title: "L'Art du Bonheur",
-          items: [
-            {
-              label: "5 Rue Blainville E, Sainte-Thérèse",
-              href: "#",
-            },
-            {
-              label: "(450) 951-9416",
-              href: "tel:4509519416",
-            },
-          ],
-        },
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Accueil",
-              href: "#hero",
-            },
-            {
-              label: "À Propos",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
+          title: "Contact",          items: [
+            { label: "5 Rue Blainville E, Sainte-Thérèse", href: "#" },
+            { label: "Lun-Ven 10h-18h | Sam-Dim 11h-17h", href: "#" },
+            { label: "(450) 951-9416", href: "tel-4509519416" }
+          ]
+        }
       ]}
-      bottomLeftText="© 2024 L'Art du Bonheur"
-      bottomRightText="Tous droits réservés"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #fbfbfb;
+  --card: #f2f2f2;
+  --foreground: #1a1a1a;
+  --primary-cta: #7a6e5a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #e8e4db;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #b8afa0;
+  --background-accent: #efebe5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);