提示词
使用 Vite 构建一个 React + TypeScript + Tailwind CSS 单页 Hero 区域。整个页面都位于 `src/App.tsx` 中。除 `react`、`react-dom`、`lucide-react` 和 Tailwind 外，不使用其他库。
**背景：**
- 一个全屏、自动播放、静音、循环且带 `playsInline` 的背景 `<video>` 元素，使用绝对定位和 `inset-0 w-full h-full object-cover`。
- 视频 URL（必须完全一致）：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4`
- 根 wrapper：`relative min-h-screen overflow-hidden bg-[#f0f0ee]`。
- 前景内容 wrapper：`relative z-10 flex flex-col min-h-screen`。
**Logo（内联 SVG 组件）：**
- `width="18" height="18"`、`viewBox="0 0 256 256"`、`fill="none"`。
- 单个 path，使用 `fill="rgb(84, 84, 84)"` 和 `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（居中、胶囊样式，两个独立胶囊）：**
- `<nav>` classes：`flex items-center justify-center pt-4 sm:pt-6 px-4 sm:px-8 gap-2 sm:gap-3`。
- 左侧圆形 logo 容器：`flex items-center justify-center rounded-full w-10 h-10 sm:w-11 sm:h-11 shrink-0`，inline style `backgroundColor: '#EDEDED'`，包含 Logo。
- 右侧胶囊容器：`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'`。
- 导航链接数组：`['故事', '产品', '帮助', '支持']`。每个 anchor：`text-[12px] sm:text-[14px] font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200`。
**Hero 内容（左下对齐）：**
- 外层：`flex-1 flex items-end pb-10 sm:pb-16 lg:pb-20 px-6 sm:px-12 md:px-20 lg:px-28`。
- 内层：`max-w-xs`。四个垂直排列的元素，每个都带 `mb-3`：
1. Badge 链接：`inline-flex items-center gap-1.5 text-[11.5px] font-medium text-blue-500 hover:text-blue-600 transition-colors mb-3 group`。文本：`曾亮相印度 Shark Tank`，后接 span 中的箭头 `→`，span 使用 `inline-block transition-transform duration-200 group-hover:translate-x-0.5`。
2. 标题 `<h1>`：`text-[1.5rem] sm:text-[1.75rem] leading-[1.15] font-medium text-gray-900 tracking-tight mb-3`。文本：`为永不放弃的人打造简单、智能的假肢。`
3. 辅助文本 `<p>`：`text-[13px] text-gray-400 font-normal mb-3`。文本：`立即重获行动能力。`
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`。文本：`免费试配`，后接 span 中的箭头 `→`，span 使用 `transition-transform duration-200 group-hover:translate-x-0.5`。
**动画/微交互：**
- group hover 时，箭头 span 向右平移 `0.5`（`group-hover:translate-x-0.5`）。
- CTA 在 hover 时填充蓝色（背景 + 文本 + 边框过渡，200ms）。
- 导航链接在 hover 时从 gray-700 变为 gray-900。
**字体：**使用 Tailwind 默认的 sans-serif 系统字体栈（不使用自定义字体）。所有字号均严格采用上述像素/rem 值（`11.5px`、`12px`、`13px`、`14px`、`1.5rem`、`1.75rem`）。
**颜色：**页面背景 `#f0f0ee`；胶囊背景 `#EDEDED`；强调色 `blue-500/600/400`；文本 `gray-900/700/400`。
不要添加任何其他区域，不接入 Supabase，不添加路由。只实现上述单个 Hero 页面。原文提示词（English）
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.
**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"`.
- 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 (centered, pill-style, two separate pills):**
- `<nav>` classes: `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`, inline style `backgroundColor: '#EDEDED'`, contains 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`. Four stacked elements, each with `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 `→` in 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 arrow `→` in 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`).
- CTA fills blue on hover (bg + text + border transitions, 200ms).
- Nav links shift from gray-700 to gray-900 on hover.
**Fonts:** Default Tailwind sans-serif system font stack (no custom font). All sizes are exact pixel/rem values above (`11.5px`, `12px`, `13px`, `14px`, `1.5rem`, `1.75rem`).
**Colors:** Page background `#f0f0ee`; pill backgrounds `#EDEDED`; accent `blue-500/600/400`; text `gray-900/700/400`.
Do not add any other sections, no Supabase wiring, no routing. Only the single hero page as described.
