Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-08 20:07:45 +00:00

View File

@@ -17,352 +17,138 @@ export default function LandingPage() {
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Over Ons",
id: "about",
},
{
name: "Diensten",
id: "features",
},
{
name: "Tarieven",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="GreenGrowth"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Over Ons", id: "about" },
{ name: "Diensten", id: "features" },
{ name: "Tarieven", id: "pricing" },
{ name: "Contact", id: "contact" }
]}
brandName="GreenGrowth"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "plain",
}}
title="Laat Uw Tuin Weer Tot Bloei Komen"
description="Professioneel tuinonderhoud voor een weelderige, gezonde tuin het hele jaar door. Wij verzorgen uw buitenruimte met passie en precisie."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-happy-gardener-takes-care-about-growning-pot-plant_273609-27480.jpg",
imageAlt: "Gardener working",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smiling-brunet-male-gardener-cutting-overgrown-bush-by-hedge-trimmer-sunny-day-front-view-hard_7502-10573.jpg?_wi=1",
imageAlt: "Landscaping service",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-watering-his-plants-his-garden-man-blue-shirt_1157-41445.jpg?_wi=1",
imageAlt: "Planting flowers",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg?_wi=1",
imageAlt: "Hedge trimming",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg?_wi=1",
imageAlt: "Lawn care",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/cute-pink-gardening-composition_23-2147673316.jpg?_wi=1",
imageAlt: "Blooming garden",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg?_wi=2",
imageAlt: "Lawn care",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg?_wi=2",
imageAlt: "Hedge trimming",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-watering-his-plants-his-garden-man-blue-shirt_1157-41445.jpg?_wi=2",
imageAlt: "Planting flowers",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smiling-brunet-male-gardener-cutting-overgrown-bush-by-hedge-trimmer-sunny-day-front-view-hard_7502-10573.jpg?_wi=2",
imageAlt: "Landscaping service",
},
]}
buttons={[
{
text: "Offerte Aanvragen",
href: "#contact",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg",
alt: "Client A",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-male-florist-work_23-2149127313.jpg",
alt: "Client B",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-people-with-plants_23-2149722631.jpg",
alt: "Client C",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-female-gardener-greenhouse_23-2147918741.jpg",
alt: "Client D",
},
{
src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-working-florist-shop-celebrating-crazy-amazed-success-with-open-eyes-screaming-excited_839833-8965.jpg",
alt: "Client E",
},
]}
avatarText="Vertrouwd door 500+ klanten"
marqueeItems={[
{
type: "text",
text: "Gazononderhoud",
},
{
type: "text",
text: "Boomverzorging",
},
{
type: "text",
text: "Tuinontwerp",
},
{
type: "text",
text: "Snoeien",
},
{
type: "text",
text: "Bestrating",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "plain" }}
title="Laat Uw Tuin Weer Tot Bloei Komen"
description="Professioneel tuinonderhoud voor een weelderige, gezonde tuin het hele jaar door. Wij verzorgen uw buitenruimte met passie en precisie."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-happy-gardener-takes-care-about-growning-pot-plant_273609-27480.jpg", imageAlt: "professional gardener pruning plants" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smiling-brunet-male-gardener-cutting-overgrown-bush-by-hedge-trimmer-sunny-day-front-view-hard_7502-10573.jpg", imageAlt: "lawn care professional working" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-watering-his-plants-his-garden-man-blue-shirt_1157-41445.jpg", imageAlt: "man gardening in sunny park" },
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg", imageAlt: "hedges trimming professional service" },
{ imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg", imageAlt: "gardener using mower grass lawn" }
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/cute-pink-gardening-composition_23-2147673316.jpg", imageAlt: "flourishing flower bed gardening" },
{ imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg", imageAlt: "gardener using mower grass lawn" },
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg", imageAlt: "hedges trimming professional service" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-watering-his-plants-his-garden-man-blue-shirt_1157-41445.jpg", imageAlt: "man gardening in sunny park" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smiling-brunet-male-gardener-cutting-overgrown-bush-by-hedge-trimmer-sunny-day-front-view-hard_7502-10573.jpg", imageAlt: "lawn care professional working" }
]}
buttons={[{ text: "Offerte Aanvragen", href: "#contact" }]}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg", alt: "happy client gardening review" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-male-florist-work_23-2149127313.jpg", alt: "customer standing backyard" },
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-people-with-plants_23-2149722631.jpg", alt: "woman customer satisfied garden" },
{ src: "http://img.b2bpic.net/free-photo/portrait-female-gardener-greenhouse_23-2147918741.jpg", alt: "customer portrait outdoors garden" },
{ src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-working-florist-shop-celebrating-crazy-amazed-success-with-open-eyes-screaming-excited_839833-8965.jpg", alt: "smiling client gardening service" }
]}
avatarText="Vertrouwd door 500+ klanten"
marqueeItems={[{ type: "text", text: "Gazononderhoud" }, { type: "text", text: "Boomverzorging" }, { type: "text", text: "Tuinontwerp" }, { type: "text", text: "Snoeien" }, { type: "text", text: "Bestrating" }]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Passie voor Groen en Vakmanschap"
description="Met jarenlange ervaring in de tuinsector begrijpen we dat elke tuin uniek is. Wij bieden zorg op maat, van periodiek onderhoud tot volledige renovatie."
metrics={[
{
value: "15+",
title: "Jaar Ervaring",
},
{
value: "500+",
title: "Blije Klanten",
},
{
value: "100%",
title: "Gegarandeerde Kwaliteit",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-female-gardener-uniform-wearing-gardening-hat-holding-flowers-flowerpots-isolated-green-wall_141793-46630.jpg"
imageAlt="Tuinman aan het werk"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Passie voor Groen en Vakmanschap"
description="Met jarenlange ervaring in de tuinsector begrijpen we dat elke tuin uniek is. Wij bieden zorg op maat, van periodiek onderhoud tot volledige renovatie."
metrics={[{ value: "15+", title: "Jaar Ervaring" }, { value: "500+", title: "Blije Klanten" }, { value: "100%", title: "Gegarandeerde Kwaliteit" }]}
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-female-gardener-uniform-wearing-gardening-hat-holding-flowers-flowerpots-isolated-green-wall_141793-46630.jpg"
imageAlt="gardener holding plants portrait"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Grasmaaien",
description: "Periodiek onderhoud voor een strak en gezond gazon.",
imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg?_wi=3",
imageAlt: "Grasmaaien",
},
{
title: "Heggen Snoeien",
description: "Vakkundige vormsnoei voor al uw heggen en struiken.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg?_wi=3",
imageAlt: "Snoeien",
},
{
title: "Onkruidbeheer",
description: "Wij houden borders en bestrating onkruidvrij.",
imageSrc: "http://img.b2bpic.net/free-photo/cute-pink-gardening-composition_23-2147673316.jpg?_wi=2",
imageAlt: "Onkruid",
},
]}
title="Onze Diensten"
description="Wij bieden een breed scala aan diensten om uw tuin in topconditie te houden."
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Grasmaaien", description: "Periodiek onderhoud voor een strak en gezond gazon.", imageSrc: "http://img.b2bpic.net/free-photo/brunet-handyman-protective-shield-standing-with-cordless-chain-saw-while-working-backyard_7502-10173.jpg", imageAlt: "gardener using mower grass lawn" },
{ title: "Heggen Snoeien", description: "Vakkundige vormsnoei voor al uw heggen en struiken.", imageSrc: "http://img.b2bpic.net/free-photo/happy-male-gardener-pruning-green-plant_23-2147844326.jpg", imageAlt: "hedges trimming professional service" },
{ title: "Onkruidbeheer", description: "Wij houden borders en bestrating onkruidvrij.", imageSrc: "http://img.b2bpic.net/free-photo/cute-pink-gardening-composition_23-2147673316.jpg", imageAlt: "flourishing flower bed gardening" }
]}
title="Onze Diensten"
description="Wij bieden een breed scala aan diensten om uw tuin in topconditie te houden."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Basis",
price: "€45/uur",
subtitle: "Voor klein onderhoud",
buttons: [
{
text: "Kies Pakket",
href: "#contact",
},
],
features: [
"Grasmaaien",
"Kanten knippen",
],
},
{
id: "pro",
badge: "Populair",
price: "€85/uur",
subtitle: "Volledig ontzorgd",
buttons: [
{
text: "Kies Pakket",
href: "#contact",
},
],
features: [
"Grasmaaien",
"Snoeien",
"Onkruid",
"Bemesting",
],
},
{
id: "premium",
badge: "Premium",
price: "€120/uur",
subtitle: "Exclusieve zorg",
buttons: [
{
text: "Kies Pakket",
href: "#contact",
},
],
features: [
"Alles uit Pro",
"Tuinrenovatie",
"Seizoenscheck",
],
},
]}
title="Transparante Tarieven"
description="Kies het pakket dat het beste bij uw tuin past."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", badge: "Basis", price: "€45/uur", subtitle: "Voor klein onderhoud", buttons: [{ text: "Kies Pakket", href: "#contact" }], features: ["Grasmaaien", "Kanten knippen"] },
{ id: "pro", badge: "Populair", price: "€85/uur", subtitle: "Volledig ontzorgd", buttons: [{ text: "Kies Pakket", href: "#contact" }], features: ["Grasmaaien", "Snoeien", "Onkruid", "Bemesting"] },
{ id: "premium", badge: "Premium", price: "€120/uur", subtitle: "Exclusieve zorg", buttons: [{ text: "Kies Pakket", href: "#contact" }], features: ["Alles uit Pro", "Tuinrenovatie", "Seizoenscheck"] }
]}
title="Transparante Tarieven"
description="Kies het pakket dat het beste bij uw tuin past."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="Geweldige service! Mijn tuin ziet er weer fantastisch uit dankzij het vakmanschap van GreenGrowth."
rating={5}
author="Jan Jansen"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg",
alt: "Klant 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-male-florist-work_23-2149127313.jpg",
alt: "Klant 2",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-people-with-plants_23-2149722631.jpg",
alt: "Klant 3",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-female-gardener-greenhouse_23-2147918741.jpg",
alt: "Klant 4",
},
{
src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-working-florist-shop-celebrating-crazy-amazed-success-with-open-eyes-screaming-excited_839833-8965.jpg",
alt: "Klant 5",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="Geweldige service! Mijn tuin ziet er weer fantastisch uit dankzij het vakmanschap van GreenGrowth."
rating={5}
author="Jan Jansen"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiling-young-pretty-caucasian-woman-sitting-armchair-designed-living-room-looking-showing-thumb-up-doing-money-gesture_141793-58035.jpg", alt: "happy client gardening review" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-male-florist-work_23-2149127313.jpg", alt: "customer standing backyard" },
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-people-with-plants_23-2149722631.jpg", alt: "woman customer satisfied garden" },
{ src: "http://img.b2bpic.net/free-photo/portrait-female-gardener-greenhouse_23-2147918741.jpg", alt: "customer portrait outdoors garden" },
{ src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-working-florist-shop-celebrating-crazy-amazed-success-with-open-eyes-screaming-excited_839833-8965.jpg", alt: "smiling client gardening service" }
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Plan Vandaag Uw Afspraak"
description="Vraag direct een offerte aan of stel uw vragen aan onze experts."
inputs={[
{
name: "name",
type: "text",
placeholder: "Naam",
required: true,
},
{
name: "email",
type: "email",
placeholder: "E-mail",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Uw wensen voor uw tuin...",
rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7006.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Plan Vandaag Uw Afspraak"
description="Vraag direct een offerte aan of stel uw vragen aan onze experts."
inputs={[{ name: "name", type: "text", placeholder: "Naam", required: true }, { name: "email", type: "email", placeholder: "E-mail", required: true }]}
textarea={{ name: "message", placeholder: "Uw wensen voor uw tuin...", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7006.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Diensten",
href: "#features",
},
],
},
{
items: [
{
label: "Contact",
href: "#contact",
},
{
label: "Over Ons",
href: "#about",
},
],
},
]}
logoText="GreenGrowth"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="GreenGrowth"
columns={[{ items: [{ label: "Home", href: "#hero" }, { label: "Diensten", href: "#features" }] }, { items: [{ label: "Contact", href: "#contact" }, { label: "Over Ons", href: "#about" }] }]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}