电子邮件落地页

使用 **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`。