Build a single-page landing site for "Drift" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries. ### Fonts Import via Google Fonts in `index.css`: - **Inter** (weights 400, 500, 600) -- used as base body font - **Instrument Serif** (italic only) -- used for the italic word "the stress" in the hero heading ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Inter:wght@400;500;600&display=swap'); ``` Body: `font-family: 'Inter', sans-serif;` with antialiased rendering. `overflow-x: clip` on body. ### Color Palette - Hero overlay: `bg-black/20` - About section background: `#F6E4CF` - Dark text / icons in About: `#321C04` - Light cream (button backgrounds in About): `#FFF9F2` - Muted accent (divider, secondary button bg): `#D9C4AA` - Secondary button hover: `#CEBA9E` - Dark button hover: `#1F1003` ### Tailwind Config Add a custom keyframe `fade-in-down` (0%: opacity 0, translateY -8px; 100%: opacity 1, translateY 0) with 0.2s ease-out animation. --- ### SECTION 1: HERO (full viewport height) - Full-screen section (`h-screen`, `overflow-hidden`, `mb-[-25px]` negative bottom margin so the next section overlaps it slightly) - **Background video** (autoPlay, muted, loop, playsInline, object-cover, absolute inset-0): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260711_090308_1dd0cea7-f9ba-4db4-8147-c7d746061c9e.mp4 ``` - **Semi-trans
……（完整源码请在站内查看）