From 6267ca50561a325bdb6b5d894e557c9e2361efa0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 12 May 2026 01:25:33 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 228 ++++++++++++++++++++++++-----------------------
 1 file changed, 116 insertions(+), 112 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1e1b386..404b3ec 100644
--- a/src/app/page.tsx
+++ b/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>
   );
-- 
2.49.1