提示词
使用 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`）：
```
```
属性：`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 所需的全部细节。原文提示词（English）
Create a fullscreen hero section for a password manager app called "VaultShield" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons.
---
## Fonts
- **Heading font:** `Helvetica Now Display Bold` loaded from `https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold` (add as a `<link>` in `index.html`)
- **Body font:** `Inter` (weights 300-900) loaded from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap` (imported in CSS)
## CSS Variables
```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;
}
```
## Background Video
Full-screen background video covering the entire viewport (`absolute inset-0, object-cover`):
```
```
Attributes: `autoPlay`, `muted`, `loop`, `playsInline`
## Layout Structure
1. **Container:** `relative w-full min-h-screen`, font-family from `--font-body`, color from `--color-text`
2. **Navbar:** max-width 1280px, centered, z-10, `px-5 sm:px-8 py-4 sm:py-5`, flex with items centered and space-between
3. **Hero content:** max-width 1280px centered container with `paddingTop: clamp(40px, 8vw, 72px)`, content block capped at `max-width: 560px`
## Logo (SVG)
Custom SVG logo, 32x32, fill `#192837`, geometric angular shape:
```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 Elements
- **Left:** Logo
- **Center (desktop only, `hidden md:flex`):** 5 links — `['Vault', 'Plans', 'Install', 'News', 'Help']`, text-sm font-medium, opacity hover effect
- **Right (desktop only):**
- "Start For Free" button — `background: #7342E2`, white text, rounded-full, `px-5 py-2.5`
- "Sign In" button — `background: #F2F2EE`, dark text, rounded-full, `px-5 py-2.5`
- **Mobile:** Hamburger icon (Menu/X from lucide-react), opens a right-side slide-in sheet
## Mobile Menu Sheet (AnimatePresence + Framer Motion)
- **Backdrop:** fixed inset-0, `rgba(25,40,55,0.35)` background with `blur(4px)` backdrop-filter
- **Sheet:** fixed right-0 top-0, width `min(88vw, 360px)`, height `100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`
- **Sheet animation:** slides from `x: '100%'` to `x: 0`, ease `[0.22, 1, 0.36, 1]`, duration 0.45s
- **Sheet content:** Logo + close button header, 1px divider, staggered nav links (delay `0.18 + i * 0.07`), bottom CTA buttons matching desktop style
## Hero Heading
- Font: `var(--font-heading)`
- Size: `clamp(1.65rem, 5vw, 3rem)`
- Line-height: `1.05`
- Letter-spacing: `-0.01em`
- Color: `#192837`
- Margin-bottom: `24px`
- Contains inline Lucide icons (Zap, LockKeyhole, Fingerprint) at 24px, color `#192837`, vertically aligned middle, positioned `top: -2px`
- Text: "Lock Down Your Passwords with Ironclad Security"
- Zap icon before "Lock"
- LockKeyhole icon between "Passwords" and "with"
- Fingerprint icon after "Security"
## Hero Subtext
- Font: `var(--font-body)`
- Size: `clamp(0.9rem, 2.5vw, 1.1rem)`
- Line-height: `1.65`
- Opacity: `0.8`
- Max-width: `560px`
- Text: "Zero stress, total control. VaultShield keeps you covered with unbreakable storage, one-tap access, and pro-grade tools for your non-stop world."
## CTA Button
- Background: `#7342E2`
- Color: white
- Border-radius: `50px`
- Padding: `17px 24px`
- Font: `var(--font-body)`, font-weight semibold
- Size: `clamp(0.9rem, 2vw, 1rem)`
- Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`
- Min-width: `210px`
- Flex with space-between, gap `32px`
- Text: "Get It Free" with ArrowRightCircle icon (20px) on the right
- Hover: `scale(1.04)` + `brightness(1.1)`
- Tap: `scale(0.96)`
## Animations (Framer Motion)
**fadeUp variant** applied to heading (delay 0), subtext (delay 0.15s), and CTA button (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] } }
```
## Dependencies
- `react`, `react-dom`
- `framer-motion`
- `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X)
- Tailwind CSS
---
That is every detail needed to reproduce the hero section exactly as built.
