diff --git a/src/index.css b/src/index.css
index dedc66f..e7e01e5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -95,8 +95,8 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: "Inter", sans-serif;
-  --font-tight: "Inter Tight", sans-serif;
+  --font-sans: "Plus Jakarta Sans", sans-serif;
+  --font-tight: "Plus Jakarta Sans", sans-serif;
   --font-mono: monospace;
 
   /* Border Radius */
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index d060329..6da7317 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,206 +1,39 @@
-import { StyleProvider } from "@/components/ui/StyleProvider";
-import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
-import AboutTestimonial from "@/components/sections/about/AboutTestimonial";
-import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
-import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
-import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
-import TestimonialAvatarCard from "@/components/sections/testimonial/TestimonialAvatarCard";
-import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+// 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 { StyleProvider } from "@/components/ui/StyleProvider";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import WhyUsSection from './HomePage/sections/WhyUs';
+import TeamSection from './HomePage/sections/Team';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider heroBackground="none" siteBackground="none" buttonVariant="stagger">
         
 
-        <div id="hero" data-section="hero">
-          <HeroOverlayTestimonial
-            tag="Professional Landscaping"
-            title="Transform Your Outdoor Space"
-            description="Professional landscaping design, installation, and maintenance services. From lush gardens to stunning hardscapes, we bring your vision to life."
-            primaryButton={{ text: "Get Free Estimate", href: "#contact" }}
-            secondaryButton={{ text: "Our Services", href: "#services" }}
-            imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/hero.jpg"
-            testimonials={[
-              {
-                name: "Sarah M.",
-                handle: "Homeowner",
-                text: "GreenScape completely transformed our backyard. The team was professional, creative, and delivered beyond our expectations.",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
-              },
-              {
-                name: "David K.",
-                handle: "Property Manager",
-                text: "We've used GreenScape for all our commercial properties. Their maintenance plans keep everything looking pristine year-round.",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
-              },
-            ]}
-          />
-        </div>
+        <HeroSection />
 
-        <div id="about" data-section="about">
-          <AboutTestimonial
-            tag="About GreenScape"
-            quote="We've been transforming outdoor spaces for over 15 years — delivering designs that homeowners love and landscapes that last."
-            author="James Carter"
-            role="Lead Designer"
-            videoSrc="https://storage.googleapis.com/webild/default/templates/landscaping/about-video.mp4"
-          />
-        </div>
+        <AboutSection />
 
-        <div id="services" data-section="services">
-          <FeaturesDetailedSteps
-            tag="Our Services"
-            title="What We Do"
-            description="From design to maintenance, we handle every aspect of your landscape."
-            steps={[
-              {
-                tag: "Design",
-                title: "Landscape Design",
-                subtitle: "Custom Plans",
-                description: "We create tailored landscape designs that complement your property's architecture and your personal style.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg",
-              },
-              {
-                tag: "Installation",
-                title: "Hardscape & Softscape",
-                subtitle: "Full Installation",
-                description: "From patios and walkways to gardens and trees, we handle the complete installation process.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-3.jpg",
-              },
-              {
-                tag: "Maintenance",
-                title: "Lawn & Garden Care",
-                subtitle: "Ongoing Service",
-                description: "Keep your property looking pristine year-round with our professional maintenance plans.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg",
-              },
-              {
-                tag: "Irrigation",
-                title: "Smart Irrigation",
-                subtitle: "Water Management",
-                description: "Efficient irrigation systems that keep your landscape healthy while conserving water.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-5.jpg",
-              },
-            ]}
-          />
-        </div>
+        <ServicesSection />
 
-        <div id="why-us" data-section="why-us">
-          <TeamGlassCards
-            tag=""
-            title="Why Choose GreenScape"
-            description="What sets us apart from the rest."
-            members={[
-              {
-                name: "Expert Craftsmanship",
-                role: "Decades of combined experience in landscape design and installation.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-6.jpg",
-              },
-              {
-                name: "Eco-Friendly Approach",
-                role: "Sustainable practices and native plant selections that thrive naturally.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-7.jpg",
-              },
-              {
-                name: "Full-Service Care",
-                role: "From initial design to ongoing maintenance, we handle everything.",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-8.jpg",
-              },
-            ]}
-          />
-        </div>
+        <WhyUsSection />
 
-        <div id="team" data-section="team">
-          <TeamOverlayCards
-            tag="Our Team"
-            title="Meet the Experts"
-            description="The skilled professionals behind every beautiful landscape."
-            members={[
-              {
-                name: "James Carter",
-                role: "Lead Designer",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg",
-              },
-              {
-                name: "Maria Silva",
-                role: "Horticulturist",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg",
-              },
-              {
-                name: "Ryan Mitchell",
-                role: "Project Manager",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg",
-              },
-            ]}
-          />
-        </div>
+        <TeamSection />
 
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialAvatarCard
-            tag="Trusted by Homeowners"
-            title="Over 500 happy clients trust GreenScape to transform and maintain their outdoor spaces."
-            primaryButton={{ text: "Contact Now", href: "#contact" }}
-            avatars={[
-              { name: "Sarah M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg" },
-              { name: "David K.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg" },
-              { name: "Emily R.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg" },
-              { name: "Ryan M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg" },
-            ]}
-          />
-        </div>
+        <TestimonialsSection />
 
-        <div id="faq" data-section="faq">
-          <FaqTwoColumn
-            tag="FAQ"
-            title="Frequently Asked Questions"
-            description="Everything you need to know about our landscaping services."
-            items={[
-              {
-                question: "How long does a typical landscaping project take?",
-                answer: "Most residential projects take 1-3 weeks depending on scope. We'll provide a detailed timeline during your consultation so you know exactly what to expect.",
-              },
-              {
-                question: "Do you offer free consultations?",
-                answer: "Yes! We offer complimentary on-site consultations where we assess your property, discuss your vision, and provide a detailed estimate — no obligation.",
-              },
-              {
-                question: "What areas do you serve?",
-                answer: "We serve the greater metropolitan area and surrounding suburbs within a 50-mile radius. Contact us to confirm service availability in your location.",
-              },
-              {
-                question: "Do you provide ongoing maintenance?",
-                answer: "Absolutely. We offer weekly, bi-weekly, and monthly maintenance plans that include mowing, trimming, fertilization, and seasonal cleanups.",
-              },
-              {
-                question: "Are your practices eco-friendly?",
-                answer: "Yes, sustainability is core to our approach. We use native plants, organic fertilizers, smart irrigation, and environmentally responsible methods whenever possible.",
-              },
-              {
-                question: "Do you handle permits and HOA approvals?",
-                answer: "We handle all necessary permits and can work directly with your HOA to ensure your project meets community guidelines and gets approved smoothly.",
-              },
-            ]}
-          />
-        </div>
+        <FaqSection />
 
-        <div id="contact" data-section="contact">
-          <ContactSplitForm
-            tag="Contact"
-            title="Get Your Free Estimate"
-            description="Tell us about your project and we'll get back to you within 24 hours."
-            inputs={[
-              { name: "name", type: "text", placeholder: "Full Name", required: true },
-              { name: "email", type: "email", placeholder: "Email Address", required: true },
-              { name: "phone", type: "tel", placeholder: "Phone Number" },
-            ]}
-            textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 4, required: true }}
-            buttonText="Send Message"
-            imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg"
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..b0704cb
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,19 @@
+// 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";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+              <AboutTestimonial
+                tag="About GreenScape"
+                quote="We've been transforming outdoor spaces for over 15 years — delivering designs that homeowners love and landscapes that last."
+                author="James Carter"
+                role="Lead Designer"
+                videoSrc="https://storage.googleapis.com/webild/default/templates/landscaping/about-video.mp4"
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..5b4cc27
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,25 @@
+// 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 ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactSplitForm
+        tag="Contact"
+        title="Get Your Free Estimate"
+        description="Tell us about your project and we'll get back to you within 24 hours. You can also reach us at 0673 830 868 or visit us Opposite R-Square building, 582 Kaole Rd, Dar es Salaam."
+        inputs={[
+                  { name: "name", type: "text", placeholder: "Full Name", required: true },
+                  { name: "email", type: "email", placeholder: "Email Address", required: true },
+                  { name: "phone", type: "tel", placeholder: "Phone Number" },
+                ]}
+        textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 4, required: true }}
+        buttonText="Send Message"
+        imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg"
+      />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..7b0100c
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,43 @@
+// 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 FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+              <FaqTwoColumn
+                tag="FAQ"
+                title="Frequently Asked Questions"
+                description="Everything you need to know about our landscaping services."
+                items={[
+                  {
+                    question: "How long does a typical landscaping project take?",
+                    answer: "Most residential projects take 1-3 weeks depending on scope. We'll provide a detailed timeline during your consultation so you know exactly what to expect.",
+                  },
+                  {
+                    question: "Do you offer free consultations?",
+                    answer: "Yes! We offer complimentary on-site consultations where we assess your property, discuss your vision, and provide a detailed estimate — no obligation.",
+                  },
+                  {
+                    question: "What areas do you serve?",
+                    answer: "We serve the greater metropolitan area and surrounding suburbs within a 50-mile radius. Contact us to confirm service availability in your location.",
+                  },
+                  {
+                    question: "Do you provide ongoing maintenance?",
+                    answer: "Absolutely. We offer weekly, bi-weekly, and monthly maintenance plans that include mowing, trimming, fertilization, and seasonal cleanups.",
+                  },
+                  {
+                    question: "Are your practices eco-friendly?",
+                    answer: "Yes, sustainability is core to our approach. We use native plants, organic fertilizers, smart irrigation, and environmentally responsible methods whenever possible.",
+                  },
+                  {
+                    question: "Do you handle permits and HOA approvals?",
+                    answer: "We handle all necessary permits and can work directly with your HOA to ensure your project meets community guidelines and gets approved smoothly.",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..8e40d32
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+              <HeroOverlayTestimonial
+        tag="Angelic Gardens"
+        title="Transform Your Outdoor Space with Angelic Gardens"
+        description="Professional landscaping design, installation, and maintenance services. From lush gardens to stunning hardscapes, we bring your vision to life. Visit us Opposite R-Square building, 582 Kaole Rd, Dar es Salaam or call 0673 830 868."
+        primaryButton={{ text: "Get Free Estimate", href: "#contact" }}
+        secondaryButton={{ text: "Our Services", href: "#services" }}
+        imageSrc="https://storage.googleapis.com/webild/default/templates/landscaping/hero.jpg"
+        testimonials={[
+                  {
+                    name: "Sarah M.",
+                    handle: "Homeowner",
+                    text: "GreenScape completely transformed our backyard. The team was professional, creative, and delivered beyond our expectations.",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
+                  },
+                  {
+                    name: "David K.",
+                    handle: "Property Manager",
+                    text: "We've used GreenScape for all our commercial properties. Their maintenance plans keep everything looking pristine year-round.",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
+                  },
+                ]}
+      />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..981f27e
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,18 @@
+// 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 FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+              <FeaturesDetailedSteps
+        tag="Our Services"
+        title="What We Do"
+        description="From design to maintenance, we handle every aspect of your landscape."
+        steps={[{"imageSrc":"https://storage.googleapis.com/webild/default/templates/landscaping/img-3.jpg","title":"Installation","subtitle":"Full Installation","tag":"Installation","description":"We handle the complete installation process for your landscape."},{"tag":"Fumigation","subtitle":"Pest Control","description":"Professional fumigation services to keep your garden healthy.","imageSrc":"https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg","title":"Fumigation"},{"title":"Lawn Mowing","imageSrc":"https://storage.googleapis.com/webild/default/templates/landscaping/img-5.jpg","description":"Keep your property looking pristine with our lawn mowing services.","subtitle":"Maintenance","tag":"Lawn Mowing"},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/landscaping/img-2.jpg","title":"Pruning & Tree Cutting","tag":"Pruning","subtitle":"Tree Care","description":"Expert pruning and tree cutting for a safe and beautiful landscape."}]}
+      />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
new file mode 100644
index 0000000..fec0e95
--- /dev/null
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+              <TeamOverlayCards
+                tag="Our Team"
+                title="Meet the Experts"
+                description="The skilled professionals behind every beautiful landscape."
+                members={[
+                  {
+                    name: "James Carter",
+                    role: "Lead Designer",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg",
+                  },
+                  {
+                    name: "Maria Silva",
+                    role: "Horticulturist",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg",
+                  },
+                  {
+                    name: "Ryan Mitchell",
+                    role: "Project Manager",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..e510451
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,23 @@
+// 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 TestimonialAvatarCard from "@/components/sections/testimonial/TestimonialAvatarCard";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+              <TestimonialAvatarCard
+                tag="Trusted by Homeowners"
+                title="Over 500 happy clients trust GreenScape to transform and maintain their outdoor spaces."
+                primaryButton={{ text: "Contact Now", href: "#contact" }}
+                avatars={[
+                  { name: "Sarah M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-10.jpg" },
+                  { name: "David K.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-11.jpg" },
+                  { name: "Emily R.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-4.jpg" },
+                  { name: "Ryan M.", imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-9.jpg" },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/WhyUs.tsx b/src/pages/HomePage/sections/WhyUs.tsx
new file mode 100644
index 0000000..604ff53
--- /dev/null
+++ b/src/pages/HomePage/sections/WhyUs.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "why-us" section.
+
+import React from 'react';
+import TeamGlassCards from "@/components/sections/team/TeamGlassCards";
+
+export default function WhyUsSection(): React.JSX.Element {
+  return (
+    <div id="why-us" data-section="why-us">
+              <TeamGlassCards
+                tag=""
+                title="Why Choose GreenScape"
+                description="What sets us apart from the rest."
+                members={[
+                  {
+                    name: "Expert Craftsmanship",
+                    role: "Decades of combined experience in landscape design and installation.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-6.jpg",
+                  },
+                  {
+                    name: "Eco-Friendly Approach",
+                    role: "Sustainable practices and native plant selections that thrive naturally.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-7.jpg",
+                  },
+                  {
+                    name: "Full-Service Care",
+                    role: "From initial design to ongoing maintenance, we handle everything.",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/landscaping/img-8.jpg",
+                  },
+                ]}
+              />
+            </div>
+  );
+}