Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
@@ -10,7 +10,7 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Award, Calendar, ShieldCheck, Sparkles } from "lucide-react";
+import { Award, ShieldCheck, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -51,7 +51,7 @@ export default function LandingPage() {
       description="Experience the gold standard of luxury detailing in Valencia. We treat your vehicle as a work of art."
       buttons={[
         {
-          text: "Book Your Detail",          href: "#pricing"},
+          text: "Book Your Detail",          href: "#booking"},
       ]}
       carouselItems={[
         {
@@ -103,7 +103,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="pricing" data-section="pricing">
+  <div id="booking" data-section="booking">
       <PricingCardTwo
       animationType="slide-up"
       textboxLayout="split"
@@ -113,29 +113,35 @@ export default function LandingPage() {
           id: "basic",          badge: "Entry",          price: "€150",          subtitle: "Essential Care",          features: [
             "Interior Vacuuming",            "Hand Wash",            "Glass Cleaning"],
           buttons: [
-            {
+            { 
-              text: "Select",              href: "#"},
+              text: "Book Now", 
+              onClick: () => alert("Booking functionality: Please select date and service in the contact form below.") 
+            },
           ],
         },
         {
           id: "pro",          badge: "Signature",          price: "€350",          subtitle: "Full Detail",          features: [
             "Full Paint Correction",            "Leather Treatment",            "Engine Bay Cleaning"],
           buttons: [
-            {
+            { 
-              text: "Select",              href: "#"},
+              text: "Book Now", 
+              onClick: () => alert("Booking functionality: Please select date and service in the contact form below.") 
+            },
           ],
         },
         {
           id: "ultimate",          badge: "Elite",          price: "€600",          subtitle: "Bespoke Treatment",          features: [
             "Ceramic Shield",            "Interior Restoration",            "Express Booking"],
           buttons: [
-            {
+            { 
-              text: "Select",              href: "#"},
+              text: "Book Now", 
+              onClick: () => alert("Booking functionality: Please select date and service in the contact form below.") 
+            },
           ],
         },
       ]}
-      title="Curated Detail Packages"
+      title="Online Booking Calendar"
-      description="Choose the level of care your vehicle truly deserves."
+      description="Select your preferred service package to initiate your booking request."
     />
   </div>
 
@@ -161,22 +167,17 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactFaq
+      <ContactSplitForm
-      animationType="slide-up"
+      title="Confirm Your Booking"
-      useInvertedBackground={false}
+      description="Enter your preferred date, service package, and vehicle details. We will send an automated email confirmation shortly."
-      faqs={[
+      useInvertedBackground={true}
-        {
+      inputs={[
-          id: "f1",          title: "Where are you located?",          content: "We operate in the heart of Valencia."},
+        { name: "fullName", type: "text", placeholder: "Full Name", required: true },
-        {
+        { name: "date", type: "date", placeholder: "Preferred Date", required: true },
-          id: "f2",          title: "How long does a service take?",          content: "Times depend on the package selected."},
+        { name: "service", type: "text", placeholder: "Service Package (e.g., Signature)", required: true }
-        {
-          id: "f3",          title: "Do you accept walk-ins?",          content: "We operate by appointment to ensure exclusivity."},
       ]}
-      ctaTitle="Request Your Appointment"
+      textarea={{ name: "message", placeholder: "Special notes or vehicle model", rows: 4 }}
-      ctaDescription="Contact our studio to discuss your bespoke detailing requirements."
+      onSubmit={(data) => alert("Booking submitted! You will receive an automated confirmation email shortly. Details: " + JSON.stringify(data))}
-      ctaButton={{
-        text: "Call Now"}}
-      ctaIcon={Calendar}
     />
   </div>