271 lines
14 KiB
TypeScript
271 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import { Star, Wrench, Home, AlertCircle, Settings, Droplet, AlertTriangle, Zap, CheckCircle, Clock, Users, TrendingUp, Award, Quote } from 'lucide-react';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="circleGradient"
|
||
cardStyle="inset"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="normal"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
brandName="DR Plomberie"
|
||
navItems={[
|
||
{ name: "Services", id: "services" },
|
||
{ name: "Urgence", id: "emergency" },
|
||
{ name: "À propos", id: "about" },
|
||
{ name: "Avis", id: "testimonials" },
|
||
{ name: "Contact", id: "contact" }
|
||
]}
|
||
bottomLeftText="Montréal - Anjou"
|
||
bottomRightText="514-355-1333"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardDashboard
|
||
title="Plombier à Montréal — Service rapide et professionnel"
|
||
description="Disponible 24h/24 et 7j/7 pour urgences et réparations. Service rapide, prix honnêtes, plombier local de confiance à Anjou."
|
||
tag="⭐ 4,9 étoiles sur Google"
|
||
tagIcon={Star}
|
||
background={{ variant: "circleGradient" }}
|
||
buttons={[
|
||
{ text: "📞 Appeler maintenant", href: "tel:514-355-1333" },
|
||
{ text: "📋 Demander une soumission", href: "#contact" }
|
||
]}
|
||
dashboard={{
|
||
title: "Services Disponibles", logoIcon: Wrench,
|
||
searchPlaceholder: "Cherchez votre service...", imageSrc: "http://img.b2bpic.net/free-photo/electrician-builder-work-servicing-fuselage-industrial-switchboard-professional-overalls-with-electrician-s-tool_169016-7337.jpg", imageAlt: "professional plumber at work residential service", sidebarItems: [
|
||
{ icon: Home, active: true },
|
||
{ icon: AlertCircle },
|
||
{ icon: Settings }
|
||
],
|
||
buttons: [
|
||
{ text: "Urgence", href: "#emergency" },
|
||
{ text: "Soumission", href: "#contact" }
|
||
],
|
||
stats: [
|
||
{
|
||
title: "Intervention rapide", values: [30, 45, 60],
|
||
valueSuffix: "min", description: "Moyenne d'arrivée"
|
||
},
|
||
{
|
||
title: "Clients satisfaits", values: [95, 97, 99],
|
||
valueSuffix: "%", description: "Satisfaction client"
|
||
},
|
||
{
|
||
title: "Années d'expérience", values: [10, 12, 15],
|
||
description: "Service professionnel"
|
||
}
|
||
],
|
||
chartTitle: "Demandes ce mois", chartData: [
|
||
{ value: 85 },
|
||
{ value: 92 },
|
||
{ value: 78 },
|
||
{ value: 88 },
|
||
{ value: 95 }
|
||
],
|
||
listTitle: "Services populaires", listItems: [
|
||
{ icon: Droplet, title: "Débouchage drain", status: "Urgent" },
|
||
{ icon: AlertTriangle, title: "Fuite détectée", status: "Rapide" },
|
||
{ icon: Zap, title: "Installation rapide", status: "Professionnel" }
|
||
]
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardNine
|
||
features={[
|
||
{
|
||
id: 1,
|
||
title: "Débouchage de drains", description: "Débouchage rapide et efficace des éviers, toilettes, et drains principaux. Équipement moderne pour résoudre vos problèmes.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-his-home_23-2148118497.jpg?_wi=1", imageAlt: "drain cleaning service professional equipment" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-his-home_23-2148118497.jpg?_wi=2", imageAlt: "drain cleaning service professional equipment" }
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Réparation de fuites", description: "Détection et réparation professionnelle de fuites d'eau. Intervention rapide pour éviter les dégâts d'eau majeurs.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/couple-fixing-kitchen-sink_53876-146184.jpg?_wi=1", imageAlt: "water leak detection professional plumber" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/couple-fixing-kitchen-sink_53876-146184.jpg?_wi=2", imageAlt: "water leak detection professional plumber" }
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Installation plomberie", description: "Installation complète de lavabos, toilettes, douches. Travail professionnel et conforme aux normes.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg?_wi=1", imageAlt: "plumber installing bathroom fixtures professional" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg?_wi=2", imageAlt: "plumber installing bathroom fixtures professional" }
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "Chauffe-eau", description: "Réparation et remplacement de chauffe-eau. Service professionnel pour eau chaude fiable année-rond.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-plumber-working-fix-problems_23-2150990693.jpg?_wi=1", imageAlt: "water heater installation repair service" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/view-plumber-working-fix-problems_23-2150990693.jpg?_wi=2", imageAlt: "water heater installation repair service" }
|
||
}
|
||
]}
|
||
showStepNumbers={true}
|
||
title="Services Principaux"
|
||
description="Tous les services de plomberie dont vous avez besoin pour votre maison ou commercial à Montréal"
|
||
tag="Services"
|
||
tagIcon={Wrench}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
animationType="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextAbout
|
||
tag="Pourquoi nous?"
|
||
tagIcon={CheckCircle}
|
||
title="Plombier local de confiance à Montréal — Service rapide, professionnel et honnête. Disponible 24h/24 pour vos urgences plomberie."
|
||
useInvertedBackground={true}
|
||
buttons={[
|
||
{ text: "Appeler maintenant", href: "tel:514-355-1333" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardThree
|
||
metrics={[
|
||
{ id: "1", icon: Clock, title: "Réponse rapide", value: "30 min" },
|
||
{ id: "2", icon: Users, title: "Clients heureux", value: "500+" },
|
||
{ id: "3", icon: Star, title: "Note moyenne", value: "4,9/5" },
|
||
{ id: "4", icon: Award, title: "Ans d'expérience", value: "15+" }
|
||
]}
|
||
title="Nos Réalisations"
|
||
description="Chiffres qui parlent de notre fiabilité et professionnalisme"
|
||
tag="Statistiques"
|
||
tagIcon={TrendingUp}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
animationType="scale-rotate"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah Johnson", handle: "Montréal - Anjou", testimonial: "Chris est arrivé à l'heure, était professionnel et a résolu tous mes problèmes de plomberie. Excellente expérience!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-3215.jpg", imageAlt: "satisfied customer portrait professional"
|
||
},
|
||
{
|
||
id: "2", name: "Michael Chen", handle: "Montréal Est", testimonial: "Service rapide, professionnel et courtois. Pas de problème avec le débouchage. Je recommande vivement DR Plomberie!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg", imageAlt: "professional portrait smiling customer"
|
||
},
|
||
{
|
||
id: "3", name: "Emily Rodriguez", handle: "Saint-Léonard", testimonial: "Bon rapport qualité prix. Le plombier connaissait son métier et a résolu le problème rapidement.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280737.jpg", imageAlt: "customer portrait happy satisfied"
|
||
},
|
||
{
|
||
id: "4", name: "David Kim", handle: "Rivière-des-Prairies", testimonial: "Disponible même tard le soir. Service d'urgence vraiment efficace. Plombier de confiance!", imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg", imageAlt: "professional person portrait satisfied"
|
||
},
|
||
{
|
||
id: "5", name: "Lisa Beaumont", handle: "Mercier–Hochelaga", testimonial: "Intervention rapide pour ma fuite. Professionnel et pas de surprise sur la facture. Merci!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-businessman-leaning-knees_1262-5774.jpg", imageAlt: "customer portrait professional smiling"
|
||
},
|
||
{
|
||
id: "6", name: "Robert Gagnon", handle: "Anjou", testimonial: "Plombier local vraiment fiable. Installation complète de nouvelle salle de bain. Excellent travail!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "professional customer portrait happy"
|
||
}
|
||
]}
|
||
title="Avis de nos clients"
|
||
description="Découvrez ce que nos clients satisfaits disent de nos services"
|
||
tag="Témoignages"
|
||
tagIcon={Quote}
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
animationType="slide-up"
|
||
speed={40}
|
||
/>
|
||
</div>
|
||
|
||
<div id="emergency" data-section="emergency">
|
||
<TextAbout
|
||
tag="Urgence"
|
||
tagIcon={AlertCircle}
|
||
title="Plombier d'urgence à Montréal — 24h/24, 7j/7 pour les urgences plomberie: tuyau éclaté, drain bloqué, fuite majeure, toilette débordée, chauffe-eau brisé."
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "Appeler immédiatement", href: "tel:514-355-1333" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
title="Demander une soumission gratuite"
|
||
description="Remplissez le formulaire ci-dessous et nous vous contactons rapidement pour discuter de votre projet plomberie."
|
||
inputs={[
|
||
{ name: "name", type: "text", placeholder: "Votre nom", required: true },
|
||
{ name: "phone", type: "tel", placeholder: "Numéro de téléphone", required: true },
|
||
{ name: "email", type: "email", placeholder: "Votre email", required: true },
|
||
{ name: "service", type: "text", placeholder: "Type de service requis", required: true }
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Décrivez votre problème plomberie...", rows: 5,
|
||
required: false
|
||
}}
|
||
useInvertedBackground={true}
|
||
imageSrc="http://img.b2bpic.net/free-photo/tiler-working-renovation-apartment_23-2149278550.jpg"
|
||
imageAlt="professional plumber in truck service"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
buttonText="Envoyer la demande"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoText="DR Plomberie"
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{ label: "Débouchage", href: "#services" },
|
||
{ label: "Réparation fuites", href: "#services" },
|
||
{ label: "Installation", href: "#services" },
|
||
{ label: "Chauffe-eau", href: "#services" }
|
||
]
|
||
},
|
||
{
|
||
title: "Entreprise", items: [
|
||
{ label: "À propos", href: "#about" },
|
||
{ label: "Avis clients", href: "#testimonials" },
|
||
{ label: "Contact", href: "#contact" },
|
||
{ label: "Urgence", href: "#emergency" }
|
||
]
|
||
},
|
||
{
|
||
title: "Contact", items: [
|
||
{ label: "Téléphone: 514-355-1333", href: "tel:514-355-1333" },
|
||
{ label: "Anjou, Montréal QC", href: "#" },
|
||
{ label: "Disponible 24/7", href: "#" },
|
||
{ label: "Service d'urgence", href: "tel:514-355-1333" }
|
||
]
|
||
},
|
||
{
|
||
title: "Zones desservies", items: [
|
||
{ label: "Anjou", href: "#" },
|
||
{ label: "Montréal Est", href: "#" },
|
||
{ label: "Saint-Léonard", href: "#" },
|
||
{ label: "Rivière-des-Prairies", href: "#" }
|
||
]
|
||
}
|
||
]}
|
||
copyrightText="© 2025 DR Plomberie | Plombier local à Montréal"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|