Update src/app/page.tsx
This commit is contained in:
364
src/app/page.tsx
364
src/app/page.tsx
@@ -27,256 +27,136 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "À Propos",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Garage CLESS"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "À Propos", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Garage CLESS"
|
||||
button={{ text: "Prendre RDV", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Garage CLESS : L'excellence mécanique à votre service"
|
||||
description="Des experts passionnés pour l'entretien et la réparation de votre véhicule. Qualité, transparence et fiabilité au cœur de notre atelier."
|
||||
tag="Service Automobile"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580532.jpg?_wi=1",
|
||||
imageAlt: "garage car repair interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-engine_1170-1510.jpg?_wi=1",
|
||||
imageAlt: "automotive repair shop tools",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-steel-tool-box-garage_613910-13485.jpg",
|
||||
imageAlt: "Red steel tool box in a garage.",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-specialists-uniform-repairing-car-together-garage_496169-1110.jpg",
|
||||
imageAlt: "Two specialists in uniform repairing car together in garage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881846.jpg",
|
||||
imageAlt: "Modern automobile mechanic composition",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Noté 5/5 par nos clients"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Garage CLESS : L'excellence mécanique à votre service"
|
||||
description="Des experts passionnés pour l'entretien et la réparation de votre véhicule. Qualité, transparence et fiabilité au cœur de notre atelier."
|
||||
tag="Service Automobile"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580532.jpg", imageAlt: "garage car repair interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-engine_1170-1510.jpg", imageAlt: "automotive repair shop tools" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Noté 5/5 par nos clients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Pourquoi nous choisir ?"
|
||||
description={[
|
||||
"Chez Garage CLESS, nous combinons savoir-faire traditionnel et technologies de pointe pour garantir la longévité de votre véhicule.",
|
||||
"Notre équipe certifiée met tout en œuvre pour vous offrir une expérience transparente, rapide et sans surprise.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Pourquoi nous choisir ?"
|
||||
description={[
|
||||
"Chez Garage CLESS, nous combinons savoir-faire traditionnel et technologies de pointe pour garantir la longévité de votre véhicule.", "Notre équipe certifiée met tout en œuvre pour vous offrir une expérience transparente, rapide et sans surprise."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Diagnostic Électronique",
|
||||
description: "Identification précise de toutes les pannes grâce à nos outils de diagnostic de dernière génération.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367579.jpg",
|
||||
imageAlt: "team of mechanics smiling",
|
||||
},
|
||||
{
|
||||
title: "Révision Complète",
|
||||
description: "Entretien régulier selon les recommandations constructeurs pour préserver votre garantie.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580532.jpg?_wi=2",
|
||||
imageAlt: "team of mechanics smiling",
|
||||
},
|
||||
{
|
||||
title: "Freinage & Pneumatiques",
|
||||
description: "Contrôle, remplacement et équilibrage pour une tenue de route optimale.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-engine_1170-1510.jpg?_wi=2",
|
||||
imageAlt: "team of mechanics smiling",
|
||||
},
|
||||
]}
|
||||
title="Nos Services Experts"
|
||||
description="Des prestations complètes pour assurer votre sécurité sur la route."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Diagnostic Électronique", description: "Identification précise de toutes les pannes grâce à nos outils de diagnostic de dernière génération.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367579.jpg", imageAlt: "team of mechanics smiling"
|
||||
},
|
||||
{
|
||||
title: "Révision Complète", description: "Entretien régulier selon les recommandations constructeurs pour préserver votre garantie.", imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580532.jpg", imageAlt: "team of mechanics smiling"
|
||||
},
|
||||
{
|
||||
title: "Freinage & Pneumatiques", description: "Contrôle, remplacement et équilibrage pour une tenue de route optimale.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-engine_1170-1510.jpg", imageAlt: "team of mechanics smiling"
|
||||
}
|
||||
]}
|
||||
title="Nos Services Experts"
|
||||
description="Des prestations complètes pour assurer votre sécurité sur la route."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Service Rapide",
|
||||
quote: "Garage très pro et à l'écoute. La réparation a été faite en un temps record !",
|
||||
name: "Marc L.",
|
||||
role: "Client Fidèle",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man-sitting-waiting-room-car-service-center-talking-smartphone-looking-camera_496169-1036.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Excellente qualité",
|
||||
quote: "Je recommande vivement. Travail minutieux et tarifs très honnêtes.",
|
||||
name: "Sophie P.",
|
||||
role: "Cliente",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crazy-dealer-angry-expression_1194-2480.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Service client top",
|
||||
quote: "Accueil impeccable et explications très claires sur les réparations effectuées.",
|
||||
name: "Julien D.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Très satisfaite",
|
||||
quote: "Vraiment efficace, mon véhicule a retrouvé une nouvelle jeunesse.",
|
||||
name: "Claire M.",
|
||||
role: "Cliente",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-her-car-mechanic-repair-shop_637285-8670.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Professionnels",
|
||||
quote: "Du sérieux et du bon matériel. Vous pouvez y aller les yeux fermés.",
|
||||
name: "Thomas V.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg",
|
||||
},
|
||||
]}
|
||||
title="Ils nous font confiance"
|
||||
description="La satisfaction de nos clients est notre meilleure publicité."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Service Rapide", quote: "Garage très pro et à l'écoute. La réparation a été faite en un temps record !", name: "Marc L.", role: "Client Fidèle", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man-sitting-waiting-room-car-service-center-talking-smartphone-looking-camera_496169-1036.jpg" },
|
||||
{ id: "2", title: "Excellente qualité", quote: "Je recommande vivement. Travail minutieux et tarifs très honnêtes.", name: "Sophie P.", role: "Cliente", imageSrc: "http://img.b2bpic.net/free-photo/crazy-dealer-angry-expression_1194-2480.jpg" },
|
||||
{ id: "3", title: "Service client top", quote: "Accueil impeccable et explications très claires sur les réparations effectuées.", name: "Julien D.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg" },
|
||||
{ id: "4", title: "Très satisfaite", quote: "Vraiment efficace, mon véhicule a retrouvé une nouvelle jeunesse.", name: "Claire M.", role: "Cliente", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-her-car-mechanic-repair-shop_637285-8670.jpg" },
|
||||
{ id: "5", title: "Professionnels", quote: "Du sérieux et du bon matériel. Vous pouvez y aller les yeux fermés.", name: "Thomas V.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg" }
|
||||
]}
|
||||
title="Ils nous font confiance"
|
||||
description="La satisfaction de nos clients est notre meilleure publicité."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15+",
|
||||
description: "Années d'expérience",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "5000+",
|
||||
description: "Véhicules réparés",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
description: "Clients satisfaits",
|
||||
},
|
||||
]}
|
||||
title="Chiffres Clés"
|
||||
description="Notre engagement en quelques chiffres."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "15+", description: "Années d'expérience" },
|
||||
{ id: "2", value: "5000+", description: "Véhicules réparés" },
|
||||
{ id: "3", value: "100%", description: "Clients satisfaits" }
|
||||
]}
|
||||
title="Chiffres Clés"
|
||||
description="Notre engagement en quelques chiffres."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Proposez-vous un véhicule de prêt ?",
|
||||
content: "Oui, nous mettons à votre disposition un véhicule de prêt sous réserve de disponibilité.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Quelles marques réparez-vous ?",
|
||||
content: "Nous intervenons sur toutes les marques et modèles de véhicules légers.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Comment prendre rendez-vous ?",
|
||||
content: "Vous pouvez nous appeler directement ou utiliser notre formulaire de contact ci-dessous.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171223.jpg"
|
||||
title="Questions Fréquentes"
|
||||
description="Besoin d'informations sur nos services ?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Proposez-vous un véhicule de prêt ?", content: "Oui, nous mettons à votre disposition un véhicule de prêt sous réserve de disponibilité." },
|
||||
{ id: "2", title: "Quelles marques réparez-vous ?", content: "Nous intervenons sur toutes les marques et modèles de véhicules légers." },
|
||||
{ id: "3", title: "Comment prendre rendez-vous ?", content: "Vous pouvez nous appeler directement ou utiliser notre formulaire de contact ci-dessous." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171223.jpg"
|
||||
title="Questions Fréquentes"
|
||||
description="Besoin d'informations sur nos services ?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Prenez rendez-vous"
|
||||
description="Contactez-nous dès aujourd'hui pour toute demande de devis ou de diagnostic."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Votre nom",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Votre email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Votre téléphone",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Dites-nous en plus sur votre besoin...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/saleswoman-using-tablet-show-car-selection-man-offering-deal_482257-118256.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Prenez rendez-vous"
|
||||
description="Contactez-nous dès aujourd'hui pour toute demande de devis ou de diagnostic."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Votre nom", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Votre email", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Votre téléphone", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Dites-nous en plus sur votre besoin...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/saleswoman-using-tablet-show-car-selection-man-offering-deal_482257-118256.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Garage CLESS"
|
||||
copyrightText="© 2025 Garage CLESS | Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Garage CLESS"
|
||||
copyrightText="© 2025 Garage CLESS | Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user