diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f22e36d..5d058eb 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -18,22 +18,6 @@ export default function Layout() {
   {
     "name": "자주 묻는 질문",
     "href": "#faq"
-  },
-  {
-    "name": "Hero",
-    "href": "#hero"
-  },
-  {
-    "name": "Problem",
-    "href": "#problem"
-  },
-  {
-    "name": "Why Us",
-    "href": "#why-us"
-  },
-  {
-    "name": "Process",
-    "href": "#process"
   }
 ];
 
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index ef9e1f0..4fa874e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,142 +1,33 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import { Search, Wrench, Zap } from "lucide-react";
-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 ProblemSection from './HomePage/sections/Problem';
+import ServicesSection from './HomePage/sections/Services';
+import WhyUsSection from './HomePage/sections/WhyUs';
+import CasesSection from './HomePage/sections/Cases';
+import ProcessSection from './HomePage/sections/Process';
+import FaqSection from './HomePage/sections/Faq';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlay
-      tag="인천·부평·부천 누수 전문"
-      title="누수 때문에 고민이신가요? 확실하게 해결해 드립니다."
-      description="해결하지 못한다면 비용은 0원! 부부가 운영하는 정직한 누수탐지 공사 업체입니다. 상담은 자정까지 가능합니다."
-      primaryButton={{
-        text: "즉시 전화상담 010-2079-3721",        href: "tel:01020793721"}}
-      secondaryButton={{
-        text: "상세 문의하기",        href: "sms:01020793721"}}
-      imageSrc="http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="problem" data-section="problem">
-    <SectionErrorBoundary name="problem">
-          <AboutMediaOverlay
-      tag="이런 고민이 있으신가요?"
-      title="누수 문제를 정확히 파악하는 것이 우선입니다."
-      description="아랫집 누수 민원으로 당황하셨나요? 싱크대 아래나 벽면에서 원인 모를 물기가 보이시나요? 큰 공사가 될까 봐 걱정하지 마세요. 저희가 정밀 탐지로 원인 부위만 찾아 해결해 드립니다."
-      imageSrc="http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-12665.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProblemSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <FeaturesBorderGlow
-      tag="제공 서비스"
-      title="누수와 관련된 모든 문제를 해결합니다."
-      description="공압 검사, 가스 탐지, 청음 탐지 등 최신 장비를 활용하여 정밀하게 찾아내고 확실하게 수리합니다."
-      features={[
-        {
-          title: "누수탐지 및 공사",          description: "배관 누수 원인을 정확히 찾아내는 전문 탐지",          icon: Search,
-        },
-        {
-          title: "배관 문제 해결",          description: "온수 및 난방 배관 누수 전문 정비",          icon: Zap,
-        },
-        {
-          title: "수도 설비 공사",          description: "싱크대, 천장, 벽면 등 수도 설비 전반 수리",          icon: Wrench,
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="why-us" data-section="why-us">
-    <SectionErrorBoundary name="why-us">
-          <AboutMediaOverlay
-      tag="부부 운영 안심 업체"
-      title="왜 '해온누수'를 선택해야 할까요?"
-      description="당일 출장과 당일 해결을 원칙으로 하며, 필요한 부분만 정확히 수리하여 불필요한 비용을 줄입니다. 작업 후 재검사까지 꼼꼼하게 확인합니다."
-      imageSrc="http://img.b2bpic.net/free-photo/mechanical-wrench-desk_23-2148557960.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <WhyUsSection />
 
-  <div id="cases" data-section="cases">
-    <SectionErrorBoundary name="cases">
-          <FeaturesImageBento
-      tag="해결 사례"
-      title="많은 고객님이 저희의 정직한 시공을 경험하셨습니다."
-      description="누수 탐지 및 완벽 수리 사례입니다."
-      items={[
-        {
-          title: "아랫집 누수 민원 해결",          description: "원인 불명 누수 탐지 후 성공적인 수리",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746388.jpg"},
-        {
-          title: "싱크대 하부 분배기 보수",          description: "싱크대 밑 난방 배관 누수 완벽 해결",          imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-kitchen-rack-with-pull-out-faucet-sprayer-rinsing-drainer_169016-69667.jpg"},
-        {
-          title: "산곡동 빌라 온수배관 사례",          description: "지속적인 물 샘 현상을 탐지하여 정밀 수리",          imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-adjusting-autonomous-heating_1303-26539.jpg"},
-        {
-          title: "벽면 누수 탐지 사례",          description: "벽체 속 배관 정밀 탐지 해결",          imageSrc: "http://img.b2bpic.net/free-photo/uniform-construction-tools-wooden-table-top-view_169016-24245.jpg"},
-        {
-          title: "천장 누수 해결",          description: "위층 누수 차단 및 배관 공사",          imageSrc: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg"},
-        {
-          title: "수도 설비 보수",          description: "노후 배관 교체 작업 사례",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-men-working-together_23-2148752013.jpg"},
-        {
-          title: "긴급 누수 상황 해결",          description: "당일 출장 후 빠른 누수 원인 복구",          imageSrc: "http://img.b2bpic.net/free-photo/repair-tools-kit-succulent-plant-wooden-background_23-2148393171.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <CasesSection />
 
-  <div id="process" data-section="process">
-    <SectionErrorBoundary name="process">
-          <MetricsFeatureCards
-      tag="작업 과정"
-      title="누수탐지 및 수리 프로세스"
-      description="과학적인 장비를 이용해 원인을 찾고, 최소한의 비용으로 확실한 결과만 제공합니다."
-      metrics={[
-        {
-          value: "01",          title: "정밀 진단",          features: [
-            "상담 문의",            "현장 방문",            "공압 검사"],
-        },
-        {
-          value: "02",          title: "원인 분석",          features: [
-            "가스 탐지",            "청음 탐지",            "원인 부위 특정"],
-        },
-        {
-          value: "03",          title: "수리 및 재검사",          features: [
-            "부분 수리",            "재검사 확인",            "사후 정리"],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProcessSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="자주 묻는 질문"
-      title="무엇이든 물어보세요."
-      description="누수 문제와 관련된 궁금증을 해결해 드립니다."
-      items={[
-        {
-          question: "비용은 어떻게 결정되나요?",          answer: "현장 상황과 누수 부위에 따라 다르지만, 정직한 견적으로 작업합니다."},
-        {
-          question: "당일 수리가 가능한가요?",          answer: "네, 최대한 당일 해결을 목표로 정밀하게 작업해 드립니다."},
-        {
-          question: "해결 못 하면 어떻게 하나요?",          answer: "해결하지 못한다면 비용을 일절 받지 않습니다."},
-        {
-          question: "상담 시간은 어떻게 되나요?",          answer: "자정까지 전화 상담이 가능합니다."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/Cases.tsx b/src/pages/HomePage/sections/Cases.tsx
new file mode 100644
index 0000000..83e6d65
--- /dev/null
+++ b/src/pages/HomePage/sections/Cases.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "cases" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function CasesSection(): React.JSX.Element {
+  return (
+    <div id="cases" data-section="cases">
+        <SectionErrorBoundary name="cases">
+              <FeaturesImageBento
+          tag="해결 사례"
+          title="많은 고객님이 저희의 정직한 시공을 경험하셨습니다."
+          description="누수 탐지 및 완벽 수리 사례입니다."
+          items={[
+            {
+              title: "아랫집 누수 민원 해결",          description: "원인 불명 누수 탐지 후 성공적인 수리",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-plumber_23-2150746388.jpg"},
+            {
+              title: "싱크대 하부 분배기 보수",          description: "싱크대 밑 난방 배관 누수 완벽 해결",          imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-kitchen-rack-with-pull-out-faucet-sprayer-rinsing-drainer_169016-69667.jpg"},
+            {
+              title: "산곡동 빌라 온수배관 사례",          description: "지속적인 물 샘 현상을 탐지하여 정밀 수리",          imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-adjusting-autonomous-heating_1303-26539.jpg"},
+            {
+              title: "벽면 누수 탐지 사례",          description: "벽체 속 배관 정밀 탐지 해결",          imageSrc: "http://img.b2bpic.net/free-photo/uniform-construction-tools-wooden-table-top-view_169016-24245.jpg"},
+            {
+              title: "천장 누수 해결",          description: "위층 누수 차단 및 배관 공사",          imageSrc: "http://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg"},
+            {
+              title: "수도 설비 보수",          description: "노후 배관 교체 작업 사례",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-men-working-together_23-2148752013.jpg"},
+            {
+              title: "긴급 누수 상황 해결",          description: "당일 출장 후 빠른 누수 원인 복구",          imageSrc: "http://img.b2bpic.net/free-photo/repair-tools-kit-succulent-plant-wooden-background_23-2148393171.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..70cfdd3
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,30 @@
+// 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';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="자주 묻는 질문"
+          title="무엇이든 물어보세요."
+          description="누수 문제와 관련된 궁금증을 해결해 드립니다."
+          items={[
+            {
+              question: "비용은 어떻게 결정되나요?",          answer: "현장 상황과 누수 부위에 따라 다르지만, 정직한 견적으로 작업합니다."},
+            {
+              question: "당일 수리가 가능한가요?",          answer: "네, 최대한 당일 해결을 목표로 정밀하게 작업해 드립니다."},
+            {
+              question: "해결 못 하면 어떻게 하나요?",          answer: "해결하지 못한다면 비용을 일절 받지 않습니다."},
+            {
+              question: "상담 시간은 어떻게 되나요?",          answer: "자정까지 전화 상담이 가능합니다."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..793325d
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,25 @@
+// 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 HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlay
+          tag="인천·부평·부천 누수 전문"
+          title="누수 때문에 고민이신가요? 확실하게 해결해 드립니다."
+          description="해결하지 못한다면 비용은 0원! 부부가 운영하는 정직한 누수탐지 공사 업체입니다. 상담은 자정까지 가능합니다."
+          primaryButton={{
+            text: "즉시 전화상담 010-2079-3721",        href: "tel:01020793721"}}
+          secondaryButton={{
+            text: "상세 문의하기",        href: "sms:01020793721"}}
+          imageSrc="http://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Problem.tsx b/src/pages/HomePage/sections/Problem.tsx
new file mode 100644
index 0000000..fe0aea7
--- /dev/null
+++ b/src/pages/HomePage/sections/Problem.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "problem" section.
+
+import React from 'react';
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProblemSection(): React.JSX.Element {
+  return (
+    <div id="problem" data-section="problem">
+        <SectionErrorBoundary name="problem">
+              <AboutMediaOverlay
+          tag="이런 고민이 있으신가요?"
+          title="누수 문제를 정확히 파악하는 것이 우선입니다."
+          description="아랫집 누수 민원으로 당황하셨나요? 싱크대 아래나 벽면에서 원인 모를 물기가 보이시나요? 큰 공사가 될까 봐 걱정하지 마세요. 저희가 정밀 탐지로 원인 부위만 찾아 해결해 드립니다."
+          imageSrc="http://img.b2bpic.net/free-photo/photo-wall-texture-pattern_58702-12665.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Process.tsx b/src/pages/HomePage/sections/Process.tsx
new file mode 100644
index 0000000..1067057
--- /dev/null
+++ b/src/pages/HomePage/sections/Process.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "process" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProcessSection(): React.JSX.Element {
+  return (
+    <div id="process" data-section="process">
+        <SectionErrorBoundary name="process">
+              <MetricsFeatureCards
+          tag="작업 과정"
+          title="누수탐지 및 수리 프로세스"
+          description="과학적인 장비를 이용해 원인을 찾고, 최소한의 비용으로 확실한 결과만 제공합니다."
+          metrics={[
+            {
+              value: "01",          title: "정밀 진단",          features: [
+                "상담 문의",            "현장 방문",            "공압 검사"],
+            },
+            {
+              value: "02",          title: "원인 분석",          features: [
+                "가스 탐지",            "청음 탐지",            "원인 부위 특정"],
+            },
+            {
+              value: "03",          title: "수리 및 재검사",          features: [
+                "부분 수리",            "재검사 확인",            "사후 정리"],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..871ae3f
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,32 @@
+// 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 FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
+import { Search, Wrench, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <FeaturesBorderGlow
+          tag="제공 서비스"
+          title="누수와 관련된 모든 문제를 해결합니다."
+          description="공압 검사, 가스 탐지, 청음 탐지 등 최신 장비를 활용하여 정밀하게 찾아내고 확실하게 수리합니다."
+          features={[
+            {
+              title: "누수탐지 및 공사",          description: "배관 누수 원인을 정확히 찾아내는 전문 탐지",          icon: Search,
+            },
+            {
+              title: "배관 문제 해결",          description: "온수 및 난방 배관 누수 전문 정비",          icon: Zap,
+            },
+            {
+              title: "수도 설비 공사",          description: "싱크대, 천장, 벽면 등 수도 설비 전반 수리",          icon: Wrench,
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/WhyUs.tsx b/src/pages/HomePage/sections/WhyUs.tsx
new file mode 100644
index 0000000..6fa0a1d
--- /dev/null
+++ b/src/pages/HomePage/sections/WhyUs.tsx
@@ -0,0 +1,21 @@
+// 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 AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function WhyUsSection(): React.JSX.Element {
+  return (
+    <div id="why-us" data-section="why-us">
+        <SectionErrorBoundary name="why-us">
+              <AboutMediaOverlay
+          tag="부부 운영 안심 업체"
+          title="왜 '해온누수'를 선택해야 할까요?"
+          description="당일 출장과 당일 해결을 원칙으로 하며, 필요한 부분만 정확히 수리하여 불필요한 비용을 줄입니다. 작업 후 재검사까지 꼼꼼하게 확인합니다."
+          imageSrc="http://img.b2bpic.net/free-photo/mechanical-wrench-desk_23-2148557960.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}