VaultShield

网站 · Hero · 免费
VaultShield 预览

在云境TS 中打开并复制 →

内容预览

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 `` 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`): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4 ``` 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 `#19283

……（完整源码请在站内查看）