Visual Hero

网站 · Hero · 免费
内容预览

**Build a fullscreen hero section in a Vite + React + TypeScript + Tailwind CSS project. Use `gsap` and `lucide-react`. No other UI libraries.** ### Fonts (in `src/index.css`) Import at the top of index.css BEFORE ` @tailwind ` directives: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap'); @font -face { font-family: 'Dirtyline'; src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` Body font: `'Barlow', sans-serif`, background `#000`. ### Tailwind config (`tailwind.config.js`) ```js theme: { extend: { fontFamily: { heading: ['Instrument Serif', 'serif'], body: ['Barlow', 'sans-serif'], dirtyline: ['Dirtyline', 'sans-serif'], }, borderRadius: { DEFAULT: '9999px' }, }, }, ``` ### CSS (append to `src/index.css`) ```css .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-g

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