Update src/app/page.tsx

Merge version_32 into main

src/app/page.tsx

@@ -6,14 +6,21 @@ import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 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 { Award, ShieldCheck, Users } from "lucide-react";
+import { Award, ShieldCheck, Users, Search, ShoppingCart } 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 +36,38 @@ 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="Un chantier sécurisé commence par un bon casque. Leader de l’équipement de protection individuelle à La Réunion depuis 1996."
-            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"
+          <HeroBillboard
+            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="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df1ETXUvuyYPxkhnyZJKVSXGQj/chantier-1778660616866-4fd2157e.png"
+            imageAlt="Chantier de construction avec un professionnel en équipement de sécurité"
+            background={{ variant: "plain" }}
           />
         </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 +79,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>
 
@@ -111,7 +122,7 @@ 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>
 
@@ -134,8 +145,8 @@ export default function LandingPage() {
         <div id="contact" data-section="contact">
           <ContactCenter
             tag="Contact"
-            title="Besoin d'un devis ?"
-            description="Rejoignez notre réseau de professionnels équipés pour la sécurité."
+            title="Obtenez votre devis personnalisé en 24h"
+            description="Nous nous engageons à traiter vos demandes rapidement pour assurer votre sécurité."
             background={{ variant: "gradient-bars" }}
             useInvertedBackground={true}
           />

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);