Tech-Forward

网站 · Hero · 免费

在云境TS 中打开并复制 →

内容预览

Create a full-screen hero section landing page using React, Vite, and Framer Motion (`motion` package). Use plain CSS (no Tailwind). The font is Inter (weights 300, 400, 500, 600) from Google Fonts. The design is minimal black-and-white with a full-viewport background video. **Stack:** React 19, Vite, `motion` (framer-motion), `lucide-react` (for the Plus icon). **Layout:** - Full viewport height (`min-height: 100vh`), white background, flex column with `justify-content: space-between` - Fixed navbar at top (z-index 50, pointer-events none on the nav itself, auto on children) - Absolutely positioned full-screen video behind everything (z-index 0) - Footer content pinned to bottom (z-index 30) with a white gradient fade-up background **Navbar (fixed, top):** - Left side contains: 1. Logo: custom SVG icon (two rotated rounded rectangles at -35deg, black fill) + brand text "NeuralKinetics" (hidden on mobile, shown on desktop 768px+) 2. Menu button: black pill with white circle containing a Plus icon (lucide, size 12, strokeWidth 3) + "Menu" text (11px, white) 3. Tags pill: light gray (#F4F4F6) rounded-full container with two text labels "Advanced Bionics" and "Cognitive AI" (hidden on mobile, shown on desktop) - Right side contains: - A light gray pill with a black circle button (containing a 4-dot grid SVG icon) + label "Adaptive Systems" (hidden on mobile) **Background Video:** - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a

……(完整源码请在站内查看)