落地页
一个落地页只有一个任务：引导特定访客完成一个特定行动。每个部分要么为这个行动建立理由，要么消除一个不行动的理由。先确定行动，再设计。
1. 构建前先决定好
在接触 JSX 之前，先把下面这些写下来（如果应用有 DESIGN.md 文件，就写在里面）：
- 受众： 谁会来这个页面，他们已经知道什么。
- 主要行动： 一个动词（“开始免费试用”、“预订餐桌”、“获取报价”）。每个页面只有一个主要 CTA 标签；重复使用它，不要改变。
- 次要行动： 可选且承诺度较低（“查看定价”、“观看演示”）。
- 你拥有的真实证明： 真实的数字、客户姓名、引语、评分。绝不要编造推荐语、logo、用户数量或价格。如果页面所有者没有提供这些信息，请忽略该部分，或者在内容数据中使用一个明确标记为 TODO 的占位符，而不是在可见的文案中。
2. 区块顺序（默认）
| # | 区块 | 目的 | 组件 |
|---|---|---|---|
| 1 | 页眉（Header） | 品牌标识，3-5 个导航链接，主要 CTA | SiteHeader |
| 2 | 主视觉（Hero） | 承诺 + 主要 CTA 位于首屏 | Hero |
| 3 | 证明条（Proof strip） | Logo、评分或一个硬性数字 | LogoMarquee 或行内统计 |
| 4 | 问题/结果（Problem/outcome） | 现状为何有害，变化后如何 | Section + SectionHeader |
| 5 | 功能（Features） | 3-6 个好处，每个都与一个结果相关联 | FeatureGrid 或 BentoGrid |
| 6 | 工作原理（How it works） | 当过程不为人知时，需要 3-4 个步骤 | StepList |
| 7 | 客户评价（Testimonials） | 带姓名和角色的真实引语 | Testimonials |
| 8 | 定价（Pricing） | 方案，或“起步价”及包含内容 | PricingTable |
| 9 | 常见问题（FAQ） | 简洁地回答异议 | Faq |
| 10 | 最终 CTA（Final CTA） | 重新陈述承诺 + 相同的主要 CTA | CtaBand |
| 11 | 页脚（Footer） | 联系方式、法律信息、次要链接 | SiteFooter |
如果没有真实内容，就删除相应区块。简洁诚实的页面胜过冗长臃肿的页面。至少保留区块 1、2、5 和 10。
3. Hero 区域规则
- 页面上只有一个
<h1>，放在 hero 区域内。Hero组件已经将其title渲染为 h1；不要在其他地方添加另一个 h1。章节标题使用 h2。 - 标题在约 10 个词以内陈述对受众的结果。副标题（一到两句话，约 25 个词以内）说明方式、面向谁，或有何不同。
- 主要 CTA 在 375x667 和 1280x800 分辨率下无需滚动即可见。将其放在
Hero组件的actionsprop 中；链接到真实目标（路由、mailto:、tel:、表单锚点），绝不要使用href="#"。 - 媒体：使用真实的产品截图、照片或插图来展示结果。为图片设置显式的
width/height，并且不要对 Hero 图片进行懒加载（它通常是 LCP 元素）。 - 可选：在 CTA 下方添加信任行：“无需信用卡”、“4.8/5 评分，来自 1200 条评论”。
4. 文案层级
- 标题 (h1)：结果。2. 副标题：机制或受众。3. CTA：动词 + 对象。
- 章节标题 (h2)：利益陈述，而不是标签（例如，“一天内完成账目”，而不是“功能”）。
- 正文：短段落，每行约 80 个字符以内（使用
max-w-prose或max-w-xl）。
用应用的语言编写具体、平实的文案。不要使用 lorem ipsum，不要使用“革新你的工作流程”，不要使用“功能 1”。请参考 references/copy-formulas.md。
5. 布局与视觉节奏
- 使用语义化令牌（
bg-background、bg-secondary、text-muted-foreground），绝不要使用原始调色板类。交替使用Section tone="muted"来分隔区块，而不是到处添加边框和阴影。 - 变化区块形状：一个网格，然后是一个图片/文字分割布局，接着是一个全宽引语。避免整个页面仅由相同的卡片网格堆叠而成。
- 每个页面只有一个醒目的元素（hero 视觉或一种排版处理）。保持其余部分平静。
- 将内容组包裹在
<Reveal>中，并使用交错延迟delay={index * 80}；BentoGrid、Testimonials和PricingTable已经自带显示效果。 - 移动优先：
md以下为单列布局，手机上 CTA 按钮全宽（w-full sm:w-auto），点击目标至少 44px。
6. 转化细节
- 在功能或定价之后以及最终的
CtaBand中重复主要 CTA。 - 锚点导航：为区块添加
id（<Section id="pricing">），然后链接到#pricing；添加scroll-mt-20，这样粘性页眉就不会覆盖标题。 - 页面上的表单：要求最少的信息（邮箱，或姓名 + 手机）。显示内联验证和清晰的成功状态（请参阅 forms-validation 技能）。
- 定价：显示货币和计费周期，突出一个方案，并说明点击后的操作（试用期长度、取消方式）。
- 无障碍：可见的焦点样式，有意义图片的 alt 文本，对比度 4.5:1，按钮说明其功能。
7. 完成清单
- 一个 h1，放在 hero 区域；章节标题按顺序为 h2。
- 主要 CTA 在移动端和桌面端的首屏可见，并指向一个真实目标。
- 每个声明、数字、logo 和引语都是真实的，否则该部分被移除。
- Hero 图片设置了宽度/高度且不懒加载；其他图片懒加载。
- 页面标题和 meta 描述已设置（请参阅 seo-metadata 技能）。
- 已在 375px、768px 和 1280px 宽度下检查并截图。
- 已运行
audit_landing_sections并修复了所有故障。
脚本
audit_landing_sections 会读取页面文件及其导入的本地组件。参数（均为可选）：{ "file": "src/pages/Index.tsx" }。如果不提供 file，它会依次尝试 src/pages/Index.tsx、app/page.tsx、src/app/page.tsx、pages/index.tsx 和 src/pages/index.tsx。它返回 checks（通过、警告或失败）、检测到的 sections 和 placeholders。该脚本基于启发式方法：在更改任何内容前，通过阅读代码来确认失败。