Update src/app/page.tsx

Merge version_39 into main

src/app/page.tsx

@@ -3,17 +3,25 @@
 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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import { Award, ShieldCheck, Users } from "lucide-react";
 
 export default function LandingPage() {
+  const handleProductClick = () => {
+    const contactSection = document.getElementById('contact');
+    if (contactSection) {
+      contactSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -29,35 +37,51 @@ export default function LandingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleCentered
+          <NavbarStyleFullscreen
             navItems={[
               { name: "Accueil", id: "#hero" },
               { name: "Produits", id: "#products" },
               { name: "À Propos", id: "#about" },
               { name: "Contact", id: "#contact" },
+              { name: "Mon Panier", id: "#cart" },
             ]}
             brandName="SAE Réunion"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroLogo
-            logoText="#BIENÉQUIPÉ"
-            description="Garantissez la sécurité immédiate de vos équipes sur le terrain. Nos solutions d'EPI certifiées protègent vos collaborateurs et assurent la conformité totale de vos chantiers, pour une tranquillité d'esprit absolue du chef de projet au foreman."
+          <HeroBillboardCarousel
+            title="Expertise en EPI pour les Professionnels de la Réunion"
+            description="Bénéficiez de notre expertise locale unique et de nos délais de livraison ultra-rapides. Contrairement aux fournisseurs généralistes, nous garantissons une disponibilité immédiate et un accompagnement technique de proximité pour sécuriser vos chantiers réunionnais sans attente."
             buttons={[{ text: "Obtenir un devis rapide", href: "#contact" }]}
-            imageSrc="http://img.b2bpic.net/free-photo/front-view-hard-hat-headphones-hanging-closet_23-2148773503.jpg"
-            imageAlt="Casque de chantier SAE"
+            mediaItems={[
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df1ETXUvuyYPxkhnyZJKVSXGQj/chantier-1778660616866-4fd2157e.png?_wi=1", imageAlt: "Chantier de construction" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/warehouse-worker-checking-inventory_23-2152001550.jpg?_wi=1", imageAlt: "Entrepôt logistique" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/industrial-safety-equipment_23-2148784084.jpg", imageAlt: "Équipements de protection" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/worker-wearing-protective-gear_23-2148921397.jpg", imageAlt: "Professionnel équipé" }
+            ]}
+            background={{ variant: "plain" }}
+          />
+        </div>
+
+        <div id="socialProof" data-section="socialProof">
+          <SocialProofOne
+            title="Ils nous font confiance"
+            names={["BTP 974", "SecurPro", "BatirRéunion", "Réunion Construction", "EPI Pro Réunion", "SécuriChantier"]}
+            description="Nos partenaires de confiance"
+            textboxLayout="default"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="about" data-section="about">
           <AboutMetric
             useInvertedBackground={true}
-            title="Le spécialiste de l'EPI depuis 1996"
+            title="30 ans au service de votre sécurité à La Réunion"
             metrics={[
-              { icon: Award, label: "Années d'expertise", value: "28+" },
+              { icon: Award, label: "Années d'expertise", value: "30+" },
               { icon: ShieldCheck, label: "Produits certifiés", value: "1000+" },
-              { icon: Users, label: "Clients satisfaits", value: "5000+" },
+              { icon: Users, label: "Clients satisfaits", value: "10000+" },
             ]}
             metricsAnimation="slide-up"
           />
@@ -69,17 +93,18 @@ export default function LandingPage() {
             textboxLayout="split"
             gridVariant="one-large-left-three-stacked-right"
             useInvertedBackground={false}
+            tag="Certifié & Conforme"
             products={[
-              { id: "p1", name: "Gants de Manutention", price: "12€", imageSrc: "http://img.b2bpic.net/free-photo/top-view-safety-gloves-vest_23-2148784084.jpg" },
-              { id: "p2", name: "Chaussures de Sécurité", price: "89€", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-manual-worker-typing-shoelace-construction-site_637285-8190.jpg" },
-              { id: "p3", name: "Lunettes de Protection", price: "15€", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-protection-equipment-close-up_23-2148921397.jpg" },
-              { id: "p4", name: "Vêtements Haute Visibilité", price: "45€", imageSrc: "http://img.b2bpic.net/free-photo/engineer-oversees-assembly-tools-tablet-industry-plant-surrounded-by-metal-steel-machinery_482257-135546.jpg" },
-              { id: "p5", name: "Protection Respiratoire", price: "29€", imageSrc: "http://img.b2bpic.net/free-photo/man-with-gas-mask_1122-1288.jpg" },
-              { id: "p6", name: "Casque Anti-bruit", price: "35€", imageSrc: "http://img.b2bpic.net/free-photo/man-builder-carpenter-polishes-wooden-board-with-random-orbit-sander_23-2147944854.jpg" },
+              { id: "p1", name: "Gants de Manutention", price: "12€", imageSrc: "http://img.b2bpic.net/free-photo/top-view-safety-gloves-vest_23-2148784084.jpg", onProductClick: handleProductClick },
+              { id: "p2", name: "Chaussures de Sécurité", price: "89€", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-manual-worker-typing-shoelace-construction-site_637285-8190.jpg", onProductClick: handleProductClick },
+              { id: "p3", name: "Lunettes de Protection", price: "15€", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-protection-equipment-close-up_23-2148921397.jpg", onProductClick: handleProductClick },
+              { id: "p4", name: "Vêtements Haute Visibilité", price: "45€", imageSrc: "http://img.b2bpic.net/free-photo/engineer-oversees-assembly-tools-tablet-industry-plant-surrounded-by-metal-steel-machinery_482257-135546.jpg", onProductClick: handleProductClick },
+              { id: "p5", name: "Protection Respiratoire", price: "29€", imageSrc: "http://img.b2bpic.net/free-photo/man-with-gas-mask_1122-1288.jpg", onProductClick: handleProductClick },
+              { id: "p6", name: "Casque Anti-bruit", price: "35€", imageSrc: "http://img.b2bpic.net/free-photo/man-builder-carpenter-polishes-wooden-board-with-random-orbit-sander_23-2147944854.jpg", onProductClick: handleProductClick },
             ]}
             title="Gamme complète d'EPI"
-            description="Une sélection rigoureuse auprès des plus grands fabricants mondiaux."
-            buttons={[{ text: "Découvrir tout le catalogue", href: "#catalog" }]}
+            description="Nos équipements sont rigoureusement sélectionnés pour offrir une protection maximale aux professionnels du bâtiment, résistant aux conditions les plus exigeantes sur le terrain pour garantir une sécurité sans compromis."
+            buttons={[{ text: "Demander un devis personnalisé", href: "#contact" }]}
           />
         </div>
 
@@ -90,7 +115,7 @@ export default function LandingPage() {
             gridVariant="three-columns-all-equal-width"
             useInvertedBackground={true}
             features={[
-              { title: "Expertise Locale", description: "Connaissance approfondie des contraintes du marché local réunionnais.", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-worker-checking-inventory_23-2152001550.jpg" },
+              { title: "Expertise Locale", description: "Connaissance approfondie des contraintes du marché local réunionnais.", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-worker-checking-inventory_23-2152001550.jpg?_wi=2" },
               { title: "Normes Strictes", description: "Tous nos EPI répondent aux dernières normes européennes de sécurité.", imageSrc: "http://img.b2bpic.net/free-photo/manual-worker-with-face-mask-working-carpentry-warehouse-coronavirus-pandemic_637285-11777.jpg" },
               { title: "Stock Permanent", description: "Un large choix disponible immédiatement pour vos chantiers.", imageSrc: "http://img.b2bpic.net/free-photo/engineers-industry-40-industrial-plant-controlling-automated-machinery_482257-120564.jpg" },
             ]}
@@ -111,44 +136,45 @@ export default function LandingPage() {
               { id: "m3", value: "98%", description: "Taux de disponibilité" },
             ]}
             title="Impact & Sécurité"
-            description="Des chiffres qui témoignent de notre engagement quotidien."
+            description="Fiabilité et réactivité : nos indicateurs clés de performance garantissent votre sérénité au quotidien"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardTwelve
-            useInvertedBackground={true}
+          <TestimonialCardOne
+            title="Ce que nos partenaires disent"
+            animationType="blur-reveal"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            description="Retours d'expérience"
+            textboxLayout="default"
             testimonials={[
-              { id: "t1", name: "Jean Dupont", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-size-man-working-construction_23-2150772851.jpg" },
-              { id: "t2", name: "Marc Martin", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-special-industrial-protective-equipment_23-2148991969.jpg" },
-              { id: "t3", name: "Sophie Leroy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-engineer-talking-phone_23-2148233674.jpg" },
-              { id: "t4", name: "Lucie Bernard", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-with-arms-crossed-standing-factory_107420-96042.jpg" },
-              { id: "t5", name: "Pierre Vidal", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-young-man-with-helmet_23-2148269289.jpg" },
+              { id: "t1", name: "Jean Dupont", role: "Chef de chantier", company: "BTP 974", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-size-man-working-construction_23-2150772851.jpg" },
+              { id: "t2", name: "Marc Martin", role: "Responsable Sécurité", company: "SecurPro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-special-industrial-protective-equipment_23-2148991969.jpg" },
+              { id: "t3", name: "Sophie Leroy", role: "Ingénieure", company: "BatirRéunion", rating: 5, imageSrc: "http://close-up-portrait-engineer-talking-phone_23-2148233674.jpg" },
             ]}
-            cardTitle="Ce que nos partenaires disent"
-            cardTag="Témoignages"
-            cardAnimation="slide-up"
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactCenter
-            tag="Contact"
-            title="Besoin d'un devis ?"
-            description="Obtenez une réponse sous 24h pour vos besoins en sécurité."
-            background={{ variant: "gradient-bars" }}
-            useInvertedBackground={true}
+          <ContactSplitForm
+            title="Nous contacter"
+            description="Envoyez-nous vos besoins, nous y répondrons sous 24h."
+            inputs={[
+                { name: "name", type: "text", placeholder: "Votre Nom" },
+                { name: "email", type: "email", placeholder: "Votre Email" },
+                { name: "title", type: "text", placeholder: "Votre Job / Taille Entreprise" }
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df1ETXUvuyYPxkhnyZJKVSXGQj/chantier-1778660616866-4fd2157e.png?_wi=2"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterLogoEmphasis
+          <FooterLogoReveal
             logoText="SAE Réunion"
-            columns={[
-              { items: [{ label: "Accueil", href: "#hero" }, { label: "Produits", href: "#products" }] },
-              { items: [{ label: "À Propos", href: "#about" }, { label: "Contact", href: "#contact" }] },
-              { items: [{ label: "Mentions Légales" }, { label: "Confidentialité" }] },
-            ]}
+            leftLink={{ text: "Mentions Légales" }}
+            rightLink={{ text: "Confidentialité" }}
           />
         </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #FFFFFF;
-  --card: #F5F5F5;
-  --foreground: #1A1A1A;
-  --primary-cta: #E30613;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #1A1A1A;
-  --secondary-cta-text: #001122;
-  --accent: #E30613;
-  --background-accent: #FFF0F0;
+  --background: #fffafa;
+  --card: #fff7f7;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);