Update src/app/page.tsx
This commit is contained in:
359
src/app/page.tsx
359
src/app/page.tsx
@@ -14,265 +14,122 @@ import { Instagram } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Twin Turbos"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Twin Turbos"
|
||||
button={{ text: "Book Appointment", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Get Your Car Looking Like New!"
|
||||
description="Professional auto detailing services to revitalize your vehicle inside and out. Experience the ultimate clean and shine today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDNrev9EH422qJb61Td7ARRLqn/uploaded-1775916445736-hwppsjke.png"
|
||||
imageAlt="Twin Turbos Detailing Services"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193618.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26072.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193624.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 500+ happy car owners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Detailing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Wax",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Interior Deep Clean",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Ceramic Coating",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Showroom Shine",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Get Your Car Looking Like New!"
|
||||
description="Professional auto detailing services to revitalize your vehicle inside and out. Experience the ultimate clean and shine today."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDNrev9EH422qJb61Td7ARRLqn/uploaded-1775916445736-hwppsjke.png"
|
||||
imageAlt="Twin Turbos Detailing Services"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193618.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26072.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193624.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
avatarText="Trusted by over 500+ happy car owners"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Expert Detailing" },
|
||||
{ type: "text", text: "Premium Wax" },
|
||||
{ type: "text", text: "Interior Deep Clean" },
|
||||
{ type: "text", text: "Ceramic Coating" },
|
||||
{ type: "text", text: "Showroom Shine" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Interior Refresh",
|
||||
description: "Complete deep clean of upholstery, carpets, and dashboard surfaces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg",
|
||||
titleIconSrc: "Sparkles",
|
||||
buttonText: "View Details",
|
||||
},
|
||||
{
|
||||
title: "Exterior Refresh",
|
||||
description: "Professional wash, wax, and paint protection to restore that showroom shine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/details-car-standing-car-showroom_1303-29468.jpg",
|
||||
titleIconSrc: "Star",
|
||||
buttonText: "View Details",
|
||||
},
|
||||
{
|
||||
title: "Full Experience",
|
||||
content: "Total vehicle revitalization featuring both premium interior and exterior treatments.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-painter-using-gun-paint-car-shop_23-2149750071.jpg",
|
||||
titleIconSrc: "Award",
|
||||
buttonText: "View Details",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive detailing solutions for every vehicle type."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Interior Refresh", description: "Complete deep clean of upholstery, carpets, and dashboard surfaces.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-gloves-cleaning-gym-equipment_23-2148766022.jpg", titleIconSrc: "Sparkles", buttonText: "View Details" },
|
||||
{ title: "Exterior Refresh", description: "Professional wash, wax, and paint protection to restore that showroom shine.", imageSrc: "http://img.b2bpic.net/free-photo/details-car-standing-car-showroom_1303-29468.jpg", titleIconSrc: "Star", buttonText: "View Details" },
|
||||
{ title: "Full Experience", description: "Total vehicle revitalization featuring both premium interior and exterior treatments.", imageSrc: "http://img.b2bpic.net/free-photo/male-painter-using-gun-paint-car-shop_23-2149750071.jpg", titleIconSrc: "Award", buttonText: "View Details" }
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive detailing solutions for every vehicle type."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Entry",
|
||||
price: "$50",
|
||||
subtitle: "Exterior Focus",
|
||||
features: [
|
||||
"Hand Wash",
|
||||
"Wax Application",
|
||||
"Tire Shine",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Exterior",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Essential",
|
||||
price: "$60",
|
||||
subtitle: "Interior Focus",
|
||||
features: [
|
||||
"Interior Vacuum",
|
||||
"Surface Wipe",
|
||||
"Glass Cleaning",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Interior",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Ultimate",
|
||||
price: "$130",
|
||||
subtitle: "Total Experience",
|
||||
features: [
|
||||
"Deep Interior Clean",
|
||||
"Full Exterior Polish",
|
||||
"Premium Wax",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Full Experience",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple Transparent Pricing"
|
||||
description="Professional detailing options that fit your needs and budget."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", badge: "Entry", price: "$50", subtitle: "Exterior Focus", features: ["Hand Wash", "Wax Application", "Tire Shine"], buttons: [{ text: "Book Exterior", href: "#contact" }] },
|
||||
{ id: "p2", badge: "Essential", price: "$60", subtitle: "Interior Focus", features: ["Interior Vacuum", "Surface Wipe", "Glass Cleaning"], buttons: [{ text: "Book Interior", href: "#contact" }] },
|
||||
{ id: "p3", badge: "Ultimate", price: "$130", subtitle: "Total Experience", features: ["Deep Interior Clean", "Full Exterior Polish", "Premium Wax"], buttons: [{ text: "Book Full Experience", href: "#contact" }] }
|
||||
]}
|
||||
title="Simple Transparent Pricing"
|
||||
description="Professional detailing options that fit your needs and budget."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Our Track Record"
|
||||
tag="Excellence"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1000+",
|
||||
description: "Vehicles Detailed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "15+",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5.0",
|
||||
description: "Average Rating",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "100%",
|
||||
description: "Satisfaction Rate",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Our Track Record"
|
||||
tag="Excellence"
|
||||
metrics={[
|
||||
{ id: "m1", value: "1000+", description: "Vehicles Detailed" },
|
||||
{ id: "m2", value: "15+", description: "Years Experience" },
|
||||
{ id: "m3", value: "5.0", description: "Average Rating" },
|
||||
{ id: "m4", value: "100%", description: "Satisfaction Rate" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Ready to Transform Your Car?"
|
||||
description="Call us at +1 (610) 477-9684 or +1 (267) 883-4322 to book your service today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+16104779684",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Contact Us"
|
||||
title="Ready to Transform Your Car?"
|
||||
description="Call us at +1 (610) 477-9684 or +1 (267) 883-4322 to book your service today."
|
||||
buttons={[{ text: "Call Now", href: "tel:+16104779684" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Twin Turbos"
|
||||
copyrightText="© 2025 Twin Turbos Car Detailing"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Twin Turbos"
|
||||
copyrightText="© 2025 Twin Turbos Car Detailing"
|
||||
socialLinks={[{ icon: Instagram, href: "#", ariaLabel: "Instagram" }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user