门户

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React icons 构建一个密码管理器落地页的 hero section。以下是全部规格：

---

### 字体

- **标题字体：** "Helvetica Now Display Bold"——在 `index.html` 中通过以下样式表加载：
  ```
  <link href="https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold" rel="stylesheet">
  ```
- **正文字体：** "Inter"（字重 300-900）——在 `index.css` 中通过 Google Fonts 加载：
  ```
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
  ```

### CSS 变量（在 `index.css` 的 `:root` 中定义）

```
--font-heading: 'Helvetica Now Display Bold', sans-serif;
--font-body: 'Inter', sans-serif;
--color-text: #192837;
--color-accent: #7342E2;
--color-login-bg: #F2F2EE;
```

全局重置：`* { box-sizing: border-box; }`，body 使用 `var(--font-body)`、`var(--color-text)`，margin/padding 为 0。

---

### 背景

全视口循环背景视频，采用绝对定位，以 `object-cover` 覆盖整个页面。URL：

```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_131516_eca35265-ea66-4fbd-8d52-22aae6e1a503.mp4
```

属性：`autoPlay`、`muted`、`loop`、`playsInline`。Classes：`absolute inset-0 z-0 w-full h-full object-cover`。

---

### Logo（内联 SVG 组件）

一个自定义几何 SVG logo，32x32，viewBox `0 0 256 256`，fill `#192837`：

```
M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z
```

---

### Navbar

- Max-width `1280px`，使用 `margin: 0 auto` 居中。
- Padding：`px-5 sm:px-8 py-4 sm:py-5`。
- `relative z-10`，使用 flexbox，设置 `justify-between`、`items-center`。
- **左侧：** Logo 组件。
- **中间（桌面端，在移动端隐藏 `md:flex`）：** 5 个 nav links——“保险库”“方案”“安装”“新闻”“帮助”。每个均为 `text-sm font-medium`，颜色为 `var(--color-text)`，使用 `transition-opacity hover:opacity-70`，gap-8。
- **右侧（桌面端，在移动端隐藏 `md:flex`）：** 两个胶囊按钮，设置 `gap-3`：
  - “免费开始”：背景 `#7342E2`、白色文字、`text-sm font-semibold px-5 py-2.5 rounded-full`，hover 时显示阴影，active 时 scale-95。
  - “登录”：背景 `#F2F2EE`、文字为 `var(--color-text)`，尺寸和圆角相同。
- **移动端（`md:hidden`）：** 使用 Lucide `Menu` icon（24px）的 Hamburger button。打开时切换为 `X` icon。

---

### 移动端菜单（滑入式 sheet）

使用 Framer Motion `AnimatePresence`。包含两层：

1. **Backdrop：** 固定 overlay，背景为 `rgba(25,40,55,0.35)`，`backdrop-blur(4px)`。在 0.3s 内淡入/淡出。点击可关闭菜单。

2. **Sheet：** 固定、右对齐，`width: min(88vw, 360px)`，`height: 100dvh`，背景 `#CFC8C5`，box-shadow `-12px 0 48px rgba(25,40,55,0.18)`。使用自定义 cubic bezier `[0.22, 1, 0.36, 1]` 在 0.45s 内从右侧滑入；使用 `[0.55, 0, 1, 0.45]` 在 0.35s 内退出。

   内容：
   - **Header：** Logo + 圆形关闭按钮（40x40，背景 `rgba(25,40,55,0.1)`，X icon 20px），设置 `whileTap={{ scale: 0.9 }}`。
   - **Divider：** 1px 线条，`rgba(25,40,55,0.12)`，margin `0 24px`。
   - **Nav links：** 每个链接依次从右侧进入（x: 24 to 0，delay `0.18 + i * 0.07`，duration 0.4s）。字号 `1.1rem`，rounded-xl，hover `bg-black/10`。
   - **CTA buttons：** 与桌面端相同的“免费开始”（`#7342E2`）和“登录”（`#F2F2EE`），全宽，`py-3.5 rounded-full`，字号 `0.95rem`。

---

### Hero 内容

- 居中的容器，max-width `1280px`，`relative z-10`。
- Padding top：`clamp(40px, 8vw, 72px)`，bottom `48px`。
- 内部内容 wrapper：max-width `660px`，居中。

**标题（`<h1>`）：**
- 字体：`var(--font-heading)`。
- 大小：`clamp(1.65rem, 5vw, 3rem)`。
- Line-height：`1.05`，letter-spacing：`-0.01em`。
- 颜色：`var(--color-text)`。
- Text-align：center。
- 两行：
  - 第 1 行（nowrap）：`锁定` [Zap icon 24px] `你的` [LockKeyhole icon 24px] `密码`
  - 第 2 行：`以铜墙铁壁般的安全性守护` [Fingerprint icon 24px]
- 所有内联 icons：颜色 `#192837`，`display: inline`，`verticalAlign: middle`，`position: relative`，`top: -2px`，margin `0 4px`（Fingerprint 仅设置 `marginLeft: 6px`）。
- 动画：从 `y: 28`、`opacity: 0` 向上淡入，duration 0.6s，ease `[0.22, 1, 0.36, 1]`，delay `0 * 0.15`。

**副文本（`<p>`）：**
- 字体：`var(--font-body)`。
- 大小：`clamp(0.9rem, 2.5vw, 1.1rem)`。
- 颜色：`var(--color-text)`，`opacity: 0.8`。
- Max-width：`560px`，line-height `1.65`，text-align center。
- 文案：“零压力，完全掌控。坚不可摧的存储、一键访问，以及为你永不停歇的世界打造的专业级工具。”
- 动画：相同的向上淡入，delay `1 * 0.15`。

**CTA Button：**
- 胶囊按钮（`borderRadius: 50px`），背景 `#7342E2`，白色文字。
- 大小：`clamp(0.9rem, 2vw, 1rem)`，padding `17px 24px`，min-width `210px`。
- Box-shadow：`0 4px 24px rgba(115,66,226,0.28)`。
- 使用 flexbox，设置 `justify-between`，gap `32px`。
- 标签：“免费获取”，右侧带有 `ArrowRightCircle` icon（20px）。
- Hover：`scale: 1.04, brightness(1.1)`。Tap：`scale: 0.96`。
- 动画：相同的向上淡入，delay `2 * 0.15`。

---

### 动画系统（Framer Motion variants）

所有 hero 元素均使用共享的 `fadeUp` variant：
```
hidden: { opacity: 0, y: 28 }
visible: (i) => ({ opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } })
```

---

### 依赖项

- `react`、`react-dom`（v18）
- `framer-motion`
- `lucide-react`（icons：ArrowRightCircle、Zap、LockKeyhole、Fingerprint、Menu、X）
- Tailwind CSS 3，使用默认配置，不添加自定义 theme extensions
- Vite + TypeScript