|
|
|
@@ -3,17 +3,24 @@
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
|
|
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 ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
import { Award, ShieldCheck, Users } from "lucide-react";
|
|
|
|
import { Award, ShieldCheck, Users } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
|
|
|
const handleProductClick = () => {
|
|
|
|
|
|
|
|
const contactSection = document.getElementById('contact');
|
|
|
|
|
|
|
|
if (contactSection) {
|
|
|
|
|
|
|
|
contactSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ThemeProvider
|
|
|
|
<ThemeProvider
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
@@ -29,35 +36,37 @@ export default function LandingPage() {
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<ReactLenis root>
|
|
|
|
<ReactLenis root>
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<NavbarStyleCentered
|
|
|
|
<NavbarStyleFullscreen
|
|
|
|
navItems={[
|
|
|
|
navItems={[
|
|
|
|
{ name: "Accueil", id: "#hero" },
|
|
|
|
{ name: "Accueil", id: "#hero" },
|
|
|
|
{ name: "Produits", id: "#products" },
|
|
|
|
{ name: "Produits", id: "#products" },
|
|
|
|
{ name: "À Propos", id: "#about" },
|
|
|
|
{ name: "À Propos", id: "#about" },
|
|
|
|
{ name: "Contact", id: "#contact" },
|
|
|
|
{ name: "Contact", id: "#contact" },
|
|
|
|
|
|
|
|
{ name: "Mon Panier", id: "#cart" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
brandName="SAE Réunion"
|
|
|
|
brandName="SAE Réunion"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<HeroLogo
|
|
|
|
<HeroBillboard
|
|
|
|
logoText="#BIENÉQUIPÉ"
|
|
|
|
title="Expertise en EPI pour les Professionnels de la Réunion"
|
|
|
|
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."
|
|
|
|
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" }]}
|
|
|
|
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"
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df1ETXUvuyYPxkhnyZJKVSXGQj/chantier-1778660616866-4fd2157e.png"
|
|
|
|
imageAlt="Casque de chantier SAE"
|
|
|
|
imageAlt="Chantier de construction avec un professionnel en équipement de sécurité"
|
|
|
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
<AboutMetric
|
|
|
|
<AboutMetric
|
|
|
|
useInvertedBackground={true}
|
|
|
|
useInvertedBackground={true}
|
|
|
|
title="Le spécialiste de l'EPI depuis 1996"
|
|
|
|
title="30 ans au service de votre sécurité à La Réunion"
|
|
|
|
metrics={[
|
|
|
|
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: ShieldCheck, label: "Produits certifiés", value: "1000+" },
|
|
|
|
{ icon: Users, label: "Clients satisfaits", value: "5000+" },
|
|
|
|
{ icon: Users, label: "Clients satisfaits", value: "10000+" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
metricsAnimation="slide-up"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
@@ -71,16 +80,16 @@ export default function LandingPage() {
|
|
|
|
useInvertedBackground={false}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
tag="Certifié & Conforme"
|
|
|
|
tag="Certifié & Conforme"
|
|
|
|
products={[
|
|
|
|
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: "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" },
|
|
|
|
{ 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" },
|
|
|
|
{ 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" },
|
|
|
|
{ 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" },
|
|
|
|
{ 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" },
|
|
|
|
{ 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"
|
|
|
|
title="Gamme complète d'EPI"
|
|
|
|
description="Une sélection rigoureuse auprès des plus grands fabricants mondiaux."
|
|
|
|
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: "Découvrir tout le catalogue", href: "#catalog" }]}
|
|
|
|
buttons={[{ text: "Demander un devis personnalisé", href: "#contact" }]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -112,47 +121,44 @@ export default function LandingPage() {
|
|
|
|
{ id: "m3", value: "98%", description: "Taux de disponibilité" },
|
|
|
|
{ id: "m3", value: "98%", description: "Taux de disponibilité" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
title="Impact & Sécurité"
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
<TestimonialCardTwelve
|
|
|
|
<TestimonialCardOne
|
|
|
|
useInvertedBackground={true}
|
|
|
|
title="Ce que nos partenaires disent"
|
|
|
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
|
|
|
description="Retours d'expérience"
|
|
|
|
|
|
|
|
textboxLayout="default"
|
|
|
|
testimonials={[
|
|
|
|
testimonials={[
|
|
|
|
{ id: "t1", name: "Jean Dupont", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-size-man-working-construction_23-2150772851.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", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-special-industrial-protective-equipment_23-2148991969.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", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-engineer-talking-phone_23-2148233674.jpg" },
|
|
|
|
{ id: "t3", name: "Sophie Leroy", role: "Ingénieure", company: "BatirRéunion", rating: 5, 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" },
|
|
|
|
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
cardTitle="Ce que nos partenaires disent"
|
|
|
|
|
|
|
|
cardTag="Témoignages"
|
|
|
|
|
|
|
|
cardAnimation="slide-up"
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<ContactCenter
|
|
|
|
<ContactText
|
|
|
|
tag="Contact"
|
|
|
|
text="Obtenez votre devis personnalisé en 24h"
|
|
|
|
title="Besoin d'un devis ?"
|
|
|
|
animationType="reveal-blur"
|
|
|
|
description="Obtenez une réponse sous 24h pour vos besoins en sécurité."
|
|
|
|
|
|
|
|
background={{ variant: "gradient-bars" }}
|
|
|
|
background={{ variant: "gradient-bars" }}
|
|
|
|
useInvertedBackground={true}
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
|
|
|
buttons={[{ text: "Nous contacter" }]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<FooterLogoEmphasis
|
|
|
|
<FooterLogoReveal
|
|
|
|
logoText="SAE Réunion"
|
|
|
|
logoText="SAE Réunion"
|
|
|
|
columns={[
|
|
|
|
leftLink={{ text: "Mentions Légales" }}
|
|
|
|
{ items: [{ label: "Accueil", href: "#hero" }, { label: "Produits", href: "#products" }] },
|
|
|
|
rightLink={{ text: "Confidentialité" }}
|
|
|
|
{ items: [{ label: "À Propos", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
|
|
|
|
|
|
|
{ items: [{ label: "Mentions Légales" }, { label: "Confidentialité" }] },
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ReactLenis>
|
|
|
|
</ReactLenis>
|
|
|
|
</ThemeProvider>
|
|
|
|
</ThemeProvider>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
