Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 23b49ddf61 |
231
src/app/page.tsx
231
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, Lock, Eye, Shield, Clock, PackageCheck, Zap } from "lucide-react";
|
||||
import { Eye, Lock, Shield, ShieldCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,129 +28,128 @@ 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: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="SecureCore"
|
||||
/>
|
||||
</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="SecureCore"
|
||||
description="Ensuring a secure and seamless browsing experience through intelligent verification systems."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
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="Security by the Numbers"
|
||||
metrics={[
|
||||
{ icon: ShieldCheck, label: "Verification Accuracy", value: "99.9%" },
|
||||
{ icon: Zap, label: "Avg Response Time", value: "150ms" },
|
||||
{ icon: Lock, label: "Threats Blocked", value: "1M+" }
|
||||
]}
|
||||
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.", 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="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Powerful Security Features"
|
||||
description="Tools designed for modern digital safety."
|
||||
features={[
|
||||
{
|
||||
title: "Bot Protection", description: "Stop malicious automated threats.", media: { imageSrc: "https://img.b2bpic.net/free-photo/security-concept-with-biometric-scanning_23-2149112214.jpg", imageAlt: "Bot Protection" },
|
||||
items: [{ icon: Shield, text: "Advanced ML Filtering" }, { icon: Eye, text: "Behavioral Analysis" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Data Privacy", description: "Encryption-first approach.", media: { imageSrc: "https://img.b2bpic.net/free-photo/data-privacy-security-concept-with-encryption_23-2149112214.jpg", imageAlt: "Data Privacy" },
|
||||
items: [{ icon: Lock, text: "End-to-End Encryption" }, { icon: ShieldCheck, text: "GDPR Compliant" }],
|
||||
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"
|
||||
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="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Performance at Scale"
|
||||
description="Numbers that define our reliable security infrastructure."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
metrics={[
|
||||
{ id: "m1", value: "99.9%", description: "Uptime Service Level" },
|
||||
{ id: "m2", value: "150ms", description: "Average Verification" },
|
||||
{ id: "m3", value: "1M+", description: "Daily Threats Blocked" }
|
||||
]}
|
||||
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="The security integration is seamless. It's the most reliable platform I've used for digital protection."
|
||||
rating={5}
|
||||
author="Sarah J."
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah" }]}
|
||||
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="Common Questions"
|
||||
description="Get clear answers to your security questions."
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is it secure?", content: "Yes, we use advanced encryption standards." },
|
||||
{ id: "q2", title: "How fast is it?", content: "Latency is kept below 150ms." },
|
||||
{ id: "q3", title: "Is it easy to use?", content: "Integrated in just a few minutes." }
|
||||
]}
|
||||
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}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Verstuur"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Security"
|
||||
title="Get in Touch"
|
||||
description="Reach out to secure your web applications."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</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="SecureCore"
|
||||
columns={[
|
||||
{ items: [{ label: "Security", href: "#" }, { label: "API Docs", href: "#" }] },
|
||||
{ items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user