Update src/app/page.tsx

src/app/layout.tsx

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

src/app/page.tsx

@@ -5,12 +5,12 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 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,7 +41,7 @@ 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">
         <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."
@@ -61,7 +61,7 @@ export default function LandingPage() {
         />
       </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."
@@ -98,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"
@@ -134,11 +134,12 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricCardSix
-          title="Industry-Leading Performance"
-          description="Our track record speaks for itself with measurable results"
-          tag="Our Stats"
+      <div id="metrics" data-section="metrics" className="bg-gradient-to-b from-indigo-900 via-slate-900 to-slate-900">
+        <MetricCardOne
+          title="Our Stats"
+          description="Key metrics that showcase our growth and success"
+          tag="Statistics"
+          tagIcon={TrendingUp}
           textboxLayout="default"
           useInvertedBackground="noInvert"
           gridVariant="four-items-2x2-equal-grid"
@@ -147,36 +148,36 @@ export default function LandingPage() {
             {
               id: "1",
               value: "99.8%",
-              tag: "On-Time",
-              tagIcon: Clock,
-              title: "Delivery Success Rate"
+              title: "Delivery Success",
+              description: "On-time delivery rate across global network",
+              icon: Clock
             },
             {
               id: "2",
               value: "150+",
-              tag: "Global",
-              tagIcon: Globe,
-              title: "Countries Served"
+              title: "Countries Served",
+              description: "Global presence with strategic distribution centers",
+              icon: Globe
             },
             {
               id: "3",
               value: "500M+",
-              tag: "Shipped",
-              tagIcon: Package,
-              title: "Parcels Delivered"
+              title: "Parcels Delivered",
+              description: "Successfully shipped and tracked worldwide",
+              icon: Package
             },
             {
               id: "4",
               value: "24/7",
-              tag: "Support",
-              tagIcon: Headphones,
-              title: "Customer Service"
+              title: "Customer Support",
+              description: "Round-the-clock assistance for all inquiries",
+              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"
@@ -210,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"
@@ -245,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?"
@@ -258,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."
@@ -322,4 +323,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}