带有交互式块和分析的登陆页面副本 - Next.js 上的像素完美，带有 CMS 和 A/B 准备

初始情况：有竞争对手的公共参考登陆页面（1页+弹出窗口+政策页面），转换良好。我们需要为我们的产品制作功能和视觉上尽可能接近的副本，但要更换内容、品牌、申请表和集成。无法访问来源，只能访问我们品牌的参考 URL 和材料（徽标、文本、颜色）。

技术环境和主题领域：B2B SaaS，主要流量是移动端。我们当前的堆栈是 Next.js 14 (App Router)、TypeScript、Tailwind、Vercel。内容必须由营销人员在没有开发人员的情况下进行编辑。

该怎么办：
1）解析引用并重现页面的结构和行为 - 网格、排版、缩进、动画、粘性元素、弹出窗口、手风琴、滑块、表单、加载状态和错误。
2) 在适当的情况下使用 SSR/SSG 实现 Next.js 14 中的页面，优化 Core Web Vitals，确保在 iOS Safari 和 Android Chrome 上正确运行。
3) 连接无头 CMS（理智或内容丰富 - 建议满足以下要求的最佳选项）并向其添加可管理的块：英雄、优势、案例/评论、常见问题解答、关税、集成块、页脚、弹出文本、UTM 标题动态。必须有先决条件，以便营销可以更改某些部分的顺序并关闭某些部分而无需部署。
4) 潜在客户生成表单：2 个表单（英雄和弹出窗口），带有验证、反垃圾邮件保护（hCaptcha 或 Cloudflare Turnstile）、发送到 Slack（webhook）和 Google Sheets（通过 API/Apps 脚本 - 建议一个选项），以及 GA4 中的一个事件。
5) A/B 的分析和准备：设置 dataLayer/事件（查看部分、点击 CTA、提交表单、打开弹出窗口）、插入 UTM/gbraid/wbraid、提供连接 Google Optimize 类似物的能力（例如，GrowthBook 或 VWO - 仅准备层和稳定选择器，无需完整实验）。
6) SEO 最低要求：元标记、OG、schema.org（组织 + FAQ 页面（如适用））、站点地图/机器人、正确的规范、/privacy 和 /terms 页面。

限制：
- 你不能使用像 Tilda/Webflow 这样的可视化构建器，也不能直接复制别人的代码。副本是通过分析浏览器中的行为、样式和标记来制作的。
- 如果您可以使用 Tailwind 和小型实用程序，您需要一个结构清晰的干净存储库，没有不必要的依赖项，也没有繁重的 UI 库。
- 布局相对于参考的像素必须在可接受的差异范围内完美，并考虑到字体/品牌的更换。

具体结果：
- 包含 Next.js 项目的 Git 存储库、启动和部署到 Vercel 的说明、环境文件 .env.example。
- 在 Vercel 上部署登台 + 访问具有已建立的内容类型并填充演示数据的 CMS。
- 就绪页面/和服务页面/隐私、/条款。

可衡量的验收标准：
- Lighthouse（移动）登台：性能 >= 85，可访问性 >= 95，最佳实践 >= 95，SEO >= 95（对于典型运行，除了分析和反垃圾邮件之外没有外部脚本）。
- 像素性能：6 个关键屏幕（360x800 和 1440x900）的比较 - 主要块的网格/缩进差异不超过 4 像素。
- 再现所有交互式参考：弹出窗口、手风琴、粘性、锚点、表单状态、平滑动画而不抽搐。
- 表单：正确验证、防止机器人、Slack 和 Google Sheets 中的潜在客户被丢弃，事件 form_view、form_start、form_submit、form_error 转到 GA4。
- CMS：营销更改文本和部分顺序，发布内容后无需编辑代码即可在登台上看到更改。

阶段：
- 参考分析和块/状态规范。
- UI 和自适应的实现。
- CMS 集成和内容。
- 表单和分析的集成。
- 根据清单进行打磨、跨浏览器测试、最终验收。