278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Concept",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Produits",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Avantages",
|
|
id: "metrics",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Constorama"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="Constorama"
|
|
description="La plateforme digitale dédiée aux professionnels et particuliers du secteur de la construction. Simple. Rapide. Transparent."
|
|
buttons={[
|
|
{
|
|
text: "Découvrir la plateforme",
|
|
href: "#about",
|
|
},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=1",
|
|
imageAlt: "Hero slide 1",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=2",
|
|
imageAlt: "Hero slide 2",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=3",
|
|
imageAlt: "Hero slide 3",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=4",
|
|
imageAlt: "Hero slide 4",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=5",
|
|
imageAlt: "Hero slide 5",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/modern-construction-site-interface-digit-1774876271945-ece080b0.png?_wi=6",
|
|
imageAlt: "Hero slide 6",
|
|
},
|
|
]}
|
|
autoplayDelay={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={true}
|
|
title="Le concept Constorama"
|
|
description="Constorama est une plateforme de vente en ligne spécialisée dans les matériaux de construction. Nous mettons en relation fabricants, distributeurs, entreprises, architectes et particuliers au sein d'un espace digital unique et intuitif."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-professional-construction-project-mana-1774876271321-71563e1f.png"
|
|
imageAlt="Concept Constorama"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "Gros œuvre",
|
|
tags: [
|
|
"Ciment",
|
|
"Béton",
|
|
"Acier",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/concrete-bags-and-building-materials-nea-1774876271986-74a21537.png",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Finition & Déco",
|
|
tags: [
|
|
"Peinture",
|
|
"Carrelage",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/architectural-blueprints-on-a-table-with-1774876272789-7217496a.png",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Équipements",
|
|
tags: [
|
|
"Plomberie",
|
|
"Électricité",
|
|
],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-modern-construction-helmet-and-high-vi-1774876272899-4aa8f907.png",
|
|
},
|
|
]}
|
|
title="Une gamme complète"
|
|
description="Retrouvez tout le nécessaire pour vos chantiers sur une plateforme unique."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "100%",
|
|
title: "Traçabilité",
|
|
items: [
|
|
"Suivi complet",
|
|
"Historique clair",
|
|
],
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "Rapide",
|
|
title: "Logistique",
|
|
items: [
|
|
"Livraison chantier",
|
|
"Retrait fournisseur",
|
|
],
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "Simple",
|
|
title: "Utilisation",
|
|
items: [
|
|
"Interface intuitive",
|
|
"Gain de temps",
|
|
],
|
|
},
|
|
]}
|
|
title="Les avantages Constorama"
|
|
description="Optimisez vos achats de matériaux avec notre plateforme."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Jean Dupont",
|
|
date: "12/05/2024",
|
|
title: "Entrepreneur",
|
|
quote: "Un gain de temps incroyable sur mes achats de matériaux.",
|
|
tag: "Pro",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/headshot-of-professional-male-engineer-w-1774876272138-fcb3aabe.png",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-professional-construction-engineer-in--1774876270709-0dca8c03.png?_wi=1",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Marie Curie",
|
|
date: "15/05/2024",
|
|
title: "Architecte",
|
|
quote: "Enfin une interface simple pour comparer les fournisseurs.",
|
|
tag: "Architecte",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/headshot-of-professional-woman-architect-1774876272161-c0f060e9.png",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-woman-architect-smiling-wearing-modern-1774876272465-7f844e7b.png",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Paul Martin",
|
|
date: "20/05/2024",
|
|
title: "Chef de chantier",
|
|
quote: "La livraison sur chantier est un vrai plus pour nos équipes.",
|
|
tag: "Pro",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/headshot-of-mature-male-construction-sup-1774876272928-9b1bfb14.png",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/an-experienced-construction-site-foreman-1774876271111-e2c42710.png",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Sophie Petit",
|
|
date: "22/05/2024",
|
|
title: "Particulier",
|
|
quote: "J'ai tout trouvé pour mes travaux de rénovation rapidement.",
|
|
tag: "Client",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/headshot-of-young-female-project-coordin-1774876270648-a47d0f6d.png",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-young-digital-platform-professional-in-1774876271161-e35204ab.png",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Thomas Bernard",
|
|
date: "25/05/2024",
|
|
title: "Artisan",
|
|
quote: "Le service client est très réactif, une vraie différence sur le marché.",
|
|
tag: "Pro",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/headshot-of-professional-male-engineer-w-1774876272138-fcb3aabe.png",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BfKy1duTPMeS7gs8r3rBHweB5x/a-professional-construction-engineer-in--1774876270709-0dca8c03.png?_wi=2",
|
|
},
|
|
]}
|
|
title="Témoignages"
|
|
description="Ce que nos partenaires disent de nous."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Contact"
|
|
title="Prêt à transformer vos achats ?"
|
|
description="Rejoignez la nouvelle façon d'acheter vos matériaux."
|
|
buttons={[
|
|
{
|
|
text: "Nous contacter",
|
|
href: "mailto:hello@constorama.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Constorama"
|
|
leftLink={{
|
|
text: "© 2024 Constorama",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Politique de confidentialité",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|