3 Commits

Author SHA1 Message Date
4fce2714d7 Update src/app/page.tsx 2026-05-14 00:31:42 +00:00
890908c8ec Update src/app/page.tsx 2026-05-14 00:31:14 +00:00
a9f1b6dd1f Merge version_1 into main
Merge version_1 into main
2026-05-14 00:30:06 +00:00

View File

@@ -2,17 +2,17 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText'; import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight'; import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial'; import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen'; import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard'; import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Sparkles } from "lucide-react"; import { Car, ShieldCheck, MapPin } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -20,357 +20,136 @@ export default function LandingPage() {
defaultButtonVariant="icon-arrow" defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight" defaultTextAnimation="background-highlight"
borderRadius="soft" borderRadius="soft"
contentWidth="small" contentWidth="medium"
sizing="largeSmallSizeMediumTitles" sizing="medium"
background="none" background="noise"
cardStyle="gradient-radial" cardStyle="glass-elevated"
primaryButtonStyle="primary-glow" primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "Home", id: "hero" },
name: "Home", { name: "Services", id: "services" },
id: "hero", { name: "About", id: "about" },
}, { name: "Contact", id: "contact" }
{ ]}
name: "Services", brandName="Frog's Car Wash"
id: "services", />
}, </div>
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Frog's Car Wash"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroOverlayTestimonial <HeroBillboardRotatedCarousel
title="The Deep Clean Your Frog Deserves." 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." description="Premium auto detailing that leaves your vehicle looking showroom-new, every time. Experience the Frog's Car Wash difference."
testimonials={[ background={{ variant: "sparkles-gradient" }}
{ carouselItems={Array(6).fill({ id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/closeup-headlights-gray-car-with-man_158538-8150.jpg?_wi=1" })}
name: "Alice M.", />
handle: "@alicem", </div>
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="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentyEight <FeatureCardNineteen
animationType="slide-up" title="Why Choose Us?"
textboxLayout="split" description="We deliver exceptional quality service."
useInvertedBackground={false} textboxLayout="split"
features={[ useInvertedBackground={false}
{ features={[
id: "f1", { 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" },
title: "Eco-friendly Soap", { 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" }
subtitle: "Gentle on nature, tough on dirt.", ]}
category: "Technology", />
value: "Safe", </div>
},
{
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="services" data-section="services"> <div id="services" data-section="services">
<ProductCardOne <ProductCardFour
animationType="slide-up" title="Service Packages"
textboxLayout="split-description" description="Choose the best fit for your vehicle."
gridVariant="three-columns-all-equal-width" textboxLayout="split-description"
useInvertedBackground={false} gridVariant="three-columns-all-equal-width"
products={[ animationType="slide-up"
{ useInvertedBackground={false}
id: "p1", products={[
name: "Quick Rinse", { 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" },
price: "$15", { id: "p2", name: "Classic Wash", price: "$25", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193632.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg?_wi=2", { 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" }
}, ]}
{ />
id: "p2", </div>
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="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardFourteen <MetricCardThree
useInvertedBackground={false} title="By the Numbers"
title="By the Numbers" description="Trusted by thousands of drivers."
tag="Our Growth" animationType="depth-3d"
metrics={[ textboxLayout="split"
{ useInvertedBackground={false}
id: "m1", metrics={[
value: "10,000+", { id: "m1", icon: Car, title: "Cars Washed", value: "10,000+" },
description: "Cars washed", { id: "m2", icon: ShieldCheck, title: "Happy Clients", value: "5,000+" },
}, { id: "m3", icon: MapPin, title: "Years Experience", value: "10" }
{ ]}
id: "m2", />
value: "5,000+", </div>
description: "Happy clients",
},
{
id: "m3",
value: "10",
description: "Years of experience",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TestimonialAboutCard <TextSplitAbout
useInvertedBackground={false} title="Passionate About Clean"
tag="Our Story" 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."]}
title="Passionate About Clean" useInvertedBackground={false}
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." </div>
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="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve <TestimonialCardFifteen
useInvertedBackground={false} testimonial="The best car wash I've ever visited. The service was impeccable and my car looks brand new!"
testimonials={[ rating={5}
{ author="Alice M."
id: "1", avatars={[{ src: "http://img.b2bpic.net/free-photo/young-man-shirt-jacket-cap-showing-thumb-up-looking-happy_176474-30978.jpg", alt: "Alice" }]}
name: "Sarah J.", ratingAnimation="blur-reveal"
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", avatarsAnimation="slide-up"
}, useInvertedBackground={false}
{ />
id: "2", </div>
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="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitText <FaqBase
useInvertedBackground={false} title="Frequently Asked Questions"
faqs={[ description="Learn more about our services."
{ faqsAnimation="blur-reveal"
id: "q1", textboxLayout="default"
title: "Do you need an appointment?", useInvertedBackground={false}
content: "No appointments are necessary for standard washes.", 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." }
id: "q2", ]}
title: "What products do you use?", />
content: "We use premium, eco-friendly soaps.", </div>
},
{
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="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCTA
useInvertedBackground={false} tag="Get in Touch"
background={{ title="Ready to shine?"
variant: "radial-gradient", description="Schedule your appointment today or drop by our location."
}} buttons={[{ text: "Call Us Now", href: "tel:+1234567890" }]}
tag="Get in Touch" background={{ variant: "radial-gradient" }}
title="Book Your Spot" useInvertedBackground={false}
description="Ready to get that shine back? Enter your details below and we'll reach out to schedule your service." />
/> </div>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterSimple
logoText="Frog's Car Wash" columns={[
columns={[ { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }] },
{ { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
title: "Navigation", ]}
items: [ bottomLeftText="© 2024 Frog's Car Wash"
{ bottomRightText="Designed with care"
label: "Home", />
href: "#hero", </div>
},
{
label: "Services",
href: "#services",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }