173 lines
7.9 KiB
TypeScript
173 lines
7.9 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||
import { Phone, Mail } from "lucide-react";
|
||
|
||
export default function HomePage() {
|
||
const navItems = [
|
||
{ name: "Home", id: "/" },
|
||
{ name: "Diensten", id: "/diensten" },
|
||
{ name: "Over ons", id: "/over-ons" },
|
||
{ name: "Reviews", id: "/reviews" },
|
||
{ name: "Contact", id: "/contact" },
|
||
];
|
||
|
||
const servicesFeatures = [
|
||
{
|
||
title: "Loodgieter Leiden", description: "Lekdetectie, reparaties en installaties 24/7", imageSrc: "http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg", imageAlt: "Plumbing service", button: { text: "Meer informatie", href: "/loodgieter-leiden" },
|
||
},
|
||
{
|
||
title: "Riool Ontstoppen", description: "Snelle oplossing voor verstopping en afvoerproblems", imageSrc: "http://img.b2bpic.net/free-photo/watering-can_23-2148006090.jpg", imageAlt: "Sewage clearing service", button: { text: "Meer informatie", href: "/riool-ontstoppen-leiden" },
|
||
},
|
||
{
|
||
title: "Lekdetectie", description: "Gericht lek opsporen zonder onnodig breekwerk", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg", imageAlt: "Leak detection service", button: { text: "Meer informatie", href: "/lekdetectie" },
|
||
},
|
||
{
|
||
title: "CV-Ketel Onderhoud", description: "Betrouwbare controle en onderhoud van CV-ketels", imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334225.jpg", imageAlt: "Heating maintenance service", button: { text: "Meer informatie", href: "/cv-ketel-onderhoud" },
|
||
},
|
||
];
|
||
|
||
const testimonials = [
|
||
{
|
||
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "portrait professional woman smiling headshot"},
|
||
{
|
||
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "portrait professional man headshot business"},
|
||
{
|
||
id: "3", name: "Emma Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "portrait customer happy satisfied professional"},
|
||
{
|
||
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "portrait professional male headshot confident"},
|
||
{
|
||
id: "5", name: "Lisa Mueller", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "portrait professional female smiling business"},
|
||
{
|
||
id: "6", name: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", imageAlt: "portrait satisfied customer professional headshot"},
|
||
];
|
||
|
||
const handleNavigation = (id: string) => {
|
||
if (id === "/") {
|
||
window.location.href = "/";
|
||
} else if (id.startsWith("http") || id.startsWith("tel:") || id.startsWith("mailto:")) {
|
||
window.location.href = id;
|
||
} else {
|
||
const element = document.getElementById(id);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: "smooth" });
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="smallMedium"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="medium"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
brandName="Rioolfix"
|
||
navItems={navItems}
|
||
button={{ text: "06 26144204", href: "tel:0626144204" }}
|
||
animateOnLoad={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardScroll
|
||
title="Loodgieter in Leiden – snel geholpen bij lekkage & verstopping"
|
||
description="24/7 bereikbaar voor spoed en gepland werk. Heldere communicatie, nette service en vooraf duidelijke afspraken."
|
||
tag="⭐ 5,0 (178 reviews)"
|
||
background={{ variant: "canvas-reveal" }}
|
||
buttons={[
|
||
{ text: "Bel direct: 06 26144204", href: "tel:0626144204" },
|
||
{ text: "Offerte aanvragen", href: "#contact" },
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/couple-fixing-kitchen-sink_53876-146184.jpg"
|
||
imageAlt="Professional plumber at work"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services-overview" data-section="services-overview">
|
||
<FeatureCardOne
|
||
title="Onze diensten in Leiden"
|
||
description="Wij bieden volledige loodgietersdiensten voor uw thuis en bedrijf"
|
||
features={servicesFeatures}
|
||
gridVariant="two-columns-alternating-heights"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="emergency-banner" data-section="emergency-banner">
|
||
<ContactCenter
|
||
tag="SPOED"
|
||
title="24/7 bereikbaar bij lekkage en verstopping"
|
||
description="Bel direct voor onmiddellijke hulp. Wij komen snel en professioneel ter plaatse."
|
||
background={{ variant: "radial-gradient" }}
|
||
useInvertedBackground={true}
|
||
buttonText="Bel nu"
|
||
inputPlaceholder="Uw telefoonnummer"
|
||
/>
|
||
</div>
|
||
|
||
<div id="process" data-section="process">
|
||
<InlineImageSplitTextAbout
|
||
heading={[{ type: "text", content: "Zo werken we" }]}
|
||
buttons={[{ text: "Bel of vul formulier in", href: "#contact" }]}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwelve
|
||
testimonials={testimonials}
|
||
cardTitle="Binnen een uur stond de loodgieter bij me. Verduidelijkte alles en werkte netjes. 178+ tevreden klanten geven ons 5,0 sterren"
|
||
cardTag="Bekijk wat klanten zeggen"
|
||
cardAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact-section" data-section="contact-section">
|
||
<ContactCenter
|
||
tag="Direct contact"
|
||
title="Direct hulp nodig?"
|
||
description="Vul uw gegevens in of bel direct 06 26144204. Wij reageren snel op uw aanvraag."
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={false}
|
||
buttonText="Offerte aanvragen"
|
||
inputPlaceholder="Uw e-mailadres"
|
||
/>
|
||
</div>
|
||
|
||
<footer id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="Rioolfix"
|
||
copyrightText="© 2025 Rioolfix Installatiebedrijf. Schipholweg 55, 2316 ZL Leiden | 06 26144204 | 24/7 bereikbaar"
|
||
socialLinks={[
|
||
{
|
||
icon: Phone,
|
||
href: "tel:0626144204", ariaLabel: "Bel Rioolfix"},
|
||
{
|
||
icon: Mail,
|
||
href: "mailto:info@rioolfix.nl", ariaLabel: "Email Rioolfix"},
|
||
]}
|
||
/>
|
||
</footer>
|
||
</ThemeProvider>
|
||
);
|
||
} |