Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Eye, Lock, Shield, ShieldCheck, Zap } from "lucide-react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+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";
 
 export default function LandingPage() {
   return (
@@ -28,218 +28,129 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Contact",          id: "contact"},
-      ]}
-      brandName="SecureCore"
-    />
-  </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">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars"}}
-      title="Verifying Your Digital Presence"
-      description="Ensuring a secure and seamless browsing experience through intelligent verification systems."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/skilled-businessman-his-office-desk-working-report-writing_482257-107893.jpg",          alt: "User 1"},
-        {
-          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"},
-        {
-          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="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">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
-      title="Unmatched Security Performance"
-      description="We specialize in protecting platforms against malicious activity, ensuring your site remains performant and safe."
-      bulletPoints={[
-        {
-          title: "Robust Verification",          description: "Cutting-edge algorithms to verify traffic instantly."},
-        {
-          title: "Performance Focused",          description: "Security without compromising speed or user experience."},
-        {
-          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="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">
-      <FeatureBorderGlow
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          icon: Shield,
-          title: "Bot Protection",          description: "Stop malicious automated threats."},
-        {
-          icon: Zap,
-          title: "Fast Verification",          description: "Seamless user checks."},
-        {
-          icon: Lock,
-          title: "Data Privacy",          description: "Encryption-first approach."},
-        {
-          icon: ShieldCheck,
-          title: "DDoS Mitigation",          description: "Prevent large-scale attacks."},
-        {
-          icon: Eye,
-          title: "Threat Analytics",          description: "Real-time visibility."},
-      ]}
-      title="Powerful Security Features"
-      description="Tools designed for modern digital safety."
-    />
-  </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">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "99.9%",          title: "Uptime",          items: [
-            "Always on",            "High reliability"],
-        },
-        {
-          id: "m2",          value: "150ms",          title: "Avg Verification",          items: [
-            "Low latency",            "Instant results"],
-        },
-        {
-          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="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">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",          name: "Sarah J.",          handle: "@sarah_tech",          testimonial: "The security integration is seamless.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
-        {
-          id: "2",          name: "Mike L.",          handle: "@mike_dev",          testimonial: "Fastest verification I've seen.",          rating: 5,
-          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="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">
-      <FaqSplitText
-      useInvertedBackground={false}
-      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."},
-      ]}
-      sideTitle="Common Questions"
-      sideDescription="Get clear answers to your security questions."
-      faqsAnimation="slide-up"
-    />
-  </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">
-      <ContactSplitForm
-      useInvertedBackground={true}
-      title="Get in Touch"
-      description="Reach out to secure your web applications."
-      inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-        },
-        {
-          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="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">
-      <FooterBase
-      columns={[
-        {
-          title: "Platform",          items: [
-            {
-              label: "Security",              href: "#"},
-            {
-              label: "API Docs",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
-      ]}
-      logoText="SecureCore"
-      copyrightText="© 2025 | SecureCore Technologies"
-    />
-  </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>
   );