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 ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { Car, Droplet, Phone, RefreshCw, Settings, ShieldCheck, Sparkles } from "lucide-react";
+import { Car, Droplet, Sparkles, ShieldCheck } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,99 +30,33 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Services", id: "services" },
-          id: "hero",
+        { name: "About", id: "about" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="KleenPark"
       button={{
-        text: "Book Now",
+        text: "Book Now",        href: "#contact"}}
-        href: "#contact",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Professional Car Detailing You Can Trust Since 1988"
       description="Experience scientific, high-quality vehicle care designed to protect and restore your car’s original beauty. Trusted by Dehiwala and Colombo’s finest drivers for over three decades."
       avatars={[
-        {
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png", alt: "Customer 1" },
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png",
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png", alt: "Customer 2" },
-          alt: "Customer 1",
+        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png", alt: "Customer 3" },
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png",
-          alt: "Customer 2",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png",
-          alt: "Customer 3",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-mature-gentleman-standing-in-a-clean-b-1774928890309-5eb97256.png",
-          alt: "Customer 4",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png",
-          alt: "Customer 5",
-        },
       ]}
       avatarText="400+ Trusted Local Reviews"
       buttons={[
-        {
+        { text: "Call Now", href: "tel:+94111234567" },
-          text: "Call Now",
+        { text: "Book Appointment", href: "#booking" },
-          href: "tel:+94111234567",
-        },
-        {
-          text: "Book Appointment",
-          href: "#contact",
-        },
       ]}
       buttonAnimation="slide-up"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "Premium Ceramic Coating",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Expert Paint Polishing",
-          icon: Sparkles,
-        },
-        {
-          type: "text-icon",
-          text: "Interior Deep Clean",
-          icon: Car,
-        },
-        {
-          type: "text-icon",
-          text: "Engine Detailing",
-          icon: Settings,
-        },
-        {
-          type: "text-icon",
-          text: "Restoration Services",
-          icon: RefreshCw,
-        },
-      ]}
     />
   </div>
 
@@ -131,29 +66,13 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { icon: Sparkles, title: "Full Detailing", description: "A total refresh for your vehicle inside and out." },
-          icon: Sparkles,
+        { icon: Car, title: "Interior Cleaning", description: "Deep cleaning and sanitization of your vehicle’s upholstery." },
-          title: "Full Detailing",
+        { icon: Droplet, title: "Polishing", description: "Restore paint clarity and remove imperfections." },
-          description: "A total refresh for your vehicle inside and out, using professional detailing techniques.",
+        { icon: ShieldCheck, title: "Ceramic Coating", description: "Premium long-lasting protective shield." },
-        },
-        {
-          icon: Car,
-          title: "Interior Cleaning",
-          description: "Deep cleaning and sanitization of your vehicle’s upholstery and cabin for a fresh feel.",
-        },
-        {
-          icon: Droplet,
-          title: "Polishing",
-          description: "Restore paint clarity and remove imperfections for a high-gloss finish.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Ceramic Coating",
-          description: "Premium protection against environmental contaminants with a long-lasting, hydrophobic shield.",
-        },
       ]}
       title="Our Services"
-      description="Comprehensive auto care solutions delivered with precision and professional grade products."
+      description="Comprehensive auto care solutions delivered with precision."
     />
   </div>
 
@@ -161,21 +80,8 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
+        { type: "text", content: "The KleenPark Legacy" },
-          type: "text",
+        { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-ultra-high-definition-clo-1774928890358-b5762fa4.png", alt: "KleenPark detailing" },
-          content: "The KleenPark Legacy",
-        },
-        {
-          type: "image",
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-ultra-high-definition-clo-1774928890358-b5762fa4.png",
-          alt: "KleenPark detailing",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Learn More",
-          href: "#about",
-        },
       ]}
     />
   </div>
@@ -186,109 +92,59 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Sarah Johnson", role: "Corporate Exec", testimonial: "KleenPark restored my car to brand-new condition." },
-          id: "1",
+        { id: "2", name: "Michael Chen", role: "Auto Enthusiast", testimonial: "Excellent service and deep attention to detail." },
-          name: "Sarah Johnson",
-          role: "Corporate Exec",
-          testimonial: "KleenPark restored my car to brand-new condition. Their scientific approach is simply unmatched!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Michael Chen",
-          role: "Auto Enthusiast",
-          testimonial: "Excellent service and deep attention to detail. My car’s ceramic coating looks flawless.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png",
-        },
-        {
-          id: "3",
-          name: "Emily Rodriguez",
-          role: "Family Professional",
-          testimonial: "My family car had tough stains, but the team at KleenPark handled them perfectly. Highly recommended!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          role: "Business Owner",
-          testimonial: "Reliable, consistent, and always high quality. They have been the best in Colombo for years.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-mature-gentleman-standing-in-a-clean-b-1774928890309-5eb97256.png",
-        },
-        {
-          id: "5",
-          name: "Kamala Perera",
-          role: "Local Resident",
-          testimonial: "Truly professional service. They treat your car like it's their own. Amazing transformation.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png?_wi=2",
-        },
       ]}
       title="Trusted Since 1988"
-      description="See why 400+ customers choose KleenPark for professional car care."
+      description="See why 400+ customers choose KleenPark."
     />
   </div>
 
+  <div id="booking" data-section="booking">
+      <ContactSplitForm
+        title="Book Your Session"
+        description="Select your service and choose a date to get started."
+        inputs={[
+            { name: "name", type: "text", placeholder: "Full Name", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "car", type: "text", placeholder: "Car Model", required: true }
+        ]}
+        textarea={{ name: "notes", placeholder: "Additional service requirements" }}
+        buttonText="Confirm Booking"
+        useInvertedBackground={false}
+      />
+  </div>
+
   <div id="contact" data-section="contact">
-      <ContactFaq
+      <FaqDouble
-      animationType="slide-up"
+        faqs={[
-      useInvertedBackground={false}
+            { id: "1", title: "How long does a full detail take?", content: "Typically 4-6 hours." },
-      faqs={[
+            { id: "2", title: "Do I need to book in advance?", content: "Yes, 48 hours recommended." }
-        {
+        ]}
-          id: "1",
+        title="Common Questions"
-          title: "How long does a full detail take?",
+        description="Find answers to common inquiries about our services."
-          content: "Typically, a full detail takes about 4 to 6 hours depending on vehicle condition.",
+        faqsAnimation="slide-up"
-        },
+        textboxLayout="split"
-        {
+        useInvertedBackground={false}
-          id: "2",
+      />
-          title: "Do I need to book in advance?",
-          content: "We recommend booking at least 48 hours in advance to secure your preferred slot.",
-        },
-        {
-          id: "3",
-          title: "Are your products safe?",
-          content: "Yes, we only use professional-grade, automotive-safe products that are scientifically formulated.",
-        },
-      ]}
-      ctaTitle="Ready to Restore Your Ride?"
-      ctaDescription="Get in touch for a custom quote or to book your detailing session at our Dehiwala workshop."
-      ctaButton={{
-        text: "Contact Us Now",
-        href: "tel:+94111234567",
-      }}
-      ctaIcon={Phone}
-    />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterBase
       columns={[
         {
-          title: "KleenPark",
+          title: "KleenPark",          items: [
-          items: [
+            { label: "About Us", href: "#about" },
-            {
+            { label: "Services", href: "#services" },
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
           ],
         },
         {
-          title: "Support",
+          title: "Support",          items: [
-          items: [
+            { label: "Contact", href: "#contact" },
-            {
+            { label: "FAQ", href: "#contact" },
-              label: "Contact Us",
-              href: "tel:+94111234567",
-            },
-            {
-              label: "FAQ",
-              href: "#contact",
-            },
           ],
         },
       ]}
-      copyrightText="© 1988-2024 KleenPark Auto Care."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #fafffb;
-  --card: #f9f9f9;
+  --card: #f7fffa;
-  --foreground: #000612e6;
+  --foreground: #001a0a;
-  --primary-cta: #15479c;
+  --primary-cta: #0a7039;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #a8d9be;
-  --background-accent: #c4c4c4;
+  --background-accent: #6bbf8e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);