bender/126d0761-40c2-4750-931f-7a8d6edb0d34
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-14 00:31:14 +00:00
parent a9f1b6dd1f
commit 890908c8ec
1 changed files with 121 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

471
src/app/page.tsx
View File

@@ -2,17 +2,17 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Sparkles } from "lucide-react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardThree from '@/components/sections/metric/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Sparkles, Car, ShieldCheck, MapPin, Phone } from "lucide-react";
export default function LandingPage() {
return (
@@ -20,357 +20,128 @@ export default function LandingPage() {
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="none"
cardStyle="gradient-radial"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
contentWidth="medium"
sizing="medium"
background="noise"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Frog's Car Wash"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
]}
brandName="Frog's Car Wash"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="The Deep Clean Your Frog Deserves."
description="Premium car wash services that leave your vehicle looking showroom-new, every time. Experience the Frog's Car Wash difference today."
testimonials={[
{
name: "Alice M.",
handle: "@alicem",
testimonial: "Best wash in town. My car has never been this shiny!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg?_wi=1",
imageAlt: "modern car wash facility clean",
},
{
name: "Bob D.",
handle: "@bobd",
testimonial: "Quick, professional, and excellent quality.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg?_wi=1",
imageAlt: "modern car wash facility clean",
},
{
name: "Charlie P.",
handle: "@charliep",
testimonial: "Staff is super friendly. Definitely returning.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-eyeglasses-with-tattoo-his-arm-using-portable-tablet-pc-back-seat-car_613910-12288.jpg?_wi=1",
imageAlt: "modern car wash facility clean",
},
{
name: "Diana K.",
handle: "@dianak",
testimonial: "Detailed clean, inside and out. Very impressed.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193575.jpg?_wi=1",
imageAlt: "modern car wash facility clean",
},
{
name: "Edward R.",
handle: "@edwardr",
testimonial: "Fair prices for high-quality service.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/repairmen-fixing-car-garage_23-2147897980.jpg?_wi=1",
imageAlt: "modern car wash facility clean",
},
]}
buttons={[
{
text: "View Packages",
href: "#services",
},
{
text: "Book Now",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg?_wi=2"
imageAlt="modern car wash facility clean"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-man-shirt-jacket-cap-showing-thumb-up-looking-happy_176474-30978.jpg",
alt: "Young man in shirt, jacket, cap showing thumb up and looking happy",
},
{
src: "http://img.b2bpic.net/free-photo/young-man-driving-modern-car_651396-2412.jpg",
alt: "Young man driving modern car",
},
{
src: "http://img.b2bpic.net/free-photo/charismatic-man-holding-car-keys-showing-thumbs-up_158595-4218.jpg",
alt: "Charismatic man holding car keys showing thumbs up",
},
{
src: "http://img.b2bpic.net/free-photo/happy-men-taking-selfie_23-2148320221.jpg",
alt: "Happy men taking a selfie",
},
{
src: "http://img.b2bpic.net/free-photo/front-view-woman-working-car-service_23-2148826534.jpg",
alt: "Front view woman working at a car service",
},
]}
avatarText="Trusted by 10,000+ happy car owners"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="The Deep Clean Your Frog Deserves"
description="Premium auto detailing that leaves your vehicle looking showroom-new, every time. Experience the Frog's Car Wash difference."
background={{ variant: "sparkles-gradient" }}
carouselItems={Array(6).fill({ imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg?_wi=1" })}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyEight
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Eco-friendly Soap",
subtitle: "Gentle on nature, tough on dirt.",
category: "Technology",
value: "Safe",
},
{
id: "f2",
title: "Hand Drying",
subtitle: "No scratches, just shine.",
category: "Quality",
value: "Premium",
},
{
id: "f3",
title: "Paint Protection",
subtitle: "Gloss that lasts weeks.",
category: "Care",
value: "Detailed",
},
]}
title="Our Cleaning Process"
description="We use eco-friendly soaps and advanced techniques to protect your car's paint while giving it a deep, thorough clean."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
title="Why Choose Us?"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ tag: "Safe", title: "Eco-friendly Soap", subtitle: "Gentle on nature, tough on dirt.", description: "We use biodegradable solutions.", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg?_wi=1" },
{ tag: "Premium", title: "Hand Drying", subtitle: "Streak-free finish", description: "Detailed care for every surface.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193575.jpg?_wi=1" }
]}
/>
</div>
<div id="services" data-section="services">
<ProductCardOne
animationType="slide-up"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Quick Rinse",
price: "$15",
imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg?_wi=2",
},
{
id: "p2",
name: "Classic Wash",
price: "$25",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193632.jpg",
},
{
id: "p3",
name: "Deluxe Detail",
price: "$50",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-eyeglasses-with-tattoo-his-arm-using-portable-tablet-pc-back-seat-car_613910-12288.jpg?_wi=2",
},
{
id: "p4",
name: "Interior Spa",
price: "$60",
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-her-car-dashboard-with-rag_23-2150318456.jpg",
},
{
id: "p5",
name: "Ultimate Shine",
price: "$85",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193575.jpg?_wi=2",
},
{
id: "p6",
name: "Full Restoration",
price: "$150",
imageSrc: "http://img.b2bpic.net/free-photo/grunge-wall-background_1232-2526.jpg",
},
]}
title="Service Packages"
description="From a quick exterior rinse to a full interior detail, we have a package for every car owner."
/>
</div>
<div id="services" data-section="services">
<ProductCardFour
title="Service Packages"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Quick Rinse", price: "$15", variant: "Basic", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg?_wi=1" },
{ id: "p2", name: "Classic Wash", price: "$25", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193632.jpg" },
{ id: "p3", name: "Deluxe Detail", price: "$50", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-eyeglasses-with-tattoo-his-arm-using-portable-tablet-pc-back-seat-car_613910-12288.jpg?_wi=1" }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
useInvertedBackground={false}
title="By the Numbers"
tag="Our Growth"
metrics={[
{
id: "m1",
value: "10,000+",
description: "Cars washed",
},
{
id: "m2",
value: "5,000+",
description: "Happy clients",
},
{
id: "m3",
value: "10",
description: "Years of experience",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="By the Numbers"
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", icon: Car, title: "Cars Washed", value: "10,000+" },
{ id: "m2", icon: ShieldCheck, title: "Happy Clients", value: "5,000+" },
{ id: "m3", icon: MapPin, title: "Years Experience", value: "10" }
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Story"
title="Passionate About Clean"
description="Started in a small garage, we've grown into the town's favorite spot for a spotless shine."
subdescription="Our team treats every vehicle like our own, ensuring meticulous attention to detail at every step."
icon={Sparkles}
imageSrc="http://img.b2bpic.net/free-photo/repairmen-fixing-car-garage_23-2147897980.jpg?_wi=2"
mediaAnimation="slide-up"
imageAlt="professional car washer smiling"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Passionate About Clean"
description={["Started in a small garage, we've grown into the town's favorite spot for a spotless shine.", "Our team treats every vehicle like our own, ensuring meticulous attention to detail at every step."]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah J.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-male-with-black-hair-beard-tattoes-his-hand-dressed-white-shirt-blue-jeans-shorts-driving-car_613910-7581.jpg",
},
{
id: "2",
name: "Mike P.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-talking-mobile-phone_1170-1192.jpg",
},
{
id: "3",
name: "Lisa R.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg",
},
{
id: "4",
name: "Tom B.",
imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-attractive-pretty-girl-with-long-wavy-dark-hair-is-wearing-blue-shirt-posing-near-window-with-happy-smile_291650-2330.jpg",
},
{
id: "5",
name: "Emma W.",
imageSrc: "http://img.b2bpic.net/free-photo/salesman-shaking-hands-with-client-after-finishing-test-drive-making-deal_482257-108099.jpg",
},
]}
cardTitle="What People Say"
cardTag="Customer Feedback"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="The best car wash I've ever visited. The service was impeccable and my car looks brand new!"
rating={5}
author="Alice M."
avatars={[{ src: "http://img.b2bpic.net/free-photo/young-man-shirt-jacket-cap-showing-thumb-up-looking-happy_176474-30978.jpg", alt: "Alice" }]}
ratingAnimation="blur-reveal"
avatarsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do you need an appointment?",
content: "No appointments are necessary for standard washes.",
},
{
id: "q2",
title: "What products do you use?",
content: "We use premium, eco-friendly soaps.",
},
{
id: "q3",
title: "Is my car safe?",
content: "Our processes are tested to prevent any scratches.",
},
]}
sideTitle="Questions? Ask Away."
sideDescription="We're here to make sure your experience is perfect. Check out our most frequently asked questions."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
faqsAnimation="blur-reveal"
textboxLayout="default"
faqs={[
{ id: "q1", title: "Do I need an appointment?", content: "No appointments are necessary." },
{ id: "q2", title: "Are products eco-friendly?", content: "Yes, we only use safe, green products." }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Get in Touch"
title="Book Your Spot"
description="Ready to get that shine back? Enter your details below and we'll reach out to schedule your service."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get in Touch"
title="Ready to shine?"
description="Schedule your appointment today or drop by our location."
buttons={[{ text: "Call Us Now", href: "tel:+1234567890" }]}
background={{ variant: "radial-gradient" }}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Frog's Car Wash"
columns={[
{
title: "Navigation",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Services",
href: "#services",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
]}
bottomLeftText="© 2024 Frog's Car Wash"
bottomRightText="Designed with care"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}