# 震裕课前准备页风格合约

## 标准样例

公网样例：<https://zhenyu-ai-prep-0530.pages.dev/>

本地样例：`../assets/zhenyu-ai-prep-0530/`

这份样例的价值不只是文字，而是“交付形态”：给学员一个可以直接打开、照着做、最后自检的公网准备页。

## 信息架构

一比一保留以下顺序：

1. Sticky topbar：左侧品牌简称和课程名；右侧锚点导航。
2. Hero：课程日期、课前通知标题、核心说明、主 CTA、检查清单 CTA。
3. 右侧硬交付卡：三项结课成果，形成课程压力和期待。
4. Deadline strip：三张时间节点卡，分别写准备截止、材料截止、上课当天。
5. Notice band：一句话定调，说明这不是“听完就走”的讲座。
6. Training Goals：三项独立能力或结课目标。
7. Part 01 必须完成：工具、账号、额度、个人画像、Skill、智能体等任务卡。
8. Part 02 带到课堂：真实工作材料、低敏规则、痛点/产品想法。
9. Part 03 统一入口：课程平台、工具下载、备用入口、智能体平台等链接。
10. Part 04 最终检查：可勾选 checklist 和一句话标准。
11. Footer：客户、课程名、日期、核心入口链接。

## 视觉语言

保留样例的“清爽技术型内训通知”质感：
- 浅蓝、白、青色、薄荷绿为主，少量琥珀/玫红只作为辅助标签。
- 顶部毛玻璃导航，页面宽度约 1140px。
- Hero 使用 `canvas` 网格和粒子动效，不用静态插画替代。
- 卡片边框轻、阴影轻，圆角约 18-22px。
- 重点按钮为蓝色胶囊按钮，次按钮为浅底描边。
- H1 很大，正文宽松，任务卡文字密度较高但不拥挤。
- 不使用宣传页式大段口号，不使用花哨渐变、不使用深色科技风。

## 交互

保留这些轻交互：
- 平滑滚动锚点。
- Hero canvas 动效。
- 至少一个可复制 prompt 或提示语模块。
- checklist 使用原生 checkbox，方便学员逐项勾选。
- 复制成功 toast。

## 文案模板感

文案要具体、可执行、带验收：

Hero 句式：
“本次课程会直接进入真实工具、真实流程和真实材料的动手实战。请所有参训学员在 [日期] 前完成 [工具/账号/材料] 准备。课程结束时，每个人都要尽量做到：[成果1]、[成果2]、[成果3]。”

材料提醒句式：
“请带低敏版本，不要包含客户隐私、账号、密钥、金额、合同编号、未公开项目名称。”

最终一句话标准：
“装好工具、开好额度、让 AI 认识你、带来真实材料、先做一个[智能体/初稿/流程]、想清楚一个工作痛点，并准备在课堂上把它做成能运行的成果。”

## 可变项

可以按课程类型替换：
- 工具：Qoder/QoderWork、ChatGPT、Claude、Dify、Coze、阿里云百炼、企业内部平台等。
- 平台：课程资料、作业提报、Skill 下载、问卷、飞书/钉钉表单等。
- 目标：做智能体、做 Skill、做流程图、做数据看板、做应用原型、做自动化脚本等。
- 材料：SOP、流程文件、表单、制度、数据样例、客户反馈、项目资料等。

不要替换掉：
- 页面顺序
- 准备任务 + 材料要求 + 入口链接 + 最终检查的闭环
- 公开发布交付方式
