人才集体

为一家名为 **Kollektiva** 的创意工作室构建一个占满整个视口的 React + TypeScript + Tailwind CSS 单页。应用只渲染这一个区块（无 nav，无其他页面）。技术栈：Vite + React 18 + Tailwind 3。字体：**Geist**（Google Fonts 字重 300、400、500）。标题：`Kollektiva`。

### 字体设置

在 `index.html` 中：
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&display=swap" rel="stylesheet" />
```

在 Tailwind 配置中扩展：
```js
fontFamily: { geist: ['Geist', 'system-ui', 'sans-serif'] }
```

在 CSS 中添加此 keyframe：
```css
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
```

### 整体结构

一个 `<section>`，具备：
- `relative`、`h-screen`、`w-full`、`overflow-hidden`
- `font-geist`，白色文字
- 全出血层叠背景肖像（每位团队成员一张）
- 背景上方覆盖一层轻微的深色渐变
- 一个内容层（`z-10`），包含两个垂直区域：顶部（标题 + 描述）和底部（头像选择器 + 元信息页脚）

### 背景肖像（精确资源 URLs）

将**全部 8 个**背景渲染为绝对定位的 `inset-0` 图层，并使用 `bg-cover bg-center`。只有当前激活索引的 `opacity: 1`，其余均为 `opacity: 0`。过渡：`transition-opacity duration-700 ease-out`（700ms 透明度交叉淡化）。

使用以下精确图片 URLs（全出血背景和圆形头像缩略图使用同一个 URL）：

1. **Andrei Baranov** — 设计总监  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_225202_f9e684f3-dc19-469a-8142-eb391bfc601b.png&w=1280&q=85`  
   描述：`Andrei sets the visual direction of every project. He turns rough ideas into clear, confident design languages that feel effortless yet leave a lasting impression.`

2. **Daria Lebedeva** — 界面专家  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_225149_7937e8ea-3b0a-46ab-919f-775627695a23.png&w=1280&q=85`  
   描述：`Daria crafts interfaces people understand at first glance. Every screen she designs balances clarity and character, making complex products feel simple and warm.`

3. **Ivan Sorokin** — 概念总监  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_225153_f2b1fc04-776a-4f2e-879b-b764ea762e77.png&w=1280&q=85`  
   描述：`Ivan shapes the ideas behind the work. He digs into every brief until the core story emerges, then builds concepts that give each project its reason to exist.`

4. **Anna Fedorova** — 品牌顾问  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_225847_f456fd9c-8938-4103-836d-51b0e88a9510.png&w=1280&q=85`  
   描述：`Anna helps brands find their voice. From positioning to tone, she builds identities that stay consistent everywhere and grow stronger with every appearance.`

5. **Pavel Smirnov** — 动效艺术家  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_225854_3958a522-6203-4f84-a7fa-3b3f1dcd7256.png&w=1280&q=85`  
   描述：`Pavel brings stillness to life. His motion work adds rhythm and personality to every product, guiding attention with transitions that feel natural and precise.`

6. **Olga Kravtsova** — UX 专家  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_231111_fcefaa07-6851-4fdc-ac7b-98754ac9d5c4.png&w=1280&q=85`  
   描述：`Olga studies how people actually use what we make. Her research keeps every decision grounded in real behavior, so the work serves users and not assumptions.`

7. **Igor Zakharenko** — 平面创作者  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_231124_9a1505aa-8c44-4046-aff8-1aa0bc7b3ef3.png&w=1280&q=85`  
   描述：`Igor gives every project its finishing touch. From typography to illustration, he sweats the visual details that separate good work from unforgettable work.`

8. **Ksenia Romanova** — 工作室负责人  
   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260727_230413_62e8b331-89be-4d35-84fe-330ba9b1b64f.png&w=1280&q=85`  
   描述：`Ksenia keeps the studio moving as one. She connects people, plans, and priorities so every project ships on time without losing the craft it deserves.`

默认激活索引：`0`（Andrei Baranov）。

### 渐变叠加层

位于背景上方、内容下方：
`absolute inset-0 bg-gradient-to-b from-black/20 via-black/5 to-black/25`  
（顶部 20% 黑色，中间 5%，底部 25%——柔和暗角，不要过重）。

### 内容布局

内容包装器：
`relative z-10 flex h-full flex-col justify-between`
内边距：
- mobile：`px-6 pb-6 pt-10`
- sm：`px-10 pb-8 pt-14`
- lg：`px-16`

#### 顶部区域——标题 + 简介

mobile 端使用纵向 flex（`flex-col gap-8`）；从 `md` 起：`md:flex-row md:items-start md:justify-between md:gap-16`。

**左侧——H1（静态，始终不变）：**
精确文案（“day”前使用不换行空格）：
> Kollektiva is the talent you build with each day

样式：
- `max-w-xl`
- `text-3xl` → `sm:text-5xl` → `lg:text-7xl`
- `font-normal`、`leading-[1.1]`、`tracking-tight`
- 白色

**右侧——描述（随当前激活 slide 变化）：**
- `max-w-xs`
- `text-sm font-medium leading-relaxed text-white/80` → `sm:text-base`
- `md:pt-2`
- 变化时：使用 `key={slide.name}` 重新挂载，并应用类 `animate-[fadeIn_0.5s_ease]`（0.5s 淡入 + 向上 4px 归位）

#### 底部区域

外层：`flex flex-col gap-8`

##### 头像选择器行

- 横向 flex：`flex items-end gap-2` → `sm:gap-3`
- Mobile：`overflow-x-auto`，隐藏滚动条（`[scrollbar-width:none] [&::-webkit-scrollbar]:hidden`），`pb-1`
- Desktop sm+：`sm:overflow-visible sm:pb-0`

每个头像都是一个 `<button>`：
- `flex shrink-0 flex-col items-center gap-2`
- `aria-label={`Show ${name}`}`
- `onClick` 设置激活索引

每个按钮从上到下：
1. **激活指示点：**`h-1 w-1 rounded-full bg-white`  
   激活：`opacity-100`；未激活：`opacity-0`  
   过渡：`transition-opacity duration-300`  
   （圆点在原位淡入/淡出——不会在头像间滑动）
2. **圆形缩略图：**外层 `block h-10 w-10 overflow-hidden rounded-full` → `sm:h-14 sm:w-14`  
   内层 `<img>`：使用同一 slide 图片 URL，`h-full w-full object-cover`，`alt={name}`

头像顺序必须与上方 slides 数组的 1→8 顺序一致。

##### 元信息页脚

位于头像下方：
- 顶部边框：`border-t border-white/20`
- `pt-5`
- `flex flex-wrap items-center justify-between gap-4`
- `text-sm font-medium`

从左到右四项（space-between）：

1. **姓名**（始终可见）：白色，使用 `key={slide.name}` 重新挂载 + `animate-[fadeIn_0.5s_ease]`
2. **职位**（mobile 端隐藏，`sm:`+ 可见）：`text-white/70`，使用 `key={slide.role}` 重新挂载（职位不使用淡入动画）
3. **静态从业时间**（到 `md` 才显示）：`text-white/70`——精确文本：`In the business since 2020`（不因人员而变化）
4. **WhatsApp 链接：**`<a href="#">WhatsApp</a>`，使用 `underline underline-offset-4 transition-colors hover:text-white/70`

### 交互与动画总结

| 交互 | 行为 |
|---|---|
| 点击头像 | 设置 `active` 索引 |
| 背景变化 | 700ms 透明度交叉淡化（`ease-out`） |
| 描述 + 姓名变化 | 通过 CSS keyframe + React `key` 重新挂载，实现 500ms `fadeIn`（opacity 0→1，translateY 4px→0） |
| 激活圆点 | 仅对当前激活头像进行 300ms 透明度切换 |
| WhatsApp hover | 颜色 → `white/70` |
| 无自动播放 | 仅支持手动选择 |
| 无 carousel 箭头 | 仅使用头像 |
| 背景无 blur | 仅使用 Cover + center |
| 无额外 cards、badges、stats 或次要 CTAs | |

### 响应式行为检查清单

- **Mobile：**标题位于简介上方并纵向堆叠；头像行可横向滚动（40×40px 圆形）；页脚仅显示姓名 + WhatsApp（职位/从业时间隐藏）
- **sm：**更大的字体，56×56 头像，显示职位，头像不滚动
- **md：**标题和简介并排；显示从业时间
- **lg：**标题使用 `text-7xl`，水平内边距使用 `px-16`

### 视觉特征

在柔和浅灰色 / 米白色无缝背景上拍摄的工作室人像（亚洲 / 东欧创意专业人士，柔和工作室灯光）。在全出血人像上叠加白色 Geist sans-serif 字体和细腻的黑色渐变暗角。极简、编辑风格，无紫色、无 cards、无 pills、无 glow。一个构图占满首个视口。

### 不应包含的内容

- 不要使用 `/public/images/` 中未使用的本地文件（它们是不相关的 mockups）
- 不使用 Lucide icons，不使用 Supabase，不添加额外区块
- 不使用俄语文案——仅使用指定的英语
- 不添加 Telegram 链接——实际页面使用 **WhatsApp**
- 品牌名称是 **Kollektiva**，不是 Pragmatica
- 恰好 **8** 人（不是 9 人）
- 头像行右侧不添加单独的大型“action circle”

### 应用接线

`App.tsx` 只渲染 `<Hero />`。通过 `@/components/Hero` 导入。状态：使用单个 `useState(0)` 保存当前激活 slide 索引。

---