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

src/components/Footer.tsx

@@ -3,43 +3,43 @@ import { Link } from 'react-router-dom'
 
 export const Footer: React.FC = () => {
   return (
-    <footer className="bg-gray-50 border-t border-gray-200 py-10 mt-16">
+    <footer className="bg-[var(--tf-bg)] border-t border-[var(--tf-border)] py-10 mt-16">
       <div className="container mx-auto px-4">
         <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
           <div>
-            <div className="font-semibold text-gray-900">Turingflow</div>
+            <div className="font-semibold text-[var(--tf-text)]">Turingflow</div>
-            <div className="text-sm text-gray-600 mt-1">思想驱动型官网 V1 页面骨架</div>
+            <div className="text-sm mt-1 text-[var(--tf-text-muted)]">思想驱动型官网 V1 页面骨架</div>
           </div>
 
           <nav aria-label="页脚导航" className="flex flex-wrap gap-x-4 gap-y-2 text-sm">
-            <Link className="text-gray-600 hover:text-gray-900" to="/">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/">
               Home
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/why">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/why">
               Why
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/how">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/how">
               How
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/system">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/system">
               System
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/discovery">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/discovery">
               Discovery
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/solutions">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/solutions">
               Solutions
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/proof">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/proof">
               Proof
             </Link>
-            <Link className="text-gray-600 hover:text-gray-900" to="/contact">
+            <Link className="text-[var(--tf-text-muted)] hover:text-[var(--tf-text)]" to="/contact">
               Contact
             </Link>
           </nav>
         </div>
 
-        <div className="text-xs text-gray-500 mt-8">
+        <div className="text-xs text-[var(--tf-text-muted)] mt-8">
           <p>© 2026 Global Decision System. All rights reserved.</p>
         </div>
       </div>

src/components/Header.tsx

@@ -12,10 +12,10 @@ const navItems = [
 
 export const Header: React.FC = () => {
   return (
-    <header className="bg-white/80 backdrop-blur border-b border-gray-200 sticky top-0 z-10">
+    <header className="bg-[color-mix(in_srgb,var(--tf-bg)_92%,white)] backdrop-blur border-b border-[var(--tf-border)] sticky top-0 z-10">
       <div className="container mx-auto px-4 py-4">
         <div className="flex items-center justify-between gap-6">
-          <Link to="/" className="font-semibold text-gray-900 tracking-tight">
+          <Link to="/" className="font-semibold tracking-tight text-[var(--tf-text)]">
             Turingflow
             <span className="sr-only">Home</span>
           </Link>
@@ -28,7 +28,9 @@ export const Header: React.FC = () => {
                 className={({ isActive }) =>
                   [
                     'px-3 py-2 rounded-md text-sm transition-colors',
-                    isActive ? 'text-gray-900 bg-gray-100' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50',
+                    isActive
+                      ? 'text-[var(--tf-text)] bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)]'
+                      : 'text-[var(--tf-text-muted)] hover:text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)]',
                   ].join(' ')
                 }
               >
@@ -40,7 +42,7 @@ export const Header: React.FC = () => {
           <div className="flex items-center gap-2">
             <Link
               to="/contact"
-              className="inline-flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium border border-gray-300 text-gray-700 hover:bg-gray-50 opacity-90"
+              className="inline-flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium border border-[var(--tf-border)] text-[var(--tf-text-muted)] hover:text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)] opacity-90"
             >
               Contact
             </Link>
@@ -56,7 +58,9 @@ export const Header: React.FC = () => {
                 className={({ isActive }) =>
                   [
                     'px-3 py-2 rounded-md text-sm whitespace-nowrap transition-colors',
-                    isActive ? 'text-gray-900 bg-gray-100' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50',
+                    isActive
+                      ? 'text-[var(--tf-text)] bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)]'
+                      : 'text-[var(--tf-text-muted)] hover:text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)]',
                   ].join(' ')
                 }
               >
@@ -65,7 +69,7 @@ export const Header: React.FC = () => {
             ))}
             <Link
               to="/contact"
-              className="px-3 py-2 rounded-md text-sm whitespace-nowrap border border-gray-300 text-gray-700 hover:bg-gray-50 opacity-90"
+              className="px-3 py-2 rounded-md text-sm whitespace-nowrap border border-[var(--tf-border)] text-[var(--tf-text-muted)] hover:text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_78%,white)] opacity-90"
             >
               Contact
             </Link>

src/components/SiteLayout.tsx

@@ -20,9 +20,9 @@ export const SiteLayout: React.FC = () => {
   }, [location.pathname, location.hash])
 
   return (
-    <div className="min-h-screen bg-white text-gray-900">
+    <div className="min-h-screen bg-[var(--tf-bg)] text-[var(--tf-text)]">
       <Header />
-      <main id="main" className="bg-gray-50">
+      <main id="main" className="bg-[var(--tf-bg)]">
         <Outlet />
       </main>
       <Footer />

src/index.css

@@ -2,7 +2,34 @@
 
 @plugin "@tailwindcss/typography";
 
+:root {
+  --tf-text: #111111;
+  --tf-text-muted: #555555;
+  --tf-bg: #fafaf7;
+  --tf-bg-alt: #f5f5f2;
+  --tf-border: rgba(17, 17, 17, 0.12);
+  --tf-accent: #1b6b5a;
+
+  --tf-font-cn: "HarmonyOS Sans SC", "HarmonyOS Sans", "Source Han Sans SC", "Noto Sans CJK SC",
+    "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --tf-font-serif: "IBM Plex Serif", Charter, "Bitstream Charter", Georgia, "Times New Roman", Times, serif;
+  --tf-font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+
+  color: var(--tf-text);
+  background: var(--tf-bg);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
+  font-family: var(--tf-font-cn);
+  color: var(--tf-text);
+  background: var(--tf-bg);
+}
+
+::selection {
+  background: color-mix(in srgb, var(--tf-accent) 18%, white);
 }

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
+    <section
-      sectionKey="HeroWorldView"
+      id={id}
-      title="HeroWorldView｜世界观判断"
+      aria-labelledby={`${id}-title`}
-      headingAs="h1"
+      className={[
-      lead="一个思想驱动型官网的开场：先定义全球化决策的世界观与判断框架。"
+        'py-[120px]',
-      notes={['边界：世界观与主张，不展示产品 UI', '连接：引出决策不可控的问题']}
+        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
+    <HomeSection id="SectionWorldView">
-      sectionKey="DecisionProblem"
+      <header className="max-w-3xl">
-      title="DecisionProblem｜决策不可控"
+        <h1
-      lead="说明决策在信息噪音、约束冲突与时间压力下为何不可控。"
+          id="SectionWorldView-title"
-      notes={['边界：问题机制与代价', '输出：决策痛点的共同语言']}
+          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
+    <HomeSection id="SectionDecisionUncertainty" variant="alt">
-      sectionKey="CoreThesis"
+      <div className="max-w-4xl">
-      title="CoreThesis｜反常识观点"
+        <h2
-      lead="用一句核心论断把读者拉到同一认知：合规与增长是同一件事的两面。"
+          id="SectionDecisionUncertainty-title"
-      notes={['边界：只讲主张与论证线索', '可扩展：对比式表达与关键证据']}
+          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
+    <HomeSection id="SectionCoreThesis">
-      sectionKey="Methodology"
+      <div className="mx-auto max-w-4xl text-center">
-      title="Methodology｜方法论来源"
+        <h2
-      lead="交代方法论来自哪些实践与验证路径，为 How 页面做铺垫。"
+          id="SectionCoreThesis-title"
-      notes={['边界：来源与原则', '连接：跳转到 How']}
+          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
+    <HomeSection id="SectionMethodology" variant="alt">
-      sectionKey="SystemOverview"
+      <article className="max-w-4xl">
-      title="SystemOverview｜系统级解法"
+        <h2
-      lead="用系统视角解释：不是功能堆叠，而是可复用的决策-执行系统。"
+          id="SectionMethodology-title"
-      notes={['边界：系统全景，不拆到模块细节', '连接：跳转到 System']}
+          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
+    <HomeSection id="SectionSystemOverview">
-      sectionKey="DiscoveryIntro"
+      <div className="max-w-5xl">
-      title="DiscoveryIntro｜决策雷达"
+        <h2
-      lead="Discovery 作为持续的决策输入：思想、框架与证据的入口。"
+          id="SectionSystemOverview-title"
-      notes={['边界：内容入口，不做博客化归档', '连接：跳转到 Discovery']}
+          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
+    <HomeSection id="SectionDiscoveryIntro" variant="alt">
-      sectionKey="MeasurableOutcome"
+      <div className="max-w-4xl">
-      title="MeasurableOutcome｜可度量结果"
+        <h2
-      lead="强调可验证：输出物、指标、复盘机制，而非宏大叙事。"
+          id="SectionDiscoveryIntro-title"
-      notes={['边界：指标与结果类型，不披露敏感数据', '可扩展：指标卡片/结果对照']}
+          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
+    <HomeSection id="SectionMeasurableOutcome">
-      sectionKey="TrustProof"
+      <div className="max-w-4xl">
-      title="TrustProof｜权威背书"
+        <h2
-      lead="放置信任材料：客户类型、合作方式、第三方背书（占位）。"
+          id="SectionMeasurableOutcome-title"
-      notes={['边界：信任材料分类与呈现方式', '连接：跳转到 Proof']}
+          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
+    <HomeSection id="SectionTrustProof" variant="alt">
-      sectionKey="SoftCTA"
+      <div className="max-w-5xl">
-      title="SoftCTA｜行动入口"
+        <h2
-      lead="提供低压力行动入口：先对齐问题，再进入下一步。"
+          id="SectionTrustProof-title"
-      notes={['边界：弱 CTA，避免硬销售', '连接：跳转到 Contact']}
+          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 />
+      <SectionWorldView />
-      <DecisionProblem />
+      <SectionDecisionUncertainty />
-      <CoreThesis />
+      <SectionCoreThesis />
-      <Methodology />
+      <SectionMethodology />
-      <SystemOverview />
+      <SectionSystemOverview />
-      <DiscoveryIntro />
+      <SectionDiscoveryIntro />
-      <MeasurableOutcome />
+      <SectionMeasurableOutcome />
-      <TrustProof />
+      <SectionTrustProof />
-      <SoftCTA />
+      <SectionSoftCTA />
     </div>
   )
 }