提示词
为 "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 - 全天候健康伴侣"原文提示词（English）
Build a full-screen hero section landing page for "Aurai" - an always-on AI wellness companion. The page is a single viewport-height section with a looping background video and overlaid content.
## Video Background
- Full-screen `<video>` element with `autoPlay`, `loop`, `muted`, `playsInline` attributes
- Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260618_174853_aac61aa2-0f3f-4cf1-bc78-7f657dd11164.mp4`
- Video covers entire viewport with `object-cover`
- Focal point positioning:
- Mobile (default): `object-position: 80% center`
- Tablet (md breakpoint): `object-position: right center`
- Desktop (lg breakpoint): `object-position: center center`
## Fonts
- **Askan Light** loaded from: `https://db.onlinewebfonts.com/c/304a6edcec9f8858eeaafc2ac18243f4?family=Askan+Light` - used for the brand name and heading
- **Inter** (weights 300, 400, 500, 600) from Google Fonts - used as the body/UI font
- Tailwind config extends fontFamily with `askan: ['"Askan Light"', 'serif']` and `inter: ['Inter', 'sans-serif']`
## Layout Structure
The content is layered on top of the video using `absolute inset-0 z-10` with a flex column layout. Padding: `px-4 sm:px-10 lg:px-12 py-4 sm:py-8`.
## Navigation (Top)
A `<nav>` with `flex items-center justify-between`:
**Left nav pill (glassmorphism):**
- `bg-black/20 backdrop-blur-md rounded-2xl border border-white/10`
- Padding: `px-4 py-2.5 sm:px-6 sm:py-4`
- Contains:
- A custom SVG logo (4-petal pinwheel shape, `w-5 h-5 sm:w-7 sm:h-7`, white)
- Brand text "Aurai" in `font-askan text-white text-base sm:text-xl tracking-wide`
- Hamburger menu icon (lucide-react `Menu`/`X`) with left margin: `ml-4 sm:ml-32 md:ml-64 lg:ml-96`
**Right button (desktop only):**
- `hidden sm:block bg-white text-gray-900 font-medium text-sm px-6 py-3 rounded-full`
- Text: "Join the list"
## Mobile Menu (shown on toggle)
- `sm:hidden`, positioned `absolute top-[4.5rem] left-4 right-4`
- `bg-black/30 backdrop-blur-xl rounded-2xl p-5 border border-white/10`
- Contains links: "Story", "Benefits", "Connect" (white text) and a full-width "Join the list" button
## Main Content (Bottom-aligned)
On mobile: a spacer `flex-1 sm:hidden` pushes content to the bottom.
The content container: `flex flex-col sm:flex-1 sm:flex-row sm:items-end pb-4 sm:pb-12 lg:pb-16 sm:mt-auto`
**Left column:**
1. **Heading:** `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]`
- Text: "Your calm is always within."
2. **Subtitle:** `text-white/70 text-xs sm:text-base md:text-lg max-w-[520px] leading-relaxed`
- Text: "Aurai is your always-on wellness companion. Built by leading therapists, it brings you the care and clarity right when you need it."
3. **Email form:** A rounded pill input with inline submit button
- Container: `bg-black/30 backdrop-blur-md rounded-full border border-white/10`
- Input: transparent background, white text, placeholder "Your email address", `px-4 sm:px-6 py-3 sm:py-4 text-sm`
- Submit button (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`
- Text: "Join the list"
- On submit: shows alert with entered email
4. **Feature pills (mobile only):** `flex sm:hidden flex-wrap gap-2 mt-2`
- Three pills with `bg-black/30 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full border border-white/10`
- Labels: "Smart Therapy", "Real-time Healing", "Insights into outcomes"
**Right column (desktop only):**
- `hidden sm:flex flex-col items-end gap-2 self-end`
- Same three feature pills as mobile but with `text-xs sm:text-sm px-4 py-2`
## Custom SVG Logo
A pinwheel/4-quadrant shape with this 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`
## Global 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; }
```
## Key Design Principles
- No dark overlay on the video - content relies on glassmorphism pills and text contrast
- All interactive glass elements use `bg-black/20` or `bg-black/30` with `backdrop-blur-md` or `backdrop-blur-xl`
- Borders are `border-white/10` throughout
- White text with `/70` opacity for secondary text
- Rounded-full for buttons and inputs, rounded-2xl for containers
- Page title: "Aurai - Always-On Wellness Companion"
