diff --git a/src/components/FlipBook.tsx b/src/components/FlipBook.tsx index 92d8ff8..b528b73 100644 --- a/src/components/FlipBook.tsx +++ b/src/components/FlipBook.tsx @@ -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(' ')} /> -
{children}
+
{children}
) @@ -142,7 +143,7 @@ const Sheet: React.FC<{ ) } -export const FlipBook: React.FC = ({ title, sheets, className }) => { +export const FlipBook: React.FC = ({ title, sheets, coverLeft, className }) => { const reducedMotion = usePrefersReducedMotion() const transitionMs = reducedMotion ? 0 : TRANSITION_MS @@ -231,6 +232,8 @@ export const FlipBook: React.FC = ({ title, sheets, className }) const currentSheet = sheets[currentIndex] const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null + const leftPageContent = currentIndex === 0 ? (coverLeft ?? null) : previousSheet?.back + return (
= ({ title, sheets, className })

{title}

-

点击翻页，或使用键盘 ← / →，移动端可左右滑动。

+

+ 点击翻页，或使用键盘 ← / →，移动端可左右滑动。 +

@@ -254,7 +259,8 @@ export const FlipBook: React.FC = ({ 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 = ({ title, sheets, className }) busy ? 'opacity-0 pointer-events-none' : 'opacity-100', ].join(' ')} > - + {leftPageContent} {currentSheet?.front}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 31ac233..870fcbe 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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(' ')} > -
{children}
+
{children}
) } const Kicker: React.FC<{ children: React.ReactNode }> = ({ children }) => { return ( -
+
{children}
) @@ -38,10 +38,10 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente return (

= ({ children }) => { return ( -

{children}

+

+ {children} +

) } @@ -114,275 +116,341 @@ export const Home: React.FC = () => { [], ) - const sheets = useMemo( - () => [ - { - id: 'section-01', - front: ( - + const coverLeft = ( + +
+
+
SECTION 01 · WORLDVIEW -

- 全球化，正在进入高不确定性时代 +

+ 全球化 +
+ 正在进入 +
+ 高不确定性时代

-
-

- 市场、政策、数据与地缘风险同时叠加， -
- 任何一次跨境决策的失误，代价都在被放大。 -

-

- 对中国企业而言，出海不再只是机会判断， -
- 而是一项系统性能力挑战。 -

-
- - ), - }, - { - id: 'section-02', - front: ( - - SECTION 02 · DECISION UNCERTAINTY -
- 困难的不是走向全球，而是如何在不确定中做出可控决策 -
- -
- {[ - '现在是否适合进入这个国家或区域？', - '合规风险会不会在后期集中爆发？', - '当前的增长模式，是否能复制到下一个市场？', - '如果业务受挫，是战略判断错误，还是信息不足？', - '是否存在尚未被识别的关键风险？', - ].map((item, index) => ( -
-
- Q{String(index + 1).padStart(2, '0')} -
-

{item}

-
- ))} -
- - ), - }, - { - id: 'section-03', - front: ( - -
- SECTION 03 · CORE THESIS -
-

- 合规，不是成本。 -
- 它是增长的结构性杠杆。 -

-

- 当合规被前置并系统化，它决定的不是“能否避免风险”， -
- 而是企业能否更快进入市场、建立信任，并实现可复制的增长。 -

-
-
- - ), - }, - { - id: 'section-04', - front: ( - - SECTION 04 · METHODOLOGY -
- 这是在复杂现实中被反复验证的方法论 -
- -
- - 这一判断，来自长期服务中国企业全球化过程中的真实实践， -
- 也来自高度复杂、强监管与多变量环境下的系统性经验。 - - - 我们逐渐意识到： -
- 合规并非增长的对立面，而是增长的前置条件。 - -
- -
-
- METHOD -
-

- Compliance as Growth —— 合规即增长 -

-
- - ), - }, - { - id: 'section-05', - front: ( - - SECTION 05 · SYSTEM OVERVIEW -
- 当问题复杂到无法依赖个人经验时，必须用系统解决 -
- -
- - 图灵环流（TuringFlow），致力于将复杂的全球化问题， -
- 转化为可执行、可验证、可规模化的系统能力。 - -
- -
- {[ - { title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' }, - { title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' }, - { title: 'G-Brain', desc: '多个 AI Agent 如何协同，支撑复杂决策？' }, - { title: 'Discovery', desc: '我如何持续获得高质量、可行动的全球决策信号？' }, - ].map((item) => ( -
-
- MODULE -
-
- {item.title} -
-

{item.desc}

-
- ))} -
- - ), - - }, - { - id: 'section-06', - front: ( - - SECTION 06 · DISCOVERY -
- Discovery，是我们的全球决策雷达 -
-
- - 我们持续追踪全球政策、市场、行业与地缘变化， -
- 并将大量碎片化信息，深度加工为可用于决策的判断。 - -
- -
-
CONTENT
-
- {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => ( - - {tag} - - ))} -
-
- - ), - }, - { - id: 'section-07', - front: ( - - SECTION 07 · MEASURABLE OUTCOME -
- 系统带来的，是可以被度量的确定性 -
- -
- {[ - '全球合规与市场进入决策周期显著缩短', - '关键风险提前识别与预警', - '增长路径的可复制性明显提升', - '跨市场决策一致性持续增强', - ].map((point, index) => ( -
-
- {String(index + 1).padStart(2, '0')} -
-

{point}

-
- ))} -
- - ), - }, - { - id: 'section-08', - front: ( - - SECTION 08 · TRUST -
- 被用于复杂场景，才有价值 -
-
- 图灵环流的能力，已在政府级项目及多行业实践中得到验证。 -
- -
-
SELECTED
-
- {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => ( -
- {label} -
- ))} -
-
- - ), - }, - { - id: 'section-09', - front: ( - - SECTION 09 · NEXT STEP -
- 探讨你的全球化路径 -
- -
- {['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => ( -
-

{line}

-
- ))} -
- - ), - }, - { - id: 'section-10', - front: , - }, - ], - [entries], +
+
+ TURINGFLOW MAGAZINE · 2026.01.01 +
+
+
+ ) + const sheets = useMemo(() => { + const section01Content = ( + + SECTION 01 · WORLDVIEW +
+

+ 市场、政策、数据与地缘风险同时叠加， +
+ 任何一次跨境决策的失误，代价都在被放大。 +

+

+ 对中国企业而言，出海不再只是机会判断， +
+ 而是一项系统性能力挑战。 +

+
+

+ 向右翻页，进入九个章节的拆解与方法。 +

+
+
+ + ) + + const section02Title = ( + + SECTION 02 · DECISION UNCERTAINTY +
+ 困难的不是走向全球，而是如何在不确定中做出可控决策 +
+
+

+ 我们先用一组问题，帮助你把不确定性拆解成可以被验证的变量。 +

+
+ + ) + + const section02Content = ( + +
+ QUESTIONS +
+
+ {[ + '现在是否适合进入这个国家或区域？', + '合规风险会不会在后期集中爆发？', + '当前的增长模式，是否能复制到下一个市场？', + '如果业务受挫，是战略判断错误，还是信息不足？', + '是否存在尚未被识别的关键风险？', + ].map((item, index) => ( +
+
+ Q{String(index + 1).padStart(2, '0')} +
+

{item}

+
+ ))} +
+ + ) + + const section03Title = ( + +
+ SECTION 03 · CORE THESIS +
+

+ 合规，不是成本。 +
+ 它是增长的结构性杠杆。 +

+
+
+ + ) + + const section03Content = ( + + WHAT IT MEANS +
+ + 当合规被前置并系统化，它决定的不是“能否避免风险”， +
+ 而是企业能否更快进入市场、建立信任，并实现可复制的增长。 + +
+ + ) + + const section04Title = ( + + SECTION 04 · METHODOLOGY +
+ 这是在复杂现实中被反复验证的方法论 +
+ + ) + + const section04Content = ( + + METHOD +
+ + 这一判断，来自长期服务中国企业全球化过程中的真实实践， +
+ 也来自高度复杂、强监管与多变量环境下的系统性经验。 + + + 我们逐渐意识到： +
+ 合规并非增长的对立面，而是增长的前置条件。 + +
+ +
+
SIGNATURE
+

+ Compliance as Growth —— 合规即增长 +

+
+ + ) + + const section05Title = ( + + SECTION 05 · SYSTEM OVERVIEW +
+ 当问题复杂到无法依赖个人经验时，必须用系统解决 +
+ + ) + + const section05Content = ( + + MODULES +
+ + 图灵环流（TuringFlow），致力于将复杂的全球化问题， +
+ 转化为可执行、可验证、可规模化的系统能力。 + +
+ +
+ {[ + { title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' }, + { title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' }, + { title: 'G-Brain', desc: '多个 AI Agent 如何协同，支撑复杂决策？' }, + { title: 'Discovery', desc: '我如何持续获得高质量、可行动的全球决策信号？' }, + ].map((item) => ( +
+
MODULE
+
{item.title}
+

{item.desc}

+
+ ))} +
+ + ) + + const section06Title = ( + + SECTION 06 · DISCOVERY +
+ Discovery，是我们的全球决策雷达 +
+ + ) + + const section06Content = ( + + CONTENT +
+ + 我们持续追踪全球政策、市场、行业与地缘变化， +
+ 并将大量碎片化信息，深度加工为可用于决策的判断。 + +
+ +
+
+ {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => ( + + {tag} + + ))} +
+
+ + ) + + const section07Title = ( + + SECTION 07 · MEASURABLE OUTCOME +
+ 系统带来的，是可以被度量的确定性 +
+ + ) + + const section07Content = ( + + RESULT +
+ {[ + '全球合规与市场进入决策周期显著缩短', + '关键风险提前识别与预警', + '增长路径的可复制性明显提升', + '跨市场决策一致性持续增强', + ].map((point, index) => ( +
+
+ {String(index + 1).padStart(2, '0')} +
+

{point}

+
+ ))} +
+ + ) + + const section08Title = ( + + SECTION 08 · TRUST +
+ 被用于复杂场景，才有价值 +
+ + ) + + const section08Content = ( + + SELECTED +
+ 图灵环流的能力，已在政府级项目及多行业实践中得到验证。 +
+ +
+ {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => ( +
+ {label} +
+ ))} +
+ + ) + + const section09Title = ( + + SECTION 09 · NEXT STEP +
+ 探讨你的全球化路径 +
+ + ) + + const section09Content = ( + + TO DO +
+ {['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => ( +
+

{line}

+
+ ))} +
+ + ) + + const section10Title = ( + + SECTION 10 · NAVIGATION +
+ 从这里进入六个板块 +
+
+

快速跳转到 Why / How / System / Discovery / Solutions / Proof。

+
+ + ) + + const section10Content = + + 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 (
{ 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%)]" />
- +
)