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`: ``` ``` - **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: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_131516_eca35265-ea66-4fbd-8d52-22aae6e1a503.mp4 ``` 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 19
……（完整源码请在站内查看）
.webp)