Compare commits
19 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3155fe651c | |||
|
61660435cf | ||
|
|
a9a72f4378 | ||
|
|
6d0a294413 | ||
| a15d94069d | |||
|
|
238c083a81 | ||
|
|
e705333d86 | ||
| 09760d74a7 | |||
|
|
7527e0a792 | ||
| 61bf634e15 | |||
|
|
f06ba18ec3 | ||
| 251e475a09 | |||
|
|
2b17cb0a61 | ||
| 3950eb763d | |||
|
|
0dc9691b88 | ||
| 8b7ede846b | |||
|
|
c4f82aec9b | ||
| d5ca3de847 | |||
|
|
135437233f |
86
src/components/sections/HomePage/sections/HeroNew.tsx
Normal file
86
src/components/sections/HomePage/sections/HeroNew.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import { Leaf, Sun, Cloud } from "lucide-react";
|
||||
|
||||
export default function HeroNewSection() {
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
data-webild-section="HeroNewSection"
|
||||
className="relative flex flex-col items-center justify-center min-h-svh bg-background overflow-hidden"
|
||||
>
|
||||
{/* Decorative blur orb */}
|
||||
<div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/4 left-1/4 animate-pulse" />
|
||||
<div className="absolute -z-10 w-80 h-80 rounded-full bg-accent/20 blur-3xl bottom-1/4 right-1/4 animate-pulse" style={{ animationDelay: "500ms" }} />
|
||||
|
||||
<div className="relative z-10 max-w-content-width mx-auto px-6 flex flex-col items-center text-center gap-8">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<TextAnimation
|
||||
text="Transform Your Outdoor Space"
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-tight"
|
||||
/>
|
||||
<TextAnimation
|
||||
text="GreenScape Landscaping brings your vision to life with expert design, installation, and maintenance services."
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl text-muted-foreground max-w-content-width"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-4">
|
||||
<Button
|
||||
text="Explore Services"
|
||||
href="#services"
|
||||
variant="primary"
|
||||
animate={true}
|
||||
animationDelay={0.3}
|
||||
/>
|
||||
<Button
|
||||
text="Get a Free Quote"
|
||||
href="#contact"
|
||||
variant="secondary"
|
||||
animate={true}
|
||||
animationDelay={0.4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-content-width aspect-video rounded-xl overflow-hidden shadow-lg border border-border/50 animation-container mt-8">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://picsum.photos/seed/1431317374/1200/800"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Cards */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden z-20">
|
||||
<div
|
||||
className="absolute top-[20%] left-[5%] md:left-[15%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
|
||||
>
|
||||
<Leaf className="size-8 text-accent" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-[40%] right-[5%] md:right-[15%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
|
||||
style={{ animationDelay: "1s" }}
|
||||
>
|
||||
<Sun className="size-8 text-yellow-500" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute bottom-[20%] left-[15%] md:left-[25%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
|
||||
style={{ animationDelay: "2s" }}
|
||||
>
|
||||
<Cloud className="size-8 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,235 +1,24 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesMarqueeCards from '@/components/sections/features/FeaturesMarqueeCards';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
|
||||
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import React from 'react';
|
||||
import HeroNewSection from './HomePage/sections/HeroNew';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import PortfolioSection from './HomePage/sections/Portfolio';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage() {
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="home" data-section="home">
|
||||
<SectionErrorBoundary name="home">
|
||||
<HeroSplitMediaGrid
|
||||
tag="Your Outdoor Oasis Awaits"
|
||||
title="Transform Your Landscape with Expertise and Care"
|
||||
description="At GreenScape Landscaping, we bring your vision to life. From lush gardens to functional outdoor living spaces, our team delivers unparalleled design, installation, and maintenance services."
|
||||
primaryButton={{
|
||||
text: "Explore Services",
|
||||
href: "#services",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/relaxation-space-garden-with-beds_1232-3472.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-gardener-holding-small-thuja-pot-bearded-garden-worker-glasses-wearing-blue-shirt-apron-growing-evergreen-plants-greenhouse-commercial-gardening-summer-concept_74855-12936.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="About GreenScape"
|
||||
title="Crafting Beautiful Outdoor Spaces Since 20XX"
|
||||
description="With years of dedicated experience, GreenScape Landscaping is passionate about creating stunning and sustainable environments that enhance your property's beauty and value. Our commitment to quality, creativity, and client satisfaction sets us apart."
|
||||
primaryButton={{
|
||||
text: "Meet Our Team",
|
||||
href: "#team",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-people-greenhouse_23-2149098326.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesMarqueeCards
|
||||
tag="Our Core Services"
|
||||
title="Comprehensive Solutions for Every Landscape Need"
|
||||
description="We offer a full spectrum of landscaping services, from meticulous design to ongoing maintenance, ensuring your outdoor space is always vibrant and thriving."
|
||||
items={[
|
||||
{
|
||||
title: "Lawn Care & Maintenance",
|
||||
description: "Keep your lawn healthy and pristine with our professional mowing, fertilizing, and aeration services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-gardener-watering-plants_53876-101140.jpg",
|
||||
},
|
||||
{
|
||||
title: "Garden Design & Planting",
|
||||
description: "From vibrant flowerbeds to serene rock gardens, we design and install custom gardens tailored to your preferences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-flowers-right-side-orange-with-copy-space_141793-6498.jpg",
|
||||
},
|
||||
{
|
||||
title: "Hardscaping & Patios",
|
||||
description: "Enhance your outdoor living with custom patios, walkways, retaining walls, and fire pits built to last.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stone-road_1417-1558.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<SectionErrorBoundary name="portfolio">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Recent Projects"
|
||||
title="Showcasing Our Landscaping Masterpieces"
|
||||
description="Browse a selection of our completed projects that highlight our diverse expertise and commitment to exceptional outdoor design."
|
||||
items={[
|
||||
{
|
||||
title: "Modern Urban Oasis",
|
||||
description: "A sleek, contemporary garden with minimalist planting and clean lines for city living.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-courtyard-pool-design_23-2151934177.jpg",
|
||||
},
|
||||
{
|
||||
title: "Tropical Retreat",
|
||||
description: "Transformed backyard into a lush, vibrant tropical paradise with exotic plants and water features.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-dummy-figure-sitting-front-colorful-flowers-table_23-2147925574.jpg",
|
||||
},
|
||||
{
|
||||
title: "Desert Xeriscape",
|
||||
description: "Water-efficient landscape design featuring native plants, decorative rocks, and stunning succulents.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-red-colorful-nature-park_1232-3747.jpg",
|
||||
},
|
||||
{
|
||||
title: "Zen Garden",
|
||||
description: "A serene Japanese-inspired garden with meticulously placed rocks, raked sand, and peaceful greenery.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-spring-floral-wallpaper_23-2150725103.jpg",
|
||||
},
|
||||
{
|
||||
title: "English Countryside",
|
||||
description: "A charming and vibrant garden overflowing with traditional English flowers, climbing roses, and winding paths.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-backyard-garden-digital-art-style_23-2151488203.jpg",
|
||||
},
|
||||
{
|
||||
title: "Rooftop Sanctuary",
|
||||
description: "An elevated green space transforming a city rooftop into a lush, inviting outdoor sanctuary.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artists-garden-filled-with-variety-plants-beautiful-flowers_1258-296326.jpg",
|
||||
},
|
||||
{
|
||||
title: "Edible Landscape",
|
||||
description: "Sustainable design integrating fruit trees, vegetable beds, and herbs for a beautiful and productive garden.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plants-grown-cultivated-indoors_23-2149854837.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Our Impact"
|
||||
title="Years of Dedication, Thousands of Smiles"
|
||||
description="Our commitment to excellence shines through in every project, big or small."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
description: "Years in Business",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="GreenScape transformed my barren backyard into a vibrant oasis! Their team was professional, creative, and completed the project ahead of schedule. I couldn't be happier with the results."
|
||||
rating={5}
|
||||
author="Sarah M., Homeowner"
|
||||
avatars={[
|
||||
{
|
||||
name: "Sarah M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
||||
},
|
||||
{
|
||||
name: "John D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-big-smile-ginger-hair_23-2148263404.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-360.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus T.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-16049.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Got Questions?"
|
||||
title="Commonly Asked Questions About Our Services"
|
||||
description="Find answers to frequently asked questions regarding our landscaping services, processes, and pricing."
|
||||
items={[
|
||||
{
|
||||
question: "What types of landscaping services do you offer?",
|
||||
answer: "We offer a wide range of services including lawn care, garden design, planting, hardscaping (patios, walkways), irrigation, and seasonal cleanups. Visit our Services section for more details.",
|
||||
},
|
||||
{
|
||||
question: "How do I get a quote for my project?",
|
||||
answer: "You can request a free, no-obligation quote by filling out the contact form on our website, calling us directly, or emailing us. We'll schedule a consultation to assess your needs.",
|
||||
},
|
||||
{
|
||||
question: "Are your services eco-friendly?",
|
||||
answer: "Yes, we are committed to sustainable landscaping practices. We prioritize native plant species, efficient irrigation systems, organic fertilizers, and environmentally conscious methods whenever possible.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-with-gardening-objects_23-2148060724.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Transform Your Outdoors?"
|
||||
text="Get in touch with GreenScape Landscaping today for a free consultation and let's create something beautiful together."
|
||||
primaryButton={{
|
||||
text: "Request a Free Quote",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us Now",
|
||||
href: "tel:123-456-7890",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HeroNewSection headline="Unlock Your Outdoor Oasis: Expert Landscaping for Lasting Beauty" />
|
||||
<AboutSection />
|
||||
<ServicesSection />
|
||||
<PortfolioSection />
|
||||
<MetricsSection />
|
||||
<TestimonialsSection />
|
||||
<FaqSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
25
src/pages/HomePage/sections/About.tsx
Normal file
25
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="About GreenScape"
|
||||
title="Crafting Beautiful Outdoor Spaces Since 20XX"
|
||||
description="With years of dedicated experience, GreenScape Landscaping is passionate about creating stunning and sustainable environments that enhance your property's beauty and value. Our commitment to quality, creativity, and client satisfaction sets us apart."
|
||||
primaryButton={{
|
||||
text: "Meet Our Team",
|
||||
href: "#team",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-people-greenhouse_23-2149098326.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Transform Your Outdoors?"
|
||||
text="Get in touch with GreenScape Landscaping today for a free consultation and let's create something beautiful together."
|
||||
primaryButton={{
|
||||
text: "Request a Free Quote",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us Now",
|
||||
href: "tel:123-456-7890",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/pages/HomePage/sections/Faq.tsx
Normal file
35
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Got Questions?"
|
||||
title="Commonly Asked Questions About Our Services"
|
||||
description="Find answers to frequently asked questions regarding our landscaping services, processes, and pricing."
|
||||
items={[
|
||||
{
|
||||
question: "What types of landscaping services do you offer?",
|
||||
answer: "We offer a wide range of services including lawn care, garden design, planting, hardscaping (patios, walkways), irrigation, and seasonal cleanups. Visit our Services section for more details.",
|
||||
},
|
||||
{
|
||||
question: "How do I get a quote for my project?",
|
||||
answer: "You can request a free, no-obligation quote by filling out the contact form on our website, calling us directly, or emailing us. We'll schedule a consultation to assess your needs.",
|
||||
},
|
||||
{
|
||||
question: "Are your services eco-friendly?",
|
||||
answer: "Yes, we are committed to sustainable landscaping practices. We prioritize native plant species, efficient irrigation systems, organic fertilizers, and environmentally conscious methods whenever possible.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-with-gardening-objects_23-2148060724.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
src/pages/HomePage/sections/HeroNew.tsx
Normal file
73
src/pages/HomePage/sections/HeroNew.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
// Created by add_section_from_catalog (HeroBillboardFeatures).
|
||||
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
||||
import { Leaf, Sun, Droplet } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function HeroNewSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="hero-new" id="hero-new">
|
||||
<section className="relative w-full bg-background overflow-hidden">
|
||||
<div className="max-w-content-width mx-auto px-6 text-center flex flex-col items-center">
|
||||
<Tag text="Your Outdoor Oasis Awaits" className="mb-6" />
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-foreground tracking-tight mb-6 max-w-content-width">
|
||||
Transform Your Landscape with Expertise and Care
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-muted-foreground max-w-content-width">
|
||||
At GreenScape Landscaping, we bring your vision to life. From lush gardens to functional outdoor living spaces, our team delivers unparalleled design, installation, and maintenance services.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Button text="Explore Services" href="#services" variant="primary" />
|
||||
<Button text="Get a Free Quote" href="#contact" variant="secondary" />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-content-width mx-auto aspect-[4/3] md:aspect-[16/9] rounded-theme overflow-hidden shadow-2xl">
|
||||
<ImageOrVideo
|
||||
imageSrc="http://img.b2bpic.net/free-photo/relaxation-space-garden-with-beds_1232-3472.jpg"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Floating Card 1 */}
|
||||
<ScrollReveal
|
||||
variant="slide-up"
|
||||
delay={0.3}
|
||||
className="absolute top-6 left-6 md:top-12 md:left-12 z-10"
|
||||
>
|
||||
<div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
|
||||
<Leaf className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Floating Card 2 */}
|
||||
<ScrollReveal
|
||||
variant="slide-up"
|
||||
delay={0.5}
|
||||
className="absolute bottom-6 left-1/2 -translate-x-1/2 md:bottom-12 z-10"
|
||||
>
|
||||
<div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
|
||||
<Sun className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Floating Card 3 */}
|
||||
<ScrollReveal
|
||||
variant="slide-up"
|
||||
delay={0.7}
|
||||
className="absolute top-1/2 right-6 -translate-y-1/2 md:top-24 md:right-12 z-10"
|
||||
>
|
||||
<div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
|
||||
<Droplet className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Metrics.tsx
Normal file
34
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Our Impact"
|
||||
title="Years of Dedication, Thousands of Smiles"
|
||||
description="Our commitment to excellence shines through in every project, big or small."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
description: "Years in Business",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/Portfolio.tsx
Normal file
64
src/pages/HomePage/sections/Portfolio.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "portfolio" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PortfolioSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<SectionErrorBoundary name="portfolio">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Recent Projects"
|
||||
title="Showcasing Our Landscaping Masterpieces"
|
||||
description="Browse a selection of our completed projects that highlight our diverse expertise and commitment to exceptional outdoor design."
|
||||
items={[
|
||||
{
|
||||
title: "Modern Urban Oasis",
|
||||
description: "A sleek, contemporary garden with minimalist planting and clean lines for city living.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-courtyard-pool-design_23-2151934177.jpg",
|
||||
},
|
||||
{
|
||||
title: "Tropical Retreat",
|
||||
description: "Transformed backyard into a lush, vibrant tropical paradise with exotic plants and water features.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-dummy-figure-sitting-front-colorful-flowers-table_23-2147925574.jpg",
|
||||
},
|
||||
{
|
||||
title: "Desert Xeriscape",
|
||||
description: "Water-efficient landscape design featuring native plants, decorative rocks, and stunning succulents.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-red-colorful-nature-park_1232-3747.jpg",
|
||||
},
|
||||
{
|
||||
title: "Zen Garden",
|
||||
description: "A serene Japanese-inspired garden with meticulously placed rocks, raked sand, and peaceful greenery.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-spring-floral-wallpaper_23-2150725103.jpg",
|
||||
},
|
||||
{
|
||||
title: "English Countryside",
|
||||
description: "A charming and vibrant garden overflowing with traditional English flowers, climbing roses, and winding paths.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-backyard-garden-digital-art-style_23-2151488203.jpg",
|
||||
},
|
||||
{
|
||||
title: "Rooftop Sanctuary",
|
||||
description: "An elevated green space transforming a city rooftop into a lush, inviting outdoor sanctuary.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artists-garden-filled-with-variety-plants-beautiful-flowers_1258-296326.jpg",
|
||||
},
|
||||
{
|
||||
title: "Edible Landscape",
|
||||
description: "Sustainable design integrating fruit trees, vegetable beds, and herbs for a beautiful and productive garden.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plants-grown-cultivated-indoors_23-2149854837.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Services.tsx
Normal file
37
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMarqueeCards from '@/components/sections/features/FeaturesMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesMarqueeCards
|
||||
tag="Our Core Services"
|
||||
title="Comprehensive Solutions for Every Landscape Need"
|
||||
description="We offer a full spectrum of landscaping services, from meticulous design to ongoing maintenance, ensuring your outdoor space is always vibrant and thriving."
|
||||
items={[
|
||||
{
|
||||
title: "Lawn Care & Maintenance",
|
||||
description: "Keep your lawn healthy and pristine with our professional mowing, fertilizing, and aeration services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-gardener-watering-plants_53876-101140.jpg",
|
||||
},
|
||||
{
|
||||
title: "Garden Design & Planting",
|
||||
description: "From vibrant flowerbeds to serene rock gardens, we design and install custom gardens tailored to your preferences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-flowers-right-side-orange-with-copy-space_141793-6498.jpg",
|
||||
},
|
||||
{
|
||||
title: "Hardscaping & Patios",
|
||||
description: "Enhance your outdoor living with custom patios, walkways, retaining walls, and fire pits built to last.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stone-road_1417-1558.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Testimonials.tsx
Normal file
42
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialTrustCard
|
||||
quote="GreenScape transformed my barren backyard into a vibrant oasis! Their team was professional, creative, and completed the project ahead of schedule. I couldn't be happier with the results."
|
||||
rating={5}
|
||||
author="Sarah M., Homeowner"
|
||||
avatars={[
|
||||
{
|
||||
name: "Sarah M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
||||
},
|
||||
{
|
||||
name: "John D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-big-smile-ginger-hair_23-2148263404.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-360.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus T.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-16049.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user