提示词
使用 **React 18 + TypeScript + Vite + Tailwind CSS + motion/react (framer motion) + lucide-react** 构建一个名为 "Aura" 的高端 AI 原生电子邮件客户端落地页。整体采用深色美学（背景 `#0c0c0c`），呈现电影感与玻璃质感，包含循环播放的全屏背景视频、闪亮的渐变标题、macOS 风格菜单栏、逼真的收件箱模型，以及自定义 "liquid-glass" 卡片效果。
## 技术栈 / 设置
- `package.json` 依赖：`react`、`react-dom`、`@supabase/supabase-js`、`motion`（v12+，从 `motion/react` 导入）、`lucide-react`。
- Tailwind 配置扩展颜色 `brand: '#3D81E3'`，并将 sans 字体系列设为 `['Inter','system-ui','sans-serif']`。
- 字体：Google Fonts Inter，字重 400、500、600、700、800、900。在 `index.css` 中通过 `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');` 导入。
- `html,body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }`。
- 基础背景色 `#0c0c0c`，文字为白色，选中文本样式为 `bg-brand/30`。
## 全局背景视频（固定在所有内容后方）
在根包装器（`relative min-h-screen overflow-x-hidden bg-[#0c0c0c] text-white`）内部渲染固定的全屏视频：
```
<div className="fixed inset-0 z-0 pointer-events-none">
<video autoPlay loop muted playsInline
className="w-full h-full object-cover pointer-events-none"
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4" />
</div>
```
另外，在 36rem 容器两侧边缘渲染两条移动端隐藏的固定垂直参考线：
```
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 -translate-x-[calc(50%+36rem)] w-px bg-white/10 z-[5]" />
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 translate-x-[calc(-50%+36rem)] w-px bg-white/10 z-[5]" />
```
## 全局 SVG 噪点滤镜（两个，id 均为 `c3-noise`）
- 一个位于根层级（细微颗粒，multiply 混合），用于闪亮标题。
- 一个位于定价区域内部（分形噪点，overlay 混合），用于水印。
根滤镜：
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="multiply" />
</filter>
```
定价滤镜：
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="2" stitchTiles="stitch" />
<feComponentTransfer><feFuncA type="linear" slope="0.075" /></feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="overlay" />
</filter>
```
## 共享基础组件
**AppleLogo** — 内联 SVG Apple 标志，`viewBox="0 0 384 512"`，`fill="currentColor"`，默认 `w-4 h-4`。Path：
`M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z`。
**LogoMark** — 抽象四象限曲线标志，`viewBox="0 0 256 256"`，默认 `w-8 h-8`，白色填充。Path：
`M 0 128 C 70.692 128 128 185.308 128 256 L 64 256 C 64 220.654 35.346 192 0 192 Z M 256 192 C 220.654 192 192 220.654 192 256 L 128 256 C 128 185.308 185.308 128 256 128 Z M 128 0 C 128 70.692 70.692 128 0 128 L 0 64 C 35.346 64 64 35.346 64 0 Z M 192 0 C 192 35.346 220.654 64 256 64 L 256 128 C 185.308 128 128 70.692 128 0 Z`。
**AppleButton** — 白色 rounded-full 胶囊按钮，包含 Apple 标志、"下载 Aura" 标签和 ChevronRight。group hover 时，Chevron 平移 `+1px`。类：`group inline-flex items-center justify-center gap-2 rounded-full bg-white text-black font-medium text-sm px-5 py-3 transition-all hover:bg-white/90 active:scale-[0.98]`。接受 `label` 和 `full` props。
**SectionEyebrow** — `<span className="w-1.5 h-1.5 rounded-full bg-white" />` + 标签，以及可选的标签胶囊，样式为 `px-2 py-0.5 rounded-full border border-white/10 text-white/50`。
**gradientStyle** 用于标题中的 "焕然新生"：
```
backgroundImage: 'linear-gradient(to right, #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%, #00d2ff 50%, #0B2551 67.5%, #091020 87.5%, #091020 100%)'
backgroundSize: '200% auto'
WebkitBackgroundClip: 'text' (+ backgroundClip text)
color: 'transparent'; WebkitTextFillColor: 'transparent'
filter: 'url(#c3-noise)'
```
闪亮动画（`.animate-shiny`）：6s linear infinite，keyframes shiny `{0%: background-position: -200% center; 100%: 200% center;}`。
## Liquid-glass 实用类（用于各类卡片）
```
.liquid-glass {
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
}
.liquid-glass::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
```
## 第 1 部分 — 导航栏
最大宽度 `max-w-6xl mx-auto px-6`。Motion nav 淡入并向下滑动（opacity 0 -> 1，y -10 -> 0，0.6s easeOut）。左侧：仅显示 `LogoMark`（不要显示 "Aura" 字样）。中间（`hidden md:flex gap-8`）：链接 `['解决方案','定价','博客','文档','招聘']`，每个使用 `text-white/70 text-sm font-medium hover:text-white`，并带交错 y 动画（delay 0.1 + i*0.05）。桌面端右侧：`<AppleButton />`，默认标签为 "下载 Aura"。移动端右侧：`w-10 h-10 rounded-full border border-white/10 bg-white/5` Menu 图标按钮。
## 第 2 部分 — Hero
居中区域，`pt-16 md:pt-28 pb-20 text-center flex flex-col items-center`。
Motion h1（delay 0.3，0.8s cubic-bezier(.22,1,.36,1)），类为 `text-4xl md:text-7xl font-semibold tracking-tight leading-[0.9]`：
- 第 1 行："你的邮件。"（白色）
- 第 2 行："焕然新生" — 应用 `animate-shiny` 和内联 `gradientStyle`。
然后是 motion paragraph（delay 0.5）：`mt-8 text-white/60 max-w-md text-base leading-[1.5]`：
> "Aura 是当今时代首屈一指的收件箱平台。它利用强大的 AI 整理消息、确定优先级并加以提炼，让一切清晰明了。"
然后是 motion div（delay 0.7），包含 `<AppleButton />` 和 `text-xs text-white/40` 文本 "下载 Intel / Apple Silicon 版本"。
## 第 3 部分 — macOS 菜单栏条
全宽栏 `h-10 bg-black/40 backdrop-blur-md border-t border-b border-white/10`。内部使用 `max-w-6xl mx-auto px-6 h-full flex items-center justify-between text-xs`。左侧：`AppleLogo w-3.5 h-3.5`、白色粗体 "Aura"，然后是菜单项 `['文件','编辑','显示','前往','窗口','帮助']`（渐进隐藏：index>2 使用 `hidden sm:inline`，index>3 使用 `hidden md:inline`）。右侧：`Search w-3.5 h-3.5` + "5月6日 周三 下午1:09"。以 delay 0.9 进入。
## 第 4 部分 — 收件箱模型
`max-w-6xl mx-auto px-6 py-16 md:py-24`。外层容器 `relative rounded-2xl overflow-hidden border border-white/10 bg-[#0e1014]/90 backdrop-blur-2xl`。Motion 以 y:40、delay 1.1 进入。
标题栏：三个交通灯 `#ff5f57`、`#febc2e`、`#28c840`（每个均为 `w-3 h-3 rounded-full`）；中间标签 "Aura — 收件箱"，样式为 `text-xs text-white/50`。
主体 `grid grid-cols-12 h-[520px]`：
**侧边栏（col-span-3、border-r、bg-black/30、p-4）：**
- 白色 "使用 Aura 撰写" 按钮，带 `Sparkles` 图标（`rounded-lg bg-white text-black text-xs font-semibold px-3 py-2`）。
- 导航项（图标 + 标签 + 可选数量）：收件箱（12，激活）、已加星标（3）、已发送、草稿（2）、归档、废纸篓。激活项使用 `bg-white/10 text-white`，其他项使用 `text-white/60 hover:bg-white/5`。
- 标签区域：大写且增加字间距的小标题 "标签"，然后是 4 个彩色圆点：工作 `#00d2ff`、个人 `#A4F4FD`、旅行 `#f59e0b`、财务 `#10b981`。
**邮件列表（col-span-4、border-r）：**
- 搜索标题栏：`Search` 图标 + 占位符 "搜索邮件"。
- 6 封邮件，包含姓名、主题、预览、时间以及未读/激活标记：
- Linear — "每周产品摘要" — "你的团队本周完成了 23 个问题……" — 上午9:41 — 未读 + 激活
- Sophia Chen — "回复：Q3 路线图评审" — "感谢你发来演示文稿。我有几点想法……" — 上午8:12 — 未读
- Figma — "Marcus 评论了你的文件" — "很喜欢落地页 Hero 的新方向。" — 昨天
- Stripe — "已发送 $12,480.00 打款" — "你的款项正在汇往银行……" — 昨天
- Vercel — "aura-web 部署就绪" — "预览已上线：aura-web-g3f.vercel.app" — 周一
- GitHub — "[aura/core] PR #482 已批准" — "david-lim 批准了你的拉取请求。" — 周一
**阅读器（col-span-5）：**
- 工具栏包含 Reply、Forward、Archive、Trash2 图标按钮（每个均为 `w-7 h-7 rounded-md hover:bg-white/5`），右侧放置 MoreHorizontal。
- 标题："每周产品摘要"；发件人头像为渐变气泡 `w-7 h-7 rounded-full bg-gradient-to-br from-[#00d2ff] to-[#0B2551]`，内容为 "L"；"Linear" + "发给我 · 上午9:41"；"工作" 胶囊。
- 正文：
- 带 `Sparkles` 图标（颜色 `#A4F4FD`）的卡片，标签为 "Aura 摘要"，文本为 "你的团队关闭了 23 个问题，合并了 14 个 PR，并发布了 2 项功能。最佳贡献者：Marcus。无需采取行动。"
- 段落："团队各位好，"、"这是你每周的项目动态摘要。本周进展强劲，Q3 路线图取得了显著进展。"、"共关闭二十三个问题，合并十四个拉取请求，并上线两项面向客户的功能。速度趋势继续上升。"、"如果你希望按项目或贡献者查看更深入的细分，请告诉我。"、"— Linear 团队"（`text-white/50`）。
- 带 `Paperclip` 图标的附件胶囊："digest-may-6.pdf"。
## 第 5 部分 — FeatureTriage
`max-w-6xl mx-auto px-6 py-20 md:py-28`，双栏网格 `grid md:grid-cols-2 gap-10 md:gap-16 items-start`。
左栏 motion（y 20 -> 0，0.7s）：`SectionEyebrow label="分类处理" tag="AI 原生"`，h2 `mt-5 text-3xl md:text-5xl font-semibold tracking-tight leading-[1.02]`："一次处理" <br/> "清空收件箱。"。段落 `mt-6 text-white/60 text-base leading-[1.6] max-w-md`："Aura 阅读每一封邮件，理解其意图，并将噪声从信号中移开。专注于推动一天向前的事情——其余一切自动处理。" 标签行（`text-xs text-white/70 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03]`）："自动分类"、"稍后提醒"、"静默新闻简报"、"一键退订"。
右栏：`liquid-glass rounded-2xl p-5` 卡片。Eyebrow 文本："今天 · 已分类处理 42 封邮件"。四张子卡片（每张均为 `liquid-glass rounded-lg p-3`）：
- 优先（4）`#ffffff` — 项目："Sophia Chen — Q3 评审"、"David Lim — 合同签署确认"
- 待跟进（7）`#e5e5e5` — 项目："Marcus — 设计评审"、"Figma — 评论串"
- 更新（18）`#a3a3a3` — 项目："Vercel — 部署就绪"、"GitHub — PR #482 已合并"
- 已归档（13）`#525252` — 项目："Stripe 打款 · 新闻简报 · 收据"
## 第 6 部分 — LogoCloud
`max-w-6xl mx-auto px-6 py-16 md:py-20`。居中的引导语 `text-xs uppercase tracking-widest text-white/40`："深受全球最具思考力团队的信赖"。网格 `mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-6`，每个品牌名称使用 `text-sm font-semibold tracking-tight text-white/50 hover:text-white`。名称：Linear、Vercel、Figma、Stripe、Ramp、Notion、Loom、Arc。每个以 0.05 的交错间隔淡入。
## 第 7 部分 — 用户评价
`max-w-6xl mx-auto px-6 py-20 md:py-28 border-t border-white/10`。3 栏 `liquid-glass rounded-2xl p-6` figure 网格。每个包含：使用引号包裹的 blockquote，样式为 `text-sm text-white/80 leading-[1.6]`；`figcaption mt-6 pt-5 border-t border-white/10`，姓名使用 `text-sm font-semibold`，职位使用 `text-xs text-white/50`，公司名称转为大写并使用 `text-xs text-white font-semibold tracking-wide`。
- "Aura 每周为我们的领导团队节省了四个小时。它读起来就像来自未来的电子邮件。" — Parker Wilf，集团产品经理，MERCURY
- "仅命令面板就改变了我处理消息的方式。我无法想象再回到传统客户端。" — Andrew von Rosenbach，高级工程项目经理，COHERE
- "真正理解上下文的分类处理。我们的团队不再害怕周一早晨的收件箱。" — Mathies Christensen，工程经理，LUNAR
## 第 8 部分 — 定价
使用自定义 CSS 类（而非 Tailwind）呈现电影感排版。
外层 `<section className="c3-pricing-section">`，包含自身的 `<svg>`，用于定义前述 `c3-noise` 定价滤镜。
水印（作为背景的巨型 Hero 标题）：
```
<div className="c3-watermark-container">
<div className="c3-watermark-main">
<span className="c3-watermark-line-1">你的邮件。</span>
<span className="c3-watermark-line-2">焕然新生</span>
</div>
</div>
```
状态：`yearly` boolean 切换开关。三个方案：
- **免费版** — "免费" — "适合刚刚开始使用 Forma 的创作者。" — 云端最多 3 个项目 / 图片最高导出至 1080p / 基础编辑工具 / 免费模板和图标 / 可通过网页和移动应用访问。
- **标准版** — 月付 "$9,99/m"，年付 "$99,99/y" — "适合需要更多自由度和灵活性的自由职业者与小型团队。" — 云端最多 50 个项目 / 最高导出至 4K / 高级编辑工具包 / 团队协作（最多 5 名成员）/ 访问高级模板库。
- **专业版**（`c3-card-pro`）— 月付 "$19,99/m"，年付 "$199,99/y" — "适合与品牌合作的工作室、代理机构和专业创作者。" — 项目数量不限 / 最高导出至 8K + 动画 / AI 驱动的内容生成工具 / 团队成员数量不限 / 品牌定制。
每张卡片渲染：`c3-tier-small`（方案等级）、`c3-tier-large`（价格）、`c3-desc`、由勾选行组成的 `c3-list`（白色圆形 `c3-check`，带白色 SVG 勾选图标）、`c3-btn` "选择方案"。
下方：`c3-toggle-wrap`，包含 "按年付费" 标签和一个胶囊切换开关（关闭时白色背景、黑色旋钮；处于 `.active` 时，背景为 `rgba(255,255,255,0.2)`，旋钮为白色并平移 24px）。
定价 CSS（关键值，需原样包含）：
- `.c3-pricing-section { position: relative; padding: 40px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }`
- `.c3-watermark-container { position: relative; width: 100%; max-width: 1100px; text-align: center; margin-top: 40px; z-index: 2; }`
- `.c3-watermark-main { font-size: 9rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; filter: url(#c3-noise); display: flex; flex-direction: column; align-items: center; }`
- `.c3-watermark-line-1 { color: #fff; }`
- `.c3-watermark-line-2 { background: linear-gradient(to right, #091020 0%, #0B2551 25%, #A4F4FD 65%, #00d2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }`
- `.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1100px; margin-top: 60px; transform: translateX(20px); position: relative; z-index: 3; }`
- `.c3-card { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); backdrop-filter: blur(14px) brightness(0.91); border: 1px solid rgba(255,255,255,1); border-radius: 44px; padding: 50px 24px; min-height: 580px; display: flex; flex-direction: column; transition: all 0.6s cubic-bezier(.22,1,.36,1); overflow: hidden; position: relative; }`
- `.c3-card::before { content:''; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }`
- `.c3-card:hover { background: rgba(15,15,15,0.6); border-color: rgba(34,211,238,0.7); transform: translateY(-12px) scale(1.01); }`
- `.c3-card-pro { background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); }`
- `.c3-tier-small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); }`
- `.c3-tier-large { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin-top: 8px; }`
- `.c3-desc { font-size: 0.88rem; color: rgba(255,255,255,0.45); min-height: 3.2em; margin-top: 16px; margin-bottom: 40px; line-height: 1.5; }`
- `.c3-list li { display:flex; align-items:flex-start; gap: 14px; font-size: 0.92rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.4; }`
- `.c3-check { width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }`
- `.c3-btn { background:#fff; color:#000; padding: 10px 32px; border-radius: 100px; font-weight:600; font-size: 0.88rem; margin-top:auto; border:none; cursor:pointer; align-self:center; transition: all 0.3s cubic-bezier(.22,1,.36,1); }`
- `.c3-btn:hover { background:#f5f5f5; transform:scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }`
- `.c3-toggle-wrap { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:1100px; margin-top:32px; padding-right:20px; }`
- `.c3-toggle { width:52px; height:28px; background:#fff; border-radius:100px; position:relative; cursor:pointer; border:none; transition: background 0.3s cubic-bezier(.4,0,.2,1); padding:0; }`
- `.c3-toggle-knob { width:20px; height:20px; background:#000; border-radius:50%; position:absolute; top:4px; left:4px; transition: all 0.3s cubic-bezier(.4,0,.2,1); }`
- `.c3-toggle.active { background: rgba(255,255,255,0.2); }`
- `.c3-toggle.active .c3-toggle-knob { transform: translateX(24px); background:#fff; }`
- Media query `(max-width:1024px)`：`.c3-watermark-main { font-size: 3.5rem; filter:none; }`，`.c3-watermark-line-2 { background:none; -webkit-text-fill-color:#00d2ff; color:#00d2ff; }`，`.c3-grid` 变为横向 scroll-snap flex（`display:flex; overflow-x:auto; scroll-snap-type:x mandatory; transform:none; width:100vw; padding:0 20px; gap:16px; scrollbar-width:none`），卡片使用 `flex: 0 0 320px; scroll-snap-align:center`，`.c3-grid::-webkit-scrollbar{display:none}`，`.c3-toggle-wrap { justify-content:center; padding-right:0; }`。
## 第 9 部分 — FinalCTA
`max-w-6xl mx-auto px-6 py-20 md:py-32`。Motion `liquid-glass relative overflow-hidden rounded-3xl px-8 py-16 md:py-24 text-center`。径向光晕叠层：`radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%)`，opacity 为 0.3。
- h2 `text-4xl md:text-6xl font-semibold tracking-tight leading-[1.02]`："关掉标签页。" / "开启你的一天。"。
- 段落 `mt-6 text-white/60 max-w-md mx-auto text-sm leading-[1.6]`："加入成千上万的建设者、创始人和运营者，把电子邮件当作工具，而不是负担。"
- 按钮：`<AppleButton label="下载 Aura" />`，以及 `rounded-full border border-white/15 text-white text-sm font-medium px-5 py-3 hover:bg-white/5` 的 "联系销售" + ChevronRight。
精确复现——字体、渐变色标、噪点滤镜、文案字符串、动画延迟，以及 CloudFront 视频 URL `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`。原文提示词（English）
Build a premium, AI-native email client landing page called "Aura" using **React 18 + TypeScript + Vite + Tailwind CSS + motion/react (framer motion) + lucide-react**. The aesthetic is dark (bg `#0c0c0c`), cinematic, glassy, with a looping fullscreen background video, a shiny gradient headline, a macOS-style menu bar, a realistic inbox mockup, and a custom "liquid-glass" card treatment.
## Stack / setup
- `package.json` dependencies: `react`, `react-dom`, `@supabase/supabase-js`, `motion` (v12+, import from `motion/react`), `lucide-react`.
- Tailwind config extends colors with `brand: '#3D81E3'` and fontFamily sans with `['Inter','system-ui','sans-serif']`.
- Font: Google Fonts Inter weights 400, 500, 600, 700, 800, 900. Import in `index.css` via `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');`.
- `html,body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }`.
- Background color base `#0c0c0c`, text white, selection `bg-brand/30`.
## Global background video (fixed, behind everything)
Inside the root wrapper (`relative min-h-screen overflow-x-hidden bg-[#0c0c0c] text-white`), render a fixed full-screen video:
```
<div className="fixed inset-0 z-0 pointer-events-none">
<video autoPlay loop muted playsInline
className="w-full h-full object-cover pointer-events-none"
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4" />
</div>
```
Also render two hidden-on-mobile fixed vertical guide lines at the 36rem container edges:
```
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 -translate-x-[calc(50%+36rem)] w-px bg-white/10 z-[5]" />
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 translate-x-[calc(-50%+36rem)] w-px bg-white/10 z-[5]" />
```
## Global SVG noise filters (two, both id `c3-noise`)
- One at root level (subtle grain, multiply blend) for the shiny headline.
- One inside the pricing section (fractal noise, overlay blend) for the watermark.
Root filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="multiply" />
</filter>
```
Pricing filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="2" stitchTiles="stitch" />
<feComponentTransfer><feFuncA type="linear" slope="0.075" /></feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="overlay" />
</filter>
```
## Shared primitives
**AppleLogo** — inline SVG Apple mark, `viewBox="0 0 384 512"`, `fill="currentColor"`, default `w-4 h-4`. Path:
`M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z`.
**LogoMark** — abstract 4-quadrant curve mark, `viewBox="0 0 256 256"`, default `w-8 h-8`, white fill. Path:
`M 0 128 C 70.692 128 128 185.308 128 256 L 64 256 C 64 220.654 35.346 192 0 192 Z M 256 192 C 220.654 192 192 220.654 192 256 L 128 256 C 128 185.308 185.308 128 256 128 Z M 128 0 C 128 70.692 70.692 128 0 128 L 0 64 C 35.346 64 64 35.346 64 0 Z M 192 0 C 192 35.346 220.654 64 256 64 L 256 128 C 185.308 128 128 70.692 128 0 Z`.
**AppleButton** — rounded-full white pill, Apple logo + "Download Aura" label + ChevronRight. Chevron translates `+1px` on group hover. Classes: `group inline-flex items-center justify-center gap-2 rounded-full bg-white text-black font-medium text-sm px-5 py-3 transition-all hover:bg-white/90 active:scale-[0.98]`. Accepts `label` and `full` props.
**SectionEyebrow** — `<span className="w-1.5 h-1.5 rounded-full bg-white" />` + label, optional tag pill with `px-2 py-0.5 rounded-full border border-white/10 text-white/50`.
**gradientStyle** used on the headline word "Revitalized":
```
backgroundImage: 'linear-gradient(to right, #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%, #00d2ff 50%, #0B2551 67.5%, #091020 87.5%, #091020 100%)'
backgroundSize: '200% auto'
WebkitBackgroundClip: 'text' (+ backgroundClip text)
color: 'transparent'; WebkitTextFillColor: 'transparent'
filter: 'url(#c3-noise)'
```
Shiny animation (`.animate-shiny`): 6s linear infinite, keyframes shiny `{0%: background-position: -200% center; 100%: 200% center;}`.
## Liquid-glass utility (used across cards)
```
.liquid-glass {
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
}
.liquid-glass::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
```
## Section 1 — Navbar
Max-width `max-w-6xl mx-auto px-6`. Motion nav fades/slides down (opacity 0 -> 1, y -10 -> 0, 0.6s easeOut). Left: just the `LogoMark` (NO "Aura" word). Center (`hidden md:flex gap-8`): links `['Solutions','Pricing','Blog','Documentation','Careers']` each `text-white/70 text-sm font-medium hover:text-white` with staggered y animation (delay 0.1 + i*0.05). Right desktop: `<AppleButton />` default label "Download Aura". Mobile right: `w-10 h-10 rounded-full border border-white/10 bg-white/5` Menu icon button.
## Section 2 — Hero
Centered section, `pt-16 md:pt-28 pb-20 text-center flex flex-col items-center`.
Motion h1 (delay 0.3, 0.8s cubic-bezier(.22,1,.36,1)), classes `text-4xl md:text-7xl font-semibold tracking-tight leading-[0.9]`:
- Line 1: "Your email." (white)
- Line 2: "Revitalized" — apply `animate-shiny` and the `gradientStyle` inline.
Then motion paragraph (delay 0.5): `mt-8 text-white/60 max-w-md text-base leading-[1.5]`:
> "Aura is the premier inbox platform for the current era. It leverages powerful AI to organize, prioritize, and refine your messages into total clarity."
Then motion div (delay 0.7) with `<AppleButton />` and `text-xs text-white/40` "Download for Intel / Apple Silicon".
## Section 3 — macOS menu bar strip
Full-width bar `h-10 bg-black/40 backdrop-blur-md border-t border-b border-white/10`. Inside `max-w-6xl mx-auto px-6 h-full flex items-center justify-between text-xs`. Left: `AppleLogo w-3.5 h-3.5`, bold white "Aura", then menu items `['File','Edit','View','Go','Window','Help']` (progressive hiding: index>2 `hidden sm:inline`, index>3 `hidden md:inline`). Right: `Search w-3.5 h-3.5` + "Wed May 6 1:09 PM". Enters with delay 0.9.
## Section 4 — Inbox mockup
`max-w-6xl mx-auto px-6 py-16 md:py-24`. Outer container `relative rounded-2xl overflow-hidden border border-white/10 bg-[#0e1014]/90 backdrop-blur-2xl`. Motion enters from y:40 at delay 1.1.
Title bar: three traffic lights `#ff5f57`, `#febc2e`, `#28c840` (each `w-3 h-3 rounded-full`); center label "Aura — Inbox" `text-xs text-white/50`.
Body `grid grid-cols-12 h-[520px]`:
**Sidebar (col-span-3, border-r, bg-black/30, p-4):**
- White "Compose with Aura" button with `Sparkles` icon (`rounded-lg bg-white text-black text-xs font-semibold px-3 py-2`).
- Nav items (icon + label + optional count): Inbox (12, active), Starred (3), Sent, Drafts (2), Archive, Trash. Active uses `bg-white/10 text-white`, others `text-white/60 hover:bg-white/5`.
- Labels section: uppercase tracking "Labels" small title, then 4 color dots: Work `#00d2ff`, Personal `#A4F4FD`, Travel `#f59e0b`, Finance `#10b981`.
**Message list (col-span-4, border-r):**
- Search header: `Search` icon + placeholder "Search mail".
- 6 messages with name, subject, preview, time, unread/active flags:
- Linear — "Weekly product digest" — "Your team shipped 23 issues this week..." — 9:41 AM — unread + active
- Sophia Chen — "Re: Q3 roadmap review" — "Thanks for sending the deck over. I had a few thoughts..." — 8:12 AM — unread
- Figma — "Marcus commented on your file" — "Love the new direction on the landing hero." — Yesterday
- Stripe — "Payout of $12,480.00 sent" — "Your payout is on its way to your bank..." — Yesterday
- Vercel — "Deployment ready for aura-web" — "Preview is live at aura-web-g3f.vercel.app" — Mon
- GitHub — "[aura/core] PR #482 approved" — "david-lim approved your pull request." — Mon
**Reader (col-span-5):**
- Toolbar with Reply, Forward, Archive, Trash2 icon buttons (each `w-7 h-7 rounded-md hover:bg-white/5`) and a MoreHorizontal on the right.
- Header: "Weekly product digest"; sender avatar gradient bubble `w-7 h-7 rounded-full bg-gradient-to-br from-[#00d2ff] to-[#0B2551]` with "L"; "Linear" + "to me · 9:41 AM"; "Work" pill.
- Body:
- Card with `Sparkles` icon (color `#A4F4FD`) labeled "Summary by Aura" and text "Your team closed 23 issues, merged 14 PRs, and shipped 2 features. Top contributor: Marcus. No action needed."
- Paragraphs: "Hi team,", "Here is your weekly digest of everything happening across your projects. This was a strong week with significant progress on the Q3 roadmap.", "Twenty-three issues were closed, fourteen pull requests were merged, and two customer-facing features went out. The velocity trend continues to climb.", "Let me know if you would like a deeper breakdown by project or contributor.", "— The Linear team" (`text-white/50`).
- Attachment pill with `Paperclip` icon: "digest-may-6.pdf".
## Section 5 — FeatureTriage
`max-w-6xl mx-auto px-6 py-20 md:py-28`, two-column grid `grid md:grid-cols-2 gap-10 md:gap-16 items-start`.
Left column motion (y 20 -> 0, 0.7s): `SectionEyebrow label="Triage" tag="AI-native"`, h2 `mt-5 text-3xl md:text-5xl font-semibold tracking-tight leading-[1.02]`: "Clear your inbox" <br/> "in a single pass.". Paragraph `mt-6 text-white/60 text-base leading-[1.6] max-w-md`: "Aura reads every message, understands intent, and routes the noise away from the signal. Focus on what moves your day forward — the rest handles itself." Chips row (`text-xs text-white/70 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03]`): "Auto-categorize", "Snooze for later", "Silent newsletters", "One-tap unsubscribe".
Right column: `liquid-glass rounded-2xl p-5` card. Eyebrow text: "Today · 42 messages triaged". Four sub-cards (each `liquid-glass rounded-lg p-3`):
- Priority (4) `#ffffff` — items: "Sophia Chen — Q3 review", "David Lim — contract signoff"
- Follow-up (7) `#e5e5e5` — items: "Marcus — design review", "Figma — comment thread"
- Updates (18) `#a3a3a3` — items: "Vercel — deploy ready", "GitHub — PR #482 merged"
- Archived (13) `#525252` — items: "Stripe payout · Newsletter · Receipts"
## Section 6 — LogoCloud
`max-w-6xl mx-auto px-6 py-16 md:py-20`. Centered kicker `text-xs uppercase tracking-widest text-white/40`: "Trusted by the world's most thoughtful teams". Grid `mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-6`, each logo name as `text-sm font-semibold tracking-tight text-white/50 hover:text-white`. Names: Linear, Vercel, Figma, Stripe, Ramp, Notion, Loom, Arc. Each fades in with stagger 0.05.
## Section 7 — Testimonials
`max-w-6xl mx-auto px-6 py-20 md:py-28 border-t border-white/10`. 3-col grid of `liquid-glass rounded-2xl p-6` figures. Each: blockquote `text-sm text-white/80 leading-[1.6]` wrapped in quotes, `figcaption mt-6 pt-5 border-t border-white/10` with name `text-sm font-semibold`, role `text-xs text-white/50`, company uppercased `text-xs text-white font-semibold tracking-wide`.
- "Aura gave our leadership team four hours of their week back. It reads like email from the future." — Parker Wilf, Group Product Manager, MERCURY
- "The command palette alone has changed how I process messages. I can't imagine going back to a traditional client." — Andrew von Rosenbach, Senior Engineering Program Manager, COHERE
- "Triage that actually understands context. Our team stopped dreading Monday morning inboxes." — Mathies Christensen, Engineering Manager, LUNAR
## Section 8 — Pricing
Uses custom CSS classes (not Tailwind) for cinematic typography.
Outer `<section className="c3-pricing-section">` with its own `<svg>` defining the `c3-noise` pricing filter described earlier.
Watermark (giant hero headline as backdrop):
```
<div className="c3-watermark-container">
<div className="c3-watermark-main">
<span className="c3-watermark-line-1">Your email.</span>
<span className="c3-watermark-line-2">Revitalized</span>
</div>
</div>
```
State: `yearly` boolean toggle. Three plans:
- **Free** — "Free" — "For creators taking their first steps with Forma." — Up to 3 projects in the cloud / Image export up to 1080p / Basic editing tools / Free templates and icons / Access via web and mobile app.
- **Standard** — monthly "$9,99/m" yearly "$99,99/y" — "For freelancers and small teams who need more freedom and flexibility." — Up to 50 projects in the cloud / Export up to 4K / Advanced editing toolkit / Team collaboration (up to 5 members) / Access to premium template library.
- **Pro** (`c3-card-pro`) — monthly "$19,99/m" yearly "$199,99/y" — "For studios, agencies, and professional creators working with brands." — Unlimited projects / Export up to 8K + animations / AI-powered content generation tools / Unlimited team members / Brand customization.
Each card renders: `c3-tier-small` (tier), `c3-tier-large` (price), `c3-desc`, `c3-list` of checkmark rows (white circle `c3-check` with white SVG check), `c3-btn` "Choose Plan".
Below: `c3-toggle-wrap` with "Yearly" label and a pill toggle (white knob black when off; when `.active`, background `rgba(255,255,255,0.2)`, knob white, translated 24px).
Pricing CSS (key values, include exactly):
- `.c3-pricing-section { position: relative; padding: 40px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }`
- `.c3-watermark-container { position: relative; width: 100%; max-width: 1100px; text-align: center; margin-top: 40px; z-index: 2; }`
- `.c3-watermark-main { font-size: 9rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; filter: url(#c3-noise); display: flex; flex-direction: column; align-items: center; }`
- `.c3-watermark-line-1 { color: #fff; }`
- `.c3-watermark-line-2 { background: linear-gradient(to right, #091020 0%, #0B2551 25%, #A4F4FD 65%, #00d2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }`
- `.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1100px; margin-top: 60px; transform: translateX(20px); position: relative; z-index: 3; }`
- `.c3-card { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); backdrop-filter: blur(14px) brightness(0.91); border: 1px solid rgba(255,255,255,1); border-radius: 44px; padding: 50px 24px; min-height: 580px; display: flex; flex-direction: column; transition: all 0.6s cubic-bezier(.22,1,.36,1); overflow: hidden; position: relative; }`
- `.c3-card::before { content:''; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }`
- `.c3-card:hover { background: rgba(15,15,15,0.6); border-color: rgba(34,211,238,0.7); transform: translateY(-12px) scale(1.01); }`
- `.c3-card-pro { background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); }`
- `.c3-tier-small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); }`
- `.c3-tier-large { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin-top: 8px; }`
- `.c3-desc { font-size: 0.88rem; color: rgba(255,255,255,0.45); min-height: 3.2em; margin-top: 16px; margin-bottom: 40px; line-height: 1.5; }`
- `.c3-list li { display:flex; align-items:flex-start; gap: 14px; font-size: 0.92rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.4; }`
- `.c3-check { width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }`
- `.c3-btn { background:#fff; color:#000; padding: 10px 32px; border-radius: 100px; font-weight:600; font-size: 0.88rem; margin-top:auto; border:none; cursor:pointer; align-self:center; transition: all 0.3s cubic-bezier(.22,1,.36,1); }`
- `.c3-btn:hover { background:#f5f5f5; transform:scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }`
- `.c3-toggle-wrap { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:1100px; margin-top:32px; padding-right:20px; }`
- `.c3-toggle { width:52px; height:28px; background:#fff; border-radius:100px; position:relative; cursor:pointer; border:none; transition: background 0.3s cubic-bezier(.4,0,.2,1); padding:0; }`
- `.c3-toggle-knob { width:20px; height:20px; background:#000; border-radius:50%; position:absolute; top:4px; left:4px; transition: all 0.3s cubic-bezier(.4,0,.2,1); }`
- `.c3-toggle.active { background: rgba(255,255,255,0.2); }`
- `.c3-toggle.active .c3-toggle-knob { transform: translateX(24px); background:#fff; }`
- Media query `(max-width:1024px)`: `.c3-watermark-main { font-size: 3.5rem; filter:none; }`, `.c3-watermark-line-2 { background:none; -webkit-text-fill-color:#00d2ff; color:#00d2ff; }`, `.c3-grid` becomes horizontal scroll-snap flex (`display:flex; overflow-x:auto; scroll-snap-type:x mandatory; transform:none; width:100vw; padding:0 20px; gap:16px; scrollbar-width:none`), cards `flex: 0 0 320px; scroll-snap-align:center`, `.c3-grid::-webkit-scrollbar{display:none}`, `.c3-toggle-wrap { justify-content:center; padding-right:0; }`.
## Section 9 — FinalCTA
`max-w-6xl mx-auto px-6 py-20 md:py-32`. Motion `liquid-glass relative overflow-hidden rounded-3xl px-8 py-16 md:py-24 text-center`. Radial glow overlay: `radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%)` at opacity 0.3.
- h2 `text-4xl md:text-6xl font-semibold tracking-tight leading-[1.02]`: "Close the tabs." / "Open your day.".
- Paragraph `mt-6 text-white/60 max-w-md mx-auto text-sm leading-[1.6]`: "Join thousands of builders, founders, and operators who treat email like a tool — not an obligation."
- Buttons: `<AppleButton label="Download Aura" />` and `rounded-full border border-white/15 text-white text-sm font-medium px-5 py-3 hover:bg-white/5` "Talk to sales" + ChevronRight.
Reproduce exactly — fonts, gradient stops, noise filters, copy strings, animation delays, and the CloudFront video URL `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`.
