Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import { ShieldCheck, Sparkles, Zap, Wrench } from "lucide-react";
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
   return (
@@ -26,217 +27,119 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",
+              { name: "About", id: "about" },
-          id: "hero",
+              { name: "Services", id: "features" },
-        },
+              { name: "Reviews", id: "testimonials" },
-        {
+              { name: "Contact", id: "contact" },
-          name: "Services",
+            ]}
-          id: "features",
+            brandName="Elite Detailers"
-        },
+          />
-        {
+        </div>
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Elite Detailers"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
+          <HeroBillboardCarousel
-      background={{
+            title="Premium Auto Detailing"
-        variant: "gradient-bars",
+            description="Over 20 years of experience serving the Medley community with veteran-owned perfection."
-      }}
+            background={{ variant: "gradient-bars" }}
-      logoText="Premium Car Wash & Detailing"
+            buttons={[{ text: "Book Your Service", href: "#contact" }]}
-      description="Providing exceptional auto care in Medley for over 20 years. Veteran-owned business dedicated to perfection."
+            mediaItems={[
-      buttons={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg?_wi=1", imageAlt: "Detailing process" }
-        {
+            ]}
-          text: "Get Free Quote",
+          />
-          href: "#contact",
+        </div>
-        },
-      ]}
-      layoutOrder="default"
-      imageSrc="http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg?_wi=1"
-      mediaAnimation="slide-up"
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+          <TestimonialAboutCard
-      useInvertedBackground={true}
+            tag="20+ Years Experience"
-      heading={[
+            title="Veteran-Owned Excellence"
-        {
+            description="We specialize in precision care for your vehicle, offering everything from engine bay degreasing to luxury ceramic coatings."
-          type: "text",
+            subdescription="Ask us about our special military discounts for active duty and veterans."
-          content: "Over 20 Years of ",
+            icon={ShieldCheck}
-        },
+            imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193144.jpg?_wi=1"
-        {
+            mediaAnimation="slide-up"
-          type: "image",
+            useInvertedBackground={false}
-          src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193144.jpg",
+          />
-          alt: "Service",
+        </div>
-        },
-        {
-          type: "text",
-          content: " Excellence",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardThree
+          <FeatureCardTwentyFive
-      animationType="slide-up"
+            title="Our Premium Services"
-      textboxLayout="split"
+            description="Complete interior and exterior solutions for your car's longevity and aesthetics."
-      gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
-      useInvertedBackground={false}
+            animationType="slide-up"
-      features={[
+            textboxLayout="split"
-        {
+            features={[
-          id: "1",
+              { title: "Exterior & Interior", description: "Hand wash, interior deep cleaning, and vacuuming.", icon: Sparkles, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/driver-gesture-rainy-drive-car-dashboard_169016-68038.jpg" }] },
-          title: "Ceramic Coating",
+              { title: "Ceramic & Waxing", description: "High-grade ceramic coating and premium hand wax.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193144.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/man-leaning-car-with-open-hood_23-2148257995.jpg" }] },
-          description: "Long-lasting protection and incredible shine.",
+              { title: "Engine Detailing", description: "Professional engine bay cleaning and protection.", icon: Wrench, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-car-service-station_23-2148327584.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-car-service-station_23-2148327584.jpg?_wi=2" }] }
-          imageSrc: "http://img.b2bpic.net/free-photo/man-leaning-car-with-open-hood_23-2148257995.jpg",
+            ]}
-        },
+          />
-        {
+        </div>
-          id: "2",
-          title: "Interior Detailing",
-          description: "Deep cleaning for leather, fabric, and carpets.",
-          imageSrc: "http://img.b2bpic.net/free-photo/driver-gesture-rainy-drive-car-dashboard_169016-68038.jpg",
-        },
-        {
-          id: "3",
-          title: "Engine Bay Cleaning",
-          description: "Professional engine bay degreasing.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-car-service-station_23-2148327584.jpg",
-        },
-      ]}
-      title="Professional Services"
-      description="Comprehensive detailing to restore and protect your investment."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="metrics" data-section="metrics">
-      <MetricCardEleven
+          <MetricCardOne
-      animationType="slide-up"
+            title="Our Impact"
-      textboxLayout="split"
+            description="Thousands of satisfied customers over two decades."
-      useInvertedBackground={true}
+            textboxLayout="split"
-      metrics={[
+            gridVariant="uniform-all-items-equal"
-        {
+            animationType="slide-up"
-          id: "m1",
+            useInvertedBackground={false}
-          value: "366+",
+            metrics={[
-          title: "Verified Reviews",
+              { id: "1", value: "20+", title: "Years", description: "Experience in business", icon: ShieldCheck },
-          description: "5.0 star average rating",
+              { id: "2", value: "366+", title: "Reviews", description: "5-star average", icon: Sparkles },
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130220.jpg?_wi=1",
+              { id: "3", value: "100%", title: "Satisfaction", description: "Guaranteed quality", icon: Zap }
-        },
+            ]}
-        {
+          />
-          id: "m2",
+        </div>
-          value: "20+",
-          title: "Years Experience",
-          description: "Serving the Medley area",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193144.jpg",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "Availability",
-          description: "Always ready to serve",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg?_wi=2",
-        },
-      ]}
-      title="Why Choose Us"
-      description="Trusted by hundreds of satisfied customers."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+          <TestimonialCardSixteen
-      animationType="slide-up"
+            title="What Our Customers Say"
-      textboxLayout="split"
+            description="Hear from the people who trust us with their most valuable assets."
-      gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={true}
-      useInvertedBackground={false}
+            animationType="slide-up"
-      testimonials={[
+            textboxLayout="split"
-        {
+            kpiItems={[
-          id: "1",
+              { value: "5.0", label: "Star Rating" },
-          name: "Sarah J.",
+              { value: "20+", label: "Years Local" },
-          role: "Client",
+              { value: "10k+", label: "Vehicles Served" }
-          company: "Medley",
+            ]}
-          rating: 5,
+            testimonials={[
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130220.jpg?_wi=2",
+              { id: "1", name: "Sarah J.", role: "Client", company: "Medley", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130220.jpg?_wi=2" },
-        },
+              { id: "2", name: "Mark D.", role: "Client", company: "Medley", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-black-hat-standing-by-her-new-white-car_1303-28799.jpg" },
-        {
+              { id: "3", name: "Elena R.", role: "Client", company: "Medley", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-office-with-tablet_1098-2077.jpg" }
-          id: "2",
+            ]}
-          name: "Mark D.",
+          />
-          role: "Client",
+        </div>
-          company: "Medley",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-black-hat-standing-by-her-new-white-car_1303-28799.jpg",
-        },
-        {
-          id: "3",
-          name: "Elena R.",
-          role: "Client",
-          company: "Medley",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-office-with-tablet_1098-2077.jpg",
-        },
-        {
-          id: "4",
-          name: "James K.",
-          role: "Client",
-          company: "Medley",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-talking-phone-medium-shot_23-2148320231.jpg",
-        },
-        {
-          id: "5",
-          name: "Robert L.",
-          role: "Client",
-          company: "Medley",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130220.jpg?_wi=3",
-        },
-      ]}
-      title="Customer Reviews"
-      description="See why our customers trust us with their vehicles."
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactText
+          <ContactFaq
-      useInvertedBackground={true}
+            ctaTitle="Ready to get started?"
-      background={{
+            ctaDescription="Schedule your service today. Proud to offer military discounts."
-        variant: "rotated-rays-animated",
+            ctaButton={{ text: "Get a Free Quote", href: "tel:8774343749" }}
-      }}
+            ctaIcon={Zap}
-      text="Ready for a professional car detailing? Get in touch today for a free quote."
+            useInvertedBackground={false}
-      buttons={[
+            animationType="slide-up"
-        {
+            faqs={[
-          text: "Contact Us Now",
+              { id: "1", title: "Do you offer military discounts?", content: "Yes, we proudly offer special pricing for all active-duty military and veterans as a thank you for your service." },
-          href: "tel:8774343749",
+              { id: "2", title: "What services do you provide?", content: "We cover everything from basic exterior washes to full ceramic coating and deep interior detailing." }
-        },
+            ]}
-      ]}
+          />
-    />
+        </div>
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+          <FooterBase
-      logoText="Elite Detailers"
+            columns={[
-      leftLink={{
+              { title: "Services", items: [{ label: "Ceramic Coating", href: "#features" }, { label: "Detailing", href: "#features" }] },
-        text: "Terms of Service",
+              { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Reviews", href: "#testimonials" }] }
-        href: "#",
+            ]}
-      }}
+          />
-      rightLink={{
+        </div>
-        text: "Privacy Policy",
-        href: "#",
-      }}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}