Update src/app/page.tsx
This commit is contained in:
500
src/app/page.tsx
500
src/app/page.tsx
@@ -17,383 +17,151 @@ import { Leaf, ShieldCheck, Sparkles } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="PureClean"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="PureClean"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
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."
|
||||
testimonials={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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: "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="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ 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."
|
||||
testimonials={[
|
||||
{ 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", imageAlt: "Young mother cleaning the shelves in the house" },
|
||||
{ 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", 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", 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", 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", 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"
|
||||
imageAlt="Young mother cleaning the shelves in the house"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Dedication to Hygiene and Perfection"
|
||||
tag="Our Mission"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout useInvertedBackground={true} title="Dedication to Hygiene and Perfection" tag="Our Mission" />
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Eco-Friendly Products",
|
||||
description: "Safe for pets and children.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Leaf,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-cahir-working-computer_1303-24981.jpg",
|
||||
imageAlt: "Young business woman sitting in a cahir and working on computer",
|
||||
},
|
||||
{
|
||||
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="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Eco-Friendly Products", description: "Safe for pets and children.", bentoComponent: "reveal-icon", icon: Leaf },
|
||||
{ title: "Verified Staff", description: "Background checked professionals.", bentoComponent: "reveal-icon", icon: ShieldCheck },
|
||||
{ title: "100% Satisfaction", description: "We don't leave until it's clean.", bentoComponent: "reveal-icon", icon: Sparkles }
|
||||
]}
|
||||
title="Why Choose PureClean?"
|
||||
description="We blend eco-friendly practices with high-standard deep cleaning methods."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "5000+",
|
||||
description: "Happy Clients Served",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "12+",
|
||||
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="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "5000+", description: "Happy Clients Served" },
|
||||
{ id: "m2", value: "12+", 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">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark S.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
cardAnimation="slide-up"
|
||||
cardTitle="What Our Clients Say"
|
||||
cardTag="Reviews"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice D.", imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-singing-together-while-cleaning-apartment_482257-71.jpg" },
|
||||
{ id: "2", name: "Mark S.", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-couch_23-2148751493.jpg" },
|
||||
{ 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" },
|
||||
{ id: "4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-wearing-rubber-gloves-cleaning_1163-2431.jpg" },
|
||||
{ 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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Standard",
|
||||
price: "$120",
|
||||
subtitle: "Perfect for routine upkeep.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
},
|
||||
],
|
||||
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="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Simple Pricing for Every Home"
|
||||
description="Transparent plans for your convenience."
|
||||
plans={[
|
||||
{ id: "p1", badge: "Standard", price: "$120", subtitle: "Perfect for routine upkeep.", buttons: [{ text: "Book Now" }], 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"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
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.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to keep your home pristine."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Common Questions"
|
||||
description="Answers to keep your home pristine."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ 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." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Schedule Your Clean"
|
||||
description="Get in touch today to transform your living space."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Booking"
|
||||
title="Schedule Your Clean"
|
||||
description="Get in touch today to transform your living space."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="PureClean"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Residential",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Commercial",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="PureClean"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Residential", href: "#" }, { label: "Commercial", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "FAQ", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user