VaultShield

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React 图标，为名为 "VaultShield" 的密码管理器应用创建一个 fullscreen hero section。

---

## 字体

- **标题字体：** `Helvetica Now Display Bold`，从 `https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold` 加载（在 `index.html` 中添加为 `<link>`）
- **正文字体：** `Inter`（weights 300-900），从 Google Fonts 加载：`https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`（在 CSS 中导入）

## CSS 变量

```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;
}
```

## 背景视频

覆盖整个 viewport 的 full-screen 背景视频（`absolute inset-0, object-cover`）：

```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4
```

属性：`autoPlay`、`muted`、`loop`、`playsInline`

## 布局结构

1. **容器：** `relative w-full min-h-screen`，font-family 使用 `--font-body`，color 使用 `--color-text`
2. **Navbar：** max-width 1280px，居中，z-10，`px-5 sm:px-8 py-4 sm:py-5`，使用 flex，让项目居中并在两端分布
3. **Hero 内容：** max-width 1280px 的居中容器，设置 `paddingTop: clamp(40px, 8vw, 72px)`，内容块最大宽度限制为 `max-width: 560px`

## Logo（SVG）

自定义 SVG logo，32x32，fill `#192837`，几何棱角造型：

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" overflow="visible" viewBox="0 0 256 256">
  <path d="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" fill="#192837"/>
</svg>
```

## Navbar 元素

- **左侧：** Logo
- **中间（仅桌面端，`hidden md:flex`）：** 5 个链接——`['Vault', 'Plans', 'Install', 'News', 'Help']`，text-sm font-medium，带 opacity hover 效果
- **右侧（仅桌面端）：**
  - "免费开始使用" 按钮——`background: #7342E2`，白色文字，rounded-full，`px-5 py-2.5`
  - "登录" 按钮——`background: #F2F2EE`，深色文字，rounded-full，`px-5 py-2.5`
- **移动端：** Hamburger 图标（来自 lucide-react 的 Menu/X），打开一个从右侧滑入的 sheet

## 移动端菜单 Sheet（AnimatePresence + Framer Motion）

- **Backdrop：** fixed inset-0，`rgba(25,40,55,0.35)` 背景，backdrop-filter 设置为 `blur(4px)`
- **Sheet：** fixed right-0 top-0，宽度 `min(88vw, 360px)`，高度 `100dvh`，背景 `#CFC8C5`，box-shadow `-12px 0 48px rgba(25,40,55,0.18)`
- **Sheet 动画：** 从 `x: '100%'` 滑动到 `x: 0`，ease `[0.22, 1, 0.36, 1]`，duration 0.45s
- **Sheet 内容：** Logo + 关闭按钮组成的 header、1px divider、交错出现的 nav links（delay `0.18 + i * 0.07`），底部 CTA 按钮与桌面端样式一致

## Hero 标题

- 字体：`var(--font-heading)`
- 大小：`clamp(1.65rem, 5vw, 3rem)`
- Line-height：`1.05`
- Letter-spacing：`-0.01em`
- 颜色：`#192837`
- Margin-bottom：`24px`
- 包含内联 Lucide 图标（Zap、LockKeyhole、Fingerprint），大小为 24px，颜色为 `#192837`，垂直居中，定位为 `top: -2px`
- 文本："用坚不可摧的安全防护锁定你的密码"
  - 在 "锁定" 前放置 Zap 图标
  - 在 "密码" 和 "用" 之间放置 LockKeyhole 图标
  - 在 "安全防护" 后放置 Fingerprint 图标

## Hero 副文案

- 字体：`var(--font-body)`
- 大小：`clamp(0.9rem, 2.5vw, 1.1rem)`
- Line-height：`1.65`
- Opacity：`0.8`
- Max-width：`560px`
- 文本："零压力，完全掌控。VaultShield 通过牢不可破的存储、一键访问和专业级工具，为你永不停歇的生活提供全面保护。"

## CTA 按钮

- 背景：`#7342E2`
- 颜色：白色
- Border-radius：`50px`
- Padding：`17px 24px`
- 字体：`var(--font-body)`，font-weight semibold
- 大小：`clamp(0.9rem, 2vw, 1rem)`
- Box-shadow：`0 4px 24px rgba(115,66,226,0.28)`
- Min-width：`210px`
- 使用 flex，两端分布，gap `32px`
- 文本："免费获取"，右侧带 ArrowRightCircle 图标（20px）
- Hover：`scale(1.04)` + `brightness(1.1)`
- Tap：`scale(0.96)`

## 动画（Framer Motion）

**fadeUp variant** 应用于标题（delay 0）、副文案（delay 0.15s）和 CTA 按钮（delay 0.30s）：

```js
hidden: { opacity: 0, y: 28 }
visible: { opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } }
```

## 依赖项

- `react`、`react-dom`
- `framer-motion`
- `lucide-react`（图标：ArrowRightCircle、Zap、LockKeyhole、Fingerprint、Menu、X）
- Tailwind CSS

---

以上就是精确复现该 hero section 所需的全部细节。