电子邮件营销

提示词：复刻“Design Rocket Certificates”电子邮件风格落地页
构建一个单页 React + TypeScript + Vite + Tailwind CSS 项目，渲染一个电子邮件风格的营销页面，宣传与 Microsoft 合作推出的“Design Rocket Certificates”AI 领导力课程。使用 lucide-react 提供图标。不要使用其他 UI 库。

全局设置
index.html

标题：Newsletter Design Build Out
预连接 fonts.googleapis.com 和 fonts.gstatic.com
加载 Google Fonts：Instrument Serif（ital 0,1）和 Inter（字重 400、500、600、700）
src/index.css


@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
标题使用内联样式 style={{ fontFamily: "'Instrument Serif', serif" }}。正文使用 Inter（默认）。

页面外壳
页面外层：min-h-screen bg-[#050505] py-10 px-4 font-sans
电子邮件容器：max-w-[640px] mx-auto shadow-2xl overflow-hidden ring-1 ring-white/5
内容卡片：bg-[#111111] text-[#F2F2F2]
共享组件
Step — 带编号的行

容器：flex items-start gap-5 mb-6 last:mb-0
编号徽章：flex-shrink-0 w-7 h-7 rounded-md bg-[#DCFF00] flex items-center justify-center text-[#0A0A0A] font-bold text-xs mt-1，显示 {number}。
文本：text-[17px] leading-[1.55] text-[#E8E8E8]
分隔线

py-8 flex justify-center，包含 h-px w-24 bg-white/20
PrimaryButton（青柠色 CTA，带箭头）

inline-flex items-center gap-3 bg-[#DCFF00] text-[#0A0A0A] font-bold rounded-lg px-6 py-3 hover:bg-[#c9ea00] hover:-translate-y-0.5 transition-all duration-200
包含标签和 lucide-react ArrowRight 图标 w-5 h-5 strokeWidth={2.5}
SolidButton（白色胶囊按钮）

inline-block bg-white text-[#0A0A0A] font-bold rounded-lg px-8 py-3 hover:bg-[#E8E8E8] hover:-translate-y-0.5 transition-all duration-200
第 1 部分 — Hero（视频背景）
容器：relative w-full overflow-hidden，使用内联样式 style={{ aspectRatio: '640 / 820' }}
背景视频（绝对定位并填满容器、object-cover、autoplay muted loop playsInline）：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260419_064822_f120e48a-d545-45dd-a02d-facb07829888.mp4
叠加渐变（absolute inset-0）：linear-gradient(to bottom, rgba(17,17,17,0) 45%, rgba(17,17,17,0.45) 68%, rgba(17,17,17,0.9) 88%, rgba(17,17,17,1) 100%)
前景堆叠：relative z-10 h-full flex flex-col items-center text-center px-6 pt-12 pb-10
顶部品牌区块（白色）：
“Design Rocket” — Instrument Serif、text-[28px] leading-[0.95] tracking-tight
“证书” — text-[13px] tracking-[0.22em] font-medium mt-1
间隔 mt-40，然后是“现已推出” — text-white text-[13px] tracking-[0.28em] font-semibold
flex-1 间隔，将标题推到底部
标题（Instrument Serif）：text-white text-[58px] leading-[1.02] tracking-tight max-w-[560px]
文本：学会引领 AI
并释放新价值
CTA 胶囊按钮（注意：使用 #D8F90A，而不是卡片的青柠色）：
mt-10 inline-flex items-center gap-3 bg-[#D8F90A] text-[#1E1E1E] font-semibold rounded-full px-8 py-4 hover:bg-[#c9ea00] hover:-translate-y-0.5 transition-all duration-200
标签“立即报名” + ArrowRight w-5 h-5 strokeWidth={2.5}
第 2 部分 — 介绍文案 + CTA
容器 px-[78px] pb-8 pt-4，居中段落 text-[18px] leading-[1.55]：
这门证书课程与 Microsoft 合作开发，为你提供在整个组织内引领 AI 转型所需的工具包。学习如何发现机会、启动 AI 试点，并以负责任的实践和经过验证的框架为基础扩大应用规模。

flex justify-center pb-14，包含 <PrimaryButton label="开始学习" />
<Divider />
第 3 部分 — “改变你运用 AI 进行领导的方式”
标题容器 px-9 pb-8，Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight：改变你运用 AI 进行领导的方式
视频卡片 px-[42px] pb-10：
锚点：block overflow-hidden rounded-[14px] group
视频：autoplay/muted/loop/playsInline、w-full h-[370px] object-cover rounded-[14px] transition-transform duration-700 group-hover:scale-[1.03]
Src：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260419_065931_e3ca7b53-d32e-4ad5-81de-dc9d6fcfda6d.mp4
步骤列表容器 px-[76px] pb-10，内部 max-w-[489px] mx-auto，渲染四个 <Step>：
学习如何发现能够提升不同岗位生产力并带来可见成果的 AI 机会。
建立支持团队的结构，让 AI 带来的效率提升在整个组织内成倍放大。
掌握推动文化变革的技能，例如争取支持和减少阻力。
获得交付 AI 试点项目的框架，快速证明成效，并通过可衡量的结果建立可信度。
flex justify-center pb-14，包含 <SolidButton label="立即报名" />
<Divider />
第 4 部分 — “制定你的 AI 转型路线图”
标题容器 pb-7 px-9，Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight：
制定你的 AI
转型路线图
视频卡片 px-[42px] pb-10（与第 3 部分使用相同的类），src：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260417_110451_9f82b157-dc92-4a9f-a341-c25594ec20e1.mp4
段落容器 px-[78px] pb-8，居中文本 text-[18px] leading-[1.55]：
完成这门实践课程时，你将拥有一份专属的 AI 转型计划：涵盖试点提案、数据战略与治理的行动手册。用它来帮助争取支持、指导推广，并以负责任的方式扩大应用规模。

flex justify-center pb-14，包含 <SolidButton label="了解更多" />
第 5 部分 — 青柠色 CTA 卡片
外层 px-14 pb-12
卡片：bg-[#D8F90A] rounded-[10px] px-8 py-12 text-center
标题（Instrument Serif）：text-[#1E1E1E] text-[52px] leading-[1.02] tracking-tight mb-3
准备好在工作中
引领 AI 了吗？
副文本：text-[#1E1E1E] text-[18px] leading-[1.5] mb-8 px-4 — 立即报名，成为团队一直期待的领导者。
居中的 <PrimaryButton label="立即报名" />
页脚
bg-[#080808] text-white pt-12 px-10 text-center border-t border-white/5
文字标识链接 text-[30px] font-bold tracking-tight text-white hover:text-[#DCFF00] transition-colors → “Design Rocket”（包裹在 pb-8 flex justify-center 中）
免责声明段落 text-[12px] text-[#83837D] leading-[1.5] pb-8：
Microsoft 是本特定课程的合作方。Microsoft 并不认可
Design Rocket 整体或其他 Design Rocket 产品。

分隔线：flex justify-center pb-8，内部为 h-px w-24 bg-white/20
社交图标行 flex justify-center gap-5 pb-5 — 六个圆形按钮，对应 lucide-react 中的 [Facebook, Twitter, Instagram, Youtube, Linkedin, Music2]。每个按钮：
w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white hover:text-[#1E1E1E] hover:border-white transition-colors，图标 w-[18px] h-[18px]
退订说明 text-[10px] text-[#83837D] pb-4 leading-[1.6]：
如果你不想再接收 Design Rocket Certificates 的最新消息，
可以随时点击下方的“退订”进行退订。

链接行 text-[12px] pb-3 space-x-2：支持 | 隐私 | 条款 | 退订（竖线文本使用 text-[#8F8E88]，链接使用 hover:underline）
版权锚点 text-[12px] text-white/80 hover:text-white inline-block：
©2026 Design Rocket, 660 4th Street #443, San Francisco, CA 94107 USA
末尾 pb-10 间隔
动画／交互摘要
所有按钮：hover:-translate-y-0.5 transition-all duration-200，并在悬停时改变背景颜色。
视频卡片：容器使用 overflow-hidden rounded-[14px] group；视频通过 transition-transform duration-700 group-hover:scale-[1.03] 在悬停时缩放。
页脚文字标识和社交图标：通过 transition-colors 实现平滑颜色过渡。
视频自动播放、静音、循环，并使用 playsInline 以支持移动端自动播放。
配色
页面背景 #050505，卡片背景 #111111，页脚背景 #080808
文本 #F2F2F2，次要文本 #E8E8E8，弱化文本 #83837D，分隔线 #8F8E88
主青柠色 #DCFF00，青柠色变体 #D8F90A，青柠色悬停状态 #c9ea00
青柠色背景上的深色文本 #0A0A0A / #1E1E1E
字体
展示字体：Instrument Serif（所有大标题、Hero 中的文字标识）
正文／UI：Inter