Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 272e54622d | |||
| 62d01b7668 | |||
| 0c8745207c |
432
src/app/page.tsx
432
src/app/page.tsx
@@ -3,15 +3,15 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { Droplets, ShieldCheck, Sparkles, ThumbsUp, Truck } from "lucide-react";
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,392 +29,105 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#testimonials",
|
||||
},
|
||||
]}
|
||||
<NavbarStyleCentered
|
||||
brandName="Elite Shine"
|
||||
navItems={[
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Reviews", id: "#testimonials" },
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#cta",
|
||||
}}
|
||||
text: "Book Now", href: "#cta"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={true}
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Your Car, Showroom Clean — Without Leaving Home"
|
||||
description="Professional Mobile Detailing Delivered Right To Your Driveway."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The best mobile detail I have ever experienced. My car looks brand new!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg?_wi=1",
|
||||
imageAlt: "luxury black sports car driveway",
|
||||
},
|
||||
{
|
||||
name: "Mike R.",
|
||||
handle: "@miker",
|
||||
testimonial: "Incredible attention to detail. Highly recommend Elite Shine!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-hoovering-car-cabin-garage_1157-36597.jpg",
|
||||
imageAlt: "car interior leather clean",
|
||||
},
|
||||
{
|
||||
name: "Emily D.",
|
||||
handle: "@emilyd",
|
||||
testimonial: "Convenient and professional. Will book again!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/head-lights-car_1339-5401.jpg?_wi=1",
|
||||
imageAlt: "hand car wash bubbles",
|
||||
},
|
||||
{
|
||||
name: "James K.",
|
||||
handle: "@jamesk",
|
||||
testimonial: "Fast service and a perfect shine. Love it.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg",
|
||||
imageAlt: "car ceramic coating",
|
||||
},
|
||||
{
|
||||
name: "Linda V.",
|
||||
handle: "@lindav",
|
||||
testimonial: "My car hasn't looked this good in years.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg?_wi=1",
|
||||
imageAlt: "happy luxury car owner",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Detail Now",
|
||||
href: "#cta",
|
||||
},
|
||||
{
|
||||
text: "View Packages",
|
||||
href: "#pricing",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg?_wi=2"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212229.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Loved by 500+ happy car owners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Premium Detailing",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Mobile Service",
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Ceramic Coating",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Interior Deep Clean",
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Satisfaction Guaranteed",
|
||||
icon: ThumbsUp,
|
||||
},
|
||||
buttons={[
|
||||
{ text: "Book Your Detail Now", href: "#cta" },
|
||||
{ text: "View Packages", href: "#pricing" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
label: "Entry",
|
||||
title: "Basic Wash",
|
||||
items: [
|
||||
"Exterior Hand Wash",
|
||||
"Tire Shine",
|
||||
"Window Cleaning",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
label: "Mid",
|
||||
title: "Interior Detail",
|
||||
items: [
|
||||
"Deep Vacuuming",
|
||||
"Leather Conditioning",
|
||||
"Stain Removal",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
label: "Full",
|
||||
title: "Full Detail",
|
||||
items: [
|
||||
"Clay Bar Treatment",
|
||||
"Engine Bay Clean",
|
||||
"Ceramic Sealant",
|
||||
],
|
||||
},
|
||||
<FeatureCardTwentyOne
|
||||
accordionItems={[
|
||||
{ id: "a1", title: "Basic Wash", content: "Exterior Hand Wash, Tire Shine, Window Cleaning." },
|
||||
{ id: "a2", title: "Interior Detail", content: "Deep Vacuuming, Leather Conditioning, Stain Removal." },
|
||||
{ id: "a3", title: "Full Detail", content: "Clay Bar Treatment, Engine Bay Clean, Ceramic Sealant." },
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Premium detailing tailored to your vehicle's needs."
|
||||
useInvertedBackground={false}
|
||||
videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="comparison" data-section="comparison">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
<TestimonialAboutCard
|
||||
tag="Comparison"
|
||||
title="See The Difference We Make"
|
||||
description="We don't just wash your car; we restore it to its showroom glory."
|
||||
subdescription="Our process uses industrial-grade tools to ensure perfection."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/head-lights-car_1339-5401.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardTwelve
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "b1",
|
||||
label: "Convenience",
|
||||
title: "At Your Doorstep",
|
||||
items: [
|
||||
"Home or Office Service",
|
||||
"No Wait Times",
|
||||
"Flexible Scheduling",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
label: "Equipment",
|
||||
title: "Pro-Grade Gear",
|
||||
items: [
|
||||
"Industrial Equipment",
|
||||
"High-End Polishes",
|
||||
"Safe Chemicals",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
label: "Eco",
|
||||
title: "Eco-Friendly",
|
||||
items: [
|
||||
"Water-saving Methods",
|
||||
"Biodegradable Soap",
|
||||
"Safe Disposal",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b4",
|
||||
label: "Guarantee",
|
||||
title: "Satisfaction",
|
||||
items: [
|
||||
"100% Quality Check",
|
||||
"On-Time Arrival",
|
||||
"Professional Staff",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Why Choose Elite Shine"
|
||||
description="Setting the standard for mobile detailing."
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Basic Detail",
|
||||
price: "$99",
|
||||
period: "Starting at",
|
||||
features: [
|
||||
"Exterior Foam Wash",
|
||||
"Tire Cleaning",
|
||||
"Interior Vacuum",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#cta",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg?_wi=1",
|
||||
imageAlt: "professional woman portrait",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Premium Detail",
|
||||
price: "$189",
|
||||
period: "Most Popular",
|
||||
features: [
|
||||
"Basic Wash Features",
|
||||
"Leather Conditioning",
|
||||
"Dashboard Polish",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#cta",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg?_wi=1",
|
||||
imageAlt: "car enthusiast portrait",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Ultimate Detail",
|
||||
price: "$299",
|
||||
period: "Starting at",
|
||||
features: [
|
||||
"Full Paint Correction",
|
||||
"Ceramic Waxing",
|
||||
"Steam Cleaning",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#cta",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg?_wi=1",
|
||||
imageAlt: "professional business owner portrait",
|
||||
},
|
||||
]}
|
||||
title="Pricing Packages"
|
||||
description="Transparent pricing for exceptional service."
|
||||
plans={[
|
||||
{ id: "p1", badge: "Essential", price: "$99", subtitle: "Exterior & Interior Basics", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Exterior Foam Wash", "Tire Cleaning", "Interior Vacuum"] },
|
||||
{ id: "p2", badge: "Popular", price: "$189", subtitle: "Deep Cleaning", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Everything in Basic", "Leather Conditioning", "Dashboard Polish"] },
|
||||
{ id: "p3", badge: "Ultimate", price: "$299", subtitle: "Showroom Finish", buttons: [{ text: "Book Now", href: "#cta" }], features: ["Everything in Premium", "Paint Correction", "Ceramic Waxing"] },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex B.",
|
||||
role: "Owner",
|
||||
company: "Tech Inc",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-vintage-car_23-2150771163.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Maria C.",
|
||||
role: "Director",
|
||||
company: "Media Co",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "John D.",
|
||||
role: "Manager",
|
||||
company: "Auto Hub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151099208.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Susan P.",
|
||||
role: "Artist",
|
||||
company: "Creative",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-his-colleague-communicating-while-working-together-workshop_637285-7662.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Kevin L.",
|
||||
role: "Architect",
|
||||
company: "Designs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212229.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="What our clients say about us."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex B.", handle: "@alexb", testimonial: "The best mobile detail I have ever experienced. My car looks brand new!" },
|
||||
{ id: "t2", name: "Maria C.", handle: "@mariac", testimonial: "Incredible attention to detail. Highly recommend Elite Shine!" },
|
||||
{ id: "t3", name: "John D.", handle: "@johnd", testimonial: "Convenient and professional. Will book again!" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="area" data-section="area">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Los Angeles",
|
||||
"San Diego",
|
||||
"Santa Monica",
|
||||
"Long Beach",
|
||||
"Irvine",
|
||||
"Beverly Hills",
|
||||
"Pasadena",
|
||||
]}
|
||||
names={["Los Angeles", "San Diego", "Santa Monica", "Long Beach", "Irvine", "Beverly Hills", "Pasadena"]}
|
||||
title="Proudly Serving Your Area"
|
||||
description="We are available in the following metropolitan cities."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Get Started"
|
||||
tag="Contact Us"
|
||||
title="Ready For A Spotless Ride?"
|
||||
description="Book Your Mobile Detail Today — It Only Takes 60 Seconds."
|
||||
inputPlaceholder="Enter your email or phone"
|
||||
buttonText="Get Free Quote"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -422,49 +135,12 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="Elite Shine"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#cta",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#cta" }, { label: "FAQ", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user