manual save(2026-01-23 11:52)

src/pages/Home.tsx

@@ -1,118 +1,356 @@
 import React from 'react'
-import { SectionShell } from '../components/SectionShell'
+import { Link } from 'react-router-dom'
 
-const HeroWorldView: React.FC = () => {
+type HomeSectionProps = {
+  id: string
+  children: React.ReactNode
+  variant?: 'default' | 'alt'
+}
+
+const HomeContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div className="mx-auto max-w-[1120px] px-[clamp(24px,6vw,15vw)]">{children}</div>
+}
+
+const HomeSection: React.FC<HomeSectionProps> = ({ id, children, variant = 'default' }) => {
   return (
-    <SectionShell
-      sectionKey="HeroWorldView"
-      title="HeroWorldView｜世界观判断"
-      headingAs="h1"
-      lead="一个思想驱动型官网的开场：先定义全球化决策的世界观与判断框架。"
-      notes={['边界：世界观与主张，不展示产品 UI', '连接：引出决策不可控的问题']}
-    />
+    <section
+      id={id}
+      aria-labelledby={`${id}-title`}
+      className={[
+        'py-[120px]',
+        variant === 'alt' ? 'bg-[var(--tf-bg-alt)]' : 'bg-[var(--tf-bg)]',
+      ].join(' ')}
+    >
+      <HomeContainer>{children}</HomeContainer>
+    </section>
   )
 }
 
-const DecisionProblem: React.FC = () => {
+const SectionWorldView: React.FC = () => {
   return (
-    <SectionShell
-      sectionKey="DecisionProblem"
-      title="DecisionProblem｜决策不可控"
-      lead="说明决策在信息噪音、约束冲突与时间压力下为何不可控。"
-      notes={['边界：问题机制与代价', '输出：决策痛点的共同语言']}
-    />
+    <HomeSection id="SectionWorldView">
+      <header className="max-w-3xl">
+        <h1
+          id="SectionWorldView-title"
+          className="font-[var(--tf-font-cn)] text-[clamp(56px,5.2vw,64px)] leading-[1.05] tracking-tight"
+        >
+          全球化，正在进入高不确定性时代
+        </h1>
+        <p className="mt-10 text-[clamp(18px,1.6vw,20px)] leading-[1.8] text-[var(--tf-text-muted)]">
+          市场、政策、数据与地缘风险同时叠加，
+          <br />
+          任何一次跨境决策的失误，代价都在被放大。
+        </p>
+        <p className="mt-8 text-[clamp(16px,1.4vw,18px)] leading-[1.8] text-[var(--tf-text-muted)]">
+          对中国企业而言，出海不再只是机会判断，
+          <br />
+          而是一项系统性能力挑战。
+        </p>
+      </header>
+    </HomeSection>
   )
 }
 
-const CoreThesis: React.FC = () => {
+const SectionDecisionUncertainty: React.FC = () => {
+  const questions = [
+    '现在是否适合进入这个国家或区域？',
+    '合规风险会不会在后期集中爆发？',
+    '当前的增长模式，是否能复制到下一个市场？',
+    '如果业务受挫，是战略判断错误，还是信息不足？',
+    '是否存在尚未被识别的关键风险？',
+  ]
+
   return (
-    <SectionShell
-      sectionKey="CoreThesis"
-      title="CoreThesis｜反常识观点"
-      lead="用一句核心论断把读者拉到同一认知：合规与增长是同一件事的两面。"
-      notes={['边界：只讲主张与论证线索', '可扩展：对比式表达与关键证据']}
-    />
+    <HomeSection id="SectionDecisionUncertainty" variant="alt">
+      <div className="max-w-4xl">
+        <h2
+          id="SectionDecisionUncertainty-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          困难的不是走向全球，而是如何在不确定中做出可控决策
+        </h2>
+
+        <div className="mt-12 grid gap-7">
+          {questions.map((question) => (
+            <div key={question} className="border-l border-[var(--tf-border)] pl-6">
+              <p className="text-[clamp(16px,1.4vw,18px)] leading-[1.8] text-[var(--tf-text)]">{question}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </HomeSection>
   )
 }
 
-const Methodology: React.FC = () => {
+const SectionCoreThesis: React.FC = () => {
   return (
-    <SectionShell
-      sectionKey="Methodology"
-      title="Methodology｜方法论来源"
-      lead="交代方法论来自哪些实践与验证路径，为 How 页面做铺垫。"
-      notes={['边界：来源与原则', '连接：跳转到 How']}
-    />
+    <HomeSection id="SectionCoreThesis">
+      <div className="mx-auto max-w-4xl text-center">
+        <h2
+          id="SectionCoreThesis-title"
+          className="font-[var(--tf-font-serif)] text-[clamp(44px,4.3vw,56px)] leading-[1.12] tracking-tight"
+        >
+          合规，不是成本。
+          <br />
+          它是增长的结构性杠杆。
+        </h2>
+        <p className="mt-10 text-[clamp(16px,1.4vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+          当合规被前置并系统化，它决定的不是“能否避免风险”，
+          <br />
+          而是企业能否更快进入市场、建立信任，并实现可复制的增长。
+        </p>
+      </div>
+    </HomeSection>
   )
 }
 
-const SystemOverview: React.FC = () => {
+const SectionMethodology: React.FC = () => {
   return (
-    <SectionShell
-      sectionKey="SystemOverview"
-      title="SystemOverview｜系统级解法"
-      lead="用系统视角解释：不是功能堆叠，而是可复用的决策-执行系统。"
-      notes={['边界：系统全景，不拆到模块细节', '连接：跳转到 System']}
-    />
+    <HomeSection id="SectionMethodology" variant="alt">
+      <article className="max-w-4xl">
+        <h2
+          id="SectionMethodology-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          这是在复杂现实中被反复验证的方法论
+        </h2>
+
+        <div className="mt-10 space-y-6 text-[clamp(16px,1.4vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+          <p>
+            这一判断，来自长期服务中国企业全球化过程中的真实实践，
+            也来自高度复杂、强监管与多变量环境下的系统性经验。
+          </p>
+          <p>
+            我们逐渐意识到：
+            <br />
+            合规并非增长的对立面，而是增长的前置条件。
+          </p>
+        </div>
+
+        <div className="mt-12">
+          <div className="inline-flex items-baseline gap-3 border-b border-[var(--tf-border)] pb-2">
+            <span className="font-[var(--tf-font-serif)] text-[clamp(20px,1.8vw,22px)] text-[var(--tf-text)]">
+              Compliance as Growth
+            </span>
+            <span className="text-sm font-[var(--tf-font-ui)] text-[var(--tf-text-muted)]">—— 合规即增长</span>
+          </div>
+        </div>
+      </article>
+    </HomeSection>
   )
 }
 
-const DiscoveryIntro: React.FC = () => {
+const SectionSystemOverview: React.FC = () => {
+  const modules = [
+    {
+      name: 'G-Comply',
+      desc: '我如何合法进入并持续运营一个海外市场？',
+    },
+    {
+      name: 'G-Growth',
+      desc: '我如何在合规前提下，实现可持续且可复制的增长？',
+    },
+    {
+      name: 'G-Brain',
+      desc: '多个 AI Agent 如何协同，支撑复杂决策？',
+    },
+    {
+      name: 'Discovery',
+      desc: '我如何持续获得高质量、可行动的全球决策信号？',
+    },
+  ]
+
   return (
-    <SectionShell
-      sectionKey="DiscoveryIntro"
-      title="DiscoveryIntro｜决策雷达"
-      lead="Discovery 作为持续的决策输入：思想、框架与证据的入口。"
-      notes={['边界：内容入口，不做博客化归档', '连接：跳转到 Discovery']}
-    />
+    <HomeSection id="SectionSystemOverview">
+      <div className="max-w-5xl">
+        <h2
+          id="SectionSystemOverview-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          当问题复杂到无法依赖个人经验时，必须用系统解决
+        </h2>
+
+        <p className="mt-10 max-w-3xl text-[clamp(16px,1.4vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+          图灵环流（TuringFlow），致力于将复杂的全球化问题，
+          <br />
+          转化为可执行、可验证、可规模化的系统能力。
+        </p>
+
+        <div className="mt-14 grid gap-5 sm:grid-cols-2">
+          {modules.map((module) => (
+            <div
+              key={module.name}
+              className="rounded-2xl border border-[var(--tf-border)] bg-white p-7"
+              aria-label={`${module.name} 模块`}
+            >
+              <div className="flex items-baseline justify-between gap-4">
+                <div className="text-lg font-[var(--tf-font-ui)] font-medium text-[var(--tf-text)]">{module.name}</div>
+                <div className="text-xs font-[var(--tf-font-ui)] text-[var(--tf-text-muted)]">Module</div>
+              </div>
+              <p className="mt-5 text-[clamp(16px,1.4vw,18px)] leading-[1.8] text-[var(--tf-text-muted)]">
+                {module.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </HomeSection>
   )
 }
 
-const MeasurableOutcome: React.FC = () => {
+const SectionDiscoveryIntro: React.FC = () => {
   return (
-    <SectionShell
-      sectionKey="MeasurableOutcome"
-      title="MeasurableOutcome｜可度量结果"
-      lead="强调可验证：输出物、指标、复盘机制，而非宏大叙事。"
-      notes={['边界：指标与结果类型，不披露敏感数据', '可扩展：指标卡片/结果对照']}
-    />
+    <HomeSection id="SectionDiscoveryIntro" variant="alt">
+      <div className="max-w-4xl">
+        <h2
+          id="SectionDiscoveryIntro-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          Discovery，是我们的全球决策雷达
+        </h2>
+
+        <p className="mt-10 text-[clamp(16px,1.4vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+          我们持续追踪全球政策、市场、行业与地缘变化，
+          <br />
+          并将大量碎片化信息，深度加工为可用于决策的判断。
+        </p>
+
+        <div className="mt-12 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm font-[var(--tf-font-ui)] text-[var(--tf-text)]">
+          <span className="inline-flex items-center rounded-full border border-[var(--tf-border)] px-3 py-1">每日晨报</span>
+          <span className="inline-flex items-center rounded-full border border-[var(--tf-border)] px-3 py-1">政策研究</span>
+          <span className="inline-flex items-center rounded-full border border-[var(--tf-border)] px-3 py-1">行业趋势</span>
+          <span className="inline-flex items-center rounded-full border border-[var(--tf-border)] px-3 py-1">深度报告</span>
+        </div>
+      </div>
+    </HomeSection>
   )
 }
 
-const TrustProof: React.FC = () => {
+const SectionMeasurableOutcome: React.FC = () => {
+  const points = [
+    '全球合规与市场进入决策周期显著缩短',
+    '关键风险提前识别与预警',
+    '增长路径的可复制性明显提升',
+    '跨市场决策一致性持续增强',
+  ]
+
   return (
-    <SectionShell
-      sectionKey="TrustProof"
-      title="TrustProof｜权威背书"
-      lead="放置信任材料：客户类型、合作方式、第三方背书（占位）。"
-      notes={['边界：信任材料分类与呈现方式', '连接：跳转到 Proof']}
-    />
+    <HomeSection id="SectionMeasurableOutcome">
+      <div className="max-w-4xl">
+        <h2
+          id="SectionMeasurableOutcome-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          系统带来的，是可以被度量的确定性
+        </h2>
+
+        <div className="mt-12 grid gap-6">
+          {points.map((point) => (
+            <div key={point} className="flex items-start gap-4">
+              <span
+                aria-hidden="true"
+                className="mt-2 h-2.5 w-2.5 rounded-full bg-[var(--tf-accent)]"
+              />
+              <p className="text-[clamp(16px,1.4vw,18px)] leading-[1.8] text-[var(--tf-text-muted)]">{point}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </HomeSection>
   )
 }
 
-const SoftCTA: React.FC = () => {
+const SectionTrustProof: React.FC = () => {
   return (
-    <SectionShell
-      sectionKey="SoftCTA"
-      title="SoftCTA｜行动入口"
-      lead="提供低压力行动入口：先对齐问题，再进入下一步。"
-      notes={['边界：弱 CTA，避免硬销售', '连接：跳转到 Contact']}
-    />
+    <HomeSection id="SectionTrustProof" variant="alt">
+      <div className="max-w-5xl">
+        <h2
+          id="SectionTrustProof-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          被用于复杂场景，才有价值
+        </h2>
+
+        <p className="mt-10 max-w-3xl text-[clamp(16px,1.4vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+          图灵环流的能力，已在政府级项目及多行业实践中得到验证。
+        </p>
+
+        <div className="mt-14 grid gap-3 sm:grid-cols-3">
+          {['政府级项目', '多行业实践', '高约束环境'].map((label) => (
+            <div
+              key={label}
+              className="rounded-2xl border border-[var(--tf-border)] bg-white px-6 py-5 text-sm font-[var(--tf-font-ui)] text-[var(--tf-text-muted)]"
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+
+        <p className="mt-8 text-xs font-[var(--tf-font-ui)] text-[var(--tf-text-muted)]">
+          注：V1 首页仅做克制展示；具体案例请见 Proof。
+        </p>
+      </div>
+    </HomeSection>
+  )
+}
+
+const SectionSoftCTA: React.FC = () => {
+  return (
+    <HomeSection id="SectionSoftCTA">
+      <div className="max-w-4xl">
+        <h2
+          id="SectionSoftCTA-title"
+          className="text-[clamp(36px,3.2vw,40px)] leading-[1.15] tracking-tight"
+        >
+          探讨你的全球化路径
+        </h2>
+
+        <div className="mt-10 grid gap-4">
+          <Link
+            to="/discovery"
+            className="group inline-flex items-center justify-between rounded-2xl border border-[var(--tf-border)] bg-white px-7 py-6"
+          >
+            <span className="text-[clamp(16px,1.4vw,18px)] leading-[1.6] text-[var(--tf-text)]">
+              查看一份真实的全球决策示例
+            </span>
+            <span className="text-sm font-[var(--tf-font-ui)] text-[var(--tf-text-muted)] group-hover:text-[var(--tf-accent)]">
+              →
+            </span>
+          </Link>
+
+          <Link
+            to="/contact"
+            className="group inline-flex items-center justify-between rounded-2xl border border-[var(--tf-border)] bg-white px-7 py-6"
+          >
+            <span className="text-[clamp(16px,1.4vw,18px)] leading-[1.6] text-[var(--tf-text)]">
+              与我们交流一个具体市场或业务场景
+            </span>
+            <span className="text-sm font-[var(--tf-font-ui)] text-[var(--tf-text-muted)] group-hover:text-[var(--tf-accent)]">
+              →
+            </span>
+          </Link>
+        </div>
+
+        <p className="mt-8 text-xs font-[var(--tf-font-ui)] text-[var(--tf-text-muted)]">
+          无营销化按钮、无弹层；V1 只提供低压力下一步。
+        </p>
+      </div>
+    </HomeSection>
   )
 }
 
 export const Home: React.FC = () => {
   return (
     <div>
-      <HeroWorldView />
-      <DecisionProblem />
-      <CoreThesis />
-      <Methodology />
-      <SystemOverview />
-      <DiscoveryIntro />
-      <MeasurableOutcome />
-      <TrustProof />
-      <SoftCTA />
+      <SectionWorldView />
+      <SectionDecisionUncertainty />
+      <SectionCoreThesis />
+      <SectionMethodology />
+      <SectionSystemOverview />
+      <SectionDiscoveryIntro />
+      <SectionMeasurableOutcome />
+      <SectionTrustProof />
+      <SectionSoftCTA />
     </div>
   )
 }