From 3b8a84d0d6ab6d879cb8aca44dcd11127dffe253 Mon Sep 17 00:00:00 2001
From: SiteAgent Bot <bot@siteagent.ai>
Date: Thu, 22 Jan 2026 18:52:48 +0800
Subject: [PATCH] manual save(2026-01-22 18:52)

---
 src/App.tsx                     |  35 +++++--
 src/components/SectionShell.tsx |  46 ++++++++++
 src/components/SiteLayout.tsx   |  17 ++++
 src/pages/Contact.tsx           | 109 ++++++++++++++++++++++
 src/pages/Discovery.tsx         |  58 ++++++++++++
 src/pages/Home.tsx              | 156 +++++++++++++++++++++++---------
 src/pages/How.tsx               |  70 ++++++++++++++
 src/pages/Proof.tsx             |  58 ++++++++++++
 src/pages/Solutions.tsx         |  58 ++++++++++++
 src/pages/System.tsx            |  70 ++++++++++++++
 src/pages/Why.tsx               |  58 ++++++++++++
 11 files changed, 687 insertions(+), 48 deletions(-)
 create mode 100644 src/components/SectionShell.tsx
 create mode 100644 src/components/SiteLayout.tsx
 create mode 100644 src/pages/Contact.tsx
 create mode 100644 src/pages/Discovery.tsx
 create mode 100644 src/pages/How.tsx
 create mode 100644 src/pages/Proof.tsx
 create mode 100644 src/pages/Solutions.tsx
 create mode 100644 src/pages/System.tsx
 create mode 100644 src/pages/Why.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 257538e..93a02de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,38 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { SiteLayout } from './components/SiteLayout'
 import { Home } from './pages/Home'
-import { PostDetail } from './pages/PostDetail'
-import { CategoriesPage } from './pages/Categories'
-import { CategoryDetail } from './pages/CategoryDetail'
+import { Why } from './pages/Why'
+import { How } from './pages/How'
+import { System } from './pages/System'
+import { Discovery } from './pages/Discovery'
+import { Solutions } from './pages/Solutions'
+import { Proof } from './pages/Proof'
+import { Contact } from './pages/Contact'
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/posts/:slug" element={<PostDetail />} />
-        <Route path="/categories" element={<CategoriesPage />} />
-        <Route path="/categories/:slug" element={<CategoryDetail />} />
+        <Route element={<SiteLayout />}>
+          <Route path="/" element={<Home />} />
+          <Route path="/why" element={<Why />} />
+          <Route path="/how" element={<How />} />
+          <Route path="/system" element={<System />} />
+          <Route path="/discovery" element={<Discovery />} />
+          <Route path="/solutions" element={<Solutions />} />
+          <Route path="/proof" element={<Proof />} />
+          <Route path="/contact" element={<Contact />} />
+
+          <Route
+            path="*"
+            element={
+              <div className="container mx-auto px-4 py-16">
+                <h1 className="text-2xl font-semibold text-gray-900">页面不存在</h1>
+                <p className="text-gray-600 mt-2">请通过顶部导航回到主线内容。</p>
+              </div>
+            }
+          />
+        </Route>
       </Routes>
     </Router>
   )
diff --git a/src/components/SectionShell.tsx b/src/components/SectionShell.tsx
new file mode 100644
index 0000000..a1dcbd8
--- /dev/null
+++ b/src/components/SectionShell.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+type HeadingTag = 'h1' | 'h2'
+
+export type SectionShellProps = {
+  sectionKey: string
+  title: string
+  lead?: string
+  headingAs?: HeadingTag
+  notes?: string[]
+  children?: React.ReactNode
+}
+
+export const SectionShell: React.FC<SectionShellProps> = ({
+  sectionKey,
+  title,
+  lead,
+  headingAs = 'h2',
+  notes,
+  children,
+}) => {
+  const Heading = headingAs
+
+  return (
+    <section aria-labelledby={sectionKey} className="py-12">
+      <div className="container mx-auto px-4">
+        <div className="max-w-3xl">
+          <Heading id={sectionKey} className="text-2xl font-semibold text-gray-900 tracking-tight">
+            {title}
+          </Heading>
+          {lead ? <p className="mt-3 text-gray-600 leading-relaxed">{lead}</p> : null}
+
+          {notes?.length ? (
+            <ul className="mt-5 space-y-1 text-sm text-gray-500 list-disc pl-5">
+              {notes.map((note) => (
+                <li key={note}>{note}</li>
+              ))}
+            </ul>
+          ) : null}
+
+          {children ? <div className="mt-6">{children}</div> : null}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/SiteLayout.tsx b/src/components/SiteLayout.tsx
new file mode 100644
index 0000000..e141d19
--- /dev/null
+++ b/src/components/SiteLayout.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Outlet, ScrollRestoration } from 'react-router-dom'
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const SiteLayout: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-white text-gray-900">
+      <Header />
+      <main id="main" className="bg-gray-50">
+        <Outlet />
+      </main>
+      <Footer />
+      <ScrollRestoration />
+    </div>
+  )
+}
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
new file mode 100644
index 0000000..65a053a
--- /dev/null
+++ b/src/pages/Contact.tsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const ConversationInvite: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ConversationInvite"
+      title="ConversationInvite｜邀请式文案"
+      lead="提供低压力下一步：先对齐问题与边界，再决定是否合作。"
+      headingAs="h1"
+      notes={['边界：不制造紧迫感，不做硬销售', '输出：会谈目标与准备材料清单']}
+    />
+  )
+}
+
+const ContactForm: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ContactForm"
+      title="ContactForm｜基础表单"
+      lead="最小字段：姓名/公司/角色/邮箱/你正在面对的决策问题。"
+      notes={['工程：前端先做静态表单，后续接入表单服务或自建 API', '合规：隐私声明与数据用途说明']}
+    >
+      <form className="grid gap-4 mt-6" onSubmit={(e) => e.preventDefault()} aria-label="联系表单">
+        <div className="grid gap-1">
+          <label className="text-sm text-gray-700" htmlFor="name">
+            姓名
+          </label>
+          <input
+            id="name"
+            name="name"
+            className="h-11 px-3 rounded-md border border-gray-300 bg-white"
+            autoComplete="name"
+          />
+        </div>
+
+        <div className="grid gap-1">
+          <label className="text-sm text-gray-700" htmlFor="company">
+            公司
+          </label>
+          <input id="company" name="company" className="h-11 px-3 rounded-md border border-gray-300 bg-white" />
+        </div>
+
+        <div className="grid gap-1">
+          <label className="text-sm text-gray-700" htmlFor="role">
+            角色
+          </label>
+          <input id="role" name="role" className="h-11 px-3 rounded-md border border-gray-300 bg-white" />
+        </div>
+
+        <div className="grid gap-1">
+          <label className="text-sm text-gray-700" htmlFor="email">
+            邮箱
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            className="h-11 px-3 rounded-md border border-gray-300 bg-white"
+            autoComplete="email"
+          />
+        </div>
+
+        <div className="grid gap-1">
+          <label className="text-sm text-gray-700" htmlFor="message">
+            你正在面对的决策问题
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            rows={5}
+            className="px-3 py-2 rounded-md border border-gray-300 bg-white"
+          />
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            className="h-11 px-4 rounded-md bg-gray-900 text-white text-sm font-medium hover:bg-gray-800"
+          >
+            提交（占位）
+          </button>
+          <p className="text-xs text-gray-500">V1 先占位，后续接入表单服务。</p>
+        </div>
+      </form>
+    </SectionShell>
+  )
+}
+
+const AlternativeCTA: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="AlternativeCTA"
+      title="AlternativeCTA｜其他沟通方式"
+      lead="提供替代入口：邮件、引荐、日程链接（后续再填）。"
+      notes={['边界：给选择，不强迫用户留资', '可扩展：日程工具/企业微信/加密附件入口']}
+    />
+  )
+}
+
+export const Contact: React.FC = () => {
+  return (
+    <div>
+      <ConversationInvite />
+      <ContactForm />
+      <AlternativeCTA />
+    </div>
+  )
+}
diff --git a/src/pages/Discovery.tsx b/src/pages/Discovery.tsx
new file mode 100644
index 0000000..3416e17
--- /dev/null
+++ b/src/pages/Discovery.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const DiscoveryPositioning: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="DiscoveryPositioning"
+      title="DiscoveryPositioning｜定位说明"
+      lead="Discovery 是内容系统入口，不是博客：承载思想、框架与决策输入。"
+      headingAs="h1"
+      notes={['边界：内容系统定位与使用方式', '约束：不扩展成传统 Blog 导航']}
+    />
+  )
+}
+
+const ContentTypes: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ContentTypes"
+      title="ContentTypes｜内容类型入口"
+      lead="为后续内容建模预留入口，例如：框架、洞察、清单、案例、方法。"
+      notes={['标签：国家 / 行业 / PSTEL', '可扩展：A/B 入口样式实验']}
+    />
+  )
+}
+
+const LatestInsights: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="LatestInsights"
+      title="LatestInsights｜最新内容流"
+      lead="展示最新洞察流（后续可接 MDX / Headless CMS）。"
+      notes={['边界：内容流组件，不做“按时间归档”的博客结构', '可扩展：过滤器与推荐算法']}
+    />
+  )
+}
+
+const DecisionValue: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="DecisionValue"
+      title="DecisionValue｜内容如何用于决策"
+      lead="说明内容如何进入决策流程：提出问题、形成假设、验证、沉淀。"
+      notes={['边界：决策链路说明', '输出：内容到行动的映射方式']}
+    />
+  )
+}
+
+export const Discovery: React.FC = () => {
+  return (
+    <div>
+      <DiscoveryPositioning />
+      <ContentTypes />
+      <LatestInsights />
+      <DecisionValue />
+    </div>
+  )
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index cea6ae3..74ab9c0 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,48 +1,122 @@
-import React, { useEffect, useState } from 'react'
-import { Header } from '../components/Header'
-import { Footer } from '../components/Footer'
-import { PostCard } from '../components/PostCard'
-import { PostCardSkeleton } from '../components/PostCardSkeleton'
-import { Posts } from '../clientsdk/sdk.gen'
-import { createClient } from '../clientsdk/client'
-import { customQuerySerializer } from '../clientsdk/querySerializer'
-import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
 
-const client = createClient({
-  baseUrl: API_URL,
-  querySerializer: customQuerySerializer,
-  headers: {
-    'X-Tenant-Slug': TENANT_SLUG,
-    'X-API-Key': TENANT_API_KEY,
-  },
-})
+const HeroWorldView: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="HeroWorldView"
+      title="HeroWorldView｜世界观判断"
+      headingAs="h1"
+      lead="一个思想驱动型官网的开场：先定义全球化决策的世界观与判断框架。"
+      notes={['边界：世界观与主张，不展示产品 UI', '连接：引出决策不可控的问题']}
+    />
+  )
+}
+
+const DecisionProblem: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="DecisionProblem"
+      title="DecisionProblem｜决策不可控"
+      lead="说明决策在信息噪音、约束冲突与时间压力下为何不可控。"
+      notes={['边界：问题机制与代价', '输出：决策痛点的共同语言']}
+    />
+  )
+}
+
+const CoreThesis: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="CoreThesis"
+      title="CoreThesis｜反常识观点"
+      lead="用一句核心论断把读者拉到同一认知：合规与增长是同一件事的两面。"
+      notes={['边界：只讲主张与论证线索', '可扩展：对比式表达与关键证据']}
+    />
+  )
+}
+
+const Methodology: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="Methodology"
+      title="Methodology｜方法论来源"
+      lead="交代方法论来自哪些实践与验证路径，为 How 页面做铺垫。"
+      notes={['边界：来源与原则', '连接：跳转到 How']}
+    />
+  )
+}
+
+const SystemOverview: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="SystemOverview"
+      title="SystemOverview｜系统级解法"
+      lead="用系统视角解释：不是功能堆叠，而是可复用的决策-执行系统。"
+      notes={['边界：系统全景，不拆到模块细节', '连接：跳转到 System']}
+    />
+  )
+}
+
+const DiscoveryIntro: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="DiscoveryIntro"
+      title="DiscoveryIntro｜决策雷达"
+      lead="Discovery 作为持续的决策输入：思想、框架与证据的入口。"
+      notes={['边界：内容入口，不做博客化归档', '连接：跳转到 Discovery']}
+    />
+  )
+}
+
+const MeasurableOutcome: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="MeasurableOutcome"
+      title="MeasurableOutcome｜可度量结果"
+      lead="强调可验证：输出物、指标、复盘机制，而非宏大叙事。"
+      notes={['边界：指标与结果类型，不披露敏感数据', '可扩展：指标卡片/结果对照']}
+    />
+  )
+}
+
+const TrustProof: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="TrustProof"
+      title="TrustProof｜权威背书"
+      lead="放置信任材料：客户类型、合作方式、第三方背书（占位）。"
+      notes={['边界：信任材料分类与呈现方式', '连接：跳转到 Proof']}
+    />
+  )
+}
+
+const SoftCTA: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="SoftCTA"
+      title="SoftCTA｜行动入口"
+      lead="提供低压力行动入口：先对齐问题，再进入下一步。"
+      notes={['边界：弱 CTA，避免硬销售', '连接：跳转到 Contact']}
+    />
+  )
+}
 
 export const Home: React.FC = () => {
-  const [posts, setPosts] = useState<any[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  return (
+    <div>
+      <HeroWorldView />
+      <DecisionProblem />
+      <CoreThesis />
+      <Methodology />
+      <SystemOverview />
+      <DiscoveryIntro />
+      <MeasurableOutcome />
+      <TrustProof />
+      <SoftCTA />
+    </div>
+  )
+}
 
-  useEffect(() => {
-    const fetchPosts = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-        
-        const response = await Posts.listPosts({
-          client,
-          query: {
-            limit: 10,
-            sort: '-createdAt',
-          },
-        })
-        
-        setPosts((response as any)?.data?.docs || [])
-      } catch (err) {
-        setError(err instanceof Error ? err.message : '加载失败')
-        console.error('获取文章失败:', err)
-      } finally {
-        setLoading(false)
-      }
     }
 
     fetchPosts()
diff --git a/src/pages/How.tsx b/src/pages/How.tsx
new file mode 100644
index 0000000..ce87e4d
--- /dev/null
+++ b/src/pages/How.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const MethodologyOrigin: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="MethodologyOrigin"
+      title="MethodologyOrigin｜方法论来源"
+      lead="交代方法论从哪里来、如何被验证（研究、实战、合规场景）。"
+      headingAs="h1"
+      notes={['边界：原则与来源，不展开产品模块', '可扩展：引用研究/白皮书/框架图']}
+    />
+  )
+}
+
+const ComplianceAsGrowth: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ComplianceAsGrowth"
+      title="ComplianceAsGrowth｜核心思想"
+      lead="合规不是约束，而是增长的结构性机会（关键论点）。"
+      notes={['边界：讲“思想”，不讲功能清单', '输出：可复述的一句话核心主张']}
+    />
+  )
+}
+
+const WhyAgentSystem: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="WhyAgentSystem"
+      title="WhyAgentSystem｜为什么是 Agent"
+      lead="解释为什么需要 Agent 协作体系来处理信息密度、约束冲突与执行闭环。"
+      notes={['边界：概念与机制，不落具体实现细节', '可扩展：Agent 角色/协作图']}
+    />
+  )
+}
+
+const ExecutionModel: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ExecutionModel"
+      title="ExecutionModel｜执行模式（OaaS）"
+      lead="说明交付方式：以结果为导向的持续执行与复盘（Operation as a Service）。"
+      notes={['边界：交付模型与节奏', '输出：典型周期/输入输出定义']}
+    />
+  )
+}
+
+const Boundary: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="Boundary"
+      title="Boundary｜适用边界说明"
+      lead="明确适用与不适用场景，避免用户误解与过度承诺。"
+      notes={['边界：风险提示与前置条件', '可扩展：FAQ / 反例清单']}
+    />
+  )
+}
+
+export const How: React.FC = () => {
+  return (
+    <div>
+      <MethodologyOrigin />
+      <ComplianceAsGrowth />
+      <WhyAgentSystem />
+      <ExecutionModel />
+      <Boundary />
+    </div>
+  )
+}
diff --git a/src/pages/Proof.tsx b/src/pages/Proof.tsx
new file mode 100644
index 0000000..f238a51
--- /dev/null
+++ b/src/pages/Proof.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const ProofPhilosophy: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ProofPhilosophy"
+      title="ProofPhilosophy｜为什么强调复杂场景"
+      lead="解释为什么用复杂场景证明能力：约束越多，越能体现系统性。"
+      headingAs="h1"
+      notes={['边界：证据策略与选择原则', '可扩展：评价维度（风险/合规/执行）']}
+    />
+  )
+}
+
+const GovernmentCases: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="GovernmentCases"
+      title="GovernmentCases｜政府级案例"
+      lead="案例骨架：背景、约束、方法、输出物、结果（不必公开敏感信息）。"
+      notes={['边界：可以匿名化', '可扩展：可验证指标与第三方背书']}
+    />
+  )
+}
+
+const EnterpriseCases: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="EnterpriseCases"
+      title="EnterpriseCases｜企业级案例"
+      lead="案例骨架：从决策问题到执行闭环，突出可复制方法。"
+      notes={['边界：聚焦“决策到行动”', '可扩展：行业标签与相似案例推荐']}
+    />
+  )
+}
+
+const CapabilitySummary: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="CapabilitySummary"
+      title="CapabilitySummary｜能力总结"
+      lead="把能力总结为少量可验证的结论与指标，作为信任收口。"
+      notes={['边界：结论式表达，避免泛泛而谈', '连接：引导到 Contact 进行下一步']}
+    />
+  )
+}
+
+export const Proof: React.FC = () => {
+  return (
+    <div>
+      <ProofPhilosophy />
+      <GovernmentCases />
+      <EnterpriseCases />
+      <CapabilitySummary />
+    </div>
+  )
+}
diff --git a/src/pages/Solutions.tsx b/src/pages/Solutions.tsx
new file mode 100644
index 0000000..a23fb10
--- /dev/null
+++ b/src/pages/Solutions.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const IndustryLogic: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="IndustryLogic"
+      title="IndustryLogic｜为什么按行业拆"
+      lead="用行业差异来帮助用户判断适配性（而不是堆行业 Logo）。"
+      headingAs="h1"
+      notes={['边界：行业维度的决策变量', '输出：行业拆分的原则']}
+    />
+  )
+}
+
+const IndustryList: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="IndustryList"
+      title="IndustryList｜行业卡片列表"
+      lead="卡片入口：每个行业一张卡（后续可用路由或折叠展开）。"
+      notes={['边界：只做入口与概览', '可扩展：卡片字段（风险/机会/约束/输出物）']}
+    />
+  )
+}
+
+const IndustryTemplate: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="IndustryTemplate"
+      title="IndustryTemplate｜单行业展开模板"
+      lead="定义单行业内容模板：问题、约束、指标、交付物、典型路径。"
+      notes={['边界：模板结构，不写具体行业内容', '可扩展：动态路由 /solutions/:industry']}
+    />
+  )
+}
+
+const FitCriteria: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="FitCriteria"
+      title="FitCriteria｜适配与不适配说明"
+      lead="明确哪些组织/阶段/目标适配，哪些不适配，降低沟通成本。"
+      notes={['边界：准入条件与排除条件', '输出：自检清单']}
+    />
+  )
+}
+
+export const Solutions: React.FC = () => {
+  return (
+    <div>
+      <IndustryLogic />
+      <IndustryList />
+      <IndustryTemplate />
+      <FitCriteria />
+    </div>
+  )
+}
diff --git a/src/pages/System.tsx b/src/pages/System.tsx
new file mode 100644
index 0000000..0197f09
--- /dev/null
+++ b/src/pages/System.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const SystemMap: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="SystemMap"
+      title="SystemMap｜全局系统图"
+      lead="展示系统全景与各模块关系（不是功能列表）。"
+      headingAs="h1"
+      notes={['边界：架构视角，只展示系统层级', '可扩展：系统地图插画/图表']}
+    />
+  )
+}
+
+const GComply: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="GComply"
+      title="GComply｜合规系统模块"
+      lead="说明合规模块解决的决策问题、输入输出与可验证性。"
+      notes={['边界：模块职责与接口，不展开 UI/功能按钮', '可扩展：能力清单与样例']}
+    />
+  )
+}
+
+const GGrowth: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="GGrowth"
+      title="GGrowth｜增长系统模块"
+      lead="说明增长模块如何在约束下形成可执行策略与行动路径。"
+      notes={['边界：模块职责与协作关系', '可扩展：策略模板/输出物示例']}
+    />
+  )
+}
+
+const GBrain: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="GBrain"
+      title="GBrain｜Agent 协同层"
+      lead="描述 Agent 协作层如何把问题拆解、对齐约束、形成闭环。"
+      notes={['边界：协作机制与责任边界', '可扩展：Agent 角色矩阵']}
+    />
+  )
+}
+
+const DiscoveryModule: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="DiscoveryModule"
+      title="DiscoveryModule｜决策入口模块"
+      lead="说明 Discovery 如何作为持续输入与决策入口，连接思想与执行。"
+      notes={['边界：入口定义与信息组织方式', '连接：跳转到 Discovery 页面']}
+    />
+  )
+}
+
+export const System: React.FC = () => {
+  return (
+    <div>
+      <SystemMap />
+      <GComply />
+      <GGrowth />
+      <GBrain />
+      <DiscoveryModule />
+    </div>
+  )
+}
diff --git a/src/pages/Why.tsx b/src/pages/Why.tsx
new file mode 100644
index 0000000..6e86e85
--- /dev/null
+++ b/src/pages/Why.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { SectionShell } from '../components/SectionShell'
+
+const GlobalContext: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="GlobalContext"
+      title="GlobalContext｜全球环境变化"
+      lead="描述外部环境变化与不确定性来源（不讲产品）。"
+      headingAs="h1"
+      notes={['边界：宏观趋势与约束条件', '产出：问题空间的共同前提']}
+    />
+  )
+}
+
+const RealDecisionFear: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="RealDecisionFear"
+      title="RealDecisionFear｜决策者真实焦虑"
+      lead="把 CEO/决策者的担忧说清楚（成本、声誉、合规、战略窗口期）。"
+      notes={['边界：真实决策压力，不做解决方案承诺', '输入：访谈语料/一线案例']}
+    />
+  )
+}
+
+const FalseSolutions: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="FalseSolutions"
+      title="FalseSolutions｜传统解法失效"
+      lead="说明传统咨询、工具堆叠、碎片化数据为什么不足以支撑全球化决策。"
+      notes={['边界：只讲失效机制，不做竞品对比表', '输出：为什么需要系统级解法']}
+    />
+  )
+}
+
+const ProblemReframe: React.FC = () => {
+  return (
+    <SectionShell
+      sectionKey="ProblemReframe"
+      title="ProblemReframe｜问题重定义"
+      lead="把问题从“信息不足”重定义为“决策不可控/不可验证”，为后续 How 与 System 铺垫。"
+      notes={['边界：提出新框架/新语言', '连接：从 Why 过渡到 How']}
+    />
+  )
+}
+
+export const Why: React.FC = () => {
+  return (
+    <div>
+      <GlobalContext />
+      <RealDecisionFear />
+      <FalseSolutions />
+      <ProblemReframe />
+    </div>
+  )
+}