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 15:07)

Browse Source
This commit is contained in:
SiteAgent Bot
2026-01-23 15:07:12 +08:00
parent d19f27a8de
commit 1260f7b37c
2 changed files with 217 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/FlipBook.tsx
View File

@@ -41,15 +41,37 @@ const PageHalf: React.FC<{ side: 'left' | 'right'; children?: React.ReactNode }>
>
<div
className={[
'h-full',
'bg-[color-mix(in_srgb,var(--tf-bg)_55%,white)]',
'shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]',
'relative h-full',
'bg-[color-mix(in_srgb,white_92%,var(--tf-bg))]',
'shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]',
isLeft
? 'shadow-[inset_-18px_0_40px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,0.65)]'
: 'shadow-[inset_18px_0_40px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,0.65)]',
? 'shadow-[inset_-22px_0_50px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.9)]'
: 'shadow-[inset_22px_0_50px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.9)]',
].join(' ')}
>
<div className="h-full p-[clamp(18px,2.2vw,28px)]">{children}</div>
<div
aria-hidden="true"
className={[
'pointer-events-none absolute inset-0 opacity-70',
'bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.95),rgba(255,255,255,0.45)_55%,rgba(255,255,255,0.25))]',
].join(' ')}
/>
<div
aria-hidden="true"
className={[
'pointer-events-none absolute inset-0 opacity-[0.18] mix-blend-multiply',
'bg-[repeating-linear-gradient(0deg,rgba(10,10,10,0.06)_0px,rgba(10,10,10,0.06)_1px,transparent_1px,transparent_6px)]',
].join(' ')}
/>
<div
aria-hidden="true"
className={[
'pointer-events-none absolute inset-0 opacity-[0.08]',
'bg-[repeating-linear-gradient(90deg,rgba(10,10,10,0.05)_0px,rgba(10,10,10,0.05)_1px,transparent_1px,transparent_10px)]',
].join(' ')}
/>
<div className="relative h-full p-[clamp(22px,2.6vw,34px)]">{children}</div>
</div>
</div>
)
@@ -207,6 +229,7 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
}, [currentIndex, sheets.length])
const currentSheet = sheets[currentIndex]
const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null
return (
<section
@@ -240,14 +263,18 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
<div
className={[
'absolute inset-0 rounded-[26px]',
'bg-[color-mix(in_srgb,var(--tf-bg)_42%,white)]',
'shadow-[0_26px_80px_rgba(0,0,0,0.14)]',
'border border-[color-mix(in_srgb,var(--tf-border)_70%,white)]',
'bg-[color-mix(in_srgb,white_88%,var(--tf-bg))]',
'shadow-[0_30px_90px_rgba(0,0,0,0.18)]',
'border border-[color-mix(in_srgb,var(--tf-border)_55%,white)]',
].join(' ')}
/>
<div
aria-hidden="true"
className="absolute inset-y-[22px] left-1/2 w-px bg-[color-mix(in_srgb,var(--tf-border)_80%,white)]"
className="absolute inset-y-[18px] left-1/2 w-px bg-[color-mix(in_srgb,black_22%,transparent)]"
/>
<div
aria-hidden="true"
className="absolute inset-y-[18px] left-1/2 w-[22px] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,rgba(0,0,0,0.12),transparent_70%)]"
/>
<div
@@ -256,7 +283,27 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
busy ? 'opacity-0 pointer-events-none' : 'opacity-100',
].join(' ')}
>
<PageHalf side="left">{currentSheet?.back ?? currentSheet?.front}</PageHalf>
<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>
<div className="pointer-events-none absolute bottom-4 right-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(2, currentIndex * 2 + 1)).padStart(2, '0')}
</div>
<PageHalf side="right">{currentSheet?.front}</PageHalf>
</div>
@@ -293,9 +340,9 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
disabled={!canPrev}
className={[
'inline-flex items-center justify-center rounded-full border px-4 py-2 text-sm transition',
'border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_50%,white)]',
'border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_76%,var(--tf-bg))]',
canPrev
? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_34%,white)]'
? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,white_64%,var(--tf-bg))]'
: 'text-[var(--tf-text-subtle)] opacity-60 cursor-not-allowed',
].join(' ')}
aria-label="上一页"
@@ -303,8 +350,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
← Prev
</button>
<div className="min-w-[88px] text-center text-xs font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)]">
{progressLabel}
<div className="min-w-[120px] text-center text-xs font-[var(--tf-font-ui)] tracking-[0.16em] text-[var(--tf-text-subtle)]">
ISSUE 01 · {progressLabel}
</div>
<button
@@ -313,9 +360,9 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
disabled={!canNext}
className={[
'inline-flex items-center justify-center rounded-full border px-4 py-2 text-sm transition',
'border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_50%,white)]',
'border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_76%,var(--tf-bg))]',
canNext
? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_34%,white)]'
? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,white_64%,var(--tf-bg))]'
: 'text-[var(--tf-text-subtle)] opacity-60 cursor-not-allowed',
].join(' ')}
aria-label="下一页"

169
src/pages/Home.tsx
View File

@@ -14,11 +14,18 @@ const BookPage: React.FC<{ children: React.ReactNode; align?: 'center' | 'top' }
className={[
'h-full',
'w-full',
'px-[clamp(6px,1vw,10px)]',
align === 'top' ? 'pt-[clamp(6px,1.4vw,18px)]' : 'flex items-center',
align === 'top' ? 'pt-[clamp(8px,1.6vw,22px)]' : 'flex items-center',
].join(' ')}
>
<div className="w-full max-w-[40ch]">{children}</div>
<div className="w-full max-w-[46ch]">{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)]">
{children}
</div>
)
}
@@ -33,8 +40,8 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
className={[
serif ? 'font-[var(--tf-font-serif)]' : 'font-medium',
center ? 'text-center' : 'text-left',
'text-[clamp(22px,2.4vw,34px)]',
'leading-[1.18]',
'text-[clamp(22px,2.5vw,36px)]',
'leading-[1.14]',
'tracking-tight',
'text-[var(--tf-text)]',
].join(' ')}
@@ -44,6 +51,12 @@ 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>
)
}
const LastPage: React.FC<{ entries: Entry[] }> = ({ entries }) => {
return (
<div className="flex h-full flex-col justify-between">
@@ -107,19 +120,22 @@ export const Home: React.FC = () => {
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)]">
<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>
<p className="mt-8 text-[clamp(16px,1.5vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
<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-6 text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-subtle)]">
<p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
对中国企业而言，出海不再只是机会判断，
<br />
而是一项系统性能力挑战。
</p>
</div>
</BookPage>
),
},
@@ -127,20 +143,24 @@ export const Home: React.FC = () => {
id: 'section-02',
front: (
<BookPage align="top">
<Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker>
<div className="mt-4">
<SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
<div className="mt-8 grid gap-4">
</div>
<div className="mt-10 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>
].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>
@@ -152,13 +172,14 @@ export const Home: React.FC = () => {
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)]">
<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-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
<p className="mt-10 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-subtle)]">
当合规被前置并系统化，它决定的不是“能否避免风险”，
<br />
而是企业能否更快进入市场、建立信任，并实现可复制的增长。
@@ -172,21 +193,29 @@ export const Home: React.FC = () => {
id: 'section-04',
front: (
<BookPage align="top">
<Kicker>SECTION 04 · METHODOLOGY</Kicker>
<div className="mt-4">
<SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
<div className="mt-8 space-y-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
<p>
</div>
<div className="mt-10 space-y-7">
<BodyText>
这一判断，来自长期服务中国企业全球化过程中的真实实践，
<br />
也来自高度复杂、强监管与多变量环境下的系统性经验。
</p>
<p>
</BodyText>
<BodyText>
我们逐渐意识到：
<br />
合规并非增长的对立面，而是增长的前置条件。
</p>
</BodyText>
</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)]">
<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>
@@ -197,14 +226,20 @@ export const Home: React.FC = () => {
id: 'section-05',
front: (
<BookPage align="top">
<Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker>
<div className="mt-4">
<SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
<p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
</div>
<div className="mt-8">
<BodyText>
图灵环流（TuringFlow），致力于将复杂的全球化问题，
<br />
转化为可执行、可验证、可规模化的系统能力。
</p>
</BodyText>
</div>
<div className="mt-8 grid gap-3 sm:grid-cols-2">
<div className="mt-10 grid gap-4 sm:grid-cols-2">
{[
{ title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' },
{ title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' },
@@ -214,39 +249,51 @@ export const Home: React.FC = () => {
<div
key={item.title}
className={[
'rounded-2xl border border-[var(--tf-border)]',
'bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)]',
'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-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
<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.75] text-[var(--tf-text-muted)]">{item.desc}</p>
<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>
<p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
</div>
<div className="mt-8">
<BodyText>
我们持续追踪全球政策、市场、行业与地缘变化，
<br />
并将大量碎片化信息，深度加工为可用于决策的判断。
</p>
</BodyText>
</div>
<div className="mt-8 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] text-[var(--tf-accent-link)]">
<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>
),
},
@@ -254,17 +301,23 @@ export const Home: React.FC = () => {
id: 'section-07',
front: (
<BookPage align="top">
<Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker>
<div className="mt-4">
<SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
<div className="mt-8 grid gap-4">
</div>
<div className="mt-10 grid gap-5">
{[
'全球合规与市场进入决策周期显著缩短',
'关键风险提前识别与预警',
'增长路径的可复制性明显提升',
'跨市场决策一致性持续增强',
].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>
].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>
@@ -275,22 +328,28 @@ export const Home: React.FC = () => {
id: 'section-08',
front: (
<BookPage align="top">
<Kicker>SECTION 08 · TRUST</Kicker>
<div className="mt-4">
<SectionTitle>被用于复杂场景，才有价值</SectionTitle>
<p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
图灵环流的能力，已在政府级项目及多行业实践中得到验证。
</p>
</div>
<div className="mt-8">
<BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText>
</div>
<div className="mt-8 grid grid-cols-3 gap-3">
<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,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"
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>
),
},
@@ -298,14 +357,20 @@ export const Home: React.FC = () => {
id: 'section-09',
front: (
<BookPage align="top">
<Kicker>SECTION 09 · NEXT STEP</Kicker>
<div className="mt-4">
<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 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>
),
@@ -322,10 +387,10 @@ export const Home: React.FC = () => {
<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%)]"
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" sheets={sheets} className="w-full" />
<FlipBook title="TuringFlow Magazine" sheets={sheets} className="w-full" />
</div>
</div>
)