Merge version_4 into main #5
228
src/app/page.tsx
228
src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { ShieldCheck, Zap, Lock, Eye, Shield, Clock, PackageCheck, Zap } from "lucide-react";
|
||||
import { ShieldCheck, Lock, Eye, Shield, Clock, PackageCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,125 +28,129 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Diensten", id: "features" },
|
||||
{ name: "Tarieven", id: "metrics" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="NULAR"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Diensten", id: "features" },
|
||||
{ name: "Tarieven", id: "metrics" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="NULAR"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="NULAR"
|
||||
description="Uw betrouwbare partner voor spoedtransport. Wij leveren uw zendingen sneller, veiliger en met volledige toewijding door heel Europa."
|
||||
buttons={[
|
||||
{ text: "Offerte Aanvragen", href: "#contact" },
|
||||
{ text: "Onze Diensten", href: "#features" }
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="NULAR"
|
||||
description="Uw betrouwbare partner voor spoedtransport. Wij leveren uw zendingen sneller, veiliger en met volledige toewijding door heel Europa."
|
||||
buttons={[
|
||||
{ text: "Offerte Aanvragen", href: "#contact" },
|
||||
{ text: "Onze Diensten", href: "#features" }
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Waarom Kiezen Voor NULAR?"
|
||||
metrics={[
|
||||
{ icon: Clock, label: "Direct Vertrek", value: "24/7" },
|
||||
{ icon: ShieldCheck, label: "Veiligheid", value: "100%" },
|
||||
{ icon: Zap, label: "Levertijd", value: "Razendsnel" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Waarom Kiezen Voor NULAR?"
|
||||
metrics={[
|
||||
{ icon: Clock, label: "Direct Vertrek", value: "24/7" },
|
||||
{ icon: ShieldCheck, label: "Veiligheid", value: "100%" },
|
||||
{ icon: Zap, label: "Levertijd", value: "Razendsnel" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Onze Spoedtransport Diensten"
|
||||
description="Van kleine pakketten tot grote vracht, NULAR staat voor u klaar."
|
||||
features={[
|
||||
{
|
||||
title: "Koeriersdiensten", description: "Direct van A naar B zonder tussenstops.", items: [{ icon: PackageCheck, text: "Express levering" }, { icon: Eye, text: "Real-time track & trace" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Grote Vracht", description: "Speciaal transport voor uw zwaardere goederen.", items: [{ icon: Shield, text: "Verzekerd transport" }, { icon: Zap, text: "Vakbekwame chauffeurs" }],
|
||||
reverse: true
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Onze Spoedtransport Diensten"
|
||||
description="Van kleine pakketten tot grote vracht, NULAR staat voor u klaar."
|
||||
features={[
|
||||
{
|
||||
title: "Koeriersdiensten", description: "Direct van A naar B zonder tussenstops.", media: { imageSrc: "https://img.b2bpic.net/free-photo/fast-delivery.jpg", imageAlt: "Koeriersdiensten" },
|
||||
items: [{ icon: PackageCheck, text: "Express levering" }, { icon: Eye, text: "Real-time track & trace" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Grote Vracht", description: "Speciaal transport voor uw zwaardere goederen.", media: { imageSrc: "https://img.b2bpic.net/free-photo/truck-transport.jpg", imageAlt: "Grote Vracht" },
|
||||
items: [{ icon: Shield, text: "Verzekerd transport" }, { icon: Zap, text: "Vakbekwame chauffeurs" }],
|
||||
reverse: true
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Transparante Tarieven"
|
||||
description="Wij hanteren heldere tarieven voor al uw spoedopdrachten."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", value: "€45", description: "Starttarief binnen stad" },
|
||||
{ id: "m2", value: "€0,85", description: "Per kilometer" },
|
||||
{ id: "m3", value: "€15", description: "Wachttijd per uur" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Transparante Tarieven"
|
||||
description="Wij hanteren heldere tarieven voor al uw spoedopdrachten."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
metrics={[
|
||||
{ id: "m1", value: "€45", description: "Starttarief binnen stad" },
|
||||
{ id: "m2", value: "€0,85", description: "Per kilometer" },
|
||||
{ id: "m3", value: "€15", description: "Wachttijd per uur" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="NULAR heeft mijn zending binnen 2 uur door heel Nederland afgeleverd. Absoluut de beste keuze voor spoed."
|
||||
rating={5}
|
||||
author="Jan de Vries"
|
||||
avatars={[{ src: "https://img.b2bpic.net/free-photo/man-in-suit.jpg", alt: "Jan" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="NULAR heeft mijn zending binnen 2 uur door heel Nederland afgeleverd. Absoluut de beste keuze voor spoed."
|
||||
rating={5}
|
||||
author="Jan de Vries"
|
||||
avatars={[{ src: "https://img.b2bpic.net/free-photo/man-in-suit.jpg", alt: "Jan" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Veelgestelde Vragen"
|
||||
description="Hier vindt u de antwoorden op uw vragen over ons transport."
|
||||
faqs={[
|
||||
{ id: "q1", title: "Wanneer rijden jullie?", content: "Wij zijn 24 uur per dag, 7 dagen per week beschikbaar voor spoedopdrachten." },
|
||||
{ id: "q2", title: "Zijn mijn goederen verzekerd?", content: "Ja, al onze zendingen zijn uitstekend verzekerd conform de AVC/CMR condities." },
|
||||
{ id: "q3", title: "Hoe betaal ik?", content: "U ontvangt achteraf een factuur per e-mail." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Veelgestelde Vragen"
|
||||
description="Hier vindt u de antwoorden op uw vragen over ons transport."
|
||||
faqs={[
|
||||
{ id: "q1", title: "Wanneer rijden jullie?", content: "Wij zijn 24 uur per dag, 7 dagen per week beschikbaar voor spoedopdrachten." },
|
||||
{ id: "q2", title: "Zijn mijn goederen verzekerd?", content: "Ja, al onze zendingen zijn uitstekend verzekerd conform de AVC/CMR condities." },
|
||||
{ id: "q3", title: "Hoe betaal ik?", content: "U ontvangt achteraf een factuur per e-mail." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
title="Direct Een Koerier Nodig?"
|
||||
description="Vul uw gegevens in en wij nemen direct contact met u op voor een scherpe offerte."
|
||||
useInvertedBackground={true}
|
||||
buttonText="Verstuur"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
title="Direct Een Koerier Nodig?"
|
||||
description="Vul uw gegevens in en wij nemen direct contact met u op voor een scherpe offerte."
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Verstuur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="NULAR"
|
||||
columns={[
|
||||
{ items: [{ label: "Diensten", href: "#features" }, { label: "Tarieven", href: "#metrics" }] },
|
||||
{ items: [{ label: "Over NULAR", href: "#" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="NULAR"
|
||||
columns={[
|
||||
{ items: [{ label: "Diensten", href: "#features" }, { label: "Tarieven", href: "#metrics" }] },
|
||||
{ items: [{ label: "Over NULAR", href: "#" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user