2 Commits

Author SHA1 Message Date
857e072a5c Update src/app/page.tsx 2026-05-22 23:42:08 +00:00
ced8afda99 Update src/app/page.tsx 2026-05-22 23:41:41 +00:00

View File

@@ -17,382 +17,150 @@ import { Leaf, ShieldCheck, Sparkles } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="directional-hover" defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur" defaultTextAnimation="reveal-blur"
borderRadius="pill" borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "About", id: "#about" },
name: "About", { name: "Features", id: "#features" },
id: "#about", { name: "Pricing", id: "#pricing" },
}, { name: "Contact", id: "#contact" }
{ ]}
name: "Features", brandName="PureClean"
id: "#features", />
}, </div>
{
name: "Pricing",
id: "#pricing",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="PureClean"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardTestimonial <HeroBillboardTestimonial
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars", title="A Spotless Home, Every Single Time"
}} description="Experience premium residential and commercial cleaning services designed for your lifestyle. We bring shine and peace of mind back to your space."
title="A Spotless Home, Every Single Time" testimonials={[
description="Experience premium residential and commercial cleaning services designed for your lifestyle. We bring shine and peace of mind back to your space." { name: "Alice D.", handle: "@aliced", testimonial: "The best cleaning service I've ever used. My home was spotless!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-mother-cleaning-shelves-house_23-2148713680.jpg?_wi=1", imageAlt: "Young mother cleaning the shelves in the house" },
testimonials={[ { name: "Mark S.", handle: "@marks", testimonial: "Professional, punctual, and incredibly thorough. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=1", imageAlt: "Young mother cleaning the shelves in the house" },
{ { name: "Elena R.", handle: "@elenar", testimonial: "Finally found a team I can trust with my property.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=1", imageAlt: "Young mother cleaning the shelves in the house" },
name: "Alice D.", { name: "David W.", handle: "@davidw", testimonial: "Exceptional attention to detail in every room.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg?_wi=1", imageAlt: "Young mother cleaning the shelves in the house" },
handle: "@aliced", { name: "Sarah P.", handle: "@sarahp", testimonial: "Refreshing clean, lovely professional staff.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-wearing-rubber-gloves-cleaning_1163-2431.jpg?_wi=1", imageAlt: "Young mother cleaning the shelves in the house" }
testimonial: "The best cleaning service I've ever used. My home was spotless!", ]}
rating: 5, buttons={[{ text: "Book Now", href: "#contact" }]}
imageSrc: "http://img.b2bpic.net/free-photo/young-mother-cleaning-shelves-house_23-2148713680.jpg?_wi=1", mediaAnimation="blur-reveal"
imageAlt: "Young mother cleaning the shelves in the house", imageSrc="http://img.b2bpic.net/free-photo/young-mother-cleaning-shelves-house_23-2148713680.jpg?_wi=2"
}, imageAlt="Young mother cleaning the shelves in the house"
{ />
name: "Mark S.", </div>
handle: "@marks",
testimonial: "Professional, punctual, and incredibly thorough. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=1",
imageAlt: "Young mother cleaning the shelves in the house",
},
{
name: "Elena R.",
handle: "@elenar",
testimonial: "Finally found a team I can trust with my property.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=1",
imageAlt: "Young mother cleaning the shelves in the house",
},
{
name: "David W.",
handle: "@davidw",
testimonial: "Exceptional attention to detail in every room.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg?_wi=1",
imageAlt: "Young mother cleaning the shelves in the house",
},
{
name: "Sarah P.",
handle: "@sarahp",
testimonial: "Refreshing clean, lovely professional staff.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-wearing-rubber-gloves-cleaning_1163-2431.jpg?_wi=1",
imageAlt: "Young mother cleaning the shelves in the house",
},
]}
buttons={[
{
text: "Book Now",
href: "#contact",
},
]}
mediaAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/young-mother-cleaning-shelves-house_23-2148713680.jpg?_wi=2"
imageAlt="Young mother cleaning the shelves in the house"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/couple-embracing-while-cleaning_23-2147766999.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/man-gloves-closing-eyes-girlfriend_23-2147766989.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/woman-with-husband-cleaning-wooden-furiture-with-rag_1398-3802.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/man-woman-putting-rubber-gloves_23-2147766988.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/woman-showing-papers-laptop_23-2148751501.jpg",
alt: "Client 5",
},
]}
avatarText="Trusted by 5,000+ happy clients"
marqueeItems={[
{
type: "text",
text: "Eco-Friendly",
},
{
type: "text",
text: "100% Guaranteed",
},
{
type: "text",
text: "Verified Professionals",
},
{
type: "text",
text: "Fully Insured",
},
{
type: "text",
text: "Fast Booking",
},
]}
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextAbout <TextAbout useInvertedBackground={true} title="Dedication to Hygiene and Perfection" tag="Our Mission" />
useInvertedBackground={true} </div>
title="Dedication to Hygiene and Perfection"
tag="Our Mission"
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureBento <FeatureBento
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ { title: "Eco-Friendly Products", description: "Safe for pets and children.", bentoComponent: "reveal-icon", icon: Leaf },
title: "Eco-Friendly Products", { title: "Verified Staff", description: "Background checked professionals.", bentoComponent: "reveal-icon", icon: ShieldCheck },
description: "Safe for pets and children.", { title: "100% Satisfaction", description: "We don't leave until it's clean.", bentoComponent: "reveal-icon", icon: Sparkles }
bentoComponent: "reveal-icon", ]}
icon: Leaf, title="Why Choose PureClean?"
imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-cahir-working-computer_1303-24981.jpg", description="We blend eco-friendly practices with high-standard deep cleaning methods."
imageAlt: "Young business woman sitting in a cahir and working on computer", />
}, </div>
{
title: "Verified Staff",
description: "Background checked professionals.",
bentoComponent: "reveal-icon",
icon: ShieldCheck,
imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=2",
imageAlt: "Young business woman sitting in a cahir and working on computer",
},
{
title: "100% Satisfaction",
description: "We don't leave until it's clean.",
bentoComponent: "reveal-icon",
icon: Sparkles,
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=2",
imageAlt: "Young business woman sitting in a cahir and working on computer",
},
]}
title="Why Choose PureClean?"
description="We blend eco-friendly practices with high-standard deep cleaning methods."
/>
</div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardTwo <MetricCardTwo
animationType="scale-rotate" animationType="scale-rotate"
textboxLayout="split" textboxLayout="split"
gridVariant="bento-grid" gridVariant="bento-grid"
useInvertedBackground={true} useInvertedBackground={true}
metrics={[ metrics={[
{ { id: "m1", value: "5000+", description: "Happy Clients Served" },
id: "m1", { id: "m2", value: "12+", description: "Years of Excellence" },
value: "5000+", { id: "m3", value: "99%", description: "Repeat Customers" }
description: "Happy Clients Served", ]}
}, title="Proven Results"
{ description="Our numbers speak for our dedication to excellence."
id: "m2", />
value: "12+", </div>
description: "Years of Excellence",
},
{
id: "m3",
value: "99%",
description: "Repeat Customers",
},
]}
title="Proven Results"
description="Our numbers speak for our dedication to excellence."
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve <TestimonialCardTwelve
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ cardAnimation="slide-up"
{ cardTitle="What Our Clients Say"
id: "1", cardTag="Reviews"
name: "Alice D.", testimonials={[
imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=3", { id: "1", name: "Alice D.", imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=2" },
}, { id: "2", name: "Mark S.", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=2" },
{ { id: "3", name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg?_wi=2" },
id: "2", { id: "4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-wearing-rubber-gloves-cleaning_1163-2431.jpg?_wi=2" },
name: "Mark S.", { id: "5", name: "Sarah P.", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-couple-playing-bed-home-casual-outfit-man-woman-having-fun-together-crazy-positive-emotion-happy-holding-hand-up_285396-867.jpg" }
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=3", ]}
}, />
{ </div>
id: "3",
name: "Elena R.",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-musician-woman-learns-how-play-ukulele-sits-sofa-with-crossed-legs_1258-204931.jpg?_wi=2",
},
{
id: "4",
name: "David W.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-wearing-rubber-gloves-cleaning_1163-2431.jpg?_wi=2",
},
{
id: "5",
name: "Sarah P.",
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-couple-playing-bed-home-casual-outfit-man-woman-having-fun-together-crazy-positive-emotion-happy-holding-hand-up_285396-867.jpg",
},
]}
cardTitle="What Our Clients Say"
cardAnimation="slide-up"
cardTag="Reviews"
/>
</div>
<div id="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<PricingCardEight <PricingCardEight
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={true} useInvertedBackground={true}
plans={[ title="Simple Pricing for Every Home"
{ description="Transparent plans for your convenience."
id: "p1", plans={[
badge: "Standard", { id: "p1", badge: "Standard", price: "$120", subtitle: "Perfect for routine upkeep.", buttons: [{ text: "Book Now" }], features: ["Kitchen", "Bathroom", "Living Room"] },
price: "$120", { id: "p2", badge: "Deep Clean", price: "$250", subtitle: "Comprehensive deep cleaning.", buttons: [{ text: "Book Now" }], features: ["Standard + Inside Fridge", "Oven", "Windows"] },
subtitle: "Perfect for routine upkeep.", { id: "p3", badge: "Move-In", price: "$400", subtitle: "Total sanitization package.", buttons: [{ text: "Book Now" }], features: ["Full Home Deep Clean", "Baseboards", "Sanitization"] }
buttons: [ ]}
{ />
text: "Book Now", </div>
},
],
features: [
"Kitchen",
"Bathroom",
"Living Room",
],
},
{
id: "p2",
badge: "Deep Clean",
price: "$250",
subtitle: "Comprehensive deep cleaning.",
buttons: [
{
text: "Book Now",
},
],
features: [
"Standard + Inside Fridge",
"Oven",
"Windows",
],
},
{
id: "p3",
badge: "Move-In",
price: "$400",
subtitle: "Total sanitization package.",
buttons: [
{
text: "Book Now",
},
],
features: [
"Full Home Deep Clean",
"Baseboards",
"Sanitization",
],
},
]}
title="Simple Pricing for Every Home"
description="Transparent plans for your convenience."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqDouble <FaqDouble
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ title="Common Questions"
{ description="Answers to keep your home pristine."
id: "f1", faqsAnimation="slide-up"
title: "Do I need to be home?", faqs={[
content: "No, our team is fully insured and reliable.", { id: "f1", title: "Do I need to be home?", content: "No, our team is fully insured and reliable." },
}, { id: "f2", title: "Are cleaning supplies provided?", content: "Yes, we bring premium eco-friendly supplies." },
{ { id: "f3", title: "Can I cancel my booking?", content: "Cancellation is free with 24 hours notice." }
id: "f2", ]}
title: "Are cleaning supplies provided?", />
content: "Yes, we bring premium eco-friendly supplies.", </div>
},
{
id: "f3",
title: "Can I cancel my booking?",
content: "Cancellation is free with 24 hours notice.",
},
]}
title="Common Questions"
description="Answers to keep your home pristine."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCenter
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "radial-gradient" }}
variant: "radial-gradient", tag="Booking"
}} title="Schedule Your Clean"
tag="Booking" description="Get in touch today to transform your living space."
title="Schedule Your Clean" />
description="Get in touch today to transform your living space." </div>
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterBaseReveal
logoText="PureClean" logoText="PureClean"
columns={[ columns={[
{ { title: "Services", items: [{ label: "Residential", href: "#" }, { label: "Commercial", href: "#" }] },
title: "Services", { title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "FAQ", href: "#" }] }
items: [ ]}
{ />
label: "Residential", </div>
href: "#",
},
{
label: "Commercial",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "#contact",
},
{
label: "FAQ",
href: "#",
},
],
},
]}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );