Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-17 17:07:07 +00:00

View File

@@ -2,6 +2,7 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Scissors, Zap, Sparkles, Shield } from "lucide-react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
@@ -28,331 +29,147 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Accueil",
id: "hero",
},
{
name: "À propos",
id: "about",
},
{
name: "Services",
id: "services",
},
{
name: "Tarifs",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Le Coiffeur"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Accueil", id: "hero" },
{ name: "À propos", id: "about" },
{ name: "Services", id: "services" },
{ name: "Tarifs", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="Le Coiffeur"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
title="Le Coiffeur : L'Élégance au Quotidien"
description="Un espace dédié à votre style, où la précision du coiffeur rencontre le confort d'un barbier traditionnel."
buttons={[
{
text: "Réserver un rendez-vous",
href: "#contact",
},
]}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-7gzfvpk7.png?_wi=1",
imageAlt: "Salon de coiffure",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png?_wi=1",
imageAlt: "Intérieur salon",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-gt0njvdz.png?_wi=1",
imageAlt: "Barbier",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-zo85trvg.png?_wi=1",
imageAlt: "Coiffure",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg?_wi=1",
imageAlt: "Bien-être",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5409.jpg?_wi=1",
imageAlt: "Style",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{ variant: "gradient-bars" }}
title="Le Coiffeur : L'Élégance au Quotidien"
description="Un espace dédié à votre style, où la précision du coiffeur rencontre le confort d'un barbier traditionnel."
buttons={[{ text: "Réserver un rendez-vous", href: "#contact" }]}
mediaItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-7gzfvpk7.png", imageAlt: "Salon de coiffure" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png", imageAlt: "Intérieur salon" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-gt0njvdz.png", imageAlt: "Barbier" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-zo85trvg.png", imageAlt: "Coiffure" },
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg", imageAlt: "Bien-être" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5409.jpg", imageAlt: "Style" },
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "Bienvenue chez Le Coiffeur",
},
{
type: "image",
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png",
alt: "Notre salon",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "Bienvenue chez Le Coiffeur" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png", alt: "Notre salon" },
]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Coiffure Homme",
description: "Coupes modernes et classiques adaptées à votre morphologie.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg?_wi=2",
buttonIcon: "Scissors",
},
{
title: "Taille de Barbe",
description: "Un service barbier précis pour une barbe impeccable et soignée.",
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5409.jpg?_wi=2",
buttonIcon: "Zap",
},
{
title: "Coiffure Enfant",
description: "Un moment de détente pour les plus jeunes avec des experts.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-preschooler-boy-getting-haircut-older-sister-cuts-her-little-brother-with-trimmer-against-brick-wall_613910-19671.jpg",
buttonIcon: "Sparkles",
},
{
title: "Soins Capillaires",
description: "Des produits de qualité pour sublimer et protéger vos cheveux.",
imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4436.jpg",
buttonIcon: "Shield",
},
]}
title="Nos Services"
description="Découvrez notre gamme de soins capillaires adaptés aux hommes et aux enfants."
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Coiffure Homme", description: "Coupes modernes et classiques adaptées à votre morphologie.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-chair_23-2149220561.jpg", buttonIcon: Scissors },
{ title: "Taille de Barbe", description: "Un service barbier précis pour une barbe impeccable et soignée.", imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5409.jpg", buttonIcon: Zap },
{ title: "Coiffure Enfant", description: "Un moment de détente pour les plus jeunes avec des experts.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-preschooler-boy-getting-haircut-older-sister-cuts-her-little-brother-with-trimmer-against-brick-wall_613910-19671.jpg", buttonIcon: Sparkles },
{ title: "Soins Capillaires", description: "Des produits de qualité pour sublimer et protéger vos cheveux.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4436.jpg", buttonIcon: Shield },
]}
title="Nos Services"
description="Découvrez notre gamme de soins capillaires adaptés aux hommes et aux enfants."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "forfait-homme",
badge: "Classique",
price: "25€",
subtitle: "Coupe complète",
features: [
"Shampoing",
"Coupe",
"Coiffage",
],
},
{
id: "forfait-barbe",
badge: "Barbier",
price: "15€",
subtitle: "Soins et rasage",
features: [
"Taille",
"Entretien",
"Huile",
],
},
{
id: "forfait-enfant",
badge: "Enfants",
price: "18€",
subtitle: "Coupe courte",
features: [
"Shampoing",
"Coupe rapide",
],
},
]}
title="Nos Tarifs"
description="Des prestations de qualité accessibles."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "forfait-homme", badge: "Classique", price: "25€", subtitle: "Coupe complète", features: ["Shampoing", "Coupe", "Coiffage"] },
{ id: "forfait-barbe", badge: "Barbier", price: "15€", subtitle: "Soins et rasage", features: ["Taille", "Entretien", "Huile"] },
{ id: "forfait-enfant", badge: "Enfants", price: "18€", subtitle: "Coupe courte", features: ["Shampoing", "Coupe rapide"] },
]}
title="Nos Tarifs"
description="Des prestations de qualité accessibles."
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
members={[
{
id: "t1",
name: "Marc",
role: "Maître Barbier",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-gt0njvdz.png?_wi=2",
},
{
id: "t2",
name: "Sophie",
role: "Coiffeuse Expert",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-7gzfvpk7.png?_wi=2",
},
{
id: "t3",
name: "Thomas",
role: "Styliste",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png?_wi=2",
},
{
id: "t4",
name: "Julie",
role: "Apprentie",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-zo85trvg.png?_wi=2",
},
]}
title="Notre Équipe"
description="Rencontrez les artisans de votre style."
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
members={[
{ id: "t1", name: "Marc", role: "Maître Barbier", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-gt0njvdz.png" },
{ id: "t2", name: "Sophie", role: "Coiffeuse Expert", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-7gzfvpk7.png" },
{ id: "t3", name: "Thomas", role: "Styliste", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-n5upltul.png" },
{ id: "t4", name: "Julie", role: "Apprentie", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DrQ2CIr6ZR2WsvOESgII8EK5gf/uploaded-1779037577247-zo85trvg.png" },
]}
title="Notre Équipe"
description="Rencontrez les artisans de votre style."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Nicolas",
handle: "@nicolas",
testimonial: "Un accueil chaleureux et une coupe parfaite à chaque visite.",
imageSrc: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg",
},
{
id: "2",
name: "Marie",
handle: "@marie",
testimonial: "Je recommande vivement, très professionnel et à l'écoute.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506216.jpg",
},
{
id: "3",
name: "Julien",
handle: "@julien",
testimonial: "La meilleure taille de barbe dans le coin !",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2149141784.jpg",
},
{
id: "4",
name: "Paul",
handle: "@paul",
testimonial: "Super pour les enfants, ils sont très patients.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-hair-stylist_23-2148113070.jpg",
},
{
id: "5",
name: "Sophie",
handle: "@sophie",
testimonial: "Un service constant, je suis toujours satisfait.",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-doing-ok-gesture_1298-73.jpg",
},
]}
title="Ce que disent nos clients"
description="La satisfaction est notre priorité."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Nicolas", handle: "@nicolas", testimonial: "Un accueil chaleureux et une coupe parfaite à chaque visite.", imageSrc: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg" },
{ id: "2", name: "Marie", handle: "@marie", testimonial: "Je recommande vivement, très professionnel et à l'écoute.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506216.jpg" },
{ id: "3", name: "Julien", handle: "@julien", testimonial: "La meilleure taille de barbe dans le coin !", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2149141784.jpg" },
{ id: "4", name: "Paul", handle: "@paul", testimonial: "Super pour les enfants, ils sont très patients.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-hair-stylist_23-2148113070.jpg" },
{ id: "5", name: "Sophie", handle: "@sophie", testimonial: "Un service constant, je suis toujours satisfait.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-doing-ok-gesture_1298-73.jpg" },
]}
title="Ce que disent nos clients"
description="La satisfaction est notre priorité."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Faut-il prendre rendez-vous ?",
content: "Nous privilégions les rendez-vous, mais nous acceptons les clients sans rendez-vous selon nos disponibilités.",
},
{
id: "f2",
title: "Quels moyens de paiement acceptez-vous ?",
content: "Nous acceptons les espèces et les cartes bancaires.",
},
{
id: "f3",
title: "Proposez-vous des produits ?",
content: "Oui, nous avons une sélection de soins de qualité professionnelle.",
},
]}
title="Questions Fréquentes"
description="Besoin d'informations complémentaires ?"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Faut-il prendre rendez-vous ?", content: "Nous privilégions les rendez-vous, mais nous acceptons les clients sans rendez-vous selon nos disponibilités." },
{ id: "f2", title: "Quels moyens de paiement acceptez-vous ?", content: "Nous acceptons les espèces et les cartes bancaires." },
{ id: "f3", title: "Proposez-vous des produits ?", content: "Oui, nous avons une sélection de soins de qualité professionnelle." },
]}
title="Questions Fréquentes"
description="Besoin d'informations complémentaires ?"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
text="Prenez rendez-vous en nous appelant au 02 28 24 91 55 ou visitez-nous directement."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
text="Prenez rendez-vous en nous appelant au 02 28 24 91 55 ou visitez-nous directement."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Le Coiffeur"
columns={[
{
title: "Navigation",
items: [
{
label: "Accueil",
href: "#hero",
},
{
label: "Services",
href: "#services",
},
{
label: "Tarifs",
href: "#pricing",
},
],
},
{
title: "Contact",
items: [
{
label: "02 28 24 91 55",
href: "tel:0228249155",
},
{
label: "Nous situer",
href: "#",
},
],
},
]}
copyrightText="© 2024 Le Coiffeur. Tous droits réservés."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Le Coiffeur"
columns={[
{
title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Tarifs", href: "#pricing" }],
},
{
title: "Contact", items: [{ label: "02 28 24 91 55", href: "tel:0228249155" }, { label: "Nous situer", href: "#" }],
},
]}
copyrightText="© 2024 Le Coiffeur. Tous droits réservés."
/>
</div>
</ReactLenis>
</ThemeProvider>
);