213 lines
10 KiB
TypeScript
213 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, CheckCircle, Shield, Zap, Search, Home, Layers } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="DakExpert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Uw Expert in Dakinstallatie & Reparatie"
|
|
description="Premium service, duurzame kwaliteit en snelle oplossingen bij storm- & windschade. Uw dak is onze prioriteit."
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 1" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 2" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 3" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 4" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 5" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 6" }
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 7" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 8" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 9" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 10" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 11" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg", imageAlt: "Dakwerkzaamheden 12" }
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Gratis Offerte Aanvragen", href: "#contact"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-handsome-dark-haired-latin-man-posing-with-arms-folded-kitchen_74855-8094.jpg", alt: "Klant 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/salesman-shows-color-swatches-lady-customer-new-kitchen-furniture_93675-134887.jpg", alt: "Klant 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-woman-showing-ok-sign-looking-camera_1262-13033.jpg", alt: "Klant 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-family-near-new-house-real-estate-concept_493343-29873.jpg", alt: "Klant 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-satisfied-customer-making-ok-gesture_74855-2298.jpg", alt: "Klant 5"},
|
|
]}
|
|
avatarText="Al 1500+ tevreden klanten gingen u voor"
|
|
marqueeItems={[
|
|
{ type: "text", text: "Stormschade Herstel" },
|
|
{ type: "text", text: "Dakinspectie" },
|
|
{ type: "text", text: "Dakvervanging" },
|
|
{ type: "text", text: "Isolatie" },
|
|
{ type: "text", text: "Onderhoud" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={true}
|
|
title="Jarenlange Expertise"
|
|
metrics={[
|
|
{
|
|
label: "Projecten voltooid", value: "1500+", icon: Award,
|
|
},
|
|
{
|
|
label: "Tevreden klanten", value: "99%", icon: CheckCircle,
|
|
},
|
|
{
|
|
label: "Jaren ervaring", value: "20+", icon: Shield,
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Stormschade Herstel", description: "Snelle reparatie van lekkages en loszittende pannen na storm.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg", buttonIcon: Zap,
|
|
},
|
|
{
|
|
title: "Dakinspectie", description: "Grondige check-up van uw dakconditie en structurele integriteit.", imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg", buttonIcon: Search,
|
|
},
|
|
{
|
|
title: "Nieuwe Dakbedekking", description: "Duurzame oplossingen voor platte en hellende daken.", imageSrc: "http://img.b2bpic.net/free-photo/seamless-carpet-texture-floor-pattern-blue-color_169016-48995.jpg", buttonIcon: Home,
|
|
},
|
|
{
|
|
title: "Isolatie & Onderhoud", description: "Energiebesparende isolatie en periodiek dakonderhoud.", imageSrc: "http://img.b2bpic.net/free-photo/protection-gloves-saw-table_23-2148180602.jpg", buttonIcon: Layers,
|
|
},
|
|
]}
|
|
title="Onze Dakdiensten"
|
|
description="Van kleine reparaties tot volledige dakvervanging, wij staan voor u klaar."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jan de Vries", role: "Eigenaar", company: "Particulier", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-dark-haired-latin-man-posing-with-arms-folded-kitchen_74855-8094.jpg"},
|
|
{
|
|
id: "2", name: "Marieke Janssen", role: "Huisvrouw", company: "Particulier", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/salesman-shows-color-swatches-lady-customer-new-kitchen-furniture_93675-134887.jpg"},
|
|
{
|
|
id: "3", name: "Pieter Smit", role: "Ondernemer", company: "Kantoor", rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-woman-showing-ok-sign-looking-camera_1262-13033.jpg"},
|
|
{
|
|
id: "4", name: "Laura Bakker", role: "Manager", company: "Retail", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-family-near-new-house-real-estate-concept_493343-29873.jpg"},
|
|
{
|
|
id: "5", name: "Tom Mulder", role: "Directeur", company: "VVE", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-customer-making-ok-gesture_74855-2298.jpg"},
|
|
]}
|
|
title="Wat klanten zeggen"
|
|
description="Wij zijn trots op de waardering van onze klanten."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
tag="Contact"
|
|
title="Direct een offerte aanvragen?"
|
|
description="Laat uw contactgegevens achter en wij nemen vandaag nog contact op voor een passende oplossing."
|
|
imageSrc="http://img.b2bpic.net/free-photo/window-pattern-textures-building_1203-9658.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "DakExpert", items: [
|
|
{
|
|
label: "Over ons", href: "#about"},
|
|
{
|
|
label: "Onze werkwijze", href: "#features"},
|
|
],
|
|
},
|
|
{
|
|
title: "Diensten", items: [
|
|
{
|
|
label: "Dakinstallatie", href: "#features"},
|
|
{
|
|
label: "Reparatie", href: "#features"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Algemene Voorwaarden", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 DakExpert"
|
|
bottomRightText="Alle rechten voorbehouden"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|