健康主题首屏

为 "Aurai"——一款全天候 AI 健康伴侣——构建全屏 hero section landing page。页面是一个单独的 viewport-height section，包含循环背景视频和叠加内容。

## 视频背景

- 全屏 `<video>` element，带有 `autoPlay`、`loop`、`muted`、`playsInline` attributes
- 视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260618_174853_aac61aa2-0f3f-4cf1-bc78-7f657dd11164.mp4`
- 视频使用 `object-cover` 覆盖整个 viewport
- 焦点定位：
  - 移动端（默认）：`object-position: 80% center`
  - 平板端（md breakpoint）：`object-position: right center`
  - 桌面端（lg breakpoint）：`object-position: center center`

## 字体

- **Askan Light** 从以下地址加载：`https://db.onlinewebfonts.com/c/304a6edcec9f8858eeaafc2ac18243f4?family=Askan+Light` - 用于品牌名称和标题
- **Inter**（字重 300、400、500、600）来自 Google Fonts - 用作正文/UI 字体
- Tailwind config 扩展 fontFamily，加入 `askan: ['"Askan Light"', 'serif']` 和 `inter: ['Inter', 'sans-serif']`

## 布局结构

使用 `absolute inset-0 z-10` 将内容分层放置在视频上方，并采用 flex column 布局。内边距：`px-4 sm:px-10 lg:px-12 py-4 sm:py-8`。

## Navigation（顶部）

一个使用 `flex items-center justify-between` 的 `<nav>`：

**左侧 nav 药丸（glassmorphism）：**
- `bg-black/20 backdrop-blur-md rounded-2xl border border-white/10`
- 内边距：`px-4 py-2.5 sm:px-6 sm:py-4`
- 包含：
  - 自定义 SVG logo（四瓣风车形，`w-5 h-5 sm:w-7 sm:h-7`，白色）
  - 品牌文本 "Aurai"，使用 `font-askan text-white text-base sm:text-xl tracking-wide`
  - Hamburger menu icon（lucide-react `Menu`/`X`），左侧外边距：`ml-4 sm:ml-32 md:ml-64 lg:ml-96`

**右侧按钮（仅桌面端）：**
- `hidden sm:block bg-white text-gray-900 font-medium text-sm px-6 py-3 rounded-full`
- 文本："加入名单"

## 移动端菜单（切换后显示）

- `sm:hidden`，定位为 `absolute top-[4.5rem] left-4 right-4`
- `bg-black/30 backdrop-blur-xl rounded-2xl p-5 border border-white/10`
- 包含链接："故事"、"优势"、"联系"（白色文本）和一个全宽的 "加入名单" 按钮

## 主要内容（底部对齐）

移动端：使用 `flex-1 sm:hidden` spacer 将内容推至底部。

内容容器：`flex flex-col sm:flex-1 sm:flex-row sm:items-end pb-4 sm:pb-12 lg:pb-16 sm:mt-auto`

**左栏：**

1. **标题：** `font-askan text-white text-[2rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem] leading-[1.05] tracking-tight max-w-[700px]`
   - 文本："你的平静始终在心中。"

2. **副标题：** `text-white/70 text-xs sm:text-base md:text-lg max-w-[520px] leading-relaxed`
   - 文本："Aurai 是你的全天候健康伴侣。它由领先的治疗师打造，在你需要时及时带来关怀与清晰思路。"

3. **电子邮件表单：** 带内联提交按钮的圆角药丸输入框
   - 容器：`bg-black/30 backdrop-blur-md rounded-full border border-white/10`
   - 输入框：透明背景、白色文本、placeholder "你的电子邮箱地址"，`px-4 sm:px-6 py-3 sm:py-4 text-sm`
   - 提交按钮（absolute right-1.5）：`bg-white text-gray-900 text-xs sm:text-sm font-medium px-3 sm:px-6 py-2 sm:py-3 rounded-full`
   - 文本："加入名单"
   - 提交时：显示包含所输入电子邮箱的 alert

4. **功能药丸（仅移动端）：** `flex sm:hidden flex-wrap gap-2 mt-2`
   - 三个药丸，使用 `bg-black/30 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full border border-white/10`
   - 标签："智能疗愈"、"实时疗愈"、"洞察疗效"

**右栏（仅桌面端）：**
- `hidden sm:flex flex-col items-end gap-2 self-end`
- 与移动端相同的三个功能药丸，但使用 `text-xs sm:text-sm px-4 py-2`

## 自定义 SVG Logo

一个风车/四象限形状，使用以下 path：
```
M 228 0 C 172.772 0 128 44.772 128 100 L 128 0 L 0 0 L 0 28 C 0 83.228 44.772 128 100 128 L 0 128 L 0 256 L 28 256 C 83.228 256 128 211.228 128 156 L 128 256 L 256 256 L 256 228 C 256 172.772 211.228 128 156 128 L 256 128 L 256 0 Z
```
ViewBox：`0 0 256 256`，fill：`currentColor`

## 全局 CSS

```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
```

## 关键设计原则

- 视频上不使用深色叠加层——内容依赖 glassmorphism 药丸和文本对比度
- 所有交互式玻璃元素使用 `bg-black/20` 或 `bg-black/30`，搭配 `backdrop-blur-md` 或 `backdrop-blur-xl`
- 全部边框均为 `border-white/10`
- 次要文本使用带 `/70` 透明度的白色
- 按钮和输入框使用 rounded-full，容器使用 rounded-2xl
- 页面标题："Aurai - 全天候健康伴侣"