Build a single full-viewport React + TypeScript + Tailwind CSS page for a creative studio called **Kollektiva**. The app renders only this one section (no nav, no other pages). Stack: Vite + React 18 + Tailwind 3. Font: **Geist** (Google Fonts weights 300, 400, 500). Title: `Kollektiva`. ### Font setup In `index.html`: ```html ``` In Tailwind config, extend: ```js fontFamily: { geist: ['Geist', 'system-ui', 'sans-serif'] } ``` In CSS, add this keyframe: ```css @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } ``` ### Overall structure One `` that is: - `relative`, `h-screen`, `w-full`, `overflow-hidden` - `font-geist`, text white - Full-bleed stacked background portraits (one per team member) - A light dark gradient overlay on top of the backgrounds - A content layer (`z-10`) with two vertical zones: top (headline + description) and bottom (avatar picker + meta footer) ### Background portraits (exact asset URLs) Render **all 8** backgrounds as absolutely positioned `inset-0` layers with `bg-cover bg-center`. Only the active index has `opacity: 1`; others `opacity: 0`. Transition: `transition-opacity duration-700 ease-out` (700ms opacity crossfade). Use these exact image URLs (same URL for full-bleed background AND circular avatar thumbnail): 1. **Andrei Baranov** — Design Chief `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_
……（完整源码请在站内查看）