Add src/app/book-now/page.tsx

Merge version_10 into main

src/app/book-now/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import { Facebook, Instagram, Twitter } from "lucide-react";
+
+export default function BookNowPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#services" },
+              { name: "Pricing", id: "/#pricing" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "FAQ", id: "/#faq" },
+              { name: "Book Now", id: "/book-now" }
+            ]}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r6x4nr"
+            logoAlt="Luxelay Detailing Logo"
+            brandName="Luxelay Detailing"
+            button={{
+              text: "Schedule Now",              href: "/book-now"
+            }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{
+              variant: "radial-gradient"
+            }}
+            tag="BOOK NOW"
+            title="Get Your Detail Scheduled"
+            description="For immediate booking, please send us a text or call us directly at (571) 208-8978. For general inquiries, fill out the form below. No forms are saved, ensuring a direct conversation."
+            buttonText="Submit General Inquiry"
+            inputPlaceholder="Your Name & Email for general inquiries..."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r6x4nr"
+            logoAlt="Luxelay Detailing Logo"
+            logoText="Luxelay Detailing"
+            copyrightText="© 2024 Luxelay Detailing. All rights reserved."
+            socialLinks={[
+              {
+                icon: Facebook,
+                href: "https://www.facebook.com/luxelaydetailing",                ariaLabel: "Facebook"
+              },
+              {
+                icon: Instagram,
+                href: "https://www.instagram.com/luxelay_detailing?igsh=NGJkdWw0d2Q4cHAy&utm_source=qr",                ariaLabel: "Instagram"
+              },
+              {
+                icon: Twitter,
+                href: "https://twitter.com/luxelaydetailing",                ariaLabel: "Twitter"
+              }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
@@ -34,52 +34,66 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",          id: "#hero"},
+          name: "Home",          id: "/"},
         {
-          name: "About",          id: "#about"},
+          name: "About",          id: "/#about"},
         {
-          name: "Services",          id: "#services"},
+          name: "Services",          id: "/#services"},
         {
-          name: "Pricing",          id: "#pricing"},
+          name: "Pricing",          id: "/#pricing"},
         {
-          name: "Testimonials",          id: "#testimonials"},
+          name: "Testimonials",          id: "/#testimonials"},
         {
-          name: "FAQ",          id: "#faq"},
+          name: "FAQ",          id: "/#faq"},
+        {
+          name: "Book Now",          id: "/book-now"},
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r6x4nr"
       logoAlt="Luxelay Detailing Logo"
       brandName="Luxelay Detailing"
       button={{
-        text: "Schedule Now",        href: "#contact"}}
+        text: "Schedule Now",        href: "/book-now"}}
       animateOnLoad={true}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroOverlay
+      <HeroBillboardDashboard
       title="Luxury Detailing for Discerning Car Owners"
       description="Professional handapplied ceramic coatings, paint correction, and interior restoration that preserve your vehicle's pristine condition. Book your transformation today."
+      background={{ variant: "plain" }}
       buttons={[
         {
-          text: "Schedule Your Detail",          href: "#contact"},
+          text: "Schedule Your Detail",          href: "/book-now"},
       ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/car-polishing-close-up.jpg"
-      imageAlt="Luxurious car being polished by a professional detailer"
-      showBlur={true}
-      textPosition="bottom"
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/avatars/professional-man-smiling-car.jpg",          alt: "Smiling professional man"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/avatars/professional-woman-car-owner.jpg",          alt: "Successful businesswoman"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/avatars/man-happy-with-car.jpg",          alt: "Elegant man car owner"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/avatars/businesswoman-in-car-dealership.jpg",          alt: "Satisfied client happy car owner"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/avatars/older-man-classic-car.jpg",          alt: "Young professional car enthusiast"},
-      ]}
-      avatarText="Trusted by over 1000+ car enthusiasts"
+      dashboard={{
+        title: "Luxelay Detailing Overview",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EuHt2ZxlmvkmNTdQSd3dWMTSTY/uploaded-1781024400128-d87twxr7.png",        imageAlt: "Luxelay Detailing Dashboard",        logoIcon: Car,
+        stats: [
+          {
+            title: "Jobs Completed",            values: [4500, 5000, 5500],
+            description: "Total services rendered"},
+          {
+            title: "Happy Clients",            values: [950, 1000, 1050],
+            description: "Satisfied customers"},
+          {
+            title: "Avg. Rating",            values: [4.8, 4.9, 5.0],
+            valueSuffix: "/5",            valueFormat: { minimumFractionDigits: 1, maximumFractionDigits: 1 },
+            description: "Customer feedback"},
+        ],
+        sidebarItems: [
+          { icon: Car, active: true },
+          { icon: Gauge },
+          { icon: Star },
+          { icon: Shield },
+        ],
+        buttons: [{ text: "View Services", href: "/#services" }],
+        chartTitle: "Service Trends",        chartData: [{ value: 60 }, { value: 75 }, { value: 90 }, { value: 80 }, { value: 100 }, { value: 120 }],
+        listItems: [
+          { icon: Car, title: "Ceramic Pro Detail", status: "Upcoming" },
+          { icon: Paintbrush, title: "Paint Correction", status: "In Progress" },
+          { icon: Shield, title: "Interior Deep Clean", status: "Completed" },
+        ],
+      }}
     />
   </div>
 
@@ -100,11 +114,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Ceramic Coatings",          description: "Long-lasting protection for your paintwork, providing incredible gloss, hydrophobicity, and ease of maintenance.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/ceramic-coating-application.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/water-beading-ceramic-coating.jpg",          buttonText: "Learn More",          buttonHref: "#pricing"},
+          title: "Ceramic Coatings",          description: "Long-lasting protection for your paintwork, providing incredible gloss, hydrophobicity, and ease of maintenance.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EuHt2ZxlmvkmNTdQSd3dWMTSTY/uploaded-1781025421248-x7yupibh.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/water-beading-ceramic-coating.jpg",          buttonText: "Learn More",          buttonHref: "/#pricing"},
         {
-          title: "Paint Correction",          description: "Restore your vehicle's paint to its pristine condition by eliminating swirls, scratches, and oxidation, revealing a mirror-like finish.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/paint-correction-process.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/swirl-removal-before-after.jpg",          buttonText: "Discover Paint Perfection",          buttonHref: "#pricing"},
+          title: "Paint Correction",          description: "Restore your vehicle's paint to its pristine condition by eliminating swirls, scratches, and oxidation, revealing a mirror-like finish.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EuHt2ZxlmvkmNTdQSd3dWMTSTY/uploaded-1781025421248-kaafmzan.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/swirl-removal-before-after.jpg",          buttonText: "Discover Paint Perfection",          buttonHref: "/#pricing"},
         {
-          title: "Interior Restoration",          description: "Deep cleaning and conditioning of all interior surfaces, including leather, carpets, and trim, for a fresh, luxurious cabin.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/interior-detailing-vacuum.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/leather-conditioning.jpg",          buttonText: "Explore Interior Services",          buttonHref: "#pricing"},
+          title: "Interior Restoration",          description: "Deep cleaning and conditioning of all interior surfaces, including leather, carpets, and trim, for a fresh, luxurious cabin.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EuHt2ZxlmvkmNTdQSd3dWMTSTY/uploaded-1781029374249-dg45uvps.jpg",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/stock/car-detailing/leather-conditioning.jpg",          buttonText: "Explore Interior Services",          buttonHref: "/#pricing"},
       ]}
       title="Our Premium Services"
       description="Experience unparalleled care with our comprehensive detailing packages tailored to your vehicle's needs."
@@ -120,7 +134,7 @@ export default function LandingPage() {
         {
           id: "basic-package",          badge: "Entry",          price: "$299",          subtitle: "Essential care for a brilliant shine.",          buttons: [
             {
-              text: "Select Basic",              href: "#contact"},
+              text: "Select Basic",              href: "/book-now"},
           ],
           features: [
             "Exterior wash & wax",            "Interior vacuum & wipe down",            "Tire dressing",            "Window cleaning"],
@@ -129,7 +143,7 @@ export default function LandingPage() {
           id: "premium-package",          badge: "Popular",          badgeIcon: Sparkles,
           price: "$599",          subtitle: "Enhanced detailing for lasting beauty.",          buttons: [
             {
-              text: "Choose Premium",              href: "#contact"},
+              text: "Choose Premium",              href: "/book-now"},
           ],
           features: [
             "All Basic features",            "Single-stage paint correction",            "Sealant application (6-month)",            "Deep interior cleaning",            "Leather conditioning"],
@@ -138,7 +152,7 @@ export default function LandingPage() {
           id: "ceramic-package",          badge: "Ultimate",          badgeIcon: Shield,
           price: "$1299",          subtitle: "Unrivaled protection and perfection.",          buttons: [
             {
-              text: "Go Ultimate",              href: "#contact"},
+              text: "Go Ultimate",              href: "/book-now"},
           ],
           features: [
             "All Premium features",            "Multi-stage paint correction",            "Ceramic coating (3-year)",            "Engine bay detailing",            "Wheel & caliper coating"],
@@ -228,17 +242,14 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplit
       useInvertedBackground={false}
       background={{
         variant: "radial-gradient"}}
-      tag="Get In Touch"
-      title="Ready for a Showroom Finish?"
-      description="Schedule your premium detailing service today and let us restore your vehicle's brilliance. Reach out to our team for a personalized consultation."
-      buttons={[
-        {
-          text: "Book Your Detail Now",          href: "mailto:info@luxelaydetailing.com?subject=Inquiry%20from%20Website&body=I%20would%20like%20to%20inquire%20about%20your%20detailing%20services."},
-      ]}
+      tag="General Inquiries"
+      title="Have General Questions?"
+      description="Fill out the form below for general inquiries, feedback, or any non-booking related questions. We'll get back to you promptly."
+      buttonText="Send Message"
     />
   </div>
 
@@ -254,7 +265,7 @@ export default function LandingPage() {
           href: "https://www.facebook.com/luxelaydetailing",          ariaLabel: "Facebook"},
         {
           icon: Instagram,
-          href: "https://www.instagram.com/luxelaydetailing",          ariaLabel: "Instagram"},
+          href: "https://www.instagram.com/luxelay_detailing?igsh=NGJkdWw0d2Q4cHAy&utm_source=qr",          ariaLabel: "Instagram"},
         {
           icon: Twitter,
           href: "https://twitter.com/luxelaydetailing",          ariaLabel: "Twitter"},
@@ -264,4 +275,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);