Merge version_5 into main

Merge version_5 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 { Eye, Lock, Shield, ShieldCheck, Zap, UserCheck, BarChart3, Mail } from "lucide-react";
+import { Eye, Lock, Shield, ShieldCheck, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -49,6 +49,8 @@ export default function LandingPage() {
         { 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>
@@ -75,11 +77,13 @@ export default function LandingPage() {
       description="Tools designed for modern digital safety."
       features={[
         {
-          title: "Bot Protection",          description: "Stop malicious automated threats.",          items: [{ icon: Shield, text: "Advanced ML Filtering" }, { icon: Eye, text: "Behavioral Analysis" }],
+          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.",          items: [{ icon: Lock, text: "End-to-End Encryption" }, { icon: ShieldCheck, text: "GDPR Compliant" }],
+          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
         }
       ]}
@@ -89,13 +93,14 @@ export default function LandingPage() {
   <div id="metrics" data-section="metrics">
       <MetricCardTwo
       title="Performance at Scale"
-      description="Numbers that define our reliable security infrastructure."
+      description="Reliable infrastructure powering global transport networks."
       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" }
+        { 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}
     />
@@ -103,7 +108,7 @@ export default function LandingPage() {
 
   <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."
+      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" }]}
@@ -116,11 +121,11 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqDouble
       title="Common Questions"
-      description="Get clear answers to your security questions."
+      description="Get clear answers to your security and logistics integration 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." }
+        { 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"
@@ -130,9 +135,10 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      tag="Security"
-      title="Get in Touch"
-      description="Reach out to secure your web applications."
+      tag="Contact Us"
+      title="Get Started Today"
+      description="Reach out to secure and optimize your logistics operations."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={true}
     />
   </div>
@@ -141,7 +147,7 @@ export default function LandingPage() {
       <FooterLogoEmphasis
       logoText="SecureCore"
       columns={[
-        { items: [{ label: "Security", href: "#" }, { label: "API Docs", href: "#" }] },
+        { items: [{ label: "Security", href: "#" }, { label: "Logistics API", href: "#" }] },
         { items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }
       ]}
     />

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);