cad2dc4a-a5eb-4e5a-ad46-957d9b687002/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Globe, Linkedin, Package, Star, Truck, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmall"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "About", id: "about" },
        { name: "Services", id: "features" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="auto delivery"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="auto delivery"
      description="Advanced logistics and fleet management solutions designed for speed and reliability."
      buttons={[{ text: "Get Started", href: "#contact" }]}
      slides={[
        { imageSrc: "http://img.b2bpic.net/free-photo/ship-sea-with-beautiful-sunset-reflecting-surface_181624-5675.jpg", imageAlt: "Global Logistics" },
        { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-container-cargo-ship-sea_335224-715.jpg", imageAlt: "Supply Chain" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="Efficiency in Every Kilometer"
      description={[
        "Auto Delivery leverages smart routing and modern fleet technology to redefine how goods move across cities and continents.",        "From real-time tracking to optimized supply chain planning, we ensure your assets are always where they need to be, when they need to be there."
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { title: "Express Courier", description: "High-speed local delivery for immediate requirements.", icon: Truck },
        { title: "Fleet Analytics", description: "Data-driven insights to manage your fleet performance.", icon: Package },
        { title: "Secure Handling", description: "End-to-end security protocols for high-value cargo.", icon: Star }
      ]}
      title="Intelligent Delivery Services"
      description="Tailored logistics solutions to help your business operate with unmatched precision."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", title: "Active Vehicles", value: "500+", icon: Truck },
        { id: "m2", title: "Cities Covered", value: "80+", icon: Globe },
        { id: "m3", title: "On-Time Rate", value: "99.5%", icon: Star }
      ]}
      title="Data-Driven Logistics"
      description="Reliable results measured through real-time performance tracking."
    />
  </div>

  <div id="socialproof" data-section="socialproof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={["CityTrans", "FastShip", "GlobalPath", "UrbanDash", "SecureMove"]}
      title="Trusted by Leading Enterprises"
      description="Empowering businesses across the globe with seamless logistics infrastructure."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", title: "Unmatched Speed", quote: "Auto Delivery completely changed our local distribution game.", name: "Alex Rivera", role: "Operations Manager" },
        { id: "t2", title: "Reliable partner", quote: "Professional, secure, and incredibly efficient service every time.", name: "Sarah Chen", role: "Supply Chain Lead" }
      ]}
      title="Client Success Stories"
      description="Discover why businesses rely on Auto Delivery for their critical supply chain needs."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "How do I request a quote?", content: "Fill out our contact form or speak directly to a sales representative." },
        { id: "f2", title: "Do you offer live tracking?", content: "Yes, all our deliveries come with full real-time tracking via our dashboard." }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet_482257-125946.jpg"
      mediaAnimation="slide-up"
      title="Common Inquiries"
      description="Everything you need to know about our delivery solutions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
      tag="Connect with us"
      title="Ready to Optimize Your Delivery?"
      description="Join the future of logistics today by discussing your requirements with our team."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="auto delivery"
      copyrightText="© 2025 Auto Delivery. All rights reserved."
      socialLinks={[
        { icon: Twitter, href: "#", ariaLabel: "Twitter" },
        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}