Celestial Renewal

网站 · Wellness · 免费
内容预览

**Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called "Serene". Use TypeScript.** --- ### Fonts (loaded via Google Fonts in index.html) Load these three font families from Google Fonts: - **Dancing Script** (weights: 400, 500, 600, 700) -- used for the brand logo - **Instrument Serif** (italic: 0, 1) -- used for the hero heading and the quote text - **Inter** (weights: 300, 400, 500, 600, 700, 800, 900) -- used for body text, navbar links, and buttons ```html ``` --- ### Global CSS (index.css) ```css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #0a0a0c; overflow-x: hidden; } .font-inter { font-family: 'Inter', sans-serif; } .font-instrument { font-family: 'Instrument Serif', serif; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .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,2

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