234 lines
12 KiB
TypeScript
234 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { CheckCircle, Wrench, Zap, SearchCheck, Flame, Star } from "lucide-react";
|
|
|
|
const HomePage = () => {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Diensten", id: "/loodgieter-leiden" },
|
|
{ name: "Reviews", id: "/reviews" },
|
|
{ name: "Contact", id: "/contact" },
|
|
{ name: "06 26144204", id: "tel:+31626144204" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Loodgieter Leiden", href: "/loodgieter-leiden" },
|
|
{ label: "Riool Ontstoppen", href: "/riool-ontstoppen-leiden" },
|
|
{ label: "Lekdetectie", href: "/lekdetectie-leiden" },
|
|
{ label: "CV Onderhoud", href: "/cv-ketel-onderhoud-leiden" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Over Ons", href: "/about" },
|
|
{ label: "Reviews", href: "/reviews" },
|
|
{ label: "Servicebereik", href: "/service-area" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "06 26144204", href: "tel:+31626144204" },
|
|
{ label: "Schipholweg 55, 2316 ZL Leiden", href: "#" },
|
|
{ label: "24/7 Bereikbaar", href: "#" },
|
|
{ label: "info@rioolfix.nl", href: "mailto:info@rioolfix.nl" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacyverklaring", href: "/privacy" },
|
|
{ label: "Cookiebeleid", href: "#" },
|
|
{ label: "Algemene Voorwaarden", href: "#" },
|
|
{ label: "KVK: 12345678", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Rioolfix Leiden"
|
|
bottomLeftText="24/7 Bereikbaar"
|
|
bottomRightText="06 26144204"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="24/7 Loodgieter in Leiden"
|
|
description="Snelle hulp bij lekken, verstopping en CV onderhoud. 5.0 rating van 178 klanten. Wij zijn er voor u wanneer u ons nodig hebt."
|
|
tag="Betrouwbaar & Snel"
|
|
tagIcon={CheckCircle}
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Bel Nu: 06 26144204", href: "tel:+31626144204" },
|
|
{ text: "Offerte Aanvragen", href: "/contact" },
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-detail-sitting-floor_259150-58258.jpg", imageAlt: "plumber technician working professional tools"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-with-clipboard-front-cargo-van-delivering-bottles-water_627829-4187.jpg", imageAlt: "service van plumber van commercial vehicle branded truck work van"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-pipe-wrench-left-side-wooden-background-with-copy-space_141793-15202.jpg", imageAlt: "plumbing tools wrench pipe tools professional equipment plumber tools"
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
title="Onze Kernservices"
|
|
description="Alles wat u nodig hebt voor uw sanitair en riool"
|
|
tag="Diensten"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
icon: Wrench,
|
|
title: "Loodgieter Leiden", description:
|
|
"Reparatie en onderhoud van alle loodgieterswerk. Van lekkende kranen tot complexe herstellingen."
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Riool Ontstoppen", description:
|
|
"Snelle en effectieve behandeling van verstopping. Wij lossen het probleem op, niet zomaar even doorspoelen."
|
|
},
|
|
{
|
|
icon: SearchCheck,
|
|
title: "Lekdetectie", description:
|
|
"Professionele zoektocht naar verborgen lekkages. Snel identificeren, minimale schade, doelgericht herstel."
|
|
},
|
|
{
|
|
icon: Flame,
|
|
title: "CV Ketel Onderhoud", description:
|
|
"Preventief onderhoud en reparatie van uw verwarmingssysteem. Efficiënt en betrouwbaar."
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<MetricCardTwo
|
|
title="Hoe Werkt Het?"
|
|
description="Drie eenvoudige stappen naar een opgelost probleem"
|
|
metrics={[
|
|
{ id: "1", value: "1", description: "Bel of vul het formulier in" },
|
|
{ id: "2", value: "2", description: "Wij stellen vragen en geven prijsindicatie" },
|
|
{ id: "3", value: "3", description: "Monteur komt langs en lost het op" },
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust-signals" data-section="trust-signals">
|
|
<TestimonialAboutCard
|
|
tag="Waarom Rioolfix?"
|
|
title="Vertrouwd door Leiden & Omgeving"
|
|
description="5.0 ster rating"
|
|
subdescription="178 beoordelingen"
|
|
icon={Star}
|
|
imageSrc="http://img.b2bpic.net/free-photo/smiling-senior-business-leader-standing-with-team_1262-1996.jpg"
|
|
imageAlt="team photo professional team workers group company team staff portrait"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardTen
|
|
title="Klantbeoordelingen"
|
|
description="Dit zeggen onze klanten over ons werk"
|
|
tag="Reviews"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Snelle en professionele service", quote:
|
|
"Binnen anderhalf uur ter plekke. Het probleem was snel opgelost en ze waren erg schoon bij het werken. Aanrader!", name: "Johan de Bruijn", role: "Eigenaar woning Leiden", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "portrait professional headshot male portrait businessman avatar"
|
|
},
|
|
{
|
|
id: "2", title: "Zeer vriendelijk en deskundig", quote:
|
|
"De monteur nam de tijd om alles uit te leggen. Geen oplichterij, gewoon eerlijk werk. Zeker weer bellen.", name: "Maria Jansen", role: "Huiseigenaar", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "woman portrait female headshot professional photo businesswoman avatar female"
|
|
},
|
|
{
|
|
id: "3", title: "Best beschikbare loodgieter", quote:
|
|
"Zaterdagochtend een lek, direct gebeld en ze konden meteen langs. Dit is de betrouwbaarheid waar je naar zoekt.", name: "Peter van der Meer", role: "Bedrijfseigenaar", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "male portrait professional headshot businessman portrait face photo avatar man"
|
|
},
|
|
{
|
|
id: "4", title: "Duidelijke communicatie", quote:
|
|
"Alles vooraf besproken, geen verrassingen in de rekening. Dat waardeer je echt. Zij begrijpen wat klantservice is.", name: "Inge Hermans", role: "Huiseigenaar", imageSrc: "http://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg", imageAlt: "woman portrait professional photo female headshot businesswoman portrait"
|
|
},
|
|
{
|
|
id: "5", title: "Professionele aanpak", quote:
|
|
"CV ketel vervangen gebeurde snel en vakkundig. Alle tests gedaan en goed uitgelegd. Top bedrijf.", name: "Dirk Bosman", role: "Huiseigenaar", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "male portrait professional headshot businessman man photo avatar"
|
|
},
|
|
{
|
|
id: "6", title: "Betrouwbare partners", quote:
|
|
"Voor ons bedrijf regelen zij al jaren het onderhoud. Altijd op tijd, altijd werk van hoog niveau.", name: "Nicole Starrenburg", role: "Bedrijfsmanager", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "woman portrait professional photo female headshot businesswoman avatar"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Neem Contact Met Ons Op"
|
|
description="Vul het formulier in of bel direct. We reageren zo snel mogelijk op uw aanvraag."
|
|
inputs={[
|
|
{ name: "naam", type: "text", placeholder: "Uw naam", required: true },
|
|
{ name: "telefoon", type: "tel", placeholder: "06 12345678", required: true },
|
|
{ name: "postcode", type: "text", placeholder: "2316 ZL (voor lokale kwalificatie)", required: true },
|
|
{ name: "onderwerp", type: "text", placeholder: "Bijv: Riool ontstopping, Lekkage, CV onderhoud", required: true },
|
|
]}
|
|
textarea={{ name: "bericht", placeholder: "Beschrijf uw probleem en de urgentie", rows: 5, required: false }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-office-meeting-room-with-city-view_9975-23238.jpg"
|
|
imageAlt="office modern office workplace professional office business office"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Offerte Aanvragen"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis columns={footerColumns} logoText="Rioolfix Leiden" />
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default HomePage; |