Merge version_4 into main

Merge version_4 into main

src/app/layout.tsx

@@ -1275,4 +1275,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import TeamCardSeven from '@/components/sections/team/TeamCardSeven';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSocial from '@/components/sections/footer/FooterSocial';
-import { Globe, Zap, Users, Leaf, Clock, Package, Headphones, Star, Send, Linkedin, Twitter, Facebook, Instagram } from "lucide-react";
+import { Globe, Zap, Users, Leaf, Clock, Package, Headphones, Star, Send, Linkedin, Twitter, Facebook, Instagram, TrendingUp } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,28 +41,27 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" className="bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
-        <HeroSplitAvatars
+        <HeroBillboardCarousel
           title="Premium Logistics Solutions for Global Enterprise"
           description="Streamline your supply chain with our advanced logistics network. We deliver excellence across every continent with real-time tracking and 24/7 support."
           tag="Industry Leaders"
-          avatarText="Trusted by 500+ Fortune 500 companies"
-          avatars={[
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531048671-im24p8cy.jpg", alt: "Enterprise client 1" },
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508757496-j86cmi4y.jpg", alt: "Enterprise client 2" },
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531049195-gul9hu8u.jpg", alt: "Enterprise client 3" }
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531041604-tawrl9hg.jpg"
-          imageAlt="Global logistics warehouse network"
-          imagePosition="right"
           buttons={[
             { text: "Get Started", href: "contact" },
             { text: "View Solutions", href: "services" }
           ]}
+          mediaItems={[
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531041604-tawrl9hg.jpg", imageAlt: "Global logistics warehouse network" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508757496-j86cmi4y.jpg", imageAlt: "Enterprise logistics hub" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531049195-gul9hu8u.jpg", imageAlt: "Distribution center operations" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531042238-6bwwvccr.jpg", imageAlt: "Supply chain management" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531042816-zp13pd7a.jpg", imageAlt: "Fleet management system" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766531043550-5fr36xdl.jpg", imageAlt: "Real-time tracking dashboard" }
+          ]}
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" className="bg-gradient-to-b from-slate-50 via-blue-50 to-slate-50">
         <SplitAbout
           title="Why LogisticsPro Leads the Industry"
           description="With two decades of experience and cutting-edge technology, we've redefined what premium logistics means. Our commitment to reliability and innovation sets us apart."
@@ -99,7 +98,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="process" data-section="process">
+      <div id="process" data-section="process" className="bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100">
         <FeatureCardNineteen
           title="Our Proven Process"
           description="From order to delivery, we optimize every step for speed and reliability"
@@ -135,11 +134,12 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="metrics" data-section="metrics" className="bg-gradient-to-b from-indigo-900 via-slate-900 to-slate-900">
-        <MetricCardSix
+        <MetricCardOne
-          title="Industry-Leading Performance"
+          title="Our Stats"
-          description="Our track record speaks for itself with measurable results"
+          description="Key metrics that showcase our growth and success"
-          tag="Our Stats"
+          tag="Statistics"
+          tagIcon={TrendingUp}
           textboxLayout="default"
           useInvertedBackground="noInvert"
           gridVariant="four-items-2x2-equal-grid"
@@ -148,36 +148,36 @@ export default function LandingPage() {
             {
               id: "1",
               value: "99.8%",
-              tag: "On-Time",
+              title: "Delivery Success",
-              tagIcon: Clock,
+              description: "On-time delivery rate across global network",
-              title: "Delivery Success Rate"
+              icon: Clock
             },
             {
               id: "2",
               value: "150+",
-              tag: "Global",
+              title: "Countries Served",
-              tagIcon: Globe,
+              description: "Global presence with strategic distribution centers",
-              title: "Countries Served"
+              icon: Globe
             },
             {
               id: "3",
               value: "500M+",
-              tag: "Shipped",
+              title: "Parcels Delivered",
-              tagIcon: Package,
+              description: "Successfully shipped and tracked worldwide",
-              title: "Parcels Delivered"
+              icon: Package
             },
             {
               id: "4",
               value: "24/7",
-              tag: "Support",
+              title: "Customer Support",
-              tagIcon: Headphones,
+              description: "Round-the-clock assistance for all inquiries",
-              title: "Customer Service"
+              icon: Headphones
             }
           ]}
         />
       </div>
 
-      <div id="team" data-section="team">
+      <div id="team" data-section="team" className="bg-gradient-to-b from-slate-50 via-orange-50 to-slate-50">
         <TeamCardSeven
           title="Trusted by Industry Leaders"
           useInvertedBackground="noInvert"
@@ -211,7 +211,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" className="bg-gradient-to-b from-slate-100 via-slate-50 to-slate-100">
         <TestimonialCardTwelve
           cardTitle="Over 500 enterprises rely on LogisticsPro to power their global supply chains"
           cardTag="Customer Trust"
@@ -246,7 +246,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" className="bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
         <ContactCenter
           tag="Get In Touch"
           title="Ready to Transform Your Logistics?"
@@ -259,7 +259,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="bg-slate-950">
         <FooterSocial
           logoText="LogisticsPro"
           copyrightText="© LogisticsPro, Inc. 2025. All rights reserved."
@@ -323,4 +323,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}