Update src/app/page.tsx

Merge version_8 into main

src/app/page.tsx

@@ -2,446 +2,135 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="background-highlight"
-        borderRadius="pill"
-        contentWidth="medium"
-        sizing="mediumSizeLargeTitles"
-        background="none"
-        cardStyle="inset"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Accueil",
-          id: "hero",
-        },
-        {
-          name: "Produits",
-          id: "products",
-        },
-        {
-          name: "Mon Compte",
-          id: "contact",
-        },
-      ]}
-      brandName="LuxeLeather"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Accueil", id: "hero" },
+              { name: "Produits", id: "products" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="LuxeLeather"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitDoubleCarousel
-      background={{
-        variant: "plain",
-      }}
-      title="L'Essence du Cuir"
-      description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
-      leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=1",
-          imageAlt: "Mode Luxe",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-adult-caucasian-woman-blonde-black-pajamas-sits-light-room-with-place-text-weekend-enjoyment-concept_197531-31166.jpg?_wi=1",
-          imageAlt: "Détails artisanaux",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317768.jpg",
-          imageAlt: "Cuir de qualité",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12271.jpg",
-          imageAlt: "Savoir-faire",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722595.jpg",
-          imageAlt: "Texture",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/men-s-fashion-wallpaper-wooden-background-leather-shoes-with-polishing-tools_53876-145655.jpg",
-          imageAlt: "Balghas",
-        },
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-studio-fashion-portrait_1328-2194.jpg",
-          imageAlt: "Style minimaliste",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg",
-          imageAlt: "Détails",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/fairskinned-adult-blonde-woman-black-pajamas-sits-indoors-white-background-relaxation-concept_197531-31168.jpg",
-          imageAlt: "Artisanat",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-liquid-metal-with-copy-space_23-2148253612.jpg",
-          imageAlt: "Élégance",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-business-suit-sitting-chair_1303-17687.jpg",
-          imageAlt: "Luxe",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830393.jpg",
-          imageAlt: "Cuir",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Découvrir",
-          href: "#products",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/young-man-portrait-with-flowers_23-2148830425.jpg",
-          alt: "Portrait 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-asian-woman-posing-autumn-clothes_23-2149071347.jpg",
-          alt: "Portrait 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317767.jpg",
-          alt: "Portrait 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-minimalist-shirt_23-2149317769.jpg",
-          alt: "Portrait 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/elegant-woman-black-hat-spring-forest_1157-35552.jpg",
-          alt: "Portrait 5",
-        },
-      ]}
-      avatarText="Rejoignez notre communauté"
-      marqueeItems={[
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/textile-background_93675-132434.jpg",
-          alt: "Texture 1",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/black-patterned-texture_1194-7015.jpg",
-          alt: "Texture 2",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1257.jpg",
-          alt: "Texture 3",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/fabric-texture-background_1388-107.jpg",
-          alt: "Texture 4",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/top-view-close-up-vinyl-texture_23-2149075975.jpg",
-          alt: "Texture 5",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
+            title="L'Essence du Cuir"
+            description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
+            background={{ variant: "plain" }}
+            kpis={[
+              { value: "15+", label: "Années d'Expérience" },
+              { value: "500+", label: "Créations Uniques" },
+              { value: "99%", label: "Clients Satisfaits" }
+            ]}
+            enableKpiAnimation={true}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Un Héritage Moderne"
-      description={[
-        "Nous fusionnons tradition artisanale et design contemporain.",
-        "Nos pièces en cuir sont conçues pour durer et raconter une histoire.",
-      ]}
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardTwo
+            title="Nos Créations"
+            description="Une sélection exclusive de maroquinerie haut de gamme."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", brand: "LuxeLeather", name: "Sac Iconique", price: "450€", rating: 5, reviewCount: "24 avis", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1" },
+              { id: "p2", brand: "LuxeLeather", name: "Balghas Tradition", price: "120€", rating: 4, reviewCount: "18 avis", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="one-large-left-three-stacked-right"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Sac en Cuir Iconique",
-          price: "450€",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Balghas Traditionnels",
-          price: "120€",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg",
-        },
-        {
-          id: "p3",
-          name: "Petit Sac à Main",
-          price: "290€",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-brown-leather-bag-close-up-shot-businessman-suit-holding-his-bag-metro-train_549566-2.jpg",
-        },
-        {
-          id: "p4",
-          name: "Veste en Cuir",
-          price: "890€",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24561.jpg",
-        },
-        {
-          id: "p5",
-          name: "Sacoche Luxe",
-          price: "350€",
-          imageSrc: "http://img.b2bpic.net/free-photo/bag-hanging-from-furniture-item-indoors_23-2151073523.jpg",
-        },
-        {
-          id: "p6",
-          name: "Accessoires Cuir",
-          price: "95€",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-covid-party-with-masks_23-2149299867.jpg",
-        },
-      ]}
-      title="Nos Créations"
-      description="Sélection exclusive de vêtements, sacs et balghas."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardThree
+            title="Nos Forfaits"
+            description="Choisissez l'option qui correspond à vos besoins."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "std", badge: "Populaire", price: "0€", name: "Standard", features: ["Livraison standard", "Suivi inclus"], buttons: [{ text: "Choisir" }] },
+              { id: "exp", price: "15€", name: "Express", features: ["Livraison 24h", "Emballage cadeau"], buttons: [{ text: "Choisir" }] }
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Cuir Premium",
-          description: "Sélection rigoureuse des meilleures peaux.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=1",
-        },
-        {
-          title: "Fait à la main",
-          description: "Un savoir-faire ancestral préservé.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1626.jpg",
-        },
-        {
-          title: "Design Durable",
-          description: "Une mode qui traverse le temps.",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-sensual-woman-black-leather-jacket-stylish-sunglasses-posing-rocks_273443-5237.jpg",
-        },
-      ]}
-      title="Pourquoi Choisir LuxeLeather"
-      description="L'excellence à chaque étape de création."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardFive
+            title="Notre Équipe"
+            description="Les mains expertes derrière nos créations."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            team={[
+              { id: "1", name: "Marie L.", role: "Artisane Maroquinière", imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg" },
+              { id: "2", name: "Jean D.", role: "Maître Artisan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "std",
-          price: "Gratuit",
-          name: "Standard",
-          features: [
-            "3-5 jours ouvrés",
-            "Suivi inclus",
-          ],
-          buttons: [
-            {
-              text: "Sélectionner",
-            },
-          ],
-        },
-        {
-          id: "exp",
-          price: "15€",
-          name: "Express",
-          features: [
-            "24-48h",
-            "Emballage cadeau",
-          ],
-          buttons: [
-            {
-              text: "Sélectionner",
-            },
-          ],
-        },
-      ]}
-      title="Services de Livraison"
-      description="Des options pensées pour votre confort."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            title="Témoignages"
+            description="Ce que nos clients disent de nous."
+            showRating={true}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Amira S.", handle: "@amira_s", testimonial: "Une qualité exceptionnelle, mes balghas sont parfaits.", rating: 5 },
+              { id: "2", name: "Julien M.", handle: "@julien_m", testimonial: "Le sac est encore plus beau en vrai.", rating: 5 }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Amira S.",
-          date: "12/03",
-          title: "Excellence",
-          quote: "Une qualité exceptionnelle, mes balghas sont parfaits.",
-          tag: "Luxe",
-          avatarSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=2",
-          imageAlt: "elegant customer portrait studio",
-        },
-        {
-          id: "2",
-          name: "Julien M.",
-          date: "10/02",
-          title: "Ravi",
-          quote: "Le sac est encore plus beau en vrai.",
-          tag: "Style",
-          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-adult-caucasian-woman-blonde-black-pajamas-sits-light-room-with-place-text-weekend-enjoyment-concept_197531-31166.jpg?_wi=2",
-          imageAlt: "elegant customer portrait studio",
-        },
-        {
-          id: "3",
-          name: "Sarah L.",
-          date: "05/01",
-          title: "Service",
-          quote: "Livraison très rapide et emballage soigné.",
-          tag: "Service",
-          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-taking-break-after-shopping_23-2148660680.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-fashion-designer_23-2151537690.jpg",
-          imageAlt: "elegant customer portrait studio",
-        },
-        {
-          id: "4",
-          name: "Karim B.",
-          date: "20/12",
-          title: "Confort",
-          quote: "La texture du cuir est incroyable.",
-          tag: "Confort",
-          avatarSrc: "http://img.b2bpic.net/free-photo/adult-friends-shopping-clothes-together_23-2148385700.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=2",
-          imageAlt: "elegant customer portrait studio",
-        },
-        {
-          id: "5",
-          name: "Elena R.",
-          date: "15/11",
-          title: "Superbe",
-          quote: "Un incontournable de ma garde-robe.",
-          tag: "Mode",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=2",
-          imageAlt: "elegant customer portrait studio",
-        },
-      ]}
-      title="Ce que disent nos clients"
-      description="L'expérience du luxe au quotidien."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Contactez-nous"
+            description="Vous avez une question sur une commande ?"
+            useInvertedBackground={false}
+            inputs={[
+              { name: "nom", type: "text", placeholder: "Votre nom", required: true },
+              { name: "email", type: "email", placeholder: "Votre email", required: true }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "1",
-          title: "Comment entretenir le cuir ?",
-          content: "Utilisez un baume spécial cuir une fois par mois.",
-        },
-        {
-          id: "2",
-          title: "Les retours sont-ils gratuits ?",
-          content: "Oui, sous 14 jours après réception.",
-        },
-        {
-          id: "3",
-          title: "Puis-je suivre ma commande ?",
-          content: "Un lien de suivi est envoyé par email.",
-        },
-      ]}
-      title="Questions Fréquentes"
-      description="Tout savoir sur nos services."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Besoin d'une assistance personnalisée pour votre commande ?"
-      buttons={[
-        {
-          text: "Contactez-nous",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Accueil",
-              href: "#hero",
-            },
-            {
-              label: "Produits",
-              href: "#products",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "CGU",
-              href: "#",
-            },
-            {
-              label: "Confidentialité",
-              href: "#",
-            },
-            {
-              label: "Mentions Légales",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="LuxeLeather"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "Produits", href: "#products" }] },
+              { title: "Légal", items: [{ label: "Mentions Légales", href: "#" }, { label: "CGU", href: "#" }] }
+            ]}
+            bottomLeftText="© 2025 LuxeLeather"
+            bottomRightText="Tous droits réservés"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #f5f4ef;
+  --card: #ecebea;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
+  --primary-cta-text: #f5f4ef;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #2a2928;
+  --accent: #c6b180;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);