338 lines
20 KiB
TypeScript
338 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
import { Heart, Palette, Scissors, Sparkles, HeartHandshake } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumLarge"
|
||
sizing="medium"
|
||
background="grid"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Accueil", id: "#hero"},
|
||
{
|
||
name: "À Propos", id: "#about"},
|
||
{
|
||
name: "Services", id: "#features"},
|
||
{
|
||
name: "Galerie", id: "#products"},
|
||
{
|
||
name: "Équipe", id: "#team"},
|
||
{
|
||
name: "Avis", id: "#testimonials"},
|
||
{
|
||
name: "FAQ", id: "#faq"},
|
||
{
|
||
name: "Contact", id: "#contact"},
|
||
]}
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1zq6zt"
|
||
logoAlt="Art Coif' logo"
|
||
brandName="Art Coif'"
|
||
button={{
|
||
text: "Prendre RDV", href: "#contact"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitTestimonial
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
title="Votre style, notre passion. La beauté capillaire à Châtellerault."
|
||
description="Chez Art Coif', nous transformons vos cheveux en œuvre d'art. Profitez d'une expérience unique, alliant expertise, écoute et les dernières tendances pour un résultat qui vous ressemble."
|
||
testimonials={[
|
||
{
|
||
name: "Ayden Da Silva Gonçalves Kok", handle: "@ayden_dasilva", testimonial: "Un très bon accueil, une apprentie très douce et un coiffeur au top 👌 Vous l’avez totalement réconcilié avec les coiffeurs et pourtant j’en ai eu des catastrophes capillaires 😂", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-enthusiastic-handsome-young-teenage-guy-college-student-recommend-awesome-course_1258-109366.jpg", imageAlt: "Ayden Da Silva Gonçalves Kok"},
|
||
{
|
||
name: "Veronique Barre", handle: "@veronique_barre", testimonial: "Bonjour, personnel agréable et surtout et surtout à l’écoute, merci pour le café, je recommande bonne continuation.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-with-curly-hair-isolated_273609-48191.jpg", imageAlt: "Veronique Barre"},
|
||
{
|
||
name: "Marilyne BULTÉ-ROY", handle: "@marilyne_roy", testimonial: "J'ai mis du temps à laisser ce commentaire, parce qu'il fallait que je m'habitue à ma nouvelle coiffure magnifique ! Un travail impeccable, je suis ravie.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/women-getting-display-window-japanese-hairdressers-ready_23-2149395751.jpg", imageAlt: "Marilyne BULTÉ-ROY"},
|
||
{
|
||
name: "Sophie Dubois", handle: "@sophie_dubois", testimonial: "Le meilleur salon de la région ! L'équipe est adorable et les conseils sont toujours pertinents. Je ne changerais pour rien au monde.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-hair-stylist_23-2148113070.jpg", imageAlt: "Sophie Dubois"},
|
||
{
|
||
name: "Thomas Leroux", handle: "@thomas_leroux", testimonial: "Une ambiance chaleureuse et des coupes toujours parfaites. Je ressors toujours avec le sourire et des cheveux sublimes.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/positive-satisfied-customer-making-ok-gesture_74855-3646.jpg", imageAlt: "Thomas Leroux"},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Prendre Rendez-vous", href: "#contact"},
|
||
{
|
||
text: "Nos Services", href: "#features"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg"
|
||
imageAlt="Stylist working on a client's hair in a modern salon"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/front-view-young-male-grey-t-shirt-holding-white-sign-yellow-wall-man-expression-emotion-color-model_140725-26516.jpg", alt: "Client Ayden Da Silva"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586564.jpg", alt: "Client Veronique Barre"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/closeup-portrait-enthusiastic-handsome-young-teenage-guy-college-student-recommend-awesome-course_1258-109021.jpg", alt: "Client Marilyne BULTÉ-ROY"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-smiling-man-with-beard-happily-looking-camera-showing-thumb-up-while-holding-green-paper-cloud-shape-hand-near-head-modern-office_574295-5737.jpg", alt: "Client Sophie Dubois"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/business-happy-manager-winning-online-rejoicing-with-fist-pump-holding-laptop-triumphing-standing_1258-26462.jpg", alt: "Client Thomas Leroux"},
|
||
]}
|
||
avatarText="+1000 clients satisfaits nous font confiance"
|
||
marqueeItems={[
|
||
{
|
||
type: "text-icon", text: "Coupes Tendance", icon: Scissors,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Coloration Experte", icon: Palette,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Soins Profonds", icon: Heart,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Coiffures Mariage", icon: Sparkles,
|
||
},
|
||
{
|
||
type: "text", text: "Lissage Brésilien"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextAbout
|
||
useInvertedBackground={true}
|
||
tag="Notre Histoire"
|
||
title="Art Coif': L'art de la coiffure au service de votre élégance."
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentySix
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Coupes Tendance", description: "Des coupes modernes et personnalisées, adaptées à la forme de votre visage et à votre style de vie. Homme, femme, enfant, nous maîtrisons toutes les techniques.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-brunette-girl-with-bob-hair-talking-with-best-friend-phone-discussing-news-colorful-background-always-touch_574295-4422.jpg", imageAlt: "Woman with a modern bob haircut", buttonIcon: Scissors,
|
||
},
|
||
{
|
||
title: "Coloration Personnalisée", description: "Balayages lumineux, mèches subtiles, coloration complète ou ombré hair, nos coloristes experts créent la teinte parfaite pour vous.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167368.jpg", imageAlt: "Woman getting her hair colored in a salon", buttonIcon: Palette,
|
||
},
|
||
{
|
||
title: "Soins Capillaires Profonds", description: "Offrez à vos cheveux une cure de jouvence avec nos traitements hydratants, réparateurs ou volumisants, utilisant des produits de haute qualité.", imageSrc: "http://img.b2bpic.net/free-photo/person-using-dry-shampoo_52683-132214.jpg", imageAlt: "Hair mask treatment being applied in a salon", buttonIcon: HeartHandshake,
|
||
},
|
||
{
|
||
title: "Coiffures Événementielles", description: "Pour votre mariage, un gala ou toute autre occasion spéciale, laissez-nous créer la coiffure de vos rêves qui fera sensation.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-stylish-woman-wedding-dress_285396-7809.jpg", imageAlt: "Elegant bridal hairstyle with flowers", buttonIcon: Sparkles,
|
||
},
|
||
]}
|
||
title="Des prestations sur mesure pour une chevelure éclatante."
|
||
description="Découvrez notre gamme complète de services, conçue pour répondre à toutes vos envies et prendre soin de vos cheveux avec expertise."
|
||
tag="Nos Services Exclusifs"
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "p1", name: "Coupe Courte Moderne", price: "À partir de 35€", imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-non-binary-person_23-2148760579.jpg", imageAlt: "Chic short hairstyle for women"},
|
||
{
|
||
id: "p2", name: "Balayage Lumineux", price: "À partir de 80€", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-long-wavy-blonde-hair-with-highlights_23-2151983883.jpg", imageAlt: "Woman with subtle balayage hair"},
|
||
{
|
||
id: "p3", name: "Coloration Audacieuse", price: "À partir de 70€", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-dj-female-with-headphones_23-2148325445.jpg", imageAlt: "Woman with vibrant red hair color"},
|
||
{
|
||
id: "p4", name: "Coiffure de Mariée", price: "Sur devis", imageSrc: "http://img.b2bpic.net/free-photo/front-view-drag-queen-wearing-wig_23-2150140120.jpg", imageAlt: "Bride with an elegant updo"},
|
||
{
|
||
id: "p5", name: "Dégradé Homme Classique", price: "À partir de 25€", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-with-serious-emotion-red-brick-wall_343059-28.jpg", imageAlt: "Man with a classic fade haircut"},
|
||
{
|
||
id: "p6", name: "Lissage Brésilien", price: "À partir de 150€", imageSrc: "http://img.b2bpic.net/free-photo/beauty-skin-care-portrait-natural-young-woman-with-red-curly-hair-laughing-happy-white-smile-teeth-playing-with-hair-standing-carefree-against-white-background_176420-47197.jpg", imageAlt: "Woman with smooth straight hair after treatment"},
|
||
]}
|
||
title="Galerie de styles: Inspirez-vous de nos réalisations."
|
||
description="Chaque client est une toile, chaque coiffure une œuvre d'art. Parcourez nos créations pour découvrir l'étendue de notre talent et imaginer votre prochaine transformation."
|
||
tag="Nos Créations & Transformations"
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardSix
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
members={[
|
||
{
|
||
id: "t1", name: "Élise Dupont", role: "Chef Styliste & Fondatrice", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg", imageAlt: "Portrait of Élise Dupont"},
|
||
{
|
||
id: "t2", name: "Marc Dubois", role: "Coloriste Expert", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-showing-cloakroom_171337-19310.jpg", imageAlt: "Portrait of Marc Dubois"},
|
||
{
|
||
id: "t3", name: "Léa Martin", role: "Styliste & Barbier", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-model-pose_23-2148905608.jpg", imageAlt: "Portrait of Léa Martin"},
|
||
{
|
||
id: "t4", name: "Hugo Lambert", role: "Apprenti Styliste", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-holding-scissors-combing-her-hair-lookign-confident-standing-light-wall_141793-55645.jpg", imageAlt: "Portrait of Hugo Lambert"},
|
||
]}
|
||
title="Rencontrez les artisans de votre beauté capillaire."
|
||
description="Notre équipe est composée de coiffeurs passionnés, constamment formés aux dernières techniques et tendances pour vous offrir le meilleur de la coiffure."
|
||
tag="Notre Équipe d'Experts"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "test-1", name: "Ayden Da Silva Gonçalves Kok", role: "Client Fidèle", company: "Châtellerault", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-spanish-woman-closeup-portrait-watching-camera_633478-1841.jpg", imageAlt: "Ayden Da Silva Gonçalves Kok"},
|
||
{
|
||
id: "test-2", name: "Veronique Barre", role: "Cliente Satisfaite", company: "Châtellerault", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-with-beautiful-smile_23-2148336915.jpg", imageAlt: "Veronique Barre"},
|
||
{
|
||
id: "test-3", name: "Marilyne BULTÉ-ROY", role: "Cliente Comblée", company: "Châtellerault", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-satisfied-happy-young-man-glasses-working-cafe-sitting-coworking-space-with-laptop-showing-thumbs-up-like-approve-smth-good-chatting-giving-online-lessons_1258-314620.jpg", imageAlt: "Marilyne BULTÉ-ROY"},
|
||
{
|
||
id: "test-4", name: "Sophie Dubois", role: "Habituée du Salon", company: "Châtellerault", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-happy-couple-hugging_52683-95705.jpg", imageAlt: "Sophie Dubois"},
|
||
{
|
||
id: "test-5", name: "Thomas Leroux", role: "Nouveau Client", company: "Châtellerault", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-redhead-urban-traveller-male-sunglasses-holds-backpack-grey-background-studio_613910-1038.jpg", imageAlt: "Thomas Leroux"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "4.7", label: "Étoiles"},
|
||
{
|
||
value: "39+", label: "Avis Clients"},
|
||
{
|
||
value: "10+", label: "Années d'Expertise"},
|
||
]}
|
||
title="Nos clients satisfaits, notre plus belle récompense."
|
||
description="La satisfaction de nos clients est au cœur de notre métier. Leurs sourires et leurs retours positifs sont notre moteur au quotidien."
|
||
tag="Ce qu'ils disent de nous"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "faq1", title: "Dois-je prendre rendez-vous ?", content: "Oui, nous vous recommandons fortement de prendre rendez-vous pour garantir la disponibilité de votre styliste préféré et éviter toute attente."},
|
||
{
|
||
id: "faq2", title: "Quels sont vos horaires d'ouverture ?", content: "Nous sommes ouverts du Lundi au Samedi, de 9h00 à 18h30. N'hésitez pas à nous appeler pour confirmer nos horaires spécifiques."},
|
||
{
|
||
id: "faq3", title: "Acceptez-vous les paiements par carte bancaire ?", content: "Oui, nous acceptons les paiements par carte bancaire (Visa, Mastercard), ainsi que les espèces et les chèques."},
|
||
{
|
||
id: "faq4", title: "Offrez-vous des consultations gratuites ?", content: "Oui, nous proposons des consultations gratuites pour discuter de vos envies de coupe, coloration ou de soins, et vous conseiller au mieux."},
|
||
{
|
||
id: "faq5", title: "Utilisez-vous des produits professionnels ?", content: "Absolument. Nous travaillons exclusivement avec des marques de produits capillaires professionnels reconnues pour leur qualité et leur efficacité."},
|
||
{
|
||
id: "faq6", title: "Puis-je venir sans rendez-vous pour une petite prestation ?", content: "Pour les petites prestations comme une frange ou un entretien rapide, il est parfois possible de vous accueillir sans rendez-vous, selon la disponibilité. N'hésitez pas à nous appeler avant de venir."},
|
||
]}
|
||
title="Vos questions, nos réponses."
|
||
description="Trouvez toutes les informations dont vous avez besoin pour préparer votre visite chez Art Coif'."
|
||
tag="Questions Fréquentes"
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "sparkles-gradient"}}
|
||
tag="Contactez-nous"
|
||
title="Prêt(e) pour votre transformation capillaire ?"
|
||
description="Prenez rendez-vous dès aujourd'hui ou passez nous voir. Notre équipe se fera un plaisir de vous accueillir au 16 Rue des Mignons, 86100 Châtellerault. Téléphone : 05 49 93 09 60"
|
||
buttons={[
|
||
{
|
||
text: "Appeler Maintenant", href: "tel:+33549930960"},
|
||
{
|
||
text: "Prendre Rendez-vous en Ligne", href: "#"},
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{
|
||
label: "Coupes", href: "#features"},
|
||
{
|
||
label: "Colorations", href: "#features"},
|
||
{
|
||
label: "Soins", href: "#features"},
|
||
{
|
||
label: "Coiffures Événementielles", href: "#features"},
|
||
],
|
||
},
|
||
{
|
||
title: "Informations", items: [
|
||
{
|
||
label: "À propos de nous", href: "#about"},
|
||
{
|
||
label: "Galerie", href: "#products"},
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
{
|
||
label: "Contact", href: "#contact"},
|
||
],
|
||
},
|
||
{
|
||
title: "Heures d'Ouverture", items: [
|
||
{
|
||
label: "Lundi - Samedi: 9h - 18h30", href: "#"},
|
||
{
|
||
label: "Dimanche: Fermé", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Adresse", items: [
|
||
{
|
||
label: "16 Rue des Mignons", href: "https://maps.app.goo.gl/35mN2s4V4jH1Z2xV6"},
|
||
{
|
||
label: "86100 Châtellerault", href: "https://maps.app.goo.gl/35mN2s4V4jH1Z2xV6"},
|
||
],
|
||
},
|
||
]}
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1zq6zt"
|
||
logoAlt="Art Coif' logo"
|
||
logoText="Art Coif'"
|
||
copyrightText="© 2025 Art Coif'. Tous droits réservés."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|