Update src/app/page.tsx

Merge version_2 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 { Sparkles, CheckCircle, ShieldCheck } from "lucide-react";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import TextAbout from '@/components/sections/about/TextAbout';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 
 const handleBookNow = () => {
   const element = document.getElementById('contact');
@@ -36,163 +37,103 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "Trust",          id: "why"},
-        {
-          name: "Reviews",          id: "testimonials"},
+        { name: "Home", id: "hero" },
+        { name: "Services", id: "services" },
+        { name: "Reviews", id: "testimonials" },
+        { name: "Contact", id: "contact" }
       ]}
       brandName="House Of Shine"
-      button={{
-        text: "Book Now",        onClick: handleBookNow,
-      }}
+      button={{ text: "Book Now", onClick: handleBookNow }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "plain"}}
+      <HeroBillboardRotatedCarousel
       title="House Of Shine Autoworks"
       description="Not the cheapest. The best. We provide showroom-quality transformations for the most discerning automotive enthusiasts."
-      buttons={[
-        {
-          text: "Book Appointment",          onClick: handleBookNow,
-        },
-        {
-          text: "Get A Quote",          onClick: handleBookNow,
-        },
+      background={{ variant: "sparkles-gradient" }}
+      buttons={[{ text: "Book Appointment", onClick: handleBookNow }]}
+      carouselItems={[
+          { id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3081.jpg", imageAlt: "Headlight" },
+          { id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg?_wi=1", imageAlt: "Detailing" },
+          { id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg?_wi=1", imageAlt: "Interior" },
+          { id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-service_1303-1025.jpg", imageAlt: "Car" },
+          { id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/car-polishing-man-working-shop_1339-3064.jpg", imageAlt: "Polishing" },
+          { id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/detailing-car-surface-cleaner_1339-3080.jpg", imageAlt: "Cleaning" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3081.jpg"
-      imageAlt="Luxury car with high gloss finish"
     />
   </div>
 
   <div id="trust" data-section="trust">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "5.0",          description: "Star Google Rating"},
-        {
-          id: "m2",          value: "134+",          description: "Happy Clients"},
-        {
-          id: "m3",          value: "100%",          description: "Satisfaction Guarantee"},
-      ]}
+      <MetricCardThree
       title="Elite Standards"
       description="Unrivaled expertise for your luxury investment."
+      textboxLayout="split"
+      animationType="slide-up"
+      useInvertedBackground={false}
+      metrics={[
+          { id: "m1", icon: CheckCircle, title: "Satisfaction", value: "100%" },
+          { id: "m2", icon: ShieldCheck, title: "Coating Quality", value: "Elite" },
+          { id: "m3", icon: Sparkles, title: "Transformations", value: "134+" }
+      ]}
     />
   </div>
 
   <div id="services" data-section="services">
       <FeatureCardTwentySeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",          title: "Ceramic Coating",          descriptions: [
-            "Flagship protection for years of shine.",            "Hydrophobic layer for easier maintenance."],
-          imageSrc: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg"},
-        {
-          id: "f2",          title: "Paint Correction",          descriptions: [
-            "Remove swirl marks and light scratches.",            "Restore true color intensity and clarity."],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg"},
-        {
-          id: "f3",          title: "Interior Detailing",          descriptions: [
-            "Immaculate restoration of all surfaces.",            "Deep cleaning with premium leather care."],
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg"},
-      ]}
       title="Premium Services"
       description="Excellence in every detail, from paint protection to full interior restoration."
+      textboxLayout="split"
+      animationType="slide-up"
+      useInvertedBackground={false}
+      features={[
+        { id: "f1", title: "Ceramic Coating", descriptions: ["Flagship protection for years of shine.", "Hydrophobic layer for easier maintenance."], imageSrc: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg" },
+        { id: "f2", title: "Paint Correction", descriptions: ["Remove swirl marks and light scratches.", "Restore true color intensity and clarity."], imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg?_wi=2" },
+        { id: "f3", title: "Interior Detailing", descriptions: ["Immaculate restoration of all surfaces.", "Deep cleaning with premium leather care."], imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-interior_23-2151138882.jpg?_wi=2" }
+      ]}
     />
   </div>
 
   <div id="why" data-section="why">
-      <MediaAbout
-      useInvertedBackground={false}
+      <TextAbout
       title="The Detail-Obsessed Difference"
-      description="At House Of Shine, we don't just wash cars; we curate perfection. Jim's passion for automotive excellence ensures every vehicle receives unmatched attention to detail and care."
-      buttons={[
-        {
-          text: "Contact Our Team",          onClick: handleBookNow,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/beautiful-small-girl-is-sitting-lifting-platform-with-car-holding-hammer_613910-17072.jpg"
-      imageAlt="Jim working on a luxury car"
+      tag="Our Philosophy"
+      useInvertedBackground={false}
+      buttons={[{ text: "Get In Touch", onClick: handleBookNow }]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardTwelve
+      cardTitle="Client Success Stories"
+      cardTag="Testimonials"
+      cardAnimation="slide-up"
       useInvertedBackground={false}
-      testimonial="My car looked better than the day I bought it. The ceramic coating is flawless, and the attention to detail is truly unmatched. Jim treats your vehicle like his own."
-      rating={5}
-      author="Sarah Miller"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg",          alt: "Customer 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130139.jpg",          alt: "Customer 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-496.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-young-woman-having-fun-amusement-park_23-2147911674.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12604.jpg",          alt: "Customer 5"},
+      testimonials={[
+          { id: "t1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg" },
+          { id: "t2", name: "James Smith", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-496.jpg" }
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactSplit
+      tag="Contact Us"
+      title="Secure Your Spot"
+      description="Limited openings available for our premium detailing services. Secure your spot today to experience the House Of Shine difference."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated-grid"}}
-      text="Limited openings available for our premium detailing services. Secure your spot today to experience the House Of Shine difference."
-      buttons={[
-        {
-          text: "Book Now",          onClick: handleBookNow,
-        },
-      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12604.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterLogoEmphasis
+      logoText="House Of Shine"
       columns={[
-        {
-          title: "House Of Shine",          items: [
-            {
-              label: "About Us",              href: "#why"},
-            {
-              label: "Services",              href: "#services"},
-            {
-              label: "Testimonials",              href: "#testimonials"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Contact Jim",              onClick: handleBookNow,
-            },
-            {
-              label: "FAQ",              href: "#"},
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
+          { items: [{ label: "About" }, { label: "Services" }, { label: "Testimonials" }] },
+          { items: [{ label: "FAQ" }, { label: "Terms" }] }
       ]}
-      bottomLeftText="© 2024 House Of Shine Autoworks."
-      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>