bender/9720ea7e-eb47-48fb-b2fa-258b76c12d71
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-18 03:56:45 +00:00
parent 06aeb73737
commit 9aeec0ec3f
1 changed files with 128 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

447
src/app/page.tsx
View File

@@ -16,335 +16,144 @@ import { Award, CheckCircle, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
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">
<NavbarStyleCentered
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Services",
id: "#services",
},
{
name: "Pricing",
id: "#pricing",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="Casey's Lawn Services"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "About", id: "#about" },
{ name: "Services", id: "#services" },
{ name: "Pricing", id: "#pricing" },
{ name: "Contact", id: "#contact" }
]}
brandName="Casey's Lawn Services"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-static",
}}
title="Excellence in Every Blade."
description="Professional lawn care and premium landscaping solutions for homeowners who value a beautiful, perfectly manicured outdoor space."
buttons={[
{
text: "Book Consultation",
href: "#contact",
},
]}
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/view-robot-taking-care-garden_23-2151804041.jpg",
imageAlt: "Luxurious Lawn",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-working-eco-friendly-wind-power-project-with-papers-pencil_23-2148847791.jpg",
imageAlt: "Landscape Design",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/stock-photo-small-garden-backyard-fake-well-with-potted-flowers_132075-5927.jpg",
imageAlt: "Professional Mowing",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-two-black-headed-ibises-walking-along-river_181624-30788.jpg",
imageAlt: "Garden Maintenance",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/park-outdoor-manicured-lawn-flowerbed-ai-generated-image_587448-1398.jpg",
imageAlt: "Backyard Oasis",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/someone-trimming-bushes-with-garden-scissors_1157-37101.jpg",
imageAlt: "Curb Appeal",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "rotated-rays-static" }}
title="Excellence in Every Blade."
description="Professional lawn care and premium landscaping solutions for homeowners who value a beautiful, perfectly manicured outdoor space."
buttons={[{ text: "Book Consultation", href: "#contact" }]}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/view-robot-taking-care-garden_23-2151804041.jpg", imageAlt: "Luxurious Lawn" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-working-eco-friendly-wind-power-project-with-papers-pencil_23-2148847791.jpg", imageAlt: "Landscape Design" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/stock-photo-small-garden-backyard-fake-well-with-potted-flowers_132075-5927.jpg", imageAlt: "Professional Mowing" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-two-black-headed-ibises-walking-along-river_181624-30788.jpg", imageAlt: "Garden Maintenance" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/park-outdoor-manicured-lawn-flowerbed-ai-generated-image_587448-1398.jpg", imageAlt: "Backyard Oasis" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/someone-trimming-bushes-with-garden-scissors_1157-37101.jpg", imageAlt: "Curb Appeal" }
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Commitment to Quality"
metrics={[
{
icon: CheckCircle,
label: "Projects Completed",
value: "1,500+",
},
{
icon: Award,
label: "Years Experience",
value: "12",
},
{
icon: Users,
label: "Happy Clients",
value: "850+",
},
]}
metricsAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Commitment to Quality"
metrics={[
{ icon: CheckCircle, label: "Projects Completed", value: "1,500+" },
{ icon: Award, label: "Years Experience", value: "12" },
{ icon: Users, label: "Happy Clients", value: "850+" }
]}
metricsAnimation="blur-reveal"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSix
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Precision Mowing",
description: "Expert weekly mowing tailored to your grass type and season.",
imageSrc: "http://img.b2bpic.net/free-photo/composition-garden-tools_93675-131220.jpg",
},
{
title: "Garden Bed Design",
description: "Creative planting and maintenance of beautiful garden landscapes.",
imageSrc: "http://img.b2bpic.net/free-photo/potted-plant-garden-outdoor_1373-578.jpg",
},
{
title: "Hardscape Installation",
description: "Walkways, patios, and outdoor stone design services.",
imageSrc: "http://img.b2bpic.net/free-photo/stepping-stone-garden-path_1252-1028.jpg",
},
]}
title="Premium Landscaping Services"
description="Comprehensive care to ensure your lawn stays vibrant, healthy, and pristine throughout the seasons."
/>
</div>
<div id="services" data-section="services">
<FeatureCardSix
textboxLayout="split"
useInvertedBackground={false}
features={[
{ title: "Precision Mowing", description: "Expert weekly mowing tailored to your grass type and season.", imageSrc: "http://img.b2bpic.net/free-photo/composition-garden-tools_93675-131220.jpg" },
{ title: "Garden Bed Design", description: "Creative planting and maintenance of beautiful garden landscapes.", imageSrc: "http://img.b2bpic.net/free-photo/potted-plant-garden-outdoor_1373-578.jpg" },
{ title: "Hardscape Installation", description: "Walkways, patios, and outdoor stone design services.", imageSrc: "http://img.b2bpic.net/free-photo/stepping-stone-garden-path_1252-1028.jpg" }
]}
title="Premium Landscaping Services"
description="Comprehensive care to ensure your lawn stays vibrant, healthy, and pristine throughout the seasons."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "basic",
price: "$150/mo",
name: "Essential Lawn",
features: [
"Weekly Mowing",
"Edging",
"Clipping Removal",
],
buttons: [
{
text: "Start Now",
},
],
},
{
id: "pro",
price: "$300/mo",
name: "Complete Care",
features: [
"Weekly Mowing",
"Edging",
"Fertilization",
"Garden Tending",
],
buttons: [
{
text: "Select Pro",
},
],
},
{
id: "ultimate",
price: "$500/mo",
name: "Ultimate Estate",
features: [
"Everything in Pro",
"Seasonal Pruning",
"Hardscape Maintenance",
],
buttons: [
{
text: "Select Ultimate",
},
],
},
]}
title="Simple Pricing"
description="Transparent plans designed for your lawn care needs."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", price: "$150/mo", name: "Essential Lawn", features: ["Weekly Mowing", "Edging", "Clipping Removal"], buttons: [{ text: "Start Now" }] },
{ id: "pro", price: "$300/mo", name: "Complete Care", features: ["Weekly Mowing", "Edging", "Fertilization", "Garden Tending"], buttons: [{ text: "Select Pro" }] },
{ id: "ultimate", price: "$500/mo", name: "Ultimate Estate", features: ["Everything in Pro", "Seasonal Pruning", "Hardscape Maintenance"], buttons: [{ text: "Select Ultimate" }] }
]}
title="Simple Pricing"
description="Transparent plans designed for your lawn care needs."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Alex River",
role: "Homeowner",
testimonial: "Casey's team transformed our yard into a dream space.",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-mobile_23-2148523943.jpg",
},
{
id: "2",
name: "Sarah Miller",
role: "Architect",
testimonial: "Professional, punctual, and highly skilled in design.",
imageSrc: "http://img.b2bpic.net/free-photo/couple-talking-while-examining-plants-with-digital-tablet-vegetable-garden_662251-682.jpg",
},
{
id: "3",
name: "David Kim",
role: "CEO",
testimonial: "The best lawn service we have ever employed.",
imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
},
{
id: "4",
name: "Emily Chen",
role: "Designer",
testimonial: "Beautiful design, great attention to every detail.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-inspired-female-florist-standing-greenhouse-holding-potted-plant-looking-purple-flowers-smiling-professional-portrait-copy-space-gardening-job-botany-concept_74855-12858.jpg",
},
{
id: "5",
name: "Mark Jones",
role: "Lawyer",
testimonial: "Reliable service and stunning results every week.",
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",
},
]}
title="Client Success Stories"
description="What our clients say about their new outdoor spaces."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Alex River", role: "Homeowner", testimonial: "Casey's team transformed our yard into a dream space.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-mobile_23-2148523943.jpg" },
{ id: "2", name: "Sarah Miller", role: "Architect", testimonial: "Professional, punctual, and highly skilled in design.", imageSrc: "http://img.b2bpic.net/free-photo/couple-talking-while-examining-plants-with-digital-tablet-vegetable-garden_662251-682.jpg" },
{ id: "3", name: "David Kim", role: "CEO", testimonial: "The best lawn service we have ever employed.", imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg" },
{ id: "4", name: "Emily Chen", role: "Designer", testimonial: "Beautiful design, great attention to every detail.", imageSrc: "http://img.b2bpic.net/free-photo/happy-inspired-female-florist-standing-greenhouse-holding-potted-plant-looking-purple-flowers-smiling-professional-portrait-copy-space-gardening-job-botany-concept_74855-12858.jpg" },
{ id: "5", name: "Mark Jones", role: "Lawyer", testimonial: "Reliable service and stunning results every week.", 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" }
]}
title="Client Success Stories"
description="What our clients say about their new outdoor spaces."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do you offer seasonal cleanups?",
content: "Yes, we provide spring and fall cleanup services.",
},
{
id: "q2",
title: "How do I schedule a service?",
content: "Book directly through our website or contact us.",
},
{
id: "q3",
title: "Is your company insured?",
content: "We are fully licensed and insured for all services.",
},
]}
sideTitle="Common Questions"
sideDescription="Need more information? We are here to help."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Do you offer seasonal cleanups?", content: "Yes, we provide spring and fall cleanup services." },
{ id: "q2", title: "How do I schedule a service?", content: "Book directly through our website or contact us." },
{ id: "q3", title: "Is your company insured?", content: "We are fully licensed and insured for all services." }
]}
sideTitle="Common Questions"
sideDescription="Need more information? We are here to help."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get a Free Quote"
description="Tell us your needs and we'll get started."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Describe your lawn project...",
}}
imageSrc="http://img.b2bpic.net/free-photo/businesswoman-sitting-front-laptop-while-talking-phone_181624-20610.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get a Free Quote"
description="Tell us your needs and we'll get started."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true }
]}
textarea={{ name: "message", placeholder: "Describe your lawn project..." }}
imageSrc="http://img.b2bpic.net/free-photo/businesswoman-sitting-front-laptop-while-talking-phone_181624-20610.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home",
href: "/",
},
{
label: "Services",
href: "#services",
},
],
},
{
items: [
{
label: "Pricing",
href: "#pricing",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Use",
href: "#",
},
],
},
]}
logoText="Casey's Lawn Services"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "#services" }] },
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] }
]}
logoText="Casey's Lawn Services"
/>
</div>
</ReactLenis>
</ThemeProvider>
);