VaultShield

# VaultShield — Fullscreen Password-Manager Hero

## Goal
Build a fullscreen hero section for a password manager called "VaultShield" with React, TypeScript, Tailwind CSS, Framer Motion and `lucide-react`. One viewport: a full-bleed looping video, a navbar with a right-side mobile sheet, and a left-aligned copy block that fades up in three steps. Nothing else.

**Dependencies**: `react`, `react-dom`, `framer-motion`, `lucide-react` (`ArrowRightCircle`, `Zap`, `LockKeyhole`, `Fingerprint`, `Menu`, `X`), Tailwind CSS.

## Fonts
- **Heading**: `Helvetica Now Display Bold`, loaded as a `<link>` in `index.html` from `https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold`.
- **Body**: `Inter` weights 300-900, imported in CSS from `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`.

## 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
- URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4`
- Covers the whole viewport: `absolute inset-0`, `object-cover`, behind everything.
- Attributes: `autoPlay muted loop playsInline`.

## Layout
1. **Container**: `relative w-full min-h-screen`, `font-family` from `--font-body`, colour from `--color-text`.
2. **Navbar**: max-width 1280px, centred, `z-10`, `px-5 sm:px-8 py-4 sm:py-5`, flex, items centred, space-between.
3. **Hero content**: the same 1280px centred container with `paddingTop: clamp(40px, 8vw, 72px)`; the copy block itself is capped at `max-width: 560px`.

## Logo (inline SVG)
32×32, fill `#192837`, one angular geometric mark:

```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
- **Left**: the logo.
- **Centre** (`hidden md:flex`): five links — Vault, Plans, Install, News, Help — `text-sm font-medium`, hover raises opacity.
- **Right** (desktop only): "Start For Free" — background `#7342E2`, white text, `rounded-full px-5 py-2.5`; then "Sign In" — background `#F2F2EE`, dark text, same shape.
- **Mobile**: a hamburger (`Menu` / `X` from lucide-react) that opens a right-side slide-in sheet.

## Mobile sheet (AnimatePresence + Framer Motion)
- **Backdrop**: `fixed inset-0`, `rgba(25,40,55,0.35)` with `backdrop-filter: blur(4px)`; clicking it closes the sheet.
- **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)`.
- **Animation**: slides `x: '100%'` → `x: 0`, ease `[0.22, 1, 0.36, 1]`, duration 0.45s.
- **Content**: logo + close button header, a 1px divider, the five nav links staggered at `delay: 0.18 + i * 0.07`, and the two CTA buttons pinned to the bottom in the desktop styling.

## Heading
- `font-family: var(--font-heading)`, `font-size: clamp(1.65rem, 5vw, 3rem)`, `line-height: 1.05`, `letter-spacing: -0.01em`, colour `#192837`, `margin-bottom: 24px`.
- Text: "Lock Down Your Passwords with Ironclad Security".
- Three inline lucide icons at 24px, colour `#192837`, `vertical-align: middle`, `position: relative; top: -2px`: `Zap` before "Lock", `LockKeyhole` between "Passwords" and "with", `Fingerprint` after "Security".

## Subtext
- `font-family: var(--font-body)`, `font-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`, white text, `border-radius: 50px`, `padding: 17px 24px`, `font-family: var(--font-body)`, semibold, `font-size: clamp(0.9rem, 2vw, 1rem)`.
- `box-shadow: 0 4px 24px rgba(115,66,226,0.28)`, `min-width: 210px`, flex with space-between and `gap: 32px`.
- Label "Get It Free" with an `ArrowRightCircle` (20px) on the right.
- Hover `scale(1.04)` + `brightness(1.1)`; tap `scale(0.96)`.

## Entrances (Framer Motion)
One `fadeUp` variant on the heading (i = 0), the subtext (i = 1) and the CTA (i = 2):

```js
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] },
})
```

## Quality Bar
- TypeScript strict, zero `any`. The three colours and both font stacks stay CSS variables — nothing hard-codes them twice.
- Autoplay only works while the element is genuinely `muted` and `playsInline` — keep both. Give the video `aria-hidden`; it is decoration and never the only carrier of meaning.
- The hamburger needs a real `aria-label` and `aria-expanded`, the sheet's close button its own label, and every foreground control stays reachable by keyboard with a visible focus ring.
- Lock body scroll while the sheet is open, or a drag on the backdrop scrolls the page underneath it.
- Respect `prefers-reduced-motion`: hold a still frame instead of looping video, drop the three fade-ups to their end state, and let the sheet cross-fade instead of sliding. `useReducedMotion()` gives you the switch.
- Watch the payload: a full-resolution source video will dominate page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- `#192837` on the footage with no scrim only holds because the upper-left of this frame is near-white studio background — the copy block lives there. Check contrast against the actual video before swapping the source.
- Helvetica Now Display is a licensed Monotype family, and a third-party CDN link is not a licence to redistribute it. Ship it only if you hold one; otherwise point `--font-heading` at a tight open grotesque (Inter Tight Bold sits close) and the rest of the page is unchanged.