gitadmin/e53e020b-bfd9-42e2-901f-966143bd21b2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manual save(2026-01-23 16:48)

Browse Source
This commit is contained in:
SiteAgent Bot
2026-01-23 16:48:46 +08:00
parent 1260f7b37c
commit 8c3ca1cbc8
2 changed files with 351 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/FlipBook.tsx
View File

@@ -9,6 +9,7 @@ type FlipBookSheet = {
type FlipBookProps = {
title: string
sheets: FlipBookSheet[]
coverLeft?: React.ReactNode
className?: string
}
@@ -71,7 +72,7 @@ const PageHalf: React.FC<{ side: 'left' | 'right'; children?: React.ReactNode }>
].join(' ')}
/>
<div className="relative h-full p-[clamp(22px,2.6vw,34px)]">{children}</div>
<div className="relative h-full p-[clamp(24px,2.8vw,40px)]">{children}</div>
</div>
</div>
)
@@ -142,7 +143,7 @@ const Sheet: React.FC<{
)
}
export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className }) => {
export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, coverLeft, className }) => {
const reducedMotion = usePrefersReducedMotion()
const transitionMs = reducedMotion ? 0 : TRANSITION_MS
@@ -231,6 +232,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
const currentSheet = sheets[currentIndex]
const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null
const leftPageContent = currentIndex === 0 ? (coverLeft ?? null) : previousSheet?.back
return (
<section
aria-label={title}
@@ -246,7 +249,9 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
<h1 className="font-[var(--tf-font-serif)] text-[clamp(32px,4.2vw,54px)] leading-[1.08] tracking-tight">
{title}
</h1>
<p className="mt-4 text-sm text-[var(--tf-text-subtle)]">点击翻页，或使用键盘 ← / →，移动端可左右滑动。</p>
<p className="mt-4 text-sm leading-relaxed text-[var(--tf-text-subtle)]">
点击翻页，或使用键盘 ← / →，移动端可左右滑动。
</p>
</div>
<div className="mt-10 flex items-center justify-center">
@@ -254,7 +259,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
className={[
'relative',
'w-[min(92vw,940px)]',
'h-[min(68vh,560px)]',
'h-[min(74vh,640px)]',
'min-h-[520px]',
'[perspective:1800px]',
].join(' ')}
onPointerDown={onPointerDown}
@@ -283,20 +289,6 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
busy ? 'opacity-0 pointer-events-none' : 'opacity-100',
].join(' ')}
>
<div
className={[
'absolute inset-y-0 left-0 w-1/2 overflow-hidden rounded-l-[22px]',
'opacity-60',
'[filter:blur(2.2px)_contrast(0.92)_saturate(0.9)]',
].join(' ')}
aria-hidden="true"
>
<div className="h-full bg-transparent">
<div className="h-full p-[clamp(22px,2.6vw,34px)]">{previousSheet?.front ?? currentSheet?.front}</div>
</div>
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.92),rgba(255,255,255,0.4)_55%,rgba(255,255,255,0))]" />
</div>
<div className="pointer-events-none absolute bottom-4 left-6 z-[65] text-[10px] font-[var(--tf-font-ui)] tracking-[0.18em] text-[color-mix(in_srgb,var(--tf-text)_45%,white)]">
{String(Math.max(1, currentIndex * 2)).padStart(2, '0')}
</div>
@@ -304,6 +296,7 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
{String(Math.max(2, currentIndex * 2 + 1)).padStart(2, '0')}
</div>
<PageHalf side="left">{leftPageContent}</PageHalf>
<PageHalf side="right">{currentSheet?.front}</PageHalf>
</div>

612
src/pages/Home.tsx
View File

@@ -17,14 +17,14 @@ const BookPage: React.FC<{ children: React.ReactNode; align?: 'center' | 'top' }
align === 'top' ? 'pt-[clamp(8px,1.6vw,22px)]' : 'flex items-center',
].join(' ')}
>
<div className="w-full max-w-[46ch]">{children}</div>
<div className="w-full max-w-[48ch]">{children}</div>
</div>
)
}
const Kicker: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
<div className="text-[11px] font-[var(--tf-font-ui)] font-semibold tracking-[0.24em] text-[color-mix(in_srgb,var(--tf-text-subtle)_86%,black)]">
{children}
</div>
)
@@ -38,10 +38,10 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
return (
<h2
className={[
serif ? 'font-[var(--tf-font-serif)]' : 'font-medium',
serif ? 'font-[var(--tf-font-serif)]' : 'font-semibold',
center ? 'text-center' : 'text-left',
'text-[clamp(22px,2.5vw,36px)]',
'leading-[1.14]',
'text-[clamp(22px,2.6vw,38px)]',
'leading-[1.12]',
'tracking-tight',
'text-[var(--tf-text)]',
].join(' ')}
@@ -53,7 +53,9 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
const BodyText: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{children}</p>
<p className="text-[clamp(15px,1.35vw,17px)] leading-[1.9] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">
{children}
</p>
)
}
@@ -114,275 +116,341 @@ export const Home: React.FC = () => {
[],
)
const sheets = useMemo(
() => [
{
id: 'section-01',
front: (
<BookPage>
const coverLeft = (
<BookPage>
<div className="h-full w-full">
<div className="flex h-full flex-col justify-between">
<div>
<Kicker>SECTION 01 · WORLDVIEW</Kicker>
<h1 className="mt-4 font-[var(--tf-font-serif)] font-medium text-[clamp(38px,4.4vw,56px)] leading-[1.04] tracking-tight text-[var(--tf-text)]">
全球化，正在进入高不确定性时代
<h1 className="mt-6 font-[var(--tf-font-serif)] font-semibold text-[clamp(44px,5vw,64px)] leading-[1.02] tracking-tight text-[var(--tf-text)]">
全球化
<br />
正在进入
<br />
高不确定性时代
</h1>
<div className="mt-10 max-w-[40ch]">
<p className="text-[clamp(16px,1.5vw,18px)] leading-[1.9] text-[var(--tf-text-muted)]">
市场、政策、数据与地缘风险同时叠加，
<br />
任何一次跨境决策的失误，代价都在被放大。
</p>
<p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
对中国企业而言，出海不再只是机会判断，
<br />
而是一项系统性能力挑战。
</p>
</div>
</BookPage>
),
},
{
id: 'section-02',
front: (
<BookPage align="top">
<Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker>
<div className="mt-4">
<SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
</div>
<div className="mt-10 grid gap-4">
{[
'现在是否适合进入这个国家或区域？',
'合规风险会不会在后期集中爆发？',
'当前的增长模式，是否能复制到下一个市场？',
'如果业务受挫，是战略判断错误，还是信息不足？',
'是否存在尚未被识别的关键风险？',
].map((item, index) => (
<div key={item} className="border-l-2 border-[color-mix(in_srgb,var(--tf-border)_75%,white)] pl-4">
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
Q{String(index + 1).padStart(2, '0')}
</div>
<p className="mt-2 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{item}</p>
</div>
))}
</div>
</BookPage>
),
},
{
id: 'section-03',
front: (
<BookPage>
<div className="text-center">
<Kicker>SECTION 03 · CORE THESIS</Kicker>
<div className="mx-auto mt-8 max-w-[34ch]">
<p className="font-[var(--tf-font-serif)] text-[clamp(30px,3.4vw,44px)] leading-[1.4] tracking-tight text-[var(--tf-text)]">
合规，不是成本。
<br />
它是增长的结构性杠杆。
</p>
<p className="mt-10 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-subtle)]">
当合规被前置并系统化，它决定的不是“能否避免风险”，
<br />
而是企业能否更快进入市场、建立信任，并实现可复制的增长。
</p>
</div>
</div>
</BookPage>
),
},
{
id: 'section-04',
front: (
<BookPage align="top">
<Kicker>SECTION 04 · METHODOLOGY</Kicker>
<div className="mt-4">
<SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
</div>
<div className="mt-10 space-y-7">
<BodyText>
这一判断，来自长期服务中国企业全球化过程中的真实实践，
<br />
也来自高度复杂、强监管与多变量环境下的系统性经验。
</BodyText>
<BodyText>
我们逐渐意识到：
<br />
合规并非增长的对立面，而是增长的前置条件。
</BodyText>
</div>
<div className="mt-12 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
METHOD
</div>
<p className="mt-2 font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
Compliance as Growth —— 合规即增长
</p>
</div>
</BookPage>
),
},
{
id: 'section-05',
front: (
<BookPage align="top">
<Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker>
<div className="mt-4">
<SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
</div>
<div className="mt-8">
<BodyText>
图灵环流（TuringFlow），致力于将复杂的全球化问题，
<br />
转化为可执行、可验证、可规模化的系统能力。
</BodyText>
</div>
<div className="mt-10 grid gap-4 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-[color-mix(in_srgb,var(--tf-border)_70%,white)]',
'bg-[color-mix(in_srgb,white_82%,var(--tf-bg))]',
'p-4',
].join(' ')}
>
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
MODULE
</div>
<div className="mt-2 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.85] text-[var(--tf-text-muted)]">{item.desc}</p>
</div>
))}
</div>
</BookPage>
),
},
{
id: 'section-06',
front: (
<BookPage align="top">
<Kicker>SECTION 06 · DISCOVERY</Kicker>
<div className="mt-4">
<SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
</div>
<div className="mt-8">
<BodyText>
我们持续追踪全球政策、市场、行业与地缘变化，
<br />
并将大量碎片化信息，深度加工为可用于决策的判断。
</BodyText>
</div>
<div className="mt-10">
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">CONTENT</div>
<div className="mt-3 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>
</div>
</BookPage>
),
},
{
id: 'section-07',
front: (
<BookPage align="top">
<Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker>
<div className="mt-4">
<SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
</div>
<div className="mt-10 grid gap-5">
{[
'全球合规与市场进入决策周期显著缩短',
'关键风险提前识别与预警',
'增长路径的可复制性明显提升',
'跨市场决策一致性持续增强',
].map((point, index) => (
<div key={point} className="grid grid-cols-[32px_1fr] gap-3">
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
{String(index + 1).padStart(2, '0')}
</div>
<p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{point}</p>
</div>
))}
</div>
</BookPage>
),
},
{
id: 'section-08',
front: (
<BookPage align="top">
<Kicker>SECTION 08 · TRUST</Kicker>
<div className="mt-4">
<SectionTitle>被用于复杂场景，才有价值</SectionTitle>
</div>
<div className="mt-8">
<BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText>
</div>
<div className="mt-10">
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">SELECTED</div>
<div className="mt-4 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,white_86%,var(--tf-bg))] 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>
</div>
</BookPage>
),
},
{
id: 'section-09',
front: (
<BookPage align="top">
<Kicker>SECTION 09 · NEXT STEP</Kicker>
<div className="mt-4">
<SectionTitle serif>探讨你的全球化路径</SectionTitle>
</div>
<div className="mt-10 grid gap-4">
{['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => (
<div
key={line}
className="rounded-2xl border border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_86%,var(--tf-bg))] p-4"
>
<p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{line}</p>
</div>
))}
</div>
</BookPage>
),
},
{
id: 'section-10',
front: <LastPage entries={entries} />,
},
],
[entries],
</div>
<div className="pt-6 text-xs font-[var(--tf-font-ui)] tracking-[0.22em] text-[color-mix(in_srgb,var(--tf-text-subtle)_86%,black)]">
TURINGFLOW MAGAZINE · 2026.01.01
</div>
</div>
</div>
</BookPage>
)
const sheets = useMemo(() => {
const section01Content = (
<BookPage align="top">
<Kicker>SECTION 01 · WORLDVIEW</Kicker>
<div className="mt-10 max-w-[40ch]">
<p className="text-[clamp(16px,1.55vw,19px)] leading-[1.85] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">
市场、政策、数据与地缘风险同时叠加，
<br />
任何一次跨境决策的失误，代价都在被放大。
</p>
<p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[color-mix(in_srgb,var(--tf-text-subtle)_90%,black)]">
对中国企业而言，出海不再只是机会判断，
<br />
而是一项系统性能力挑战。
</p>
<div className="mt-12 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
<p className="text-sm leading-[1.7] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">
向右翻页，进入九个章节的拆解与方法。
</p>
</div>
</div>
</BookPage>
)
const section02Title = (
<BookPage>
<Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker>
<div className="mt-6">
<SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
</div>
<div className="mt-10 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
<p className="text-sm leading-[1.7] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">
我们先用一组问题，帮助你把不确定性拆解成可以被验证的变量。
</p>
</div>
</BookPage>
)
const section02Content = (
<BookPage align="top">
<div className="mt-4">
<Kicker>QUESTIONS</Kicker>
</div>
<div className="mt-10 grid gap-4">
{[
'现在是否适合进入这个国家或区域？',
'合规风险会不会在后期集中爆发？',
'当前的增长模式，是否能复制到下一个市场？',
'如果业务受挫，是战略判断错误，还是信息不足？',
'是否存在尚未被识别的关键风险？',
].map((item, index) => (
<div key={item} className="border-l-2 border-[color-mix(in_srgb,var(--tf-border)_75%,white)] pl-4">
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
Q{String(index + 1).padStart(2, '0')}
</div>
<p className="mt-2 text-[clamp(15px,1.35vw,17px)] leading-[1.9] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">{item}</p>
</div>
))}
</div>
</BookPage>
)
const section03Title = (
<BookPage>
<div className="text-center">
<Kicker>SECTION 03 · CORE THESIS</Kicker>
<div className="mx-auto mt-10 max-w-[34ch]">
<p className="font-[var(--tf-font-serif)] font-medium text-[clamp(30px,3.5vw,46px)] leading-[1.38] tracking-tight text-[var(--tf-text)]">
合规，不是成本。
<br />
它是增长的结构性杠杆。
</p>
</div>
</div>
</BookPage>
)
const section03Content = (
<BookPage align="top">
<Kicker>WHAT IT MEANS</Kicker>
<div className="mt-8">
<BodyText>
当合规被前置并系统化，它决定的不是“能否避免风险”，
<br />
而是企业能否更快进入市场、建立信任，并实现可复制的增长。
</BodyText>
</div>
</BookPage>
)
const section04Title = (
<BookPage>
<Kicker>SECTION 04 · METHODOLOGY</Kicker>
<div className="mt-6">
<SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
</div>
</BookPage>
)
const section04Content = (
<BookPage align="top">
<Kicker>METHOD</Kicker>
<div className="mt-10 space-y-7">
<BodyText>
这一判断，来自长期服务中国企业全球化过程中的真实实践，
<br />
也来自高度复杂、强监管与多变量环境下的系统性经验。
</BodyText>
<BodyText>
我们逐渐意识到：
<br />
合规并非增长的对立面，而是增长的前置条件。
</BodyText>
</div>
<div className="mt-12 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">SIGNATURE</div>
<p className="mt-2 font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
Compliance as Growth —— 合规即增长
</p>
</div>
</BookPage>
)
const section05Title = (
<BookPage>
<Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker>
<div className="mt-6">
<SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
</div>
</BookPage>
)
const section05Content = (
<BookPage align="top">
<Kicker>MODULES</Kicker>
<div className="mt-8">
<BodyText>
图灵环流（TuringFlow），致力于将复杂的全球化问题，
<br />
转化为可执行、可验证、可规模化的系统能力。
</BodyText>
</div>
<div className="mt-10 grid gap-4 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-[color-mix(in_srgb,var(--tf-border)_70%,white)]',
'bg-[color-mix(in_srgb,white_82%,var(--tf-bg))]',
'p-4',
].join(' ')}
>
<div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">MODULE</div>
<div className="mt-2 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.8] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">{item.desc}</p>
</div>
))}
</div>
</BookPage>
)
const section06Title = (
<BookPage>
<Kicker>SECTION 06 · DISCOVERY</Kicker>
<div className="mt-6">
<SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
</div>
</BookPage>
)
const section06Content = (
<BookPage align="top">
<Kicker>CONTENT</Kicker>
<div className="mt-8">
<BodyText>
我们持续追踪全球政策、市场、行业与地缘变化，
<br />
并将大量碎片化信息，深度加工为可用于决策的判断。
</BodyText>
</div>
<div className="mt-10">
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] font-semibold 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>
</div>
</BookPage>
)
const section07Title = (
<BookPage>
<Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker>
<div className="mt-6">
<SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
</div>
</BookPage>
)
const section07Content = (
<BookPage align="top">
<Kicker>RESULT</Kicker>
<div className="mt-10 grid gap-5">
{[
'全球合规与市场进入决策周期显著缩短',
'关键风险提前识别与预警',
'增长路径的可复制性明显提升',
'跨市场决策一致性持续增强',
].map((point, index) => (
<div key={point} className="grid grid-cols-[32px_1fr] gap-3">
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
{String(index + 1).padStart(2, '0')}
</div>
<p className="text-[clamp(15px,1.35vw,17px)] leading-[1.9] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">{point}</p>
</div>
))}
</div>
</BookPage>
)
const section08Title = (
<BookPage>
<Kicker>SECTION 08 · TRUST</Kicker>
<div className="mt-6">
<SectionTitle>被用于复杂场景，才有价值</SectionTitle>
</div>
</BookPage>
)
const section08Content = (
<BookPage align="top">
<Kicker>SELECTED</Kicker>
<div className="mt-8">
<BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText>
</div>
<div className="mt-10 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,white_86%,var(--tf-bg))] 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>
)
const section09Title = (
<BookPage>
<Kicker>SECTION 09 · NEXT STEP</Kicker>
<div className="mt-6">
<SectionTitle serif>探讨你的全球化路径</SectionTitle>
</div>
</BookPage>
)
const section09Content = (
<BookPage align="top">
<Kicker>TO DO</Kicker>
<div className="mt-10 grid gap-4">
{['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => (
<div
key={line}
className="rounded-2xl border border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_86%,var(--tf-bg))] p-4"
>
<p className="text-[clamp(15px,1.35vw,17px)] leading-[1.9] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">{line}</p>
</div>
))}
</div>
</BookPage>
)
const section10Title = (
<BookPage>
<Kicker>SECTION 10 · NAVIGATION</Kicker>
<div className="mt-6">
<SectionTitle serif>从这里进入六个板块</SectionTitle>
</div>
<div className="mt-10 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
<p className="text-sm leading-[1.7] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">快速跳转到 Why / How / System / Discovery / Solutions / Proof。</p>
</div>
</BookPage>
)
const section10Content = <LastPage entries={entries} />
return [
{ id: 'section-01', front: section01Content, back: section02Title },
{ id: 'section-02', front: section02Content, back: section03Title },
{ id: 'section-03', front: section03Content, back: section04Title },
{ id: 'section-04', front: section04Content, back: section05Title },
{ id: 'section-05', front: section05Content, back: section06Title },
{ id: 'section-06', front: section06Content, back: section07Title },
{ id: 'section-07', front: section07Content, back: section08Title },
{ id: 'section-08', front: section08Content, back: section09Title },
{ id: 'section-09', front: section09Content, back: section10Title },
{ id: 'section-10', front: section10Content },
]
}, [entries])
return (
<div className="relative overflow-hidden">
<div
@@ -390,7 +458,7 @@ export const Home: React.FC = () => {
className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(30,91,176,0.10),transparent_58%),radial-gradient(circle_at_bottom,rgba(17,17,17,0.06),transparent_55%)]"
/>
<div className="mx-auto flex min-h-[calc(100vh-0px)] max-w-[1200px] items-center px-[clamp(18px,4vw,56px)] py-[clamp(28px,6vh,64px)]">
<FlipBook title="TuringFlow Magazine" sheets={sheets} className="w-full" />
<FlipBook title="TuringFlow Magazine" sheets={sheets} coverLeft={coverLeft} className="w-full" />
</div>
</div>
)