提示词
使用 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：
```
```
属性：`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原文提示词（English）
Build a password manager landing page hero section using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Here is every specification:
---
### Fonts
- **Heading font:** "Helvetica Now Display Bold" -- load via this stylesheet in `index.html`:
```
<link href="https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold" rel="stylesheet">
```
- **Body font:** "Inter" (weights 300-900) -- load via Google Fonts in `index.css`:
```
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
```
### CSS Variables (defined in `:root` in `index.css`)
```
--font-heading: 'Helvetica Now Display Bold', sans-serif;
--font-body: 'Inter', sans-serif;
--color-text: #192837;
--color-accent: #7342E2;
--color-login-bg: #F2F2EE;
```
Global reset: `* { box-sizing: border-box; }`, body uses `var(--font-body)`, `var(--color-text)`, margin/padding 0.
---
### Background
Full-viewport looping background video, absolutely positioned, covering the entire page with `object-cover`. URL:
```
```
Attributes: `autoPlay`, `muted`, `loop`, `playsInline`. Classes: `absolute inset-0 z-0 w-full h-full object-cover`.
---
### Logo (inline SVG component)
A custom geometric 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`, centered with `margin: 0 auto`.
- Padding: `px-5 sm:px-8 py-4 sm:py-5`.
- `relative z-10`, flexbox with `justify-between`, `items-center`.
- **Left:** Logo component.
- **Center (desktop, hidden on mobile `md:flex`):** 5 nav links -- "Vault", "Plans", "Install", "News", "Help". Each is `text-sm font-medium`, color `var(--color-text)`, `transition-opacity hover:opacity-70`, gap-8.
- **Right (desktop, hidden on mobile `md:flex`):** Two pill buttons with `gap-3`:
- "Start For Free": background `#7342E2`, white text, `text-sm font-semibold px-5 py-2.5 rounded-full`, hover shadow, active scale-95.
- "Sign In": background `#F2F2EE`, text `var(--color-text)`, same sizing/rounding.
- **Mobile (`md:hidden`):** Hamburger button using Lucide `Menu` icon (24px). Toggles to `X` icon when open.
---
### Mobile Menu (slide-in sheet)
Uses Framer Motion `AnimatePresence`. Two layers:
1. **Backdrop:** Fixed overlay, `rgba(25,40,55,0.35)` background, `backdrop-blur(4px)`. Fades in/out over 0.3s. Clicking dismisses the menu.
2. **Sheet:** Fixed, right-aligned, `width: min(88vw, 360px)`, `height: 100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`. Slides in from right with custom cubic bezier `[0.22, 1, 0.36, 1]` over 0.45s; exits with `[0.55, 0, 1, 0.45]` over 0.35s.
Contents:
- **Header:** Logo + circular close button (40x40, background `rgba(25,40,55,0.1)`, X icon 20px), with `whileTap={{ scale: 0.9 }}`.
- **Divider:** 1px line, `rgba(25,40,55,0.12)`, margin `0 24px`.
- **Nav links:** Each link staggers in from right (x: 24 to 0, delay `0.18 + i * 0.07`, duration 0.4s). Font size `1.1rem`, rounded-xl, hover `bg-black/10`.
- **CTA buttons:** Same "Start For Free" (`#7342E2`) and "Sign In" (`#F2F2EE`) as desktop, full-width, `py-3.5 rounded-full`, font size `0.95rem`.
---
### Hero Content
- Centered container, max-width `1280px`, `relative z-10`.
- Padding top: `clamp(40px, 8vw, 72px)`, bottom `48px`.
- Inner content wrapper: max-width `660px`, centered.
**Heading (`<h1>`):**
- Font: `var(--font-heading)`.
- Size: `clamp(1.65rem, 5vw, 3rem)`.
- Line-height: `1.05`, letter-spacing: `-0.01em`.
- Color: `var(--color-text)`.
- Text-align: center.
- Two lines:
- Line 1 (nowrap): `Lock` [Zap icon 24px] `Down Your` [LockKeyhole icon 24px] `Passwords`
- Line 2: `with Ironclad Security` [Fingerprint icon 24px]
- All inline icons: color `#192837`, `display: inline`, `verticalAlign: middle`, `position: relative`, `top: -2px`, margin `0 4px` (Fingerprint has `marginLeft: 6px` only).
- Animates: fade-up from `y: 28`, `opacity: 0`, duration 0.6s, ease `[0.22, 1, 0.36, 1]`, delay `0 * 0.15`.
**Subtext (`<p>`):**
- Font: `var(--font-body)`.
- Size: `clamp(0.9rem, 2.5vw, 1.1rem)`.
- Color: `var(--color-text)` at `opacity: 0.8`.
- Max-width: `560px`, line-height `1.65`, text-align center.
- Copy: "Zero stress, total control. Unbreakable storage, one-tap access, and pro-grade tools for your non-stop world."
- Animates: same fade-up, delay `1 * 0.15`.
**CTA Button:**
- Pill button (`borderRadius: 50px`), background `#7342E2`, white text.
- Size: `clamp(0.9rem, 2vw, 1rem)`, padding `17px 24px`, min-width `210px`.
- Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`.
- Flexbox with `justify-between`, gap `32px`.
- Label: "Get It Free" with `ArrowRightCircle` icon (20px) on right.
- Hover: `scale: 1.04, brightness(1.1)`. Tap: `scale: 0.96`.
- Animates: same fade-up, delay `2 * 0.15`.
---
### Animation System (Framer Motion variants)
All hero elements use a shared `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] } })
```
---
### Dependencies
- `react`, `react-dom` (v18)
- `framer-motion`
- `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X)
- Tailwind CSS 3 with default config, no custom theme extensions
- Vite + TypeScript
