Innovation

网站 · Landing Page · 免费
内容预览

RECREATION PROMPT Build a single-page landing site using React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react. The entire page has a bg-black background. The font loaded via Google Fonts is Instrument Serif (italic and regular). Import it in index.css: @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap'); LIQUID GLASS CSS (in index.css, inside @layer components) Create a reusable .liquid-glass class used on every glass element: .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { 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; } SECTION 1 -- HERO (full-viewport, in Index.tsx) Full-screen (min-h-screen) container with overflow-hidden relative flex flex-col. Background video: absolute, covers the entire viewport (absolute inset-0 w-full h-full object-cover object-bottom). URL: https://d8

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