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 = { type FlipBookProps = {
title: string title: string
sheets: FlipBookSheet[] sheets: FlipBookSheet[]
coverLeft?: React.ReactNode
className?: string className?: string
} }
@@ -71,7 +72,7 @@ const PageHalf: React.FC<{ side: 'left' | 'right'; children?: React.ReactNode }>
].join(' ')} ].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>
</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 reducedMotion = usePrefersReducedMotion()
const transitionMs = reducedMotion ? 0 : TRANSITION_MS const transitionMs = reducedMotion ? 0 : TRANSITION_MS
@@ -231,6 +232,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
const currentSheet = sheets[currentIndex] const currentSheet = sheets[currentIndex]
const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null
const leftPageContent = currentIndex === 0 ? (coverLeft ?? null) : previousSheet?.back
return ( return (
<section <section
aria-label={title} 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"> <h1 className="font-[var(--tf-font-serif)] text-[clamp(32px,4.2vw,54px)] leading-[1.08] tracking-tight">
{title} {title}
</h1> </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>
<div className="mt-10 flex items-center justify-center"> <div className="mt-10 flex items-center justify-center">
@@ -254,7 +259,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
className={[ className={[
'relative', 'relative',
'w-[min(92vw,940px)]', 'w-[min(92vw,940px)]',
'h-[min(68vh,560px)]', 'h-[min(74vh,640px)]',
'min-h-[520px]',
'[perspective:1800px]', '[perspective:1800px]',
].join(' ')} ].join(' ')}
onPointerDown={onPointerDown} onPointerDown={onPointerDown}
@@ -283,20 +289,6 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
busy ? 'opacity-0 pointer-events-none' : 'opacity-100', busy ? 'opacity-0 pointer-events-none' : 'opacity-100',
].join(' ')} ].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)]"> <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')} {String(Math.max(1, currentIndex * 2)).padStart(2, '0')}
</div> </div>
@@ -304,6 +296,7 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
{String(Math.max(2, currentIndex * 2 + 1)).padStart(2, '0')} {String(Math.max(2, currentIndex * 2 + 1)).padStart(2, '0')}
</div> </div>
<PageHalf side="left">{leftPageContent}</PageHalf>
<PageHalf side="right">{currentSheet?.front}</PageHalf> <PageHalf side="right">{currentSheet?.front}</PageHalf>
</div> </div>

274
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', align === 'top' ? 'pt-[clamp(8px,1.6vw,22px)]' : 'flex items-center',
].join(' ')} ].join(' ')}
> >
<div className="w-full max-w-[46ch]">{children}</div> <div className="w-full max-w-[48ch]">{children}</div>
</div> </div>
) )
} }
const Kicker: React.FC<{ children: React.ReactNode }> = ({ children }) => { const Kicker: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return ( 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} {children}
</div> </div>
) )
@@ -38,10 +38,10 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
return ( return (
<h2 <h2
className={[ className={[
serif ? 'font-[var(--tf-font-serif)]' : 'font-medium', serif ? 'font-[var(--tf-font-serif)]' : 'font-semibold',
center ? 'text-center' : 'text-left', center ? 'text-center' : 'text-left',
'text-[clamp(22px,2.5vw,36px)]', 'text-[clamp(22px,2.6vw,38px)]',
'leading-[1.14]', 'leading-[1.12]',
'tracking-tight', 'tracking-tight',
'text-[var(--tf-text)]', 'text-[var(--tf-text)]',
].join(' ')} ].join(' ')}
@@ -53,7 +53,9 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
const BodyText: React.FC<{ children: React.ReactNode }> = ({ children }) => { const BodyText: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return ( 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,40 +116,71 @@ export const Home: React.FC = () => {
[], [],
) )
const sheets = useMemo( const coverLeft = (
() => [
{
id: 'section-01',
front: (
<BookPage> <BookPage>
<div className="h-full w-full">
<div className="flex h-full flex-col justify-between">
<div>
<Kicker>SECTION 01 · WORLDVIEW</Kicker> <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> </h1>
</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]"> <div className="mt-10 max-w-[40ch]">
<p className="text-[clamp(16px,1.5vw,18px)] leading-[1.9] text-[var(--tf-text-muted)]"> <p className="text-[clamp(16px,1.55vw,19px)] leading-[1.85] text-[color-mix(in_srgb,var(--tf-text-muted)_92%,black)]">
市场、政策、数据与地缘风险同时叠加， 市场、政策、数据与地缘风险同时叠加，
<br /> <br />
任何一次跨境决策的失误，代价都在被放大。 任何一次跨境决策的失误，代价都在被放大。
</p> </p>
<p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]"> <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 /> <br />
而是一项系统性能力挑战。 而是一项系统性能力挑战。
</p> </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> </div>
</BookPage> </BookPage>
), )
},
{ const section02Title = (
id: 'section-02', <BookPage>
front: (
<BookPage align="top">
<Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker> <Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle> <SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
</div> </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"> <div className="mt-10 grid gap-4">
{[ {[
'现在是否适合进入这个国家或区域？', '现在是否适合进入这个国家或区域？',
@@ -160,44 +193,53 @@ export const Home: React.FC = () => {
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]"> <div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
Q{String(index + 1).padStart(2, '0')} Q{String(index + 1).padStart(2, '0')}
</div> </div>
<p className="mt-2 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{item}</p> <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>
))} ))}
</div> </div>
</BookPage> </BookPage>
), )
},
{ const section03Title = (
id: 'section-03',
front: (
<BookPage> <BookPage>
<div className="text-center"> <div className="text-center">
<Kicker>SECTION 03 · CORE THESIS</Kicker> <Kicker>SECTION 03 · CORE THESIS</Kicker>
<div className="mx-auto mt-8 max-w-[34ch]"> <div className="mx-auto mt-10 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)]"> <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 /> <br />
它是增长的结构性杠杆。 它是增长的结构性杠杆。
</p> </p>
<p className="mt-10 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-subtle)]">
当合规被前置并系统化，它决定的不是“能否避免风险”，
<br />
而是企业能否更快进入市场、建立信任，并实现可复制的增长。
</p>
</div> </div>
</div> </div>
</BookPage> </BookPage>
), )
},
{ const section03Content = (
id: 'section-04',
front: (
<BookPage align="top"> <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> <Kicker>SECTION 04 · METHODOLOGY</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle> <SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
</div> </div>
</BookPage>
)
const section04Content = (
<BookPage align="top">
<Kicker>METHOD</Kicker>
<div className="mt-10 space-y-7"> <div className="mt-10 space-y-7">
<BodyText> <BodyText>
这一判断，来自长期服务中国企业全球化过程中的真实实践， 这一判断，来自长期服务中国企业全球化过程中的真实实践，
@@ -212,25 +254,26 @@ export const Home: React.FC = () => {
</div> </div>
<div className="mt-12 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6"> <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)]"> <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">SIGNATURE</div>
METHOD
</div>
<p className="mt-2 font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]"> <p className="mt-2 font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
Compliance as Growth —— 合规即增长 Compliance as Growth —— 合规即增长
</p> </p>
</div> </div>
</BookPage> </BookPage>
), )
},
{ const section05Title = (
id: 'section-05', <BookPage>
front: (
<BookPage align="top">
<Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker> <Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle> <SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
</div> </div>
</BookPage>
)
const section05Content = (
<BookPage align="top">
<Kicker>MODULES</Kicker>
<div className="mt-8"> <div className="mt-8">
<BodyText> <BodyText>
图灵环流（TuringFlow），致力于将复杂的全球化问题， 图灵环流（TuringFlow），致力于将复杂的全球化问题，
@@ -254,28 +297,27 @@ export const Home: React.FC = () => {
'p-4', 'p-4',
].join(' ')} ].join(' ')}
> >
<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)] tracking-[0.22em] text-[var(--tf-text-subtle)]">MODULE</div>
MODULE <div className="mt-2 text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">{item.title}</div>
</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 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>
))} ))}
</div> </div>
</BookPage> </BookPage>
), )
}, const section06Title = (
{ <BookPage>
id: 'section-06',
front: (
<BookPage align="top">
<Kicker>SECTION 06 · DISCOVERY</Kicker> <Kicker>SECTION 06 · DISCOVERY</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle> <SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
</div> </div>
</BookPage>
)
const section06Content = (
<BookPage align="top">
<Kicker>CONTENT</Kicker>
<div className="mt-8"> <div className="mt-8">
<BodyText> <BodyText>
我们持续追踪全球政策、市场、行业与地缘变化， 我们持续追踪全球政策、市场、行业与地缘变化，
@@ -285,8 +327,7 @@ export const Home: React.FC = () => {
</div> </div>
<div className="mt-10"> <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)] font-semibold text-[var(--tf-accent-link)]">
<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) => ( {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => (
<span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1"> <span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1">
{tag} {tag}
@@ -295,17 +336,20 @@ export const Home: React.FC = () => {
</div> </div>
</div> </div>
</BookPage> </BookPage>
), )
},
{ const section07Title = (
id: 'section-07', <BookPage>
front: (
<BookPage align="top">
<Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker> <Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle> <SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
</div> </div>
</BookPage>
)
const section07Content = (
<BookPage align="top">
<Kicker>RESULT</Kicker>
<div className="mt-10 grid gap-5"> <div className="mt-10 grid gap-5">
{[ {[
'全球合规与市场进入决策周期显著缩短', '全球合规与市场进入决策周期显著缩短',
@@ -317,28 +361,30 @@ export const Home: React.FC = () => {
<div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]"> <div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
{String(index + 1).padStart(2, '0')} {String(index + 1).padStart(2, '0')}
</div> </div>
<p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{point}</p> <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>
))} ))}
</div> </div>
</BookPage> </BookPage>
), )
},
{ const section08Title = (
id: 'section-08', <BookPage>
front: (
<BookPage align="top">
<Kicker>SECTION 08 · TRUST</Kicker> <Kicker>SECTION 08 · TRUST</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle>被用于复杂场景，才有价值</SectionTitle> <SectionTitle>被用于复杂场景，才有价值</SectionTitle>
</div> </div>
</BookPage>
)
const section08Content = (
<BookPage align="top">
<Kicker>SELECTED</Kicker>
<div className="mt-8"> <div className="mt-8">
<BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText> <BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText>
</div> </div>
<div className="mt-10"> <div className="mt-10 grid grid-cols-3 gap-3">
<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) => ( {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => (
<div <div
key={label} key={label}
@@ -349,40 +395,62 @@ export const Home: React.FC = () => {
</div> </div>
))} ))}
</div> </div>
</div>
</BookPage> </BookPage>
), )
},
{ const section09Title = (
id: 'section-09', <BookPage>
front: (
<BookPage align="top">
<Kicker>SECTION 09 · NEXT STEP</Kicker> <Kicker>SECTION 09 · NEXT STEP</Kicker>
<div className="mt-4"> <div className="mt-6">
<SectionTitle serif>探讨你的全球化路径</SectionTitle> <SectionTitle serif>探讨你的全球化路径</SectionTitle>
</div> </div>
</BookPage>
)
const section09Content = (
<BookPage align="top">
<Kicker>TO DO</Kicker>
<div className="mt-10 grid gap-4"> <div className="mt-10 grid gap-4">
{['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => ( {['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => (
<div <div
key={line} 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" 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> <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>
))} ))}
</div> </div>
</BookPage> </BookPage>
),
},
{
id: 'section-10',
front: <LastPage entries={entries} />,
},
],
[entries],
) )
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 ( return (
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
<div <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%)]" 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)]"> <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>
</div> </div>
) )