Email Marketing

在云境TS 中打开并复制 →

内容预览

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 

……（完整源码请在站内查看）