Prosthetics Hero

网站 · Hero · 免费
内容预览

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 `` 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):** - `` 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', '

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