Update src/app/page.tsx
This commit is contained in:
385
src/app/page.tsx
385
src/app/page.tsx
@@ -26,270 +26,139 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="STK Detailing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Work", id: "gallery" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="STK Detailing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Premium Car Detailing"
|
||||
description="Bringing your vehicle back to showroom condition."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg?_wi=1"
|
||||
showDimOverlay={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 500+ happy car owners"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#gallery",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Premium Car Detailing"
|
||||
description="Bringing your vehicle back to showroom condition."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg"
|
||||
showDimOverlay={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg", alt: "Customer 5" },
|
||||
]}
|
||||
avatarText="Trusted by over 500+ happy car owners"
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#gallery" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Interior Detail",
|
||||
description: "Deep cleaning of seats, carpets, dashboard, and trims.",
|
||||
icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg?_wi=1",
|
||||
imageAlt: "Interior Detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg?_wi=2",
|
||||
imageAlt: "Interior Detail",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg?_wi=2",
|
||||
imageAlt: "luxury car detailing interior professional",
|
||||
},
|
||||
{
|
||||
title: "Exterior Detail",
|
||||
description: "Wash, polish, and protection for a flawless finish.",
|
||||
icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg?_wi=1",
|
||||
imageAlt: "Exterior Detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg?_wi=2",
|
||||
imageAlt: "Exterior Detail",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg?_wi=3",
|
||||
imageAlt: "car interior cleaning detail",
|
||||
},
|
||||
{
|
||||
title: "Full Valet",
|
||||
description: "Complete inside & outside transformation.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg?_wi=1",
|
||||
imageAlt: "Full Valet",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg?_wi=2",
|
||||
imageAlt: "Full Valet",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg?_wi=3",
|
||||
imageAlt: "car exterior polishing detail",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Comprehensive cleaning solutions for every part of your vehicle."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Interior Detail", description: "Deep cleaning of seats, carpets, dashboard, and trims.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg", imageAlt: "Interior Detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg", imageAlt: "Interior Detail" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Exterior Detail", description: "Wash, polish, and protection for a flawless finish.", icon: Shield,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg", imageAlt: "Exterior Detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg", imageAlt: "Exterior Detail" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Full Valet", description: "Complete inside & outside transformation.", icon: Zap,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg", imageAlt: "Full Valet" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342626.jpg", imageAlt: "Full Valet" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Comprehensive cleaning solutions for every part of your vehicle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Interior Restoration",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Exterior Gloss",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Seat Detail",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Wheel Polish",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Dashboard Trim",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Exhaust Detail",
|
||||
price: "View Details",
|
||||
variant: "Gallery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Previous Work"
|
||||
description="Showcasing our precision detailing results."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Interior Restoration", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg" },
|
||||
{ id: "2", name: "Exterior Gloss", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg" },
|
||||
{ id: "3", name: "Seat Detail", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg" },
|
||||
{ id: "4", name: "Wheel Polish", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg" },
|
||||
{ id: "5", name: "Dashboard Trim", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/tattoo-master-shall-paint-tattoo_627829-12071.jpg" },
|
||||
{ id: "6", name: "Exhaust Detail", price: "View Details", variant: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg" },
|
||||
]}
|
||||
title="Previous Work"
|
||||
description="Showcasing our precision detailing results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Latest News & Tips"
|
||||
description="Expert advice on maintaining your vehicle's pristine condition year-round."
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
category: "Maintenance",
|
||||
title: "5 Tips for Maintaining Your Car Finish",
|
||||
excerpt: "Essential advice for long-term paint protection between details.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg?_wi=4",
|
||||
authorName: "John Doe",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg",
|
||||
date: "Jan 20, 2026",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
category: "Interior Care",
|
||||
title: "How to Keep Your Leather Looking New",
|
||||
excerpt: "Simple habits to prevent cracking and fading in your luxury interior.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg?_wi=4",
|
||||
authorName: "Jane Smith",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg",
|
||||
date: "Feb 05, 2026",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Latest News & Tips"
|
||||
description="Expert advice on maintaining your vehicle's pristine condition year-round."
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Maintenance", title: "5 Tips for Maintaining Your Car Finish", excerpt: "Essential advice for long-term paint protection between details.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg", authorName: "John Doe", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg", date: "Jan 20, 2026"},
|
||||
{
|
||||
id: "2", category: "Interior Care", title: "How to Keep Your Leather Looking New", excerpt: "Simple habits to prevent cracking and fading in your luxury interior.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-dusting_23-2149172885.jpg", authorName: "Jane Smith", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg", date: "Feb 05, 2026"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Contact Us"
|
||||
description="Ready to restore your vehicle? Drop your email and we'll reach out, or call us at 07XXX XXX XXX."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Contact Us"
|
||||
description="Ready to restore your vehicle? Drop your email and we'll reach out, or call us at 07XXX XXX XXX."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z6zt56"
|
||||
logoText="STK Detailing"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#gallery",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2026 STK Detailing. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z6zt56"
|
||||
logoText="STK Detailing"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "Work", href: "#gallery" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2026 STK Detailing. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user