manual save(2026-01-23 14:46)

src/pages/Home.tsx

@@ -8,16 +8,42 @@ type Entry = {
   desc: string
 }
 
-const SentencePage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const BookPage: React.FC<{ children: React.ReactNode; align?: 'center' | 'top' }> = ({ children, align = 'center' }) => {
   return (
-    <div className="flex h-full items-center">
+    <div
-      <p className="max-w-[24ch] text-[clamp(22px,2.6vw,32px)] leading-[1.45] tracking-tight text-[var(--tf-text)]">
+      className={[
-        {children}
+        'h-full',
-      </p>
+        'w-full',
+        'px-[clamp(6px,1vw,10px)]',
+        align === 'top' ? 'pt-[clamp(6px,1.4vw,18px)]' : 'flex items-center',
+      ].join(' ')}
+    >
+      <div className="w-full max-w-[40ch]">{children}</div>
     </div>
   )
 }
 
+const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; center?: boolean }> = ({
+  children,
+  serif,
+  center,
+}) => {
+  return (
+    <h2
+      className={[
+        serif ? 'font-[var(--tf-font-serif)]' : 'font-medium',
+        center ? 'text-center' : 'text-left',
+        'text-[clamp(22px,2.4vw,34px)]',
+        'leading-[1.18]',
+        'tracking-tight',
+        'text-[var(--tf-text)]',
+      ].join(' ')}
+    >
+      {children}
+    </h2>
+  )
+}
+
 const LastPage: React.FC<{ entries: Entry[] }> = ({ entries }) => {
   return (
     <div className="flex h-full flex-col justify-between">
@@ -78,35 +104,214 @@ export const Home: React.FC = () => {
   const sheets = useMemo(
     () => [
       {
-        id: 'p-1',
+        id: 'section-01',
-        front: <SentencePage>这不是一个首页。</SentencePage>,
+        front: (
+          <BookPage>
+            <h1 className="font-[var(--tf-font-serif)] font-medium text-[clamp(36px,4.2vw,52px)] leading-[1.06] tracking-tight text-[var(--tf-text)]">
+              全球化，正在进入高不确定性时代
+            </h1>
+            <p className="mt-8 text-[clamp(16px,1.5vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
+              市场、政策、数据与地缘风险同时叠加，
+              <br />
+              任何一次跨境决策的失误，代价都在被放大。
+            </p>
+            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-subtle)]">
+              对中国企业而言，出海不再只是机会判断，
+              <br />
+              而是一项系统性能力挑战。
+            </p>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-2',
+        id: 'section-02',
-        front: <SentencePage>它是一页页翻开的叙事。</SentencePage>,
+        front: (
+          <BookPage align="top">
+            <SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
+            <div className="mt-8 grid gap-4">
+              {[
+                '现在是否适合进入这个国家或区域？',
+                '合规风险会不会在后期集中爆发？',
+                '当前的增长模式，是否能复制到下一个市场？',
+                '如果业务受挫，是战略判断错误，还是信息不足？',
+                '是否存在尚未被识别的关键风险？',
+              ].map((item) => (
+                <div
+                  key={item}
+                  className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4"
+                >
+                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{item}</p>
+                </div>
+              ))}
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-3',
+        id: 'section-03',
-        front: <SentencePage>每一页，都只说一句。</SentencePage>,
+        front: (
+          <BookPage>
+            <div className="text-center">
+              <div className="mx-auto max-w-[34ch]">
+                <p className="font-[var(--tf-font-serif)] text-[clamp(28px,3.2vw,40px)] leading-[1.42] tracking-tight text-[var(--tf-text)]">
+                  合规，不是成本。
+                  <br />
+                  它是增长的结构性杠杆。
+                </p>
+                <p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
+                  当合规被前置并系统化，它决定的不是“能否避免风险”，
+                  <br />
+                  而是企业能否更快进入市场、建立信任，并实现可复制的增长。
+                </p>
+              </div>
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-4',
+        id: 'section-04',
-        front: <SentencePage>把复杂的问题，拆成可读的片段。</SentencePage>,
+        front: (
+          <BookPage align="top">
+            <SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
+            <div className="mt-8 space-y-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
+              <p>
+                这一判断，来自长期服务中国企业全球化过程中的真实实践，
+                <br />
+                也来自高度复杂、强监管与多变量环境下的系统性经验。
+              </p>
+              <p>
+                我们逐渐意识到：
+                <br />
+                合规并非增长的对立面，而是增长的前置条件。
+              </p>
+            </div>
+            <div className="mt-10 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
+              <p className="font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
+                Compliance as Growth —— 合规即增长
+              </p>
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-5',
+        id: 'section-05',
-        front: <SentencePage>把模糊的焦虑，变成清晰的判断。</SentencePage>,
+        front: (
+          <BookPage align="top">
+            <SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
+            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
+              图灵环流（TuringFlow），致力于将复杂的全球化问题，
+              <br />
+              转化为可执行、可验证、可规模化的系统能力。
+            </p>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-2">
+              {[
+                { title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' },
+                { title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' },
+                { title: 'G-Brain', desc: '多个 AI Agent 如何协同，支撑复杂决策？' },
+                { title: 'Discovery', desc: '我如何持续获得高质量、可行动的全球决策信号？' },
+              ].map((item) => (
+                <div
+                  key={item.title}
+                  className={[
+                    'rounded-2xl border border-[var(--tf-border)]',
+                    'bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)]',
+                    'p-4',
+                  ].join(' ')}
+                >
+                  <div className="text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
+                    {item.title}
+                  </div>
+                  <p className="mt-2 text-xs leading-[1.75] text-[var(--tf-text-muted)]">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-6',
+        id: 'section-06',
-        front: <SentencePage>把“出海”，从机会变成能力。</SentencePage>,
+        front: (
+          <BookPage align="top">
+            <SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
+            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
+              我们持续追踪全球政策、市场、行业与地缘变化，
+              <br />
+              并将大量碎片化信息，深度加工为可用于决策的判断。
+            </p>
+
+            <div className="mt-8 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] text-[var(--tf-accent-link)]">
+              {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => (
+                <span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-7',
+        id: 'section-07',
-        front: <SentencePage>然后，进入真正的内容。</SentencePage>,
+        front: (
+          <BookPage align="top">
+            <SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
+            <div className="mt-8 grid gap-4">
+              {[
+                '全球合规与市场进入决策周期显著缩短',
+                '关键风险提前识别与预警',
+                '增长路径的可复制性明显提升',
+                '跨市场决策一致性持续增强',
+              ].map((point) => (
+                <div key={point} className="flex items-start gap-3">
+                  <span aria-hidden="true" className="mt-2 h-2 w-2 rounded-full bg-[var(--tf-border)]" />
+                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{point}</p>
+                </div>
+              ))}
+            </div>
+          </BookPage>
+        ),
       },
       {
-        id: 'p-8',
+        id: 'section-08',
+        front: (
+          <BookPage align="top">
+            <SectionTitle>被用于复杂场景，才有价值</SectionTitle>
+            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
+              图灵环流的能力，已在政府级项目及多行业实践中得到验证。
+            </p>
+
+            <div className="mt-8 grid grid-cols-3 gap-3">
+              {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => (
+                <div
+                  key={label}
+                  className="rounded-xl border border-[color-mix(in_srgb,var(--tf-border)_65%,white)] bg-[color-mix(in_srgb,var(--tf-bg)_62%,white)] px-3 py-3 text-center text-[10px] font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)] grayscale"
+                  aria-label="Logo 占位"
+                >
+                  {label}
+                </div>
+              ))}
+            </div>
+          </BookPage>
+        ),
+      },
+      {
+        id: 'section-09',
+        front: (
+          <BookPage align="top">
+            <SectionTitle serif>探讨你的全球化路径</SectionTitle>
+            <div className="mt-8 grid gap-3">
+              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
+                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">查看一份真实的全球决策示例</p>
+              </div>
+              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
+                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">与我们交流一个具体市场或业务场景</p>
+              </div>
+            </div>
+          </BookPage>
+        ),
+      },
+      {
+        id: 'section-10',
         front: <LastPage entries={entries} />,
       },
     ],