Update src/app/styles/variables.css

Merge version_4 into main

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,130 @@ 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" }}
+      imageSrc="https://img.b2bpic.net/free-photo/transportation-logistics-concept_23-2149112214.jpg"
+      imageAlt="Secure Logistics Infrastructure"
+      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: "Secure Transport Analytics",          description: "Real-time monitoring for logistics flow.",          media: { imageSrc: "https://img.b2bpic.net/free-photo/delivery-truck-logistics_23-2149112214.jpg", imageAlt: "Transport Analytics" },
+          items: [{ icon: Lock, text: "Real-time Tracking" }, { icon: ShieldCheck, text: "Automated Reporting" }],
+          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="Reliable infrastructure powering global transport networks."
+      gridVariant="uniform-all-items-equal"
+      animationType="slide-up"
+      textboxLayout="default"
+      metrics={[
+        { id: "m1", value: "99.9%", description: "Network Uptime" },
+        { id: "m2", value: "150ms", description: "Latency Speed" },
+        { id: "m3", value: "50K+", description: "Daily Deliveries Managed" }
+      ]}
+      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 transport security integration is seamless. It's the most reliable platform I've used for logistics management."
+      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 and logistics integration questions."
+      faqs={[
+        { id: "q1", title: "How is transport secured?", content: "We employ multi-layer encryption across all transit nodes." },
+        { id: "q2", title: "Does it scale?", content: "Our infrastructure scales dynamically with your demand." },
+        { id: "q3", title: "Is onboarding fast?", content: "Integrations are ready in less than 24 hours." }
+      ]}
+      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="Contact Us"
+      title="Get Started Today"
+      description="Reach out to secure and optimize your logistics operations."
+      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: "Logistics API", href: "#" }] },
+        { items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }
+      ]}
+    />
+  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);