Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4fce2714d7 | |||
| 890908c8ec | |||
| a9f1b6dd1f |
479
src/app/page.tsx
479
src/app/page.tsx
@@ -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/metrics/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 { Car, ShieldCheck, MapPin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -20,357 +20,136 @@ 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({ id: "c1", 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?"
|
||||
description="We deliver exceptional quality service."
|
||||
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"
|
||||
description="Choose the best fit for your vehicle."
|
||||
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"
|
||||
description="Trusted by thousands of drivers."
|
||||
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."]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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"
|
||||
description="Learn more about our services."
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
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" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user