提示词
提示词：复刻“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：
段落容器 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原文提示词（English）
Prompt: Recreate "Design Rocket Certificates" Email-Style Landing Page
Build a single-page React + TypeScript + Vite + Tailwind CSS project that renders an email-style marketing page for a "Design Rocket Certificates" AI leadership course, built in collaboration with Microsoft. Use lucide-react for icons. No other UI libraries.
Global setup
index.html
Title: Newsletter Design Build Out
Preconnect to fonts.googleapis.com and fonts.gstatic.com
Load Google Fonts: Instrument Serif (ital 0,1) and Inter (weights 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;
}
Headings use inline style={{ fontFamily: "'Instrument Serif', serif" }}. Body copy uses Inter (default).
Page shell
Outer page: min-h-screen bg-[#050505] py-10 px-4 font-sans
Email container: max-w-[640px] mx-auto shadow-2xl overflow-hidden ring-1 ring-white/5
Content card: bg-[#111111] text-[#F2F2F2]
Shared components
Step — numbered row
Wrapper: flex items-start gap-5 mb-6 last:mb-0
Number badge: flex-shrink-0 w-7 h-7 rounded-md bg-[#DCFF00] flex items-center justify-center text-[#0A0A0A] font-bold text-xs mt-1 showing {number}.
Text: text-[17px] leading-[1.55] text-[#E8E8E8]
Divider
py-8 flex justify-center containing h-px w-24 bg-white/20
PrimaryButton (lime CTA, with arrow)
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
Contains the label and a lucide-react ArrowRight icon w-5 h-5 strokeWidth={2.5}
SolidButton (white pill)
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
Section 1 — Hero (video background)
Wrapper: relative w-full overflow-hidden with inline style={{ aspectRatio: '640 / 820' }}
Background video (absolutely filling container, object-cover, autoplay muted loop playsInline): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260419_064822_f120e48a-d545-45dd-a02d-facb07829888.mp4
Overlay gradient (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%)
Foreground stack: relative z-10 h-full flex flex-col items-center text-center px-6 pt-12 pb-10
Top brand block (white):
"Design Rocket" — Instrument Serif, text-[28px] leading-[0.95] tracking-tight
"CERTIFICATES" — text-[13px] tracking-[0.22em] font-medium mt-1
Spacer mt-40, then "NOW AVAILABLE" — text-white text-[13px] tracking-[0.28em] font-semibold
flex-1 spacer pushing headline to bottom
Headline (Instrument Serif): text-white text-[58px] leading-[1.02] tracking-tight max-w-[560px]
Text: Learn to lead AI
and unlock new value
CTA pill (note: uses #D8F90A not the card lime):
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
Label "Enroll Now" + ArrowRight w-5 h-5 strokeWidth={2.5}
Section 2 — Intro copy + CTA
Container px-[78px] pb-8 pt-4, centered paragraph text-[18px] leading-[1.55]:
Built in collaboration with Microsoft, this certificate course gives you the toolkit to lead AI transformation across your organization. Learn to spot opportunities, launch AI pilots, and scale adoption grounded in responsible practices and proven frameworks.
flex justify-center pb-14 with <PrimaryButton label="Get Started" />
<Divider />
Section 3 — "Transform how you lead with AI"
Heading container px-9 pb-8, Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight: Transform how you lead with AI
Video card px-[42px] pb-10:
Anchor: block overflow-hidden rounded-[14px] group
Video: 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
Steps list container px-[76px] pb-10, inner max-w-[489px] mx-auto, rendering four <Step>s:
Learn how to spot AI opportunities that boost productivity across roles and deliver visible results.
Build structures that support your team so AI efficiencies multiply across the organization.
Gain the skills to drive culture change like securing buy-in and reducing resistance.
Get frameworks to deliver AI pilots that prove impact fast and build credibility with measurable results.
flex justify-center pb-14 with <SolidButton label="Enroll Now" />
<Divider />
Section 4 — "Build your AI transformation roadmap"
Heading container pb-7 px-9, Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight:
Build your AI
transformation roadmap
Video card px-[42px] pb-10 (same classes as Section 3) with src:
Paragraph container px-[78px] pb-8, centered text-[18px] leading-[1.55]:
You'll finish this hands-on course with a personal AI Transformation Plan: your playbook for pilot proposals, data strategy and governance. Use it to help secure buy-in, guide rollout, and scale adoption responsibly.
flex justify-center pb-14 with <SolidButton label="Learn More" />
Section 5 — Lime CTA card
Outer px-14 pb-12
Card: bg-[#D8F90A] rounded-[10px] px-8 py-12 text-center
Heading (Instrument Serif): text-[#1E1E1E] text-[52px] leading-[1.02] tracking-tight mb-3
Ready to lead AI
at work?
Subtext: text-[#1E1E1E] text-[18px] leading-[1.5] mb-8 px-4 — Enroll now and be the leader your team has been waiting for.
Centered <PrimaryButton label="Enroll Now" />
Footer
bg-[#080808] text-white pt-12 px-10 text-center border-t border-white/5
Wordmark link text-[30px] font-bold tracking-tight text-white hover:text-[#DCFF00] transition-colors → "Design Rocket" (wrapped in pb-8 flex justify-center)
Disclaimer paragraph text-[12px] text-[#83837D] leading-[1.5] pb-8:
Microsoft is a collaborator on this specific course. Microsoft does not endorse
Design Rocket generally or other Design Rocket products.
Divider: flex justify-center pb-8 with inner h-px w-24 bg-white/20
Social icon row flex justify-center gap-5 pb-5 — six circular buttons mapping [Facebook, Twitter, Instagram, Youtube, Linkedin, Music2] from lucide-react. Each:
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, icon w-[18px] h-[18px]
Unsubscribe note text-[10px] text-[#83837D] pb-4 leading-[1.6]:
If you no longer want to receive updates on Design Rocket Certificates,
you can unsubscribe at any time by clicking "unsubscribe" below.
Link row text-[12px] pb-3 space-x-2: Support | Privacy | Terms | Unsubscribe (pipes text-[#8F8E88], links hover:underline)
Copyright anchor text-[12px] text-white/80 hover:text-white inline-block:
©2026 Design Rocket, 660 4th Street #443, San Francisco, CA 94107 USA
Trailing pb-10 spacer
Animation / interaction summary
All buttons: hover:-translate-y-0.5 transition-all duration-200 plus background-color change on hover.
Video cards: wrapper overflow-hidden rounded-[14px] group; video scales on hover via transition-transform duration-700 group-hover:scale-[1.03].
Footer wordmark and social icons: smooth color transitions via transition-colors.
Videos auto-play muted, loop, and playsInline for mobile autoplay.
Color palette
Page bg #050505, card bg #111111, footer bg #080808
Text #F2F2F2, secondary #E8E8E8, muted #83837D, divider #8F8E88
Lime primary #DCFF00, lime variant #D8F90A, lime hover #c9ea00
Dark text on lime #0A0A0A / #1E1E1E
Fonts
Display: Instrument Serif (all large headings, wordmark in hero)
Body / UI: Inter
