diff --git a/src/index.css b/src/index.css
index 01a078a..25b1c36 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,12 +8,12 @@
   --background: #f5faff;
   --card: #ffffff;
   --foreground: #001122;
-  --primary-cta: #15479c;
+  --primary-cta: #001122;
   --primary-cta-text: #f5faff;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #15479c;
+  --background-accent: #001122;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 4c6c24d..4fc80a1 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,255 +1,36 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-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 FeaturesSection from './HomePage/sections/Features';
+import ProductSection from './HomePage/sections/Product';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import SocialProofSection from './HomePage/sections/SocialProof';
+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">
-          <HeroBrand
-      brand="Remote Scheduling, Automated."
-      description="Streamline your global team's availability with the most intuitive scheduling platform built for distributed workforces."
-      primaryButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "#about",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/digital-nomad-working-remotly-their-project_23-2149241865.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesBentoGrid
-      tag="Capabilities"
-      title="Everything you need to scale"
-      description="Our robust platform handles time zones, availability, and scheduling conflicts automatically."
-      features={[
-        {
-          title: "Automated Sync",
-          description: "Sync calendars across all time zones instantly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-tablet-working-with-it_1134-86.jpg",
-        },
-        {
-          title: "Smart Alerts",
-          description: "Get notified before every scheduled event.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-indicating-spring-time_23-2148409570.jpg",
-        },
-        {
-          title: "Global Teams",
-          description: "Manage multi-timezone availability easily.",
-          imageSrc: "http://img.b2bpic.net/free-vector/global-business-flat-business-elements_23-2147492665.jpg",
-        },
-        {
-          title: "Data Insights",
-          description: "View performance and meeting analytics.",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-statistics-presentation-with-chart_23-2149023814.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="product" data-section="product">
-    <SectionErrorBoundary name="product">
-          <FeaturesRevealCardsBento
-      tag="Product Suite"
-      title="Built for Modern Teams"
-      description="Powerful tools designed to minimize friction in remote scheduling."
-      items={[
-        {
-          title: "Global Meeting",
-          description: "Schedule cross-timezone meetings effortlessly.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/calendars-check-cross-red-blue_78370-9029.jpg",
-        },
-        {
-          title: "Availability",
-          description: "Set clear working hour blocks automatically.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/work-message-lightbox-arrangement_23-2149150447.jpg",
-        },
-        {
-          title: "Admin Dashboard",
-          description: "Full control over team scheduling permissions.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/freelancer-working-remotely-discussing-with-partners-online-using-laptop-sitting-kitchen-night-using-modern-technology-network-wireless-talking-virtual-meeting-midnight-doing-overtime_482257-14596.jpg",
-        },
-        {
-          title: "API Access",
-          description: "Integrate with your own internal tools.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/customer-loyalty-service-efficiency-strategy-concept_53876-21179.jpg",
-        },
-        {
-          title: "Sync Tools",
-          description: "Plug and play with major calendar providers.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/blue-house-background-with-cloud-other-elements_23-2147630782.jpg",
-        },
-        {
-          title: "User Groups",
-          description: "Manage access for different team segments.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/vintage-antique-reminder-down-wood_1203-4709.jpg",
-        },
-        {
-          title: "Smart Scaling",
-          description: "Ready for teams of any size.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-colleagues-office_23-2149411516.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Performance"
-      title="Proven Results"
-      description="Companies using RemoteSchedulers see tangible improvements."
-      metrics={[
-        {
-          value: "45%",
-          description: "Reduction in scheduling time",
-        },
-        {
-          value: "99.9%",
-          description: "System uptime guarantee",
-        },
-        {
-          value: "10k+",
-          description: "Active global users",
-        },
-        {
-          value: "150+",
-          description: "Countries supported",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Social Proof"
-      title="Trusted by Leaders"
-      description="Hear what industry experts have to say about our platform."
-      testimonials={[
-        {
-          name: "Alex Rivet",
-          role: "CEO",
-          quote: "The best scheduling tool for our remote global team.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-businesswomen-relaxing-cafe_53876-30774.jpg",
-        },
-        {
-          name: "Sam Chen",
-          role: "CTO",
-          quote: "Automated everything we needed in days.",
-          imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project-professional-worker_482257-133253.jpg",
-        },
-        {
-          name: "Maria Lopez",
-          role: "Manager",
-          quote: "Finally, we don't worry about timezone math.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-businessman-standing-front-desk_23-2148187160.jpg",
-        },
-        {
-          name: "David Kim",
-          role: "Founder",
-          quote: "A true game changer for our distributed startup.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
-        },
-        {
-          name: "Sarah Lee",
-          role: "Lead",
-          quote: "Incredibly smooth onboarding experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Partners"
-      title="Powered by Industry Leaders"
-      description="We are proud to work with these innovative companies."
-      names={[
-        "Microsoft",
-        "Google",
-        "Slack",
-        "Zoom",
-        "Notion",
-        "Linear",
-        "Figma",
-        "GitHub",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <SocialProofSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSplitMedia
-      tag="Support"
-      title="Common Questions"
-      description="Everything you need to know about setting up your workspace."
-      items={[
-        {
-          question: "Is setup difficult?",
-          answer: "No, it takes less than 5 minutes to connect your accounts.",
-        },
-        {
-          question: "Does it support Slack?",
-          answer: "Yes, we have deep integration with Slack for alerts.",
-        },
-        {
-          question: "Are there enterprise plans?",
-          answer: "Yes, contact our sales team for tailored solutions.",
-        },
-        {
-          question: "Is it secure?",
-          answer: "Security is our top priority, with SOC2 compliance.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/save-front-side_187299-44781.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get Started"
-      text="Ready to transform your team's scheduling workflow?"
-      primaryButton={{
-        text: "Contact Sales",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Start Trial",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..da80e1c
--- /dev/null
+++ 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="Get Started"
+          text="Ready to transform your team's scheduling workflow?"
+          primaryButton={{
+            text: "Contact Sales",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Start Trial",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..c44fa5a
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,39 @@
+// 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="Support"
+          title="Common Questions"
+          description="Everything you need to know about setting up your workspace."
+          items={[
+            {
+              question: "Is setup difficult?",
+              answer: "No, it takes less than 5 minutes to connect your accounts.",
+            },
+            {
+              question: "Does it support Slack?",
+              answer: "Yes, we have deep integration with Slack for alerts.",
+            },
+            {
+              question: "Are there enterprise plans?",
+              answer: "Yes, contact our sales team for tailored solutions.",
+            },
+            {
+              question: "Is it secure?",
+              answer: "Security is our top priority, with SOC2 compliance.",
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/save-front-side_187299-44781.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..7ab85a6
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesBentoGrid
+        tag="Our Services"
+        title="Executive Support Solutions"
+        description="Comprehensive administrative and scheduling support tailored for the construction and project management industries."
+        features={[{"description":"Expert scheduling support to keep your construction projects on track and within budget.","title":"Project Scheduling","imageSrc":"http://img.b2bpic.net/free-photo/architects-working-blueprints_23-2148236111.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/business-people-working-together-office_23-2148908930.jpg","description":"Dedicated administrative professionals to handle your day-to-day operational tasks.","title":"Administrative Support"},{"title":"Construction Support","description":"Specialized support services designed specifically for construction management teams.","imageSrc":"http://img.b2bpic.net/free-photo/construction-site-with-cranes_23-2148236112.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/engineers-working-construction-site_23-2148236113.jpg","description":"Seamless coordination between field teams, contractors, and project managers.","title":"Project Coordination"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..4249329
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,19 @@
+// Created by add_section_from_catalog (HeroSplit).
+
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroSplit
+        tag="RemoteSchedulers"
+        imageSrc="http://img.b2bpic.net/free-photo/business-people-meeting-office_23-2148908928.jpg"
+        secondaryButton={{"text":"Our Services","href":"#services"}}
+        description="Premium Remote Scheduling & Administrative Support Services for Project Management and Construction Executives. Streamline your operations with our dedicated US-based team."
+        title="Executive Support Solutions"
+        primaryButton={{"text":"Book Consultation","href":"#contact"}}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..34197a0
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,21 @@
+// 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="Proven Industry Results"
+        description="Trusted by leading project management and construction firms across the United States."
+        metrics={[{"value":"500+","description":"Projects Successfully Scheduled"},{"value":"98%","description":"Client Retention Rate"},{"description":"Hours Saved per Client Monthly","value":"40+"},{"value":"100%","description":"US-Based Support Team"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Product.tsx b/src/pages/HomePage/sections/Product.tsx
new file mode 100644
index 0000000..2b2d741
--- /dev/null
+++ b/src/pages/HomePage/sections/Product.tsx
@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "product" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductSection(): React.JSX.Element {
+  return (
+    <div id="product" data-section="product">
+        <SectionErrorBoundary name="product">
+              <FeaturesRevealCardsBento
+          tag="Product Suite"
+          title="Built for Modern Teams"
+          description="Powerful tools designed to minimize friction in remote scheduling."
+          items={[
+            {
+              title: "Global Meeting",
+              description: "Schedule cross-timezone meetings effortlessly.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/calendars-check-cross-red-blue_78370-9029.jpg",
+            },
+            {
+              title: "Availability",
+              description: "Set clear working hour blocks automatically.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/work-message-lightbox-arrangement_23-2149150447.jpg",
+            },
+            {
+              title: "Admin Dashboard",
+              description: "Full control over team scheduling permissions.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/freelancer-working-remotely-discussing-with-partners-online-using-laptop-sitting-kitchen-night-using-modern-technology-network-wireless-talking-virtual-meeting-midnight-doing-overtime_482257-14596.jpg",
+            },
+            {
+              title: "API Access",
+              description: "Integrate with your own internal tools.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/customer-loyalty-service-efficiency-strategy-concept_53876-21179.jpg",
+            },
+            {
+              title: "Sync Tools",
+              description: "Plug and play with major calendar providers.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/blue-house-background-with-cloud-other-elements_23-2147630782.jpg",
+            },
+            {
+              title: "User Groups",
+              description: "Manage access for different team segments.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/vintage-antique-reminder-down-wood_1203-4709.jpg",
+            },
+            {
+              title: "Smart Scaling",
+              description: "Ready for teams of any size.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-colleagues-office_23-2149411516.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/SocialProof.tsx b/src/pages/HomePage/sections/SocialProof.tsx
new file mode 100644
index 0000000..482fd55
--- /dev/null
+++ b/src/pages/HomePage/sections/SocialProof.tsx
@@ -0,0 +1,30 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Partners"
+          title="Powered by Industry Leaders"
+          description="We are proud to work with these innovative companies."
+          names={[
+            "Microsoft",
+            "Google",
+            "Slack",
+            "Zoom",
+            "Notion",
+            "Linear",
+            "Figma",
+            "GitHub",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..2f5c817
--- /dev/null
+++ 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="Social Proof"
+          title="Trusted by Leaders"
+          description="Hear what industry experts have to say about our platform."
+          testimonials={[
+            {
+              name: "Alex Rivet",
+              role: "CEO",
+              quote: "The best scheduling tool for our remote global team.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-businesswomen-relaxing-cafe_53876-30774.jpg",
+            },
+            {
+              name: "Sam Chen",
+              role: "CTO",
+              quote: "Automated everything we needed in days.",
+              imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project-professional-worker_482257-133253.jpg",
+            },
+            {
+              name: "Maria Lopez",
+              role: "Manager",
+              quote: "Finally, we don't worry about timezone math.",
+              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-businessman-standing-front-desk_23-2148187160.jpg",
+            },
+            {
+              name: "David Kim",
+              role: "Founder",
+              quote: "A true game changer for our distributed startup.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
+            },
+            {
+              name: "Sarah Lee",
+              role: "Lead",
+              quote: "Incredibly smooth onboarding experience.",
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}