Equilibrium

网站 · Hero · 免费
内容预览

Build a full-screen, single-page React + TypeScript + Vite + Tailwind CSS hero section with a "liquid glass" aesthetic on top of a looping background video. Use `lucide-react` for icons. No other UI libraries. **Font & Global CSS (`src/index.css`):** - Import Geist from Google Fonts: `https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap` - Apply `Geist` globally via `* { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }` - Include `@tailwind base; @tailwind components; @tailwind utilities;` - Define a `.liquid-glass` class: - `background: rgba(255,255,255,0.01);` - `background-blend-mode: luminosity;` - `backdrop-filter: blur(4px);` plus `-webkit-backdrop-filter` - `border: none;` - `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);` - `position: relative; overflow: hidden;` - Add a `.liquid-glass::before` pseudo-element creating a gradient border via mask compositing: - `content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;` - `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);` - `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;` **Component (`src/App.tsx`):** - Import from `lucide-react`: `ChevronDown`, `Infinity`, `Menu`, `X`. Import 

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