Adaptive Prosthetics

# Adaptive Prosthetics — Video Hero Landing

## Goal
Build a React + TypeScript + Tailwind CSS single-page hero section using Vite. The entire page lives in `src/App.tsx`. No extra libraries beyond `react`, `react-dom`, `lucide-react` and Tailwind.

Do not add any other sections, no Supabase wiring, no routing — only the single hero page described here.

## Background
- A fullscreen autoplaying, muted, looping, `playsInline` background `<video>` element, absolutely positioned `inset-0 w-full h-full object-cover`.
- Video URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4`
- Root wrapper: `relative min-h-screen overflow-hidden bg-[#f0f0ee]`.
- Foreground content wrapper: `relative z-10 flex flex-col min-h-screen`.

## Logo (inline SVG component)
`width="18" height="18"`, `viewBox="0 0 256 256"`, `fill="none"`. A single path with `fill="rgb(84, 84, 84)"` and:
`d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z"`

## Navbar (centred, pill-style, two separate pills)
- `<nav>`: `flex items-center justify-center pt-4 sm:pt-6 px-4 sm:px-8 gap-2 sm:gap-3`.
- Left circular logo container: `flex items-center justify-center rounded-full w-10 h-10 sm:w-11 sm:h-11 shrink-0`, with the inline style `backgroundColor: '#EDEDED'`, holding the Logo.
- Right pill container: `flex items-center gap-4 sm:gap-10 rounded-xl px-4 sm:px-8 py-2.5 sm:py-3`, inline style `backgroundColor: '#EDEDED'`.
- Nav links array: `['Story', 'Products', 'Help', 'Support']`. Each anchor: `text-[12px] sm:text-[14px] font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200`.

## Hero content (bottom-left aligned)
- Outer: `flex-1 flex items-end pb-10 sm:pb-16 lg:pb-20 px-6 sm:px-12 md:px-20 lg:px-28`.
- Inner: `max-w-xs`, holding four stacked elements, each carrying `mb-3`:

1. **Badge link** — `inline-flex items-center gap-1.5 text-[11.5px] font-medium text-blue-500 hover:text-blue-600 transition-colors mb-3 group`. Text "Seen on Shark Tank in India", followed by an arrow `→` inside a span with `inline-block transition-transform duration-200 group-hover:translate-x-0.5`.
2. **Headline `<h1>`** — `text-[1.5rem] sm:text-[1.75rem] leading-[1.15] font-medium text-gray-900 tracking-tight mb-3`. Text: "Simple, smart prosthetics made for people who keep fighting."
3. **Subtext `<p>`** — `text-[13px] text-gray-400 font-normal mb-3`. Text: "Reclaim your movement now."
4. **CTA anchor** — `inline-flex items-center gap-2 text-[13px] font-medium text-blue-500 border border-blue-400 rounded-full px-5 py-2.5 hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200 group`. Text "Try a free fitting" plus an arrow `→` in a span with `transition-transform duration-200 group-hover:translate-x-0.5`.

## Animations & Micro-interactions
- Arrow spans translate right by `0.5` on group hover (`group-hover:translate-x-0.5`).
- The CTA fills blue on hover — background, text and border all transition over 200ms.
- Nav links shift from `gray-700` to `gray-900` on hover.

## Fonts
The default Tailwind sans-serif system font stack — no custom font. All sizes are the exact pixel/rem values above: `11.5px`, `12px`, `13px`, `14px`, `1.5rem`, `1.75rem`.

## Colors
Page background `#f0f0ee`; pill backgrounds `#EDEDED`; accent `blue-500` / `blue-600` / `blue-400`; text `gray-900` / `gray-700` / `gray-400`.

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Give the background video `aria-hidden` and keep every foreground control reachable by keyboard with a visible focus ring; the video is decoration, never the only carrier of meaning.
- Autoplay only ever works when the element is genuinely `muted` and `playsInline` — keep both, and ship a poster frame so the first paint is not an empty box on a slow connection.
- Watch the payload: a full-resolution source video will dominate the page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- Respect `prefers-reduced-motion`: pause the loop and fall back to the poster frame rather than looping video behind the copy.