|
|
|
|
@@ -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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
|
|
|
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,47 @@ export default function LandingPage() {
|
|
|
|
|
>
|
|
|
|
|
<ReactLenis root>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleCentered
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Accueil", id: "#hero" },
|
|
|
|
|
{ name: "Produits", id: "#products" },
|
|
|
|
|
{ name: "À Propos", id: "#about" },
|
|
|
|
|
{ name: "Contact", id: "#contact" },
|
|
|
|
|
]}
|
|
|
|
|
brandName="SAE Réunion"
|
|
|
|
|
/>
|
|
|
|
|
<div className="w-full flex items-center justify-between p-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b">
|
|
|
|
|
<div className="flex items-center gap-4 border rounded-full px-4 py-2 bg-gray-50">
|
|
|
|
|
<Search className="w-5 h-5 text-gray-500" />
|
|
|
|
|
<input type="text" placeholder="Rechercher des produits..." className="bg-transparent outline-none" />
|
|
|
|
|
</div>
|
|
|
|
|
<NavbarStyleApple
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Accueil", id: "#hero" },
|
|
|
|
|
{ name: "Produits", id: "#products" },
|
|
|
|
|
{ name: "À Propos", id: "#about" },
|
|
|
|
|
{ name: "Contact", id: "#contact" },
|
|
|
|
|
]}
|
|
|
|
|
brandName="SAE Réunion"
|
|
|
|
|
/>
|
|
|
|
|
<button className="flex items-center gap-2 px-6 py-2 bg-primary text-white rounded-full font-semibold">
|
|
|
|
|
<ShoppingCart className="w-5 h-5" />
|
|
|
|
|
Mon Panier
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroLogo
|
|
|
|
|
logoText="#BIENÉQUIPÉ"
|
|
|
|
|
description="Assurez une sécurité immédiate pour les professionnels de l'île de La Réunion. 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."
|
|
|
|
|
<HeroBillboard
|
|
|
|
|
title="Expertise en EPI pour les Professionnels de la Réunion"
|
|
|
|
|
description="Assurez une sécurité immédiate pour les professionnels de l'île de La Réunion.
|
|
|
|
|
Nos solutions d'EPI certifiées protègent vos collaborateurs et assurent la conformité totale de vos chantiers."
|
|
|
|
|
buttons={[{ text: "Obtenir un devis rapide", href: "#contact" }]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df1ETXUvuyYPxkhnyZJKVSXGQj/uploaded-1778660354408-7rl0xk93.png"
|
|
|
|
|
imageAlt="Casque de chantier SAE et Bannière"
|
|
|
|
|
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"
|
|
|
|
|
/>
|
|
|
|
|
@@ -71,16 +90,16 @@ export default function LandingPage() {
|
|
|
|
|
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: "Demander le catalogue complet", 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>
|
|
|
|
|
|
|
|
|
|
@@ -112,7 +131,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>
|
|
|
|
|
|
|
|
|
|
@@ -135,8 +154,8 @@ export default function LandingPage() {
|
|
|
|
|
<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é."
|
|
|
|
|
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}
|
|
|
|
|
/>
|
|
|
|
|
|
