Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,16 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import TeamCardFive from '@/components/sections/team/TeamCardFive';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 
 export default function LandingPage() {
   return (
@@ -31,26 +28,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Services", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Booking", id: "contact" },
       ]}
       brandName="NEAT"
     />
@@ -58,100 +40,34 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Clean it, Clean & Neat"
       description="At Neat, we bring the premium detail shop directly to your doorstep. We don't just clean cars; we restore the confidence of every drive."
       kpis={[
-        {
-          value: "500+",
-          label: "Cars Cleaned",
-        },
-        {
-          value: "100%",
-          label: "Satisfaction Rate",
-        },
-        {
-          value: "24/7",
-          label: "Mobile Support",
-        },
+        { value: "500+", label: "Cars Cleaned" },
+        { value: "100%", label: "Satisfaction Rate" },
+        { value: "24/7", label: "Mobile Support" },
       ]}
       enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Book Your Detail",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Book Your Detail", href: "#contact" }]}
       imageSrc="http://img.b2bpic.net/free-photo/man-using-digital-tablet-while-charging-electric-car_107420-94880.jpg?_wi=1"
       imageAlt="Mobile detailing professional finishing a luxury car"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg",
-          alt: "Black car in garage",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-valet-doing-his-job_23-2150274594.jpg",
-          alt: "Medium shot valet doing his job",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/reflection-sky_181624-9195.jpg",
-          alt: "Reflection of the sky",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498630.jpg",
-          alt: "3d rendering of black and white background",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32025.jpg",
-          alt: "Stylish and elegant woman in a car salon",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Premium Mobile Detailing",
-        },
-        {
-          type: "text",
-          text: "Eco-Friendly Cleaning",
-        },
-        {
-          type: "text",
-          text: "Satisfaction Guaranteed",
-        },
-        {
-          type: "text",
-          text: "On-Site Service",
-        },
-        {
-          type: "text",
-          text: "Professional Crew",
-        },
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
-      useInvertedBackground={false}
       title="Driven by Passion"
       description="We started Neat because we believe a clean car is more than an appearance — it's a state of mind. We are a team of young hustlers holding ourselves to a 100% standard every single time."
       metrics={[
-        {
-          value: "100%",
-          title: "Commitment",
-        },
-        {
-          value: "Detail",
-          title: "Focused",
-        },
+        { value: "100%", title: "Commitment" },
+        { value: "Detail", title: "Focused" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30598.jpg"
       mediaAnimation="slide-up"
       metricsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -161,36 +77,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
-          id: "1",
-          label: "Interior",
-          title: "Deep Interior Refresh",
-          items: [
-            "Deep steam cleaning",
-            "Leather rejuvenation",
-            "Surface sanitization",
-          ],
-        },
-        {
-          id: "2",
-          label: "Exterior",
-          title: "Showroom Shine",
-          items: [
-            "Hand wax finish",
-            "Rim & tire shine",
-            "Clay bar treatment",
-          ],
-        },
-        {
-          id: "3",
-          label: "Full Service",
-          title: "The Full Neat Package",
-          items: [
-            "Interior & Exterior",
-            "Engine bay detail",
-            "Odor neutralization",
-          ],
-        },
+        { id: "1", label: "Interior", title: "Deep Interior Refresh", items: ["Deep steam cleaning", "Leather rejuvenation", "Surface sanitization"] },
+        { id: "2", label: "Exterior", title: "Showroom Shine", items: ["Hand wax finish", "Rim & tire shine", "Clay bar treatment"] },
+        { id: "3", label: "Full Service", title: "The Full Neat Package", items: ["Interior & Exterior", "Engine bay detail", "Odor neutralization"] },
       ]}
       title="Our Detailing Promise"
       description="We take no shortcuts. Our process is designed to bring your car back to its showroom glory."
@@ -198,231 +87,42 @@ export default function LandingPage() {
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardNine
+      <PricingCardFive
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
+      title="Professional Services"
+      description="Tailored care for your vehicle type."
       plans={[
-        {
-          id: "1",
-          title: "Basic Clean",
-          price: "$99",
-          period: "per service",
-          features: [
-            "Interior vacuum",
-            "Exterior wash",
-            "Tire dressing",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12610.jpg",
-          imageAlt: "Car detailing concept Man in face mask with orbital polisher in repair shop polishing orange suv car",
-        },
-        {
-          id: "2",
-          title: "Neat Detail",
-          price: "$189",
-          period: "per service",
-          features: [
-            "Everything in Basic",
-            "Deep leather clean",
-            "Window treatment",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYOnnGJ3srKWlIbL2mXjJewGWm/uploaded-1778457931394-py8m376o.png",
-          imageAlt: "Car detailing concept Man in face mask with orbital polisher in repair shop polishing orange suv car",
-        },
-        {
-          id: "3",
-          title: "Ultimate Neat",
-          price: "$299",
-          period: "per service",
-          features: [
-            "Everything in Neat",
-            "Engine bay detail",
-            "Ceramic sealant",
-          ],
-          button: {
-            text: "Book Now",
-            href: "#contact",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/man-using-digital-tablet-while-charging-electric-car_107420-94880.jpg?_wi=2",
-          imageAlt: "Car detailing concept Man in face mask with orbital polisher in repair shop polishing orange suv car",
-        },
+        { id: "sedan", tag: "Standard", price: "$120", period: "avg", description: "For mid-size cars", button: { text: "Select" }, featuresTitle: "Included", features: ["Exterior Wash", "Vacuum", "Windows", "Tire Shine"] },
+        { id: "suv", tag: "Popular", price: "$160", period: "avg", description: "For SUVs & Crossovers", button: { text: "Select" }, featuresTitle: "Included", features: ["Everything in Standard", "Deep carpet clean", "Dash conditioning"] },
+        { id: "truck", tag: "Large", price: "$200", period: "avg", description: "For Full-size Trucks", button: { text: "Select" }, featuresTitle: "Included", features: ["Everything in SUV", "Engine wipe down", "Ceramic spray sealant"] },
       ]}
-      title="Detaling Packages"
-      description="Choose the level of care your vehicle deserves."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "1200",
-          description: "Hours Spent Detailing",
-        },
-        {
-          id: "m2",
-          value: "98%",
-          description: "Client Retention",
-        },
-        {
-          id: "m3",
-          value: "15+",
-          description: "Cities Served",
-        },
-      ]}
-      title="Quality by Numbers"
-      description="Our work speaks for itself through every satisfied customer and perfect finish."
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      team={[
-        {
-          id: "t1",
-          name: "Founder One",
-          role: "Head Detailer",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-drag-queen-indoors_23-2149556820.jpg",
-        },
-        {
-          id: "t2",
-          name: "Founder Two",
-          role: "Lead Technic",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-car-car-showroom_1303-14544.jpg",
-        },
-        {
-          id: "t3",
-          name: "Founder Three",
-          role: "Community Lead",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-car-mechanic-auto-repair-shop-looking-camera_637285-7794.jpg",
-        },
-      ]}
-      title="The Neat Founders"
-      description="Driven by a shared love for cars and the community we serve."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@sarahj",
-          testimonial: "My car feels brand new! The attention to detail is unmatched.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael R.",
-          handle: "@miker",
-          testimonial: "Best detailing service I've ever used. So convenient.",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-customer-car-dealership-posing_651396-1177.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily D.",
-          handle: "@emilyd",
-          testimonial: "I love the clean scent every time I get into the car now.",
-          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-touchscreen-device_1170-1579.jpg",
-        },
-        {
-          id: "4",
-          name: "John B.",
-          handle: "@johnb",
-          testimonial: "A team of true professionals. Will definitely book again.",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-looking-out-car-window_23-2147937253.jpg",
-        },
-        {
-          id: "5",
-          name: "Amanda L.",
-          handle: "@amandal",
-          testimonial: "They made my old sedan look like it just left the factory.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-choosing-car-car-showroom_1303-21751.jpg",
-        },
-      ]}
-      title="Voices of Neat"
-      description="Hear what our community says about the Neat feeling."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactSplitForm
+      title="Book Your Detail"
+      description="Ready to drive with confidence? Fill out the form below and we will contact you at 206-741-9017 to confirm your appointment."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+      ]}
+      multiSelect={{ name: "vehicle", label: "Select Vehicle Type", options: ["Sedan", "SUV", "Truck"] }}
+      textarea={{ name: "service", placeholder: "Service details or special requests", rows: 3 }}
+      buttonText="Submit Booking Request"
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Get Neat"
-      title="Book Your Mobile Detail"
-      description="Ready to drive with confidence? Contact us and let us bring the detail shop to your doorstep."
       imageSrc="http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30592.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYOnnGJ3srKWlIbL2mXjJewGWm/uploaded-1778457931394-py8m376o.png"
       logoText="NEAT"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Basic Clean",
-              href: "#pricing",
-            },
-            {
-              label: "Ultimate Detail",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { title: "Services", items: [{ label: "Sedan", href: "#pricing" }, { label: "SUV", href: "#pricing" }, { label: "Truck", href: "#pricing" }] },
       ]}
     />
   </div>