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