2026-06-15 23:15:17 +00:00
8 changed files with 363 additions and 180 deletions
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,191 +1,33 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.

-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="Affordable Landscaping LLC"
-      title="Professional Landscaping & Fencing Services"
-      description="Transform your outdoor space with our expert team. We specialize in comprehensive lawn care, tree removal, and custom fence installations."
-      primaryButton={{
-        text: "Get a Free Estimate",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "View Our Services",
-        href: "#services",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-friends-playing-petanque-outdoors_23-2149530378.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/suburban-housing_53876-14307.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTestimonial
-      tag="Our Commitment"
-      quote="We treat every yard as if it were our own. Affordable Landscaping LLC is dedicated to transforming outdoor spaces into beautiful, functional retreats."
-      author="The Team"
-      role="Professional Landscapers"
-      imageSrc="http://img.b2bpic.net/free-photo/concentrated-gardener-growing-evergreen-plants-grey-haired-man-eyeglasses-wearing-blue-shirt-apron-caring-small-thujas-greenhouse-commercial-gardening-activity-summer-concept_74855-12740.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />

-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <FeaturesBentoGrid
-      tag="Our Services"
-      title="Comprehensive Yard Solutions"
-      description="From lawn care and tree removal to custom fencing, we provide everything your property needs to thrive."
-      features={[
-        {
-          title: "Lawn Care & Maintenance",
-          description: "Regular weed eating, edging, and yard work.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-mowing-yard-close-up_23-2148579933.jpg",
-        },
-        {
-          title: "Fence Installation",
-          description: "Privacy, wood, ranch, and vinyl fencing solutions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-14933.jpg",
-        },
-        {
-          title: "Tree Care & Removal",
-          description: "Expert tree trimming, removal, and dead tree management.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-lumberjack-cutting-oak-tree-with-chainsaw-forest_342744-507.jpg",
-        },
-        {
-          title: "Flower Bed Design",
-          description: "Expert mulch beds and beautiful floral arrangements.",
-          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-man-s-hand-digging-soil-with-hoe_23-2148165180.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />

-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Happy Clients"
-      title="What Our Neighbors Say"
-      description="Building trust, one beautiful lawn at a time."
-      testimonials={[
-        {
-          name: "John D.",
-          role: "Homeowner",
-          quote: "Excellent fence repair work, affordable and fast.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-african-american-woman-smiling-cheerful-friendly-face-laughing-confident_839833-29956.jpg",
-        },
-        {
-          name: "Sarah W.",
-          role: "Homeowner",
-          quote: "Best lawn care service I've ever hired.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg",
-        },
-        {
-          name: "Mike R.",
-          role: "Small Business Owner",
-          quote: "Reliable and professional with tree removal.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
-        },
-        {
-          name: "Linda K.",
-          role: "Homeowner",
-          quote: "Transformed our flower beds completely.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-cleaning-equipment-living-room_329181-649.jpg",
-        },
-        {
-          name: "David B.",
-          role: "Property Manager",
-          quote: "Consistently great work on all our rentals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12328.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />

-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Our Impact"
-      title="By The Numbers"
-      description="Quality service results you can count on."
-      metrics={[
-        {
-          value: "4.3+",
-          description: "Google Star Rating",
-        },
-        {
-          value: "100s",
-          description: "Yards Transformed",
-        },
-        {
-          value: "10+",
-          description: "Years Experience",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Questions?"
-      title="Common Inquiries"
-      description="Everything you need to know about our services."
-      items={[
-        {
-          question: "Do you offer free estimates?",
-          answer: "Yes, we provide free estimates for all landscaping and fence projects.",
-        },
-        {
-          question: "What areas do you serve?",
-          answer: "We serve residential and commercial clients in our immediate service area.",
-        },
-        {
-          question: "Are you licensed?",
-          answer: "Yes, we are fully insured and dedicated to quality safety standards.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Contact Us"
-      text="Ready to get started? Call us at +1 859-402-4044 or request your free estimate today."
-      primaryButton={{
-        text: "Call Now",
-        href: "tel:+18594024044",
-      }}
-      secondaryButton={{
-        text: "Get Estimate",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
    </>
  );
 }
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,22 @@
+// 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 AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTestimonial
+          tag="Our Commitment"
+          quote="We treat every yard as if it were our own. Affordable Landscaping LLC is dedicated to transforming outdoor spaces into beautiful, functional retreats."
+          author="The Team"
+          role="Professional Landscapers"
+          imageSrc="http://img.b2bpic.net/free-photo/concentrated-gardener-growing-evergreen-plants-grey-haired-man-eyeglasses-wearing-blue-shirt-apron-caring-small-thujas-greenhouse-commercial-gardening-activity-summer-concept_74855-12740.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -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="Contact Us"
+          text="Ready to get started? Call us at +1 859-402-4044 or request your free estimate today."
+          primaryButton={{
+            text: "Call Now",
+            href: "tel:+18594024044",
+          }}
+          secondaryButton={{
+            text: "Get Estimate",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Faq.tsx
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,34 @@
+// 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 FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="Questions?"
+          title="Common Inquiries"
+          description="Everything you need to know about our services."
+          items={[
+            {
+              question: "Do you offer free estimates?",
+              answer: "Yes, we provide free estimates for all landscaping and fence projects.",
+            },
+            {
+              question: "What areas do you serve?",
+              answer: "We serve residential and commercial clients in our immediate service area.",
+            },
+            {
+              question: "Are you licensed?",
+              answer: "Yes, we are fully insured and dedicated to quality safety standards.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useEffect, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ActiveBadge from "@/components/ui/ActiveBadge";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+const primaryButton = {
+  text: "Get a Free Estimate",
+  href: "#contact"
+};
+const secondaryButton = {
+  text: "View Our Services",
+  href: "#services"
+};
+const features = [
+  {
+    icon: "Leaf",
+    description: "Comprehensive maintenance for a lush, green lawn.",
+    title: "Lawn Care"
+  },
+  {
+    icon: "Scissors",
+    description: "Safe and efficient tree removal and pruning.",
+    title: "Tree Trimming"
+  },
+  {
+    icon: "Hammer",
+    description: "Durable and stylish fences for privacy and security.",
+    title: "Custom Fencing"
+  }
+];
+
+type FeatureItem = {
+  icon: string | LucideIcon;
+  title: string;
+  description: string;
+};
+
+type HeroBillboardFeaturesProps = {
+  badge: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  features: FeatureItem[];
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const INTERVAL = 5000;
+
+const HeroInline = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (features.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % features.length);
+    }, INTERVAL);
+    return () => clearInterval(interval);
+  }, [features.length]);
+
+  const feature = features[currentIndex];
+  const FeatureIcon = resolveIcon(feature.icon);
+
+  return (
+    <section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col gap-12 w-content-width mx-auto">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <ActiveBadge text={"Affordable Landscaping LLC"} className="mb-1" />
+
+          <TextAnimation
+            text={"Professional Landscaping & Fencing Services"}
+            variant="slide-up"
+            gradientText={true}
+            tag="h1"
+            className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Transform your outdoor space with our expert team. We specialize in comprehensive lawn care, tree removal, and custom fence installations."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
+          />
+
+          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+          </div>
+        </div>
+
+        <ScrollReveal variant="fade-blur" delay={0.2} className="relative w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
+          <img src="https://images.unsplash.com/photo-1558904541-efa843a96f0f?q=80&w=2000&auto=format&fit=crop" alt="Lawn Care" className="w-full h-full object-cover aspect-3/4 md:aspect-video" />
+
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentIndex}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3 }}
+              className="absolute top-4 right-4 xl:top-6 xl:right-6 2xl:top-8 2xl:right-8 max-w-xs p-2 xl:p-3 2xl:p-4 card rounded flex flex-col gap-2"
+            >
+              <FeatureIcon className="size-5 text-accent mb-0.5" strokeWidth={1.5} />
+              <p className="text-base font-medium leading-snug">{feature.title}</p>
+              <p className="text-sm text-foreground/75 leading-snug">{feature.description}</p>
+            </motion.div>
+          </AnimatePresence>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -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="By The Numbers"
+          description="Quality service results you can count on."
+          metrics={[
+            {
+              value: "4.3+",
+              description: "Google Star Rating",
+            },
+            {
+              value: "100s",
+              description: "Yards Transformed",
+            },
+            {
+              value: "10+",
+              description: "Years Experience",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Services.tsx
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,42 @@
+// 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 FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <FeaturesBentoGrid
+          tag="Our Services"
+          title="Comprehensive Yard Solutions"
+          description="From lawn care and tree removal to custom fencing, we provide everything your property needs to thrive."
+          features={[
+            {
+              title: "Lawn Care & Maintenance",
+              description: "Regular weed eating, edging, and yard work.",
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-mowing-yard-close-up_23-2148579933.jpg",
+            },
+            {
+              title: "Fence Installation",
+              description: "Privacy, wood, ranch, and vinyl fencing solutions.",
+              imageSrc: "http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-14933.jpg",
+            },
+            {
+              title: "Tree Care & Removal",
+              description: "Expert tree trimming, removal, and dead tree management.",
+              imageSrc: "http://img.b2bpic.net/free-photo/female-lumberjack-cutting-oak-tree-with-chainsaw-forest_342744-507.jpg",
+            },
+            {
+              title: "Flower Bed Design",
+              description: "Expert mulch beds and beautiful floral arrangements.",
+              imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-man-s-hand-digging-soil-with-hoe_23-2148165180.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,52 @@
+// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialQuoteCards
+          tag="Happy Clients"
+          title="What Our Neighbors Say"
+          description="Building trust, one beautiful lawn at a time."
+          testimonials={[
+            {
+              name: "John D.",
+              role: "Homeowner",
+              quote: "Excellent fence repair work, affordable and fast.",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-african-american-woman-smiling-cheerful-friendly-face-laughing-confident_839833-29956.jpg",
+            },
+            {
+              name: "Sarah W.",
+              role: "Homeowner",
+              quote: "Best lawn care service I've ever hired.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-goodlooking-bearded-gardener-with-garden-tools-smiling-standing-trees-shadow-crossing-hands-looking-camera-with-relaxed-face-expression_176420-55230.jpg",
+            },
+            {
+              name: "Mike R.",
+              role: "Small Business Owner",
+              quote: "Reliable and professional with tree removal.",
+              imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
+            },
+            {
+              name: "Linda K.",
+              role: "Homeowner",
+              quote: "Transformed our flower beds completely.",
+              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-cleaning-equipment-living-room_329181-649.jpg",
+            },
+            {
+              name: "David B.",
+              role: "Property Manager",
+              quote: "Consistently great work on all our rentals.",
+              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12328.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}