manual save(2026-01-23 16:48)
This commit is contained in:
SiteAgent Bot
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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,275 +116,341 @@ export const Home: React.FC = () => {
|
|||||||
[],
|
[],
|
||||||
)
|
)
|
||||||
|
|
||||||
const sheets = useMemo(
|
const coverLeft = (
|
||||||
() => [
|
<BookPage>
|
||||||
{
|
<div className="h-full w-full">
|
||||||
id: 'section-01',
|
<div className="flex h-full flex-col justify-between">
|
||||||
front: (
|
<div>
|
||||||
<BookPage>
|
|
||||||
<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 className="mt-10 max-w-[40ch]">
|
</div>
|
||||||
<p className="text-[clamp(16px,1.5vw,18px)] leading-[1.9] text-[var(--tf-text-muted)]">
|
<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
|
||||||
<br />
|
</div>
|
||||||
任何一次跨境决策的失误，代价都在被放大。
|
</div>
|
||||||
</p>
|
</div>
|
||||||
<p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
|
</BookPage>
|
||||||
对中国企业而言，出海不再只是机会判断，
|
|
||||||
<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],
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
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 (
|
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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user