bender/f2b8917e-db7d-48e7-81ae-0578c8f7f0c8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-10 03:09:12 +00:00
parent 795eded949
commit 321d8b753a
1 changed files with 146 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
src/app/page.tsx
View File

@@ -29,394 +29,161 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "features",
},
{
name: "Packages",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="DetailPro"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "features" },
{ name: "Products", id: "products" },
{ name: "Pricing", id: "pricing" },
{ name: "Metrics", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="DetailPro"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "gradient-bars",
}}
title="Elite Detailing Services for Your Vehicle"
description="Restore your car to showroom quality with our professional detailing, ceramic coating, and interior restoration services."
buttons={[
{
text: "Book Appointment",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3043.jpg?_wi=1"
imageAlt="glossy car finish detailing"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/steering-wheel-car-with-brown-interior_181624-6097.jpg",
alt: "Steering wheel of a car with brown interior",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg",
alt: "Closeup headlights of gray car with man",
},
{
src: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg",
alt: "Headlight lamp car",
},
{
src: "http://img.b2bpic.net/free-photo/head-lights-car_1339-3220.jpg",
alt: "Head lights of a car",
},
{
src: "http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg",
alt: "Man polishing car with orbital applicator",
},
]}
avatarText="Trusted by 1,500+ car enthusiasts"
marqueeItems={[
{
type: "text",
text: "Showroom Shine",
},
{
type: "text",
text: "Ceramic Protection",
},
{
type: "text",
text: "Interior Restoration",
},
{
type: "text",
text: "Paint Correction",
},
{
type: "text",
text: "Fast Turnaround",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "gradient-bars" }}
title="Elite Detailing Services for Your Vehicle"
description="Restore your car to showroom quality with our professional detailing, ceramic coating, and interior restoration services."
buttons={[{ text: "Book Appointment", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3043.jpg"
imageAlt="glossy car finish detailing"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/steering-wheel-car-with-brown-interior_181624-6097.jpg", alt: "Steering wheel of a car with brown interior" },
{ src: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg", alt: "Closeup headlights of gray car with man" },
{ src: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg", alt: "Headlight lamp car" },
{ src: "http://img.b2bpic.net/free-photo/head-lights-car_1339-3220.jpg", alt: "Head lights of a car" },
{ src: "http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg", alt: "Man polishing car with orbital applicator" }
]}
avatarText="Trusted by 1,500+ car enthusiasts"
marqueeItems={[
{ type: "text", text: "Showroom Shine" },
{ type: "text", text: "Ceramic Protection" },
{ type: "text", text: "Interior Restoration" },
{ type: "text", text: "Paint Correction" },
{ type: "text", text: "Fast Turnaround" }
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={true}
heading={[
{
type: "text",
content: "Professional Care for Every Surface",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg",
alt: "car detailing interior cleaning",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={true}
heading={[
{ type: "text", content: "Professional Care for Every Surface" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg", alt: "car detailing interior cleaning" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Interior Deep Clean",
description: "Full extraction and steam cleaning for a fresh interior.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102213.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3043.jpg?_wi=2",
imageAlt: "deep steam seat cleaning",
},
{
title: "Foam Hand Wash",
description: "Gentle, thorough washing process with premium soaps.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26074.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22322.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg",
imageAlt: "deep steam seat cleaning",
},
{
title: "Paint Correction",
description: "Machine polishing to remove swirls and restore gloss.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/man-polish-salon-car-garage_1157-36596.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193581.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/white-pump-bottle-skincare-products_187299-48053.jpg?_wi=1",
imageAlt: "deep steam seat cleaning",
},
]}
showStepNumbers={false}
title="Our Expert Services"
description="We specialize in comprehensive care for your vehicle's interior and exterior."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Interior Deep Clean", description: "Full extraction and steam cleaning for a fresh interior.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102213.jpg" } },
{ title: "Foam Hand Wash", description: "Gentle, thorough washing process with premium soaps.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26074.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22322.jpg" } },
{ title: "Paint Correction", description: "Machine polishing to remove swirls and restore gloss.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-polish-salon-car-garage_1157-36596.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193581.jpg" } }
]}
showStepNumbers={false}
title="Our Expert Services"
description="We specialize in comprehensive care for your vehicle's interior and exterior."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Ceramic Guard",
price: "$79.00",
variant: "Protection",
imageSrc: "http://img.b2bpic.net/free-photo/white-pump-bottle-skincare-products_187299-48053.jpg?_wi=2",
},
{
id: "p2",
name: "Leather Care",
price: "$29.00",
variant: "Interior",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347086.jpg",
},
{
id: "p3",
name: "Wheel Cleaner",
price: "$19.00",
variant: "Wheels",
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-examining-car-wheel_1170-1468.jpg",
},
{
id: "p4",
name: "Microfiber Kit",
price: "$15.00",
variant: "Tools",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194141.jpg",
},
{
id: "p5",
name: "Glass Pro",
price: "$12.00",
variant: "Glass",
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-window_23-2148465076.jpg",
},
{
id: "p6",
name: "Dash Protect",
price: "$18.00",
variant: "Interior",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194147.jpg",
},
]}
title="Professional Supplies"
description="Premium care products used by our experts."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Ceramic Guard", price: "$79.00", variant: "Protection", imageSrc: "http://img.b2bpic.net/free-photo/white-pump-bottle-skincare-products_187299-48053.jpg" },
{ id: "p2", name: "Leather Care", price: "$29.00", variant: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347086.jpg" },
{ id: "p3", name: "Wheel Cleaner", price: "$19.00", variant: "Wheels", imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-examining-car-wheel_1170-1468.jpg" },
{ id: "p4", name: "Microfiber Kit", price: "$15.00", variant: "Tools", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194141.jpg" },
{ id: "p5", name: "Glass Pro", price: "$12.00", variant: "Glass", imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-window_23-2148465076.jpg" },
{ id: "p6", name: "Dash Protect", price: "$18.00", variant: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194147.jpg" }
]}
title="Professional Supplies"
description="Premium care products used by our experts."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Essential",
price: "$150",
subtitle: "Basic maintenance package",
features: [
"Hand Wash",
"Interior Vacuum",
"Window Cleaning",
],
buttons: [
{
text: "Select",
href: "#contact",
},
],
},
{
id: "pro",
badge: "Advanced",
price: "$300",
subtitle: "Full detailing service",
features: [
"All Basic Features",
"Ceramic Sealant",
"Leather Conditioning",
],
buttons: [
{
text: "Select",
href: "#contact",
},
],
},
{
id: "elite",
badge: "Elite",
price: "$550",
subtitle: "Ultimate preservation",
features: [
"All Advanced Features",
"Paint Correction",
"Engine Bay Detail",
],
buttons: [
{
text: "Select",
href: "#contact",
},
],
},
]}
title="Service Packages"
description="Choose the level of detail your car deserves."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", badge: "Essential", price: "$150", subtitle: "Basic maintenance package", features: ["Hand Wash", "Interior Vacuum", "Window Cleaning"], buttons: [{ text: "Select", href: "#contact" }] },
{ id: "pro", badge: "Advanced", price: "$300", subtitle: "Full detailing service", features: ["All Basic Features", "Ceramic Sealant", "Leather Conditioning"], buttons: [{ text: "Select", href: "#contact" }] },
{ id: "elite", badge: "Elite", price: "$550", subtitle: "Ultimate preservation", features: ["All Advanced Features", "Paint Correction", "Engine Bay Detail"], buttons: [{ text: "Select", href: "#contact" }] }
]}
title="Service Packages"
description="Choose the level of detail your car deserves."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
icon: CheckCircle,
title: "Cars Detailed",
value: "1,500+",
},
{
id: "m2",
icon: Award,
title: "Happy Clients",
value: "98%",
},
{
id: "m3",
icon: Sparkles,
title: "Years Experience",
value: "10+",
},
]}
title="Why DetailPro?"
description="Proven results for our community."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", icon: CheckCircle, title: "Cars Detailed", value: "1,500+" },
{ id: "m2", icon: Award, title: "Happy Clients", value: "98%" },
{ id: "m3", icon: Sparkles, title: "Years Experience", value: "10+" }
]}
title="Why DetailPro?"
description="Proven results for our community."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah J.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212216.jpg",
},
{
id: "t2",
name: "Mark D.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-customer-car-dealership-posing_651396-1177.jpg",
},
{
id: "t3",
name: "Elena R.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
},
{
id: "t4",
name: "David W.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-sitting-car_1303-21852.jpg",
},
{
id: "t5",
name: "Family Client",
imageSrc: "http://img.b2bpic.net/free-photo/friends-sitting-drinking-car-boot-tailgate-party_53876-132391.jpg",
},
]}
cardTitle="Client Reviews"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212216.jpg" },
{ id: "t2", name: "Mark D.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-customer-car-dealership-posing_651396-1177.jpg" },
{ id: "t3", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg" },
{ id: "t4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-sitting-car_1303-21852.jpg" },
{ id: "t5", name: "Family Client", imageSrc: "http://img.b2bpic.net/free-photo/friends-sitting-drinking-car-boot-tailgate-party_53876-132391.jpg" }
]}
cardTitle="Client Reviews"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Booking"
title="Ready for a shine?"
description="Send us a message to schedule your detailing session today."
buttons={[
{
text: "Book Now",
href: "#contact",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Booking"
title="Ready for a shine?"
description="Send us a message to schedule your detailing session today."
buttons={[{ text: "Book Now", href: "#contact" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About",
href: "#about",
},
{
label: "Services",
href: "#features",
},
],
},
{
items: [
{
label: "Pricing",
href: "#pricing",
},
{
label: "Privacy Policy",
href: "#",
},
],
},
]}
logoText="DetailPro"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }] },
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "Privacy Policy", href: "#" }] }
]}
logoText="DetailPro"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}