Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Droplets, ShieldCheck, Sparkles, ThumbsUp, Truck } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,392 +29,105 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Services",
-          id: "#services",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "Reviews",
-          id: "#testimonials",
-        },
-      ]}
       brandName="Elite Shine"
+      navItems={[
+        { name: "Services", id: "#services" },
+        { name: "Pricing", id: "#pricing" },
+        { name: "Reviews", id: "#testimonials" },
+      ]}
       button={{
-        text: "Book Now",
+        text: "Book Now",        href: "#cta"}}
-        href: "#cta",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
+      <HeroBillboardScroll
-      useInvertedBackground={true}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Your Car, Showroom Clean — Without Leaving Home"
       description="Professional Mobile Detailing Delivered Right To Your Driveway."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          handle: "@sarahj",
-          testimonial: "The best mobile detail I have ever experienced. My car looks brand new!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg?_wi=1",
-          imageAlt: "luxury black sports car driveway",
-        },
-        {
-          name: "Mike R.",
-          handle: "@miker",
-          testimonial: "Incredible attention to detail. Highly recommend Elite Shine!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-hoovering-car-cabin-garage_1157-36597.jpg",
-          imageAlt: "car interior leather clean",
-        },
-        {
-          name: "Emily D.",
-          handle: "@emilyd",
-          testimonial: "Convenient and professional. Will book again!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/head-lights-car_1339-5401.jpg?_wi=1",
-          imageAlt: "hand car wash bubbles",
-        },
-        {
-          name: "James K.",
-          handle: "@jamesk",
-          testimonial: "Fast service and a perfect shine. Love it.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg",
-          imageAlt: "car ceramic coating",
-        },
-        {
-          name: "Linda V.",
-          handle: "@lindav",
-          testimonial: "My car hasn't looked this good in years.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg?_wi=1",
-          imageAlt: "happy luxury car owner",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Your Detail Now",
-          href: "#cta",
-        },
-        {
-          text: "View Packages",
-          href: "#pricing",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg?_wi=2"
-      mediaAnimation="blur-reveal"
+      buttons={[
-      avatars={[
+        { text: "Book Your Detail Now", href: "#cta" },
-        {
+        { text: "View Packages", href: "#pricing" },
-          src: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg",
-          alt: "Customer 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg",
-          alt: "Customer 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg",
-          alt: "Customer 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg",
-          alt: "Customer 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212229.jpg",
-          alt: "Customer 5",
-        },
-      ]}
-      avatarText="Loved by 500+ happy car owners"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "Premium Detailing",
-          icon: Sparkles,
-        },
-        {
-          type: "text-icon",
-          text: "Mobile Service",
-          icon: Truck,
-        },
-        {
-          type: "text-icon",
-          text: "Ceramic Coating",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Interior Deep Clean",
-          icon: Droplets,
-        },
-        {
-          type: "text-icon",
-          text: "Satisfaction Guaranteed",
-          icon: ThumbsUp,
-        },
       ]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwelve
+      <FeatureCardTwentyOne
-      animationType="slide-up"
+      accordionItems={[
-      textboxLayout="default"
+        { id: "a1", title: "Basic Wash", content: "Exterior Hand Wash, Tire Shine, Window Cleaning." },
-      useInvertedBackground={false}
+        { id: "a2", title: "Interior Detail", content: "Deep Vacuuming, Leather Conditioning, Stain Removal." },
-      features={[
+        { id: "a3", title: "Full Detail", content: "Clay Bar Treatment, Engine Bay Clean, Ceramic Sealant." },
-        {
-          id: "s1",
-          label: "Entry",
-          title: "Basic Wash",
-          items: [
-            "Exterior Hand Wash",
-            "Tire Shine",
-            "Window Cleaning",
-          ],
-        },
-        {
-          id: "s2",
-          label: "Mid",
-          title: "Interior Detail",
-          items: [
-            "Deep Vacuuming",
-            "Leather Conditioning",
-            "Stain Removal",
-          ],
-        },
-        {
-          id: "s3",
-          label: "Full",
-          title: "Full Detail",
-          items: [
-            "Clay Bar Treatment",
-            "Engine Bay Clean",
-            "Ceramic Sealant",
-          ],
-        },
       ]}
       title="Our Professional Services"
       description="Premium detailing tailored to your vehicle's needs."
+      useInvertedBackground={false}
+      videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
     />
   </div>
 
   <div id="comparison" data-section="comparison">
-      <MediaAbout
+      <TestimonialAboutCard
-      useInvertedBackground={true}
+      tag="Comparison"
       title="See The Difference We Make"
       description="We don't just wash your car; we restore it to its showroom glory."
+      subdescription="Our process uses industrial-grade tools to ensure perfection."
+      icon={Sparkles}
       imageSrc="http://img.b2bpic.net/free-photo/head-lights-car_1339-5401.jpg?_wi=2"
-    />
+      useInvertedBackground={true}
-  </div>
-
-  <div id="why-us" data-section="why-us">
-      <FeatureCardTwelve
-      animationType="scale-rotate"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "b1",
-          label: "Convenience",
-          title: "At Your Doorstep",
-          items: [
-            "Home or Office Service",
-            "No Wait Times",
-            "Flexible Scheduling",
-          ],
-        },
-        {
-          id: "b2",
-          label: "Equipment",
-          title: "Pro-Grade Gear",
-          items: [
-            "Industrial Equipment",
-            "High-End Polishes",
-            "Safe Chemicals",
-          ],
-        },
-        {
-          id: "b3",
-          label: "Eco",
-          title: "Eco-Friendly",
-          items: [
-            "Water-saving Methods",
-            "Biodegradable Soap",
-            "Safe Disposal",
-          ],
-        },
-        {
-          id: "b4",
-          label: "Guarantee",
-          title: "Satisfaction",
-          items: [
-            "100% Quality Check",
-            "On-Time Arrival",
-            "Professional Staff",
-          ],
-        },
-      ]}
-      title="Why Choose Elite Shine"
-      description="Setting the standard for mobile detailing."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardNine
+      <PricingCardTwo
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "p1",
-          title: "Basic Detail",
-          price: "$99",
-          period: "Starting at",
-          features: [
-            "Exterior Foam Wash",
-            "Tire Cleaning",
-            "Interior Vacuum",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#cta",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg?_wi=1",
-          imageAlt: "professional woman portrait",
-        },
-        {
-          id: "p2",
-          title: "Premium Detail",
-          price: "$189",
-          period: "Most Popular",
-          features: [
-            "Basic Wash Features",
-            "Leather Conditioning",
-            "Dashboard Polish",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#cta",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg?_wi=1",
-          imageAlt: "car enthusiast portrait",
-        },
-        {
-          id: "p3",
-          title: "Ultimate Detail",
-          price: "$299",
-          period: "Starting at",
-          features: [
-            "Full Paint Correction",
-            "Ceramic Waxing",
-            "Steam Cleaning",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#cta",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg?_wi=1",
-          imageAlt: "professional business owner portrait",
-        },
-      ]}
       title="Pricing Packages"
       description="Transparent pricing for exceptional service."
+      plans={[
+        { id: "p1", badge: "Essential", price: "$99", subtitle: "Exterior & Interior Basics", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Exterior Foam Wash", "Tire Cleaning", "Interior Vacuum"] },
+        { id: "p2", badge: "Popular", price: "$189", subtitle: "Deep Cleaning", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Everything in Basic", "Leather Conditioning", "Dashboard Polish"] },
+        { id: "p3", badge: "Ultimate", price: "$299", subtitle: "Showroom Finish", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Everything in Premium", "Paint Correction", "Ceramic Waxing"] },
+      ]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardSix
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Alex B.",
-          role: "Owner",
-          company: "Tech Inc",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg?_wi=2",
-        },
-        {
-          id: "t2",
-          name: "Maria C.",
-          role: "Director",
-          company: "Media Co",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg?_wi=2",
-        },
-        {
-          id: "t3",
-          name: "John D.",
-          role: "Manager",
-          company: "Auto Hub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg?_wi=2",
-        },
-        {
-          id: "t4",
-          name: "Susan P.",
-          role: "Artist",
-          company: "Creative",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg?_wi=2",
-        },
-        {
-          id: "t5",
-          name: "Kevin L.",
-          role: "Architect",
-          company: "Designs",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212229.jpg",
-        },
-      ]}
       title="Customer Reviews"
       description="What our clients say about us."
+      testimonials={[
+        { id: "t1", name: "Alex B.", handle: "@alexb", testimonial: "The best mobile detail I have ever experienced. My car looks brand new!" },
+        { id: "t2", name: "Maria C.", handle: "@mariac", testimonial: "Incredible attention to detail. Highly recommend Elite Shine!" },
+        { id: "t3", name: "John D.", handle: "@johnd", testimonial: "Convenient and professional. Will book again!" },
+      ]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="area" data-section="area">
       <SocialProofOne
-      textboxLayout="default"
+      names={["Los Angeles", "San Diego", "Santa Monica", "Long Beach", "Irvine", "Beverly Hills", "Pasadena"]}
-      useInvertedBackground={true}
-      names={[
-        "Los Angeles",
-        "San Diego",
-        "Santa Monica",
-        "Long Beach",
-        "Irvine",
-        "Beverly Hills",
-        "Pasadena",
-      ]}
       title="Proudly Serving Your Area"
       description="We are available in the following metropolitan cities."
+      textboxLayout="default"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="cta" data-section="cta">
       <ContactCenter
-      useInvertedBackground={false}
+      tag="Contact Us"
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Get Started"
       title="Ready For A Spotless Ride?"
       description="Book Your Mobile Detail Today — It Only Takes 60 Seconds."
-      inputPlaceholder="Enter your email or phone"
+      background={{ variant: "sparkles-gradient" }}
-      buttonText="Get Free Quote"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -422,49 +135,12 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Elite Shine"
       columns={[
-        {
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
-          title: "Company",
+        { title: "Support", items: [{ label: "Contact", href: "#cta" }, { label: "FAQ", href: "#" }] },
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#cta",
-            },
-            {
-              label: "FAQ",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}