243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sun, Zap, Package, Settings, Phone, HelpCircle, Home, Measure, CheckCircle, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Zonweringspecialist"
|
|
navItems={[
|
|
{ name: "Start", id: "hero" },
|
|
{ name: "Diensten", id: "services" },
|
|
{ name: "Producten", id: "products" },
|
|
{ name: "Configurator", id: "configurator" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Offerte aanvragen", href: "#configurator" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Zonwering op Maat voor Uw Gent Woning"
|
|
description="Professionele zonneschermoplossingen met gratis inmeetservice en persoonlijk advies. Kies uit voorzetrolluiken, screens en luifels."
|
|
tag="Zonneschermspecialist"
|
|
tagIcon={Sun}
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Bekijk Producten", href: "#products" },
|
|
{ text: "Offerte Aanvragen", href: "#configurator" }
|
|
]}
|
|
dashboard={{
|
|
title: "Onze Diensten", logoIcon: Sparkles,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/trendy-modern-design-twolevel-apartment-with-large-high-windows_1258-84052.jpg", imageAlt: "sunshade terrace architecture exterior modern", searchPlaceholder: "Zoeken naar zonwering...", buttons: [
|
|
{ text: "Meer Info", href: "#services" },
|
|
{ text: "Contact", href: "#contact" }
|
|
],
|
|
sidebarItems: [
|
|
{ icon: Home, active: true },
|
|
{ icon: Measure, active: false },
|
|
{ icon: Settings, active: false }
|
|
],
|
|
stats: [
|
|
{ title: "Klanten Geholpen", values: [500, 750, 1200], description: "Tevreden klanten in Gent" },
|
|
{ title: "Jaar Ervaring", values: [10, 15, 20], valueSuffix: "+", description: "Expertise in zonwering" },
|
|
{ title: "Projecten", values: [2000, 2500, 3100], description: "Succesvolle installaties" }
|
|
],
|
|
chartTitle: "Klanttevredenheid", chartData: [
|
|
{ value: 95 },
|
|
{ value: 98 },
|
|
{ value: 97 },
|
|
{ value: 99 },
|
|
{ value: 96 }
|
|
],
|
|
listTitle: "Recente Installaties", listItems: [
|
|
{ icon: CheckCircle, title: "Voorzetrolluik Gent", status: "Voltooid" },
|
|
{ icon: CheckCircle, title: "Screen Antwerpen", status: "Voltooid" },
|
|
{ icon: CheckCircle, title: "Luifel Brugge", status: "Voltooid" }
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSeven
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Gratis Inmeetservice", description: "Gratis advies ter plaatse en gratis inmeetservice zonder kleine lettertjes. Onze experts analyseren uw situatie en bieden persoonlijke aanbevelingen.", imageSrc: "http://img.b2bpic.net/free-photo/trendy-modern-design-twolevel-apartment-with-large-high-windows_1258-84052.jpg", imageAlt: "Gratis inmeetservice"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Ontwerp & Offerte", description: "Persoonlijk advies met heldere prijzen en offerte op maat. Wij tonen u 3D-visualisaties van uw toekomstige zonwering.", imageSrc: "http://img.b2bpic.net/free-photo/wooden-blinds_1203-1110.jpg", imageAlt: "Ontwerp en offerte"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Professionele Installatie", description: "Professionele installatie & vakkundige afwerking volgens de regels. Ons team zorgt voor een perfect resultaat.", imageSrc: "http://img.b2bpic.net/free-photo/gray-metal-grid-background_158595-5084.jpg", imageAlt: "Professionele installatie"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Genieten!", description: "Geniet van de voordelen en het comfort van uw nieuwe zonwering. Jarenlang zorgeloos genieten van schaduw en comfort.", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-street-cafe-smiling-laughs-drinking-coffee-terrace_1321-1404.jpg", imageAlt: "Genieten van zonwering"
|
|
}
|
|
]}
|
|
title="Ons Proces in 4 Stappen"
|
|
description="Van gratis advies tot genieten van uw nieuwe zonwering - wij begeleiden u door elk stadium"
|
|
tag="Hoe Het Werkt"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
products={[
|
|
{
|
|
id: "product-1", name: "Voorzetrolluik", price: "Vanaf €399", imageSrc: "http://img.b2bpic.net/free-photo/wooden-blinds_1203-1110.jpg", imageAlt: "Voorzetrolluik zonwering"
|
|
},
|
|
{
|
|
id: "product-2", name: "Screen", price: "Vanaf €599", imageSrc: "http://img.b2bpic.net/free-photo/gray-metal-grid-background_158595-5084.jpg", imageAlt: "Retractable screen zonwering"
|
|
},
|
|
{
|
|
id: "product-3", name: "Luifel", price: "Vanaf €799", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-street-cafe-smiling-laughs-drinking-coffee-terrace_1321-1404.jpg", imageAlt: "Luifel zonwering"
|
|
}
|
|
]}
|
|
title="Onze Producten"
|
|
description="Kies uw ideale zonweringoplossing - voorzetrolluiken, screens of luifels"
|
|
tag="Producten"
|
|
tagIcon={Package}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="configurator" data-section="configurator">
|
|
<ContactSplit
|
|
tag="Configurator"
|
|
title="Uw Offerte in 4 Stappen"
|
|
description="Configureer uw ideale zonwering. Selecteer product, dimensies, bediening en kleur. U ontvangt direct een persoonlijke offerte."
|
|
tagIcon={Settings}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/diverse-team-analyzing-goods-quality-control-report-tablet_482257-84290.jpg"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="Uw e-mailadres"
|
|
buttonText="Configureer Nu"
|
|
termsText="Wij respecteren uw privacy. Uw offerte-aanvraag wordt behandeld door ons team."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Wat is de levertijd?", content: "De standaard levertijd bedraagt 2-3 weken na goedkeuring van de offerte. Voor spoedorders kunnen we sneller leveren."
|
|
},
|
|
{
|
|
id: "faq-2", title: "Biedt u garantie?", content: "Ja, op alle producten bieden we een standaardgarantie van 2 jaar op fabrieksfouten. Het mechanisme heeft een verlengde garantie van 5 jaar."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Zijn jullie ook in de buurt beschikbaar?", content: "Wij zijn gevestigd in Gent en leveren in heel Vlaanderen. Voor buitenlandse projecten, neem contact op voor mogelijkheden."
|
|
},
|
|
{
|
|
id: "faq-4", title: "Kunnen bestaande screens vervangen worden?", content: "Absoluut! Wij kunnen bestaande zonweringen vervangen of upgraden. Neem contact op voor een inspectie."
|
|
},
|
|
{
|
|
id: "faq-5", title: "Wat zijn de onderhoudskosten?", content: "Onze producten zijn onderhoudsarm. Jaarlijkse reiniging wordt aanbevolen. Wij bieden onderhoudscontracten aan."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Kan ik mijn zonwering motoriseren?", content: "Ja, alle producten kunnen met elektrische bediening of afstandsbediening + app-besturing worden uitgerust."
|
|
}
|
|
]}
|
|
title="Veelgestelde Vragen"
|
|
description="Vind antwoorden op de meest gestelde vragen over onze zonweringoplossingen"
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Contact"
|
|
title="Neem Contact Met Ons Op"
|
|
description="Heeft u vragen? Ons team staat klaar om u te helpen. Bel, e-mail of kom langs voor gratis advies."
|
|
tagIcon={Phone}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/boss-instructing-assistant-colleagues-standing-sitting-table-with-monitor-documents-manager-pointing-paper-listening-coworker-business-communication-concept_74855-11543.jpg"
|
|
mediaPosition="left"
|
|
mediaAnimation="opacity"
|
|
inputPlaceholder="Uw e-mailadres"
|
|
buttonText="Stuur Bericht"
|
|
termsText="Wij nemen contact met u op binnen 24 uur."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Zonweringspecialist"
|
|
columns={[
|
|
{
|
|
title: "Producten", items: [
|
|
{ label: "Voorzetrolluik", href: "#products" },
|
|
{ label: "Screen", href: "#products" },
|
|
{ label: "Luifel", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Bedrijf", items: [
|
|
{ label: "Over Ons", href: "#services" },
|
|
{ label: "Ons Proces", href: "#services" },
|
|
{ label: "FAQ", href: "#faq" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Bel Ons: 04 95 73 66 06", href: "tel:0495736606" },
|
|
{ label: "E-mail: info@zonweringspecialist.be", href: "mailto:info@zonweringspecialist.be" },
|
|
{ label: "Bezoek Ons", href: "https://www.google.com/maps?cid=638570200967813247" }
|
|
]
|
|
},
|
|
{
|
|
title: "Locatie", items: [
|
|
{ label: "Pantserschipstraat 161", href: "https://www.google.com/maps?cid=638570200967813247" },
|
|
{ label: "9000 Gent, België", href: "https://www.google.com/maps?cid=638570200967813247" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Zonweringspecialist. Alle rechten voorbehouden."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |