265 lines
16 KiB
TypeScript
265 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Facebook, Instagram, MapPin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Accueil", id: "#home"},
|
|
{
|
|
name: "À Propos", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Spécialisations", id: "#specializations"},
|
|
{
|
|
name: "Témoignages", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Mecanic Classics"
|
|
button={{
|
|
text: "Réserver Maintenant", href: "#contact"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Mecanic Classics : Entretien Automobile de Précision, en Toute Confiance"
|
|
description="Dédié à offrir un service exceptionnel pour les véhicules classiques et modernes. De l'entretien courant aux diagnostics complexes, nous assurons le bon fonctionnement et la fiabilité de votre véhicule."
|
|
tag="Mécaniciens de Confiance"
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{
|
|
text: "Prendre un Rendez-vous", href: "#contact"},
|
|
{
|
|
text: "Découvrir Nos Services", href: "#services"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hands-female-mechanic-servicing-car_1170-1243.jpg", imageAlt: "Mécanicienne travaillant sur un moteur de voiture"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-blue-uniform-checks-car_1157-31695.jpg", imageAlt: "Voiture vintage dans un garage propre"}
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
rating={5}
|
|
ratingText="Évalué 5 étoiles par Nos Clients Satisfaits"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Passion pour la Performance, Dévouement au Détail"
|
|
description={[
|
|
"Chez Mecanic Classics, notre amour des voitures motive tout ce que nous faisons. Avec des années d'expérience et une équipe de techniciens certifiés, nous offrons des services de réparation et d'entretien automobile de premier ordre.", "Nous combinons un savoir-faire traditionnel avec des outils de diagnostic modernes pour garantir que votre véhicule reçoive les meilleurs soins possibles. Qu'il s'agisse d'un classique précieux ou de votre voiture de tous les jours, nous traitons chaque voiture comme la nôtre, garantissant fiabilité et performance."]}
|
|
buttons={[
|
|
{
|
|
text: "Rencontrer Notre Équipe", href: "#"},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
showBorder={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "oil-change", title: "Vidanges d'Huile et Remplacements de Filtres Routiniers", tags: [
|
|
"Entretien", "Longévité"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-thinking-while-repairing-car-engine-workshop_637285-8654.jpg", imageAlt: "Mécanicien changeant l'huile de voiture"},
|
|
{
|
|
id: "brake-service", title: "Inspections et Réparations Expertes des Systèmes de Freinage", tags: [
|
|
"Sécurité", "Performance"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-shop-car_23-2150170039.jpg", imageAlt: "Mécanicien travaillant sur les freins d'une voiture"},
|
|
{
|
|
id: "diagnostics", title: "Diagnostics Avancés Moteur et Électrique", tags: [
|
|
"Efficacité", "Fiabilité"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hands-mechanic-using-diagnostic-tool_1170-1146.jpg", imageAlt: "Mécanicien utilisant un outil de diagnostic sur le moteur"},
|
|
{
|
|
id: "tire-service", title: "Vente, Rotation et Services d'Alignement de Pneus", tags: [
|
|
"Tenue de Route", "Usure"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-with-foil-car-service_1303-32329.jpg", imageAlt: "Pneus de voiture en cours d'entretien"},
|
|
]}
|
|
title="Notre Gamme Complète de Services Automobiles"
|
|
description="De l'entretien préventif aux réparations avancées, Mecanic Classics offre une gamme complète de services pour assurer la performance optimale et la longévité de votre véhicule."
|
|
/>
|
|
</div>
|
|
|
|
<div id="specializations" data-section="specializations">
|
|
<ProductCardTwo
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "classic-engine", brand: "Soins Classiques", name: "Reconstructions de Moteurs Vintage", price: "Devis Personnalisé", rating: 5,
|
|
reviewCount: "25", imageSrc: "http://img.b2bpic.net/free-photo/retro-car-parked-grass_158595-1894.jpg", imageAlt: "Moteur de voiture classique restauré"},
|
|
{
|
|
id: "exhaust-install", brand: "Performance", name: "Installation d'Échappement Sur Mesure", price: "À Partir de 500 €", rating: 5,
|
|
reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-hydraulic-elements_23-2149333323.jpg", imageAlt: "Échappement performance en cours d'installation"},
|
|
{
|
|
id: "suspension-tuning", brand: "Tenue de Route", name: "Réglage de Suspension Performance", price: "À Partir de 350 €", rating: 5,
|
|
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/technician-checking-vehicle-bottom_23-2147897952.jpg", imageAlt: "Système de suspension de voiture"},
|
|
{
|
|
id: "vintage-electrical", brand: "Restauration", name: "Réparation Électrique Vintage", price: "Devis Personnalisé", rating: 5,
|
|
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_1170-2516.jpg", imageAlt: "Câblage complexe dans une voiture vintage"},
|
|
{
|
|
id: "rust-restoration", brand: "Carrosserie", name: "Restauration de Rouille et Carrosserie", price: "Devis Personnalisé", rating: 5,
|
|
reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/service-worker-painting-car-auto-service_23-2149487009.jpg", imageAlt: "Enlèvement de rouille sur un châssis de voiture"},
|
|
{
|
|
id: "detailing-paint", brand: "Esthétique", name: "Détail Professionnel et Correction de Peinture", price: "À Partir de 200 €", rating: 5,
|
|
reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-worker-repairman-sanding-polishing-car-body-preparing-automobile-painting-workshop-garage_342744-318.jpg", imageAlt: "Voiture en cours de polissage"},
|
|
]}
|
|
title="Soins Spécialisés et Restauration de Classiques"
|
|
description="Au-delà des réparations standard, nous offrons des services experts pour les besoins uniques des véhicules, incluant la restauration méticuleuse de voitures classiques et les améliorations de performance."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "years", value: "15+", description: "Années de Service Dédié"},
|
|
{
|
|
id: "customers", value: "500+", description: "Clients Heureux et Fidèles"},
|
|
{
|
|
id: "vehicles", value: "2000+", description: "Véhicules Entretenus et Réparés"},
|
|
]}
|
|
title="Guidés par les Résultats : Notre Engagement envers l'Excellence"
|
|
description="Nous mesurons notre succès par la satisfaction de nos clients et la fiabilité de leurs véhicules. Découvrez les chiffres qui reflètent notre dévouement."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jean-Pierre D.", handle: "@JeanPierreCar", testimonial: "Mecanic Classics a redonné vie à ma Porsche vintage ! Leur souci du détail et leur connaissance des voitures classiques sont inégalés. Je recommande vivement pour tout travail spécialisé.", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg", imageAlt: "Portrait de Jean-Pierre D."},
|
|
{
|
|
id: "2", name: "Sophie M.", handle: "@Sophie_Drives", testimonial: "Service fantastique à chaque fois. Ils sont toujours transparents sur les réparations et je leur fais entièrement confiance avec ma voiture de tous les jours. Les meilleurs mécaniciens de la région !", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg", imageAlt: "Portrait de Sophie M."},
|
|
{
|
|
id: "3", name: "Marc L.", handle: "@MarcAutoFan", testimonial: "Je viens ici depuis des années, et la qualité du travail est constamment excellente. Ils expliquent tout clairement et les prix sont justes. Professionnalisme de premier ordre.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-sitting-car_1303-14573.jpg", imageAlt: "Portrait de Marc L."},
|
|
{
|
|
id: "4", name: "Chloé B.", handle: "@ChloeB_Cars", testimonial: "La prise de rendez-vous a été facile, et le service rapide et efficace. Ma voiture est comme neuve après son entretien. Merci, Mecanic Classics !", imageSrc: "http://img.b2bpic.net/free-photo/happy-mechanic-greeting-his-customers-auto-repair-shop_637285-11563.jpg", imageAlt: "Portrait de Chloé B."},
|
|
{
|
|
id: "5", name: "Thierry R.", handle: "@ThierryRacer", testimonial: "Ma voiture de performance avait besoin d'un réglage spécifique, et Mecanic Classics a dépassé toutes les attentes. Ils comprennent vraiment les véhicules de haute performance.", imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-customer-workshop_637285-8634.jpg", imageAlt: "Portrait de Thierry R."},
|
|
]}
|
|
title="Découvrez Ce Que Nos Clients Appréciés Disent de Nous"
|
|
description="Notre réputation est bâtie sur la confiance et un excellent service. Lisez les témoignages de clients qui comptent sur Mecanic Classics pour leurs besoins automobiles."
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Comment puis-je prendre rendez-vous ?", content: "Vous pouvez facilement prendre rendez-vous via le formulaire de contact de notre site web, en nous appelant directement ou en visitant notre garage en personne. Nous recommandons de réserver à l'avance pour les services spécialisés."},
|
|
{
|
|
id: "faq-2", title: "Quels types de véhicules entretenez-vous ?", content: "Nous sommes fiers d'entretenir tous les types de véhicules, des voitures modernes de tous les jours aux automobiles classiques et vintage chéries. Nos techniciens sont expérimentés avec un large éventail de marques et de modèles."},
|
|
{
|
|
id: "faq-3", title: "Offrez-vous des garanties sur vos réparations ?", content: "Oui, nous garantissons la qualité de notre travail. Toutes nos réparations sont assorties d'une garantie standard, dont les détails peuvent être fournis sur demande ou au moment du service."},
|
|
{
|
|
id: "faq-4", title: "Quels modes de paiement acceptez-vous ?", content: "Nous acceptons divers modes de paiement, y compris les principales cartes de crédit/débit et les virements bancaires. Veuillez vous renseigner sur les options de paiement spécifiques lorsque vous réservez ou visitez notre atelier."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171289.jpg"
|
|
imageAlt="Mécanicien parlant à un client de la réparation automobile"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="left"
|
|
title="Questions Fréquentes sur Nos Services Automobiles"
|
|
description="Trouvez des réponses rapides à vos questions sur nos services, le processus de réservation et à quoi vous attendre lors de votre visite chez Mecanic Classics."
|
|
faqsAnimation="slide-up"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Contactez-Nous"
|
|
tagAnimation="opacity"
|
|
title="Prêt à Planifier l'Entretien de Votre Véhicule ?"
|
|
description="Contactez Mecanic Classics dès aujourd'hui pour un entretien automobile fiable et expert. Prenez rendez-vous en ligne ou appelez-nous pour discuter de vos besoins."
|
|
buttons={[
|
|
{
|
|
text: "Prendre Rendez-vous en Ligne", href: "#"},
|
|
{
|
|
text: "Appelez-Nous Maintenant", href: "tel:+32012345678"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Mecanic Classics"
|
|
copyrightText="© 2024 Mecanic Classics. Tous droits réservés."
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/mecanicclassics", ariaLabel: "Page Facebook"},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/mecanicclassics", ariaLabel: "Profil Instagram"},
|
|
{
|
|
icon: MapPin,
|
|
href: "https://www.google.com/maps/place/Mecanic+Classics", ariaLabel: "Trouvez-nous sur Google Maps"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|