bender/74ba22a2-2088-4be2-b62c-8e9575693f90
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_4
Branches Tags
bender:main bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

5 Commits
version_2 ... version_4

Author SHA1 Message Date
bender
6267ca5056 Update src/app/page.tsx 2026-05-12 01:25:33 +00:00
bender
bbf764b5cc Update src/app/page.tsx 2026-05-12 01:24:55 +00:00
bender
fd8d696cc1 Merge version_3 into main 
Merge version_3 into main
 2026-05-12 01:24:28 +00:00
bender
454b1ec792 Update src/app/page.tsx 2026-05-12 01:24:24 +00:00
bender
9d7fcc34cc Merge version_2 into main 
Merge version_2 into main
 2026-05-12 01:22:25 +00:00
1 changed files with 125 additions and 214 deletions
Expand all files Collapse all files

339
src/app/page.tsx
View File

@@ -2,16 +2,16 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText'; import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow'; import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBase from '@/components/sections/footer/FooterBase'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCentered from '@/components/sections/hero/HeroCentered'; import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven'; import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout'; import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Eye, Lock, Shield, ShieldCheck, Zap } from "lucide-react"; import { ShieldCheck, Lock, Eye, Shield, Clock, PackageCheck, Zap } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -28,218 +28,129 @@ export default function LandingPage() {
headingFontWeight="bold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarLayoutFloatingOverlay
navItems={[ navItems={[
{ { name: "Home", id: "hero" },
name: "Home", id: "hero"}, { name: "Diensten", id: "features" },
{ { name: "Tarieven", id: "metrics" },
name: "About", id: "about"}, { name: "Contact", id: "contact" },
{ ]}
name: "Features", id: "features"}, brandName="NULAR"
{ />
name: "Contact", id: "contact"}, </div>
]}
brandName="SecureCore"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroCentered <HeroLogoBillboard
background={{ logoText="NULAR"
variant: "gradient-bars"}} description="Uw betrouwbare partner voor spoedtransport. Wij leveren uw zendingen sneller, veiliger en met volledige toewijding door heel Europa."
title="Verifying Your Digital Presence" buttons={[
description="Ensuring a secure and seamless browsing experience through intelligent verification systems." { text: "Offerte Aanvragen", href: "#contact" },
avatars={[ { text: "Onze Diensten", href: "#features" }
{ ]}
src: "http://img.b2bpic.net/free-photo/skilled-businessman-his-office-desk-working-report-writing_482257-107893.jpg", alt: "User 1"}, background={{ variant: "gradient-bars" }}
{ mediaAnimation="slide-up"
src: "http://img.b2bpic.net/free-photo/startup-worker-uses-laptop-open-space-reviewing-project-data-documents-workstation-executive-assistant-working-marketing-strategy-business-development-ai-developer_482257-65810.jpg", alt: "User 2"}, />
{ </div>
src: "http://img.b2bpic.net/free-photo/pretty-woman-posing-fair_23-2148344617.jpg", alt: "User 3"},
{
src: "http://img.b2bpic.net/free-photo/indoor-portrait-happy-united-multiethnic-team-two-creative-workers_273609-14169.jpg", alt: "User 4"},
{
src: "http://img.b2bpic.net/free-photo/black-system-administrator-server-hub-monitoring-neural-network-llm-visualization-data-center-it_482257-135596.jpg", alt: "User 5"},
]}
buttons={[
{
text: "Get Started", href: "#contact"},
]}
marqueeItems={[
{
type: "text", text: "ISO 27001 Certified"},
{
type: "text", text: "GDPR Compliant"},
{
type: "text", text: "End-to-End Encryption"},
{
type: "text", text: "Zero-Trust Architecture"},
{
type: "text", text: "99.9% Uptime SLA"},
]}
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <AboutMetric
textboxLayout="split" title="Waarom Kiezen Voor NULAR?"
useInvertedBackground={false} metrics={[
title="Unmatched Security Performance" { icon: Clock, label: "Direct Vertrek", value: "24/7" },
description="We specialize in protecting platforms against malicious activity, ensuring your site remains performant and safe." { icon: ShieldCheck, label: "Veiligheid", value: "100%" },
bulletPoints={[ { icon: Zap, label: "Levertijd", value: "Razendsnel" }
{ ]}
title: "Robust Verification", description: "Cutting-edge algorithms to verify traffic instantly."}, metricsAnimation="slide-up"
{ useInvertedBackground={false}
title: "Performance Focused", description: "Security without compromising speed or user experience."}, />
{ </div>
title: "24/7 Monitoring", description: "Always-on protection for your web applications."},
]}
imageSrc="http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645587.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureBorderGlow <FeatureCardTen
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
features={[ title="Onze Spoedtransport Diensten"
{ description="Van kleine pakketten tot grote vracht, NULAR staat voor u klaar."
icon: Shield, features={[
title: "Bot Protection", description: "Stop malicious automated threats."}, {
{ title: "Koeriersdiensten", description: "Direct van A naar B zonder tussenstops.", media: { imageSrc: "https://img.b2bpic.net/free-photo/fast-delivery.jpg", imageAlt: "Koeriersdiensten" },
icon: Zap, items: [{ icon: PackageCheck, text: "Express levering" }, { icon: Eye, text: "Real-time track & trace" }],
title: "Fast Verification", description: "Seamless user checks."}, reverse: false
{ },
icon: Lock, {
title: "Data Privacy", description: "Encryption-first approach."}, 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" }],
icon: ShieldCheck, reverse: true
title: "DDoS Mitigation", description: "Prevent large-scale attacks."}, }
{ ]}
icon: Eye, />
title: "Threat Analytics", description: "Real-time visibility."}, </div>
]}
title="Powerful Security Features"
description="Tools designed for modern digital safety."
/>
</div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardSeven <MetricCardTwo
animationType="slide-up" title="Transparante Tarieven"
textboxLayout="default" description="Wij hanteren heldere tarieven voor al uw spoedopdrachten."
useInvertedBackground={false} gridVariant="uniform-all-items-equal"
metrics={[ animationType="slide-up"
{ textboxLayout="default"
id: "m1", value: "99.9%", title: "Uptime", items: [ metrics={[
"Always on", "High reliability"], { id: "m1", value: "€45", description: "Starttarief binnen stad" },
}, { id: "m2", value: "€0,85", description: "Per kilometer" },
{ { id: "m3", value: "€15", description: "Wachttijd per uur" }
id: "m2", value: "150ms", title: "Avg Verification", items: [ ]}
"Low latency", "Instant results"], useInvertedBackground={false}
}, />
{ </div>
id: "m3", value: "1M+", title: "Threats Blocked", items: [
"Daily protection", "Constant monitoring"],
},
]}
title="Performance at Scale"
description="Numbers that define our reliable security infrastructure."
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen <TestimonialCardFifteen
animationType="slide-up" testimonial="NULAR heeft mijn zending binnen 2 uur door heel Nederland afgeleverd. Absoluut de beste keuze voor spoed."
textboxLayout="default" rating={5}
useInvertedBackground={true} author="Jan de Vries"
testimonials={[ avatars={[{ src: "https://img.b2bpic.net/free-photo/man-in-suit.jpg", alt: "Jan" }]}
{ ratingAnimation="slide-up"
id: "1", name: "Sarah J.", handle: "@sarah_tech", testimonial: "The security integration is seamless.", rating: 5, avatarsAnimation="slide-up"
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"}, useInvertedBackground={true}
{ />
id: "2", name: "Mike L.", handle: "@mike_dev", testimonial: "Fastest verification I've seen.", rating: 5, </div>
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-outdoors_23-2149915911.jpg"},
{
id: "3", name: "Emily C.", handle: "@emily_cyber", testimonial: "Robust and reliable platform.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-architect-using-touch-screen-building-model-maquette-layout-engineer-working-with-blueprint-plan-construction-development-graphic-design-architectural-office_482257-31903.jpg"},
{
id: "4", name: "David W.", handle: "@david_ops", testimonial: "Excellent threat detection capabilities.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-business-executive-with-arms-crossed_1170-1133.jpg"},
{
id: "5", name: "Alice K.", handle: "@alice_dev", testimonial: "Great uptime and fast responses.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/black-system-administrator-server-hub-monitoring-neural-network-llm-visualization-data-center-it_482257-135596.jpg"},
]}
showRating={true}
title="Trusted by Developers"
description="What partners say about our technology."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitText <FaqDouble
useInvertedBackground={false} title="Veelgestelde Vragen"
faqs={[ description="Hier vindt u de antwoorden op uw vragen over ons transport."
{ faqs={[
id: "q1", title: "Is it secure?", content: "Yes, we use advanced encryption standards."}, { 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: "q2", title: "How fast is it?", content: "Latency is kept below 150ms."}, { id: "q3", title: "Hoe betaal ik?", content: "U ontvangt achteraf een factuur per e-mail." }
{ ]}
id: "q3", title: "Is it easy to use?", content: "Integrated in just a few minutes."}, faqsAnimation="slide-up"
]} textboxLayout="default"
sideTitle="Common Questions" useInvertedBackground={false}
sideDescription="Get clear answers to your security questions." />
faqsAnimation="slide-up" </div>
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactSplitForm <ContactCenter
useInvertedBackground={true} tag="Contact"
title="Get in Touch" title="Direct Een Koerier Nodig?"
description="Reach out to secure your web applications." description="Vul uw gegevens in en wij nemen direct contact met u op voor een scherpe offerte."
inputs={[ useInvertedBackground={true}
{ background={{ variant: "gradient-bars" }}
name: "name", type: "text", placeholder: "Your Name", required: true, buttonText="Verstuur"
}, />
{ </div>
name: "email", type: "email", placeholder: "Your Email", required: true,
},
]}
textarea={{
name: "message", placeholder: "Your Message", rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/community-cloud-storage-sync-secure_53876-124011.jpg"
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBase <FooterLogoEmphasis
columns={[ logoText="NULAR"
{ columns={[
title: "Platform", items: [ { items: [{ label: "Diensten", href: "#features" }, { label: "Tarieven", href: "#metrics" }] },
{ { items: [{ label: "Over NULAR", href: "#" }, { label: "Contact", href: "#contact" }] }
label: "Security", href: "#"}, ]}
{ />
label: "API Docs", href: "#"}, </div>
],
},
{
title: "Company", items: [
{
label: "About Us", href: "#"},
{
label: "Careers", href: "#"},
],
},
]}
logoText="SecureCore"
copyrightText="© 2025 | SecureCore Technologies"
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );