Merge version_2 into main #2
71
src/app/booking/page.tsx
Normal file
71
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function BookingPage() {
|
||||
const [price, setPrice] = useState(0);
|
||||
const services = {
|
||||
"Exterior Wash": 50,
|
||||
"Interior Basic": 60,
|
||||
"Interior Deep": 100
|
||||
};
|
||||
|
||||
const handleBooking = (data: Record<string, string>) => {
|
||||
console.log("Booking details:", data);
|
||||
alert("Booking request received! We will confirm your weekend slot soon. Note: Please ensure water supply access is available for our technicians.");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Book", id: "/booking" }]}
|
||||
brandName="AutoLuxe Lab"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Schedule Your Service"
|
||||
description="Serving South Florida with our base in Deerfield Beach. We operate on weekends from 9:00 AM to 9:00 PM. Note: Access to water supply is required for all appointments."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
{ name: "vehicle", type: "text", placeholder: "Vehicle Year/Make/Model", required: true }
|
||||
]}
|
||||
multiSelect={{
|
||||
name: "service",
|
||||
label: "Select Service",
|
||||
options: ["Exterior Wash ($50)", "Interior Basic ($60)", "Interior Deep ($100)"]
|
||||
}}
|
||||
buttonText="Confirm Booking"
|
||||
onSubmit={handleBooking}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="AutoLuxe Lab"
|
||||
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
245
src/app/page.tsx
245
src/app/page.tsx
@@ -33,21 +33,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "How It Works",
|
||||
id: "#how-it-works",
|
||||
},
|
||||
name: "How It Works", id: "#how-it-works"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="AutoLuxe Lab"
|
||||
/>
|
||||
@@ -56,47 +48,26 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Premium Mobile Detailing"
|
||||
description="AutoLuxe Lab delivers precision, protection, and perfection directly to your driveway. We come to you so you can enjoy a spotless vehicle without the hassle."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193622.jpg?_wi=1",
|
||||
imageAlt: "Luxury car detailing",
|
||||
},
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193622.jpg?_wi=1", imageAlt: "Luxury car detailing"},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cx43XVNYaN5QANr5gVGVtfQciH/uploaded-1777313849170-cc1h9s0h.png?_wi=1",
|
||||
imageAlt: "AutoLuxe Lab Branding",
|
||||
},
|
||||
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cx43XVNYaN5QANr5gVGVtfQciH/uploaded-1777313849170-cc1h9s0h.png?_wi=1", imageAlt: "AutoLuxe Lab Branding"},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-cinema-film-reel_23-2151024873.jpg",
|
||||
imageAlt: "Detailing",
|
||||
},
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/3d-cinema-film-reel_23-2151024873.jpg", imageAlt: "Detailing"},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-man-using-digital-tablet-mobile-phone-while-charging-electric-car_107420-94882.jpg?_wi=1",
|
||||
imageAlt: "AutoLuxe Lab",
|
||||
},
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-man-using-digital-tablet-mobile-phone-while-charging-electric-car_107420-94882.jpg?_wi=1", imageAlt: "AutoLuxe Lab"},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg",
|
||||
imageAlt: "Luxury car",
|
||||
},
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg", imageAlt: "Luxury car"},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/golden-label-star_1017-7338.jpg",
|
||||
imageAlt: "AutoLuxe Lab",
|
||||
},
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-vector/golden-label-star_1017-7338.jpg", imageAlt: "AutoLuxe Lab"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -108,19 +79,13 @@ export default function LandingPage() {
|
||||
metrics={[
|
||||
{
|
||||
icon: Car,
|
||||
label: "Service Area",
|
||||
value: "Deerfield & Boca",
|
||||
},
|
||||
label: "Service Area", value: "Deerfield & Boca"},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
label: "Satisfaction",
|
||||
value: "100%",
|
||||
},
|
||||
label: "Satisfaction", value: "100%"},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Response Time",
|
||||
value: "Fast",
|
||||
},
|
||||
label: "Response Time", value: "Fast"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -133,53 +98,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "ext",
|
||||
title: "Exterior Wash",
|
||||
price: "$50+",
|
||||
period: "sedan",
|
||||
features: [
|
||||
"Hand Wash",
|
||||
"Tire Shine",
|
||||
"Wheels Cleaned",
|
||||
],
|
||||
id: "ext", title: "Exterior Wash", price: "$50+", period: "sedan", features: [
|
||||
"Hand Wash", "Tire Shine", "Wheels Cleaned"],
|
||||
button: {
|
||||
text: "Select",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-man-using-digital-tablet-mobile-phone-while-charging-electric-car_107420-94882.jpg?_wi=2",
|
||||
imageAlt: "mobile car detailing icon",
|
||||
},
|
||||
text: "Select"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-man-using-digital-tablet-mobile-phone-while-charging-electric-car_107420-94882.jpg?_wi=2", imageAlt: "mobile car detailing icon"},
|
||||
{
|
||||
id: "int",
|
||||
title: "Interior Basic",
|
||||
price: "$60+",
|
||||
period: "sedan",
|
||||
features: [
|
||||
"Vacuuming",
|
||||
"Wipe Down",
|
||||
"Window Cleaning",
|
||||
],
|
||||
id: "int", title: "Interior Basic", price: "$60+", period: "sedan", features: [
|
||||
"Vacuuming", "Wipe Down", "Window Cleaning"],
|
||||
button: {
|
||||
text: "Select",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cx43XVNYaN5QANr5gVGVtfQciH/uploaded-1777313849170-cc1h9s0h.png?_wi=2",
|
||||
imageAlt: "mobile car detailing icon",
|
||||
},
|
||||
text: "Select"},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cx43XVNYaN5QANr5gVGVtfQciH/uploaded-1777313849170-cc1h9s0h.png?_wi=2", imageAlt: "mobile car detailing icon"},
|
||||
{
|
||||
id: "deep",
|
||||
title: "Interior Deep",
|
||||
price: "$100+",
|
||||
period: "sedan",
|
||||
features: [
|
||||
"Deep Cleaning",
|
||||
"Vents",
|
||||
"Console Focus",
|
||||
],
|
||||
id: "deep", title: "Interior Deep", price: "$100+", period: "sedan", features: [
|
||||
"Deep Cleaning", "Vents", "Console Focus"],
|
||||
button: {
|
||||
text: "Select",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193622.jpg?_wi=2",
|
||||
imageAlt: "mobile car detailing icon",
|
||||
},
|
||||
text: "Select"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193622.jpg?_wi=2", imageAlt: "mobile car detailing icon"},
|
||||
]}
|
||||
title="Professional Detailing Services"
|
||||
description="Choose from our premium tiers tailored for your vehicle type."
|
||||
@@ -194,19 +129,13 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
icon: CalendarDays,
|
||||
title: "1. Book Online",
|
||||
description: "Choose your service and pick your time slot instantly.",
|
||||
},
|
||||
title: "1. Book Online", description: "Choose your service and pick your time slot instantly."},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "2. We Come To You",
|
||||
description: "Our experts arrive at your location, fully equipped.",
|
||||
},
|
||||
title: "2. We Come To You", description: "Our experts arrive at your location, fully equipped."},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "3. Enjoy Results",
|
||||
description: "Relax while we restore your vehicle to showroom quality.",
|
||||
},
|
||||
title: "3. Enjoy Results", description: "Relax while we restore your vehicle to showroom quality."},
|
||||
]}
|
||||
title="How We Make Your Car Shine"
|
||||
description="The easiest way to get premium auto care."
|
||||
@@ -220,23 +149,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: MapPin,
|
||||
title: "Deerfield Beach",
|
||||
value: "Base",
|
||||
},
|
||||
id: "1", icon: MapPin,
|
||||
title: "Deerfield Beach", value: "Base"},
|
||||
{
|
||||
id: "2",
|
||||
icon: MapPin,
|
||||
title: "Boca Raton",
|
||||
value: "Service",
|
||||
},
|
||||
id: "2", icon: MapPin,
|
||||
title: "Boca Raton", value: "Service"},
|
||||
{
|
||||
id: "3",
|
||||
icon: MapPin,
|
||||
title: "Pompano Beach",
|
||||
value: "Service",
|
||||
},
|
||||
id: "3", icon: MapPin,
|
||||
title: "Pompano Beach", value: "Service"},
|
||||
]}
|
||||
title="Service Areas"
|
||||
description="Proudly serving the Florida coast."
|
||||
@@ -247,65 +167,28 @@ export default function LandingPage() {
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Sedan Owner",
|
||||
company: "Deerfield",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916014.jpg",
|
||||
},
|
||||
id: "1", name: "Alexander Sterling", role: "Executive Client", company: "Porsche 911", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-car-interior-with-leather-seats_1150-13651.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike R.",
|
||||
role: "Truck Owner",
|
||||
company: "Boca",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-executive-with-short-hair-crossed-arms_1149-89.jpg",
|
||||
},
|
||||
id: "2", name: "Victoria Vance", role: "Luxury Collector", company: "Range Rover", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-car-front-view_1150-13651.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily P.",
|
||||
role: "SUV Owner",
|
||||
company: "Pompano",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumbs-up-posing-camera-park_1262-20571.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
role: "Sedan Owner",
|
||||
company: "Deerfield",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130139.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jen K.",
|
||||
role: "SUV Owner",
|
||||
company: "Boca",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
|
||||
},
|
||||
id: "3", name: "Julian Thorne", role: "Business Owner", company: "Bentley Continental", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-black-car-detailing_1150-13651.jpg"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
value: "5.0", label: "Avg Rating"},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Vehicles Cleaned",
|
||||
},
|
||||
value: "100%", label: "Premium Care"},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Satisfied",
|
||||
},
|
||||
value: "VIP", label: "Service Level"},
|
||||
]}
|
||||
title="Client Reviews"
|
||||
description="What our customers say about AutoLuxe Lab."
|
||||
title="Distinguished Client Testimonials"
|
||||
description="Experience the pinnacle of automotive care as described by our most discerning clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -314,20 +197,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you bring your own water?",
|
||||
content: "Yes, we are fully mobile and equipped to handle the service on-site.",
|
||||
},
|
||||
id: "1", title: "Do you bring your own water?", content: "Yes, we are fully mobile and equipped to handle the service on-site."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does a deep clean take?",
|
||||
content: "Depending on vehicle size, deep interiors usually take 2-4 hours.",
|
||||
},
|
||||
id: "2", title: "How long does a deep clean take?", content: "Depending on vehicle size, deep interiors usually take 2-4 hours."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can you service at my office?",
|
||||
content: "Absolutely! As long as we have access to your vehicle, we are good to go.",
|
||||
},
|
||||
id: "3", title: "Can you service at my office?", content: "Absolutely! As long as we have access to your vehicle, we are good to go."},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -338,14 +212,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
text="Ready to book your premium car detailing? Contact us today."
|
||||
buttons={[
|
||||
{
|
||||
text: "(754) 235-4272",
|
||||
href: "tel:7542354272",
|
||||
},
|
||||
text: "(754) 235-4272", href: "tel:7542354272"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -354,16 +225,12 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="AutoLuxe Lab"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user