Update src/app/page.tsx
This commit is contained in:
297
src/app/page.tsx
297
src/app/page.tsx
@@ -29,164 +29,163 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="GreenThumb Lawn"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="GreenThumb Lawn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Your Yard, Perfectly Maintained."
|
||||
description="Professional, reliable lawn care services for suburban homes. Get the lush, green lawn you've always wanted without the hassle."
|
||||
kpis={[
|
||||
{ value: "1200+", label: "Lawns Maintained" },
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "10+", label: "Years Experience" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-gardener-s-hand-cutting-plant-with-secateurs_23-2148165259.jpg"
|
||||
imageAlt="Professional lawn service"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-people-greenhouse_23-2149098326.jpg", alt: "Close up smiley people at greenhouse" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-male-gardener-growing-thujas-pots-grey-haired-man-glasses-wearing-blue-shirt-apron-working-with-evergreen-plants-greenhouse-commercial-gardening-activity-summer-concept_74855-12968.jpg", alt: "Serious male gardener" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-female-gardener-growing-thujas-pots-blonde-woman-wearing-blue-shirt-gloves-apron-working-with-evergreen-plants-greenhouse-commercial-gardening-activity-summer-concept_74855-12966.jpg", alt: "Serious female gardener" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/women-working-greenhouse-with-green-trees_1157-30893.jpg", alt: "Women working in greenhouse" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12330.jpg", alt: "Pretty woman reaching for plants" }
|
||||
]}
|
||||
avatarText="Trusted by 1000+ happy neighbors"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Weekly Mowing" },
|
||||
{ type: "text", text: "Eco-Friendly" },
|
||||
{ type: "text", text: "Custom Plans" },
|
||||
{ type: "text", text: "Expert Care" },
|
||||
{ type: "text", text: "Fast Quotes" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Your Yard, Perfectly Maintained."
|
||||
description="Professional, reliable lawn care services for suburban homes. Get the lush, green lawn you've always wanted without the hassle."
|
||||
kpis={[
|
||||
{ value: "1200+", label: "Lawns Maintained" },
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "10+", label: "Years Experience" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-gardener-s-hand-cutting-plant-with-secateurs_23-2148165259.jpg"
|
||||
imageAlt="Professional lawn service"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-people-greenhouse_23-2149098326.jpg", alt: "Close up smiley people at greenhouse" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-male-gardener-growing-thujas-pots-grey-haired-man-glasses-wearing-blue-shirt-apron-working-with-evergreen-plants-greenhouse-commercial-gardening-activity-summer-concept_74855-12968.jpg", alt: "Serious male gardener" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-female-gardener-growing-thujas-pots-blonde-woman-wearing-blue-shirt-gloves-apron-working-with-evergreen-plants-greenhouse-commercial-gardening-activity-summer-concept_74855-12966.jpg", alt: "Serious female gardener" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/women-working-greenhouse-with-green-trees_1157-30893.jpg", alt: "Women working in greenhouse" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12330.jpg", alt: "Pretty woman reaching for plants" }
|
||||
]}
|
||||
avatarText="Trusted by 1000+ happy neighbors"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Weekly Mowing" },
|
||||
{ type: "text", text: "Eco-Friendly" },
|
||||
{ type: "text", text: "Custom Plans" },
|
||||
{ type: "text", text: "Expert Care" },
|
||||
{ type: "text", text: "Fast Quotes" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Local Professionals, Exceptional Results."
|
||||
description="We are a locally owned and operated business dedicated to providing top-tier landscaping care. We treat every lawn like it's our own."
|
||||
subdescription="Our team uses professional-grade equipment and eco-friendly products to keep your grass healthy and vibrant year-round."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-female-florist-walking-greenhouse-holding-potted-flowering-plant-smiling-medium-shot-copy-space-gardening-job-botany-concept_74855-12854.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="lawn care worker landscaping"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Local Professionals, Exceptional Results."
|
||||
description="We are a locally owned and operated business dedicated to providing top-tier landscaping care. We treat every lawn like it's our own."
|
||||
subdescription="Our team uses professional-grade equipment and eco-friendly products to keep your grass healthy and vibrant year-round."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-female-florist-walking-greenhouse-holding-potted-flowering-plant-smiling-medium-shot-copy-space-gardening-job-botany-concept_74855-12854.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="lawn care worker landscaping"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{ items: ["Basic Mowing Only", "Inconsistent Timing", "Standard Fertilizing"] }}
|
||||
positiveCard={{ items: ["Full Lawn Care Package", "Reliable Weekly Schedule", "Custom Nutrient Plans", "Weed Control Treatment"] }}
|
||||
title="Lawn Care Services"
|
||||
description="Complete care for your outdoor space."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{ items: ["Basic Mowing Only", "Inconsistent Timing", "Standard Fertilizing"] }}
|
||||
positiveCard={{ items: ["Full Lawn Care Package", "Reliable Weekly Schedule", "Custom Nutrient Plans", "Weed Control Treatment"] }}
|
||||
title="Lawn Care Services"
|
||||
description="Complete care for your outdoor space."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Essential", price: "$45", subtitle: "Weekly Mowing & Edging", features: ["Mowing", "Edging", "Grass Clipping Cleanup"] },
|
||||
{ id: "pro", badge: "Popular", price: "$75", subtitle: "Complete Lawn Health", features: ["Mowing & Edging", "Weed Control", "Standard Fertilization", "Leaf Removal"] },
|
||||
{ id: "ultimate", badge: "Full Care", price: "$120", subtitle: "Elite Landscaping", features: ["Everything in Pro", "Shrub Trimming", "Aeration", "Seasonal Cleanup"] }
|
||||
]}
|
||||
title="Flexible Packages"
|
||||
description="Choose the care plan that fits your lawn's needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Essential", price: "$45", subtitle: "Weekly Mowing & Edging", features: ["Mowing", "Edging", "Grass Clipping Cleanup"] },
|
||||
{ id: "pro", badge: "Popular", price: "$75", subtitle: "Complete Lawn Health", features: ["Mowing & Edging", "Weed Control", "Standard Fertilization", "Leaf Removal"] },
|
||||
{ id: "ultimate", badge: "Full Care", price: "$120", subtitle: "Elite Landscaping", features: ["Everything in Pro", "Shrub Trimming", "Aeration", "Seasonal Cleanup"] }
|
||||
]}
|
||||
title="Flexible Packages"
|
||||
description="Choose the care plan that fits your lawn's needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg" },
|
||||
{ id: "2", name: "James Anderson", imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-owner-posing-with-folded-arms-having-many-flowers-colleague-holding-pot-with-pink-chrysanthemums-glass-roof_158595-7127.jpg" },
|
||||
{ id: "3", name: "Linda Carter", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-having-great-time-with-friends_23-2149286491.jpg" },
|
||||
{ id: "4", name: "Mark Stevens", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-posing-outside_23-2148618889.jpg" },
|
||||
{ id: "5", name: "Emily Davis", imageSrc: "http://img.b2bpic.net/free-photo/dreaming-woman-park-posing-lawn_23-2147670385.jpg" }
|
||||
]}
|
||||
cardTitle="Client Success"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg" },
|
||||
{ id: "2", name: "James Anderson", imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-owner-posing-with-folded-arms-having-many-flowers-colleague-holding-pot-with-pink-chrysanthemums-glass-roof_158595-7127.jpg" },
|
||||
{ id: "3", name: "Linda Carter", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-having-great-time-with-friends_23-2149286491.jpg" },
|
||||
{ id: "4", name: "Mark Stevens", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-posing-outside_23-2148618889.jpg" },
|
||||
{ id: "5", name: "Emily Davis", imageSrc: "http://img.b2bpic.net/free-photo/dreaming-woman-park-posing-lawn_23-2147670385.jpg" }
|
||||
]}
|
||||
cardTitle="Client Success"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: CheckCircle, title: "Lawns Transformed", value: "500+" },
|
||||
{ id: "m2", icon: Award, title: "Customer Retention", value: "98%" },
|
||||
{ id: "m3", icon: Smile, title: "Client Satisfaction", value: "100%" }
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our track record speaks for itself."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: CheckCircle, title: "Lawns Transformed", value: "500+" },
|
||||
{ id: "m2", icon: Award, title: "Customer Retention", value: "98%" },
|
||||
{ id: "m3", icon: Smile, title: "Client Satisfaction", value: "100%" }
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our track record speaks for itself."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you offer year-round services?", content: "Yes, we provide seasonal care ranging from winter cleanup to peak summer mowing." },
|
||||
{ id: "q2", title: "Are your products safe?", content: "We use eco-friendly treatments that are safe for pets and children once dry." },
|
||||
{ id: "q3", title: "How do I schedule an estimate?", content: "Simply contact us through the form below, and we'll be out within 48 hours." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do you offer year-round services?", content: "Yes, we provide seasonal care ranging from winter cleanup to peak summer mowing." },
|
||||
{ id: "q2", title: "Are your products safe?", content: "We use eco-friendly treatments that are safe for pets and children once dry." },
|
||||
{ id: "q3", title: "How do I schedule an estimate?", content: "Simply contact us through the form below, and we'll be out within 48 hours." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Get Started"
|
||||
title="Request a Free Estimate"
|
||||
description="Ready to transform your yard? Send us a message and we'll contact you."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Get Started"
|
||||
title="Request a Free Estimate"
|
||||
description="Ready to transform your yard? Send us a message and we'll contact you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#features" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "Support", href: "#" }] }
|
||||
]}
|
||||
logoText="GreenThumb Lawn"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#features" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "Support", href: "#" }] }
|
||||
]}
|
||||
logoText="GreenThumb Lawn"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user