From b4e4b9f34f564528a0c555f0e7a33ba996697ec5 Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Fri, 17 Apr 2026 13:26:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=BD=98=ED=85=90=EC=B8=A0=20=ED=99=95=EC=9E=A5=20?=
 =?UTF-8?q?(Stats/Process/Categories/Benefits/Blog/FAQ/CTA)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hero + Features + Services 아래에 7개 섹션 추가:
- Stats 밴드 (4개 핵심 지표)
- How it works 3단계 프로세스
- 7개 업종 대분류 카드 그리드
- 역할별 혜택(매도인/매수인/업체)
- 최신 블로그 포스트 4개
- FAQ 3개 프리뷰
- 최종 CTA (다크 배경)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 279 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 277 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index f751692..ec2478e 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,4 +1,76 @@
 import Link from 'next/link';
+import { getPostsSortedByDate } from './blog/posts';
+import { INDUSTRY_MAJORS } from './stores/industries';
+
+const PROCESS_STEPS = [
+  {
+    num: '01',
+    title: '매장 등록',
+    desc: '업종·지역·권리금·월매출 등 기본 정보를 입력하면 운영팀 검수를 거쳐 공개됩니다.',
+  },
+  {
+    num: '02',
+    title: '자동 매칭',
+    desc: '등록된 매장은 인수 희망자와 인증된 철거·인테리어 업체에 동시에 노출됩니다.',
+  },
+  {
+    num: '03',
+    title: '계약·정산',
+    desc: '표준 계약서, 에스크로 결제, 단계별 검수 승인으로 안전하게 거래가 마무리됩니다.',
+  },
+];
+
+const STATS = [
+  { value: '1회', label: '매장 등록으로', sub: '인수자·철거·인테리어 동시 매칭' },
+  { value: '7개', label: '업종 대분류', sub: '49개 소분류까지 세분화' },
+  { value: '2~4주', label: '평균 매칭 기간', sub: '운영팀 검수 포함' },
+  { value: '에스크로', label: '단계별 정산', sub: '사전·중간·최종 검수 후 해제' },
+];
+
+const BENEFITS = [
+  {
+    label: '매도인',
+    title: '깔끔한 마무리',
+    points: [
+      '매장 한 번 등록으로 인수자·철거업체 동시 매칭',
+      '원상복구 비용을 인수자에게 이전하는 양도 우선 시도',
+      '정부 지원금(희망리턴패키지) 자격 자동 조회',
+    ],
+  },
+  {
+    label: '매수인',
+    title: '검증된 시작',
+    points: [
+      '운영팀 검수를 통과한 매물만 공개',
+      '권리금·월매출·월수익·회수기간까지 한 페이지에 공개',
+      '인수 후 인테리어 재시공까지 플랫폼에서 연결',
+    ],
+  },
+  {
+    label: '업체',
+    title: '안정적 수주',
+    points: [
+      '인증 통과 후 지역·업종 맞춤 안건이 자동 전달',
+      '에스크로 선입금으로 대금 회수 리스크 최소화',
+      '검수 통과 시 단계별 정산으로 현금흐름 개선',
+    ],
+  },
+];
+
+const FAQ_PREVIEW = [
+  {
+    q: '매장 등록은 무료인가요?',
+    a: '현재 베타 기간 중에는 매장 등록과 기본 매칭이 무료입니다. 계약 성사 시에만 표준 중개 수수료가 발생합니다.',
+  },
+  {
+    q: '월매출·월수익 정보는 누가 검증하나요?',
+    a: '매출·수익 정보는 매도인이 제공한 자료이며 법적 근거로 사용할 수 없습니다. 거래 전 실사·세무 자료 검증이 필요합니다.',
+  },
+  {
+    q: '권리금 회수기간은 어떻게 계산하나요?',
+    a: '권리금 ÷ 월수익으로 자동 계산되어 매장 상세 페이지에 노출됩니다.',
+  },
+];
 
 const FEATURES = [
   {
@@ -56,6 +128,8 @@ const SERVICES = [
 ];
 
 export default function HomePage() {
+  const latestPosts = getPostsSortedByDate().slice(0, 4);
+
   return (
     <main className="relative overflow-hidden bg-warm-50 font-body">
       {/* Gradient Mesh Background */}
@@ -211,8 +285,209 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Footer accent line */}
-      <div className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-ink/10 to-transparent" />
+      {/* Stats band */}
+      <section className="relative border-y border-ink/5 bg-white/50 backdrop-blur-sm">
+        <div className="mx-auto grid max-w-6xl grid-cols-2 gap-8 px-6 py-14 md:grid-cols-4">
+          {STATS.map((s) => (
+            <div key={s.label} className="text-center">
+              <p className="font-display text-4xl font-black text-ink">{s.value}</p>
+              <p className="mt-2 text-sm font-medium text-ink">{s.label}</p>
+              <p className="mt-1 text-xs text-ink-muted">{s.sub}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="relative mx-auto max-w-6xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">How it works</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            매장 한 번 등록, 세 단계로 완료
+          </h2>
+          <p className="mt-4 text-ink-light">
+            인수·양도·철거·인테리어·지원금까지 흩어진 절차를 하나의 흐름으로 묶었습니다
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {PROCESS_STEPS.map((step) => (
+            <div
+              key={step.num}
+              className="relative rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+            >
+              <span className="font-display text-5xl font-bold text-warm-400/30">{step.num}</span>
+              <h3 className="mt-4 font-display text-xl font-bold text-ink">{step.title}</h3>
+              <p className="mt-3 text-sm leading-relaxed text-ink-light">{step.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Industry categories showcase */}
+      <section className="relative border-t border-ink/5 bg-warm-100/40">
+        <div className="mx-auto max-w-6xl px-6 py-24">
+          <div className="mb-12 flex items-end justify-between">
+            <div>
+              <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Categories</p>
+              <h2 className="mt-3 font-display text-3xl font-bold text-ink">지원 업종</h2>
+              <p className="mt-3 text-ink-light">
+                휴게음식점부터 기타업종까지 7개 대분류, 49개 소분류를 지원합니다
+              </p>
+            </div>
+            <Link
+              href="/stores"
+              className="hidden text-sm font-medium text-warm-700 hover:text-warm-600 md:inline-flex"
+            >
+              전체 매장 보기 →
+            </Link>
+          </div>
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-7">
+            {INDUSTRY_MAJORS.map((m) => (
+              <Link
+                key={m.code}
+                href={`/stores?industryMajor=${m.code}`}
+                className="rounded-2xl border border-ink/5 bg-white/70 p-5 text-center backdrop-blur-sm card-lift"
+              >
+                <p className="font-display font-bold text-ink">{m.label}</p>
+                <p className="mt-1 text-xs text-ink-muted">{m.children.length}개 소분류</p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits for three roles */}
+      <section className="relative mx-auto max-w-6xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Benefits</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            각자에게 필요한 혜택
+          </h2>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+          {BENEFITS.map((b) => (
+            <div
+              key={b.label}
+              className="rounded-2xl border border-ink/5 bg-white/70 p-8 backdrop-blur-sm"
+            >
+              <p className="text-xs font-medium tracking-widest uppercase text-warm-700">{b.label}</p>
+              <h3 className="mt-3 font-display text-2xl font-bold text-ink">{b.title}</h3>
+              <ul className="mt-5 space-y-3">
+                {b.points.map((p) => (
+                  <li key={p} className="flex gap-2 text-sm leading-relaxed text-ink-light">
+                    <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-warm-500" />
+                    {p}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Latest blog posts */}
+      <section className="relative border-t border-ink/5 bg-warm-50/60">
+        <div className="mx-auto max-w-6xl px-6 py-24">
+          <div className="mb-12 flex items-end justify-between">
+            <div>
+              <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">Journal</p>
+              <h2 className="mt-3 font-display text-3xl font-bold text-ink">실무 가이드</h2>
+              <p className="mt-3 text-ink-light">
+                폐업 절차, 지원금 신청, 상권 분석 — 현장에서 자주 묻는 질문을 글로 정리합니다
+              </p>
+            </div>
+            <Link
+              href="/blog"
+              className="hidden text-sm font-medium text-warm-700 hover:text-warm-600 md:inline-flex"
+            >
+              블로그 전체 보기 →
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+            {latestPosts.map((post) => (
+              <Link
+                key={post.slug}
+                href={`/blog/${post.slug}`}
+                className="group flex flex-col rounded-2xl border border-ink/5 bg-white/70 p-6 backdrop-blur-sm card-lift"
+              >
+                <span className="inline-flex w-fit rounded-full bg-warm-100 px-2.5 py-0.5 text-xs font-medium text-warm-800">
+                  {post.category}
+                </span>
+                <h3 className="mt-3 flex-1 font-display font-bold leading-snug text-ink group-hover:text-warm-700 transition-colors line-clamp-2">
+                  {post.title}
+                </h3>
+                <p className="mt-2 text-xs leading-relaxed text-ink-muted line-clamp-3">
+                  {post.description}
+                </p>
+                <p className="mt-4 text-xs text-ink-muted">
+                  {post.publishedAt} · {post.readMinutes}분 읽기
+                </p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ preview */}
+      <section className="relative mx-auto max-w-4xl px-6 py-24">
+        <div className="mb-12 text-center">
+          <p className="text-xs font-medium tracking-[0.3em] uppercase text-warm-600">FAQ</p>
+          <h2 className="mt-4 font-display text-3xl font-bold text-ink sm:text-4xl">
+            자주 묻는 질문
+          </h2>
+        </div>
+        <div className="space-y-3">
+          {FAQ_PREVIEW.map((f, i) => (
+            <details
+              key={i}
+              className="group rounded-2xl border border-ink/5 bg-white/70 p-6 backdrop-blur-sm"
+            >
+              <summary className="flex cursor-pointer items-start justify-between gap-4 list-none">
+                <span className="font-display font-semibold text-ink">{f.q}</span>
+                <span className="mt-1 shrink-0 text-ink-muted transition-transform group-open:rotate-45">
+                  +
+                </span>
+              </summary>
+              <p className="mt-4 text-sm leading-relaxed text-ink-light">{f.a}</p>
+            </details>
+          ))}
+        </div>
+        <div className="mt-10 text-center">
+          <Link
+            href="/faq"
+            className="inline-flex items-center gap-2 text-sm font-medium text-warm-700 hover:text-warm-600"
+          >
+            전체 FAQ 보기
+            <span>→</span>
+          </Link>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="relative border-t border-ink/5 bg-ink">
+        <div className="mx-auto max-w-5xl px-6 py-20 text-center">
+          <h2 className="font-display text-3xl font-bold text-warm-50 sm:text-4xl">
+            지금 매장을 등록하거나 둘러보세요
+          </h2>
+          <p className="mt-4 text-sm text-warm-200 sm:text-base">
+            한 번의 등록으로 인수자, 철거업체, 인테리어업체, 지원금까지 연결됩니다
+          </p>
+          <div className="mt-10 flex flex-wrap justify-center gap-3">
+            <Link
+              href="/stores/new"
+              className="rounded-full bg-warm-500 px-8 py-4 text-sm font-medium text-warm-50 transition-colors hover:bg-warm-400"
+            >
+              매장 등록
+            </Link>
+            <Link
+              href="/stores"
+              className="rounded-full border-2 border-warm-200/30 px-8 py-4 text-sm font-medium text-warm-50 transition-colors hover:border-warm-200/60"
+            >
+              매장 둘러보기
+            </Link>
+          </div>
+        </div>
+      </section>
     </main>
   );
 }