Network Hero

为“Marketeam”——一个营销人才平台——创建一个单页 React + Vite 落地页。使用 Google Fonts 中的 Inter（400、500、600、700）和 Urbanist（600、700）。页面是一个占满视口的首屏，包含页眉、左侧内容区、右侧动态圆环可视化，以及底部 Logo 滚动条。

---

### 背景

覆盖整个视口的全页背景图：
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_111401_56af5012-2263-45d3-849a-8688084d7c2a.png&w=1280&q=85
```
在根 `.app` 容器上应用为 `background: url(...) center center / cover no-repeat`。

---

### 页眉

- Flexbox 横向布局，`justify-content: space-between`，内边距 `24px 64px`，最大宽度 `1920px`，居中。
- **左侧**：Logo 图片 + 导航链接
  - Logo：使用 `<img>`，高度为 32px，来源：`https://polo-pecan-73837341.figma.site/_assets/v11/17ae538989a509947a8de3892c644664895e69b1.png`
  - 导航链接：“Your Team”、“Solutions”、“Blog”、“Pricing”——颜色 `#000000`，15px，font-weight 400，悬停时显示下划线动画（scaleX 从 0 到 1，transform-origin 为 left，0.3s ease）。
- **右侧**：“Log In”链接 + “Join Now”按钮
  - Log In：颜色 `#ffffff`，15px，字重 500，悬停下划线效果与导航相同，但为白色。
  - Join Now：胶囊按钮（border-radius 50px），黑色背景（`#000000`），白色文字，内边距 `12px 26px`，15px，字重 500。悬停时，使用 `::after` 让 `#A068FF` 填充色从左侧滑入，从 `translateX(-100%)` 变为 `translateX(0)`，cubic-bezier(0.22, 1, 0.36, 1)，持续 0.4s。按钮使用 `overflow: hidden`。
  - 按钮包裹在 `.btn-border-wrap` div 中，该 div 使用 `::before` 创建旋转的 conic-gradient 边框，设置 `inset: -3px`、`padding: 3px`，并通过 mask 技术实现仅显示边框的效果。渐变为：`conic-gradient(from var(--border-angle), #A068FF, #070319, #A068FF, #070319, #A068FF)`。它通过 CSS `@property --border-angle` 从 `0deg` 到 `360deg` 旋转，动画为 3s linear infinite。

---

### 首屏左侧

- `flex: 0 1 600px`，`padding-top: 40px`
- **标题**：打字机效果，字体 Urbanist，64px，字重 600，line-height 64px，letter-spacing -1.5px。文字：“Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!”。前 67 个字符使用 `#000000`，其余部分使用 `#ffffff`。输入过程中显示闪烁的紫色光标（`#A068FF`）。打字速度：每个字符 35ms，延迟 400ms 后开始。
- **“Start Project”按钮**：胶囊样式与 Join Now 相同，但稍大（内边距 `14px 28px`，16px），背景为 `#060218`。带有向右箭头的 chevron SVG 图标（18x18）。悬停填充从右侧滑入（从 `translateX(100%)` 到 `translateX(0)`）。同样包裹在 `.btn-border-wrap` 中，使用相同的旋转渐变边框。打字结束后出现（animation-delay 3.2s）。
- **光标元素**：紫色光标图标（SVG：pointer arrow，填充色为 `#A068FF`）+ “David”标签（胶囊徽章，背景为 `#A068FF`，白色文字，16px，字重 500，内边距 `8px 16px`，border-radius 20px）。设置 `margin-left: 290px`、`margin-top: 40px`。以 animation-delay 3.6s 出现。

---

### 首屏右侧——圆环可视化

- 容器：`720x720px`，居中。
- 4 个同心圆（轨道），每个缓慢旋转：
  - Orbit 1（最内层）：直径 353px，向左（counterclockwise）旋转 30s
  - Orbit 2：直径 501px，向右旋转 40s
  - Orbit 3：直径 649px，向右旋转 50s
  - Orbit 4（最外层）：直径 797px，向左旋转 60s
- 每个圆环都有 1px 渐变边框：`linear-gradient(180deg, rgba(217, 161, 255, 0) 0%, rgba(217, 161, 255, 1) 43%, rgba(217, 161, 255, 0) 100%)`，通过 mask 技术应用。
- **中心圆（orbit-1）**：显示动态递增数字“20k+”（Urbanist 64px，字重 500）和“Specialists”标签（Urbanist 16px，字重 600）。反向旋转以保持竖直。
- **头像**使用 `transform: translate(-50%, -50%) rotate(Xdeg) translate(radius) rotate(-Xdeg)` 放置在轨道上：
  - 头像图片（默认 58px，部分为 78px/88px）来自以下 URL：
    - `https://polo-pecan-73837341.figma.site/_assets/v11/aa51718fb3af3637e6d666b6543fc27a175fada6.png`（orbit 1，位于 270deg，半径 177px，方形且 border-radius 20px，紫色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/ca755f7f93c1126fb8bdbf99ab364a33aa9ab272.png`（orbit 2，位于 60deg，251px，圆形，黄色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/dc01064c7093dcc32674876ee3cf5e41c4a485c6.png`（orbit 2，位于 180deg，251px，78px，粉色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/d5470a58b02388336141575048720f19a50de832.png`（orbit 2，位于 300deg，251px，方形且 border-radius 20px，蓝色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/018736aa5d0275c4ce56cfebaf2ae3007d81ca1e.png`（orbit 3，位于 130deg，325px，88px，粉色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/c76d8a0b99676de31c014344bfaf75bad090758d.png`（orbit 4，位于 30deg，399px，紫色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/7b1b5f039de7b54cc9913e96c1923c3b15a157fa.png`（orbit 4，位于 95deg，399px，88px，方形且 border-radius 24px，橙色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/9ae171d8895199349755c43fbff00e122221a027.png`（orbit 4，位于 220deg，399px，88px，方形且 border-radius 24px，粉色辉光）
    - `https://polo-pecan-73837341.figma.site/_assets/v11/926c9eb7b4bc1df846fa0e39f0b0dc3fefd80671.png`（orbit 4，位于 320deg，399px，紫色辉光）
  - 每个头像都有交错的飞入动画（scale 0.3 + rotate -180deg + blur -> normal），延迟范围为 0.6s 到 2.3s。

---

### Logo 滚动条（底部）

- 合作伙伴 Logo 横向无限滚动条，`gap: 64px`，动画时长 20s。
- 左右边缘使用淡出 mask（linear-gradient mask）。
- 5 个独立 SVG Logo 重复 4 次，实现无缝循环：
  - `https://polo-pecan-73837341.figma.site/_assets/v11/1e7b0e6fcc016cd28aec5c68990118b8c54c35a5.svg`
  - `https://polo-pecan-73837341.figma.site/_assets/v11/3eac03c183db2ae080d910159211c14843398b61.svg`
  - `https://polo-pecan-73837341.figma.site/_assets/v11/17705a4c0023a0e5a99154dfb10582adbbf4260b.svg`
  - `https://polo-pecan-73837341.figma.site/_assets/v11/0e5f442b09dc5c248e3e60d40a65505fb1887228.svg`
  - `https://polo-pecan-73837341.figma.site/_assets/v11/63f99030ceb459e3c9ab9e429cfa2353491d3816.svg`
- 每个 Logo：`width: 137px`、`height: 40px`、`object-fit: contain`。

---

### 入场动画

- 页眉：fade-down（translateY 从 -20px 到 0，0.8s）
- 首屏左侧：fade-up（translateY 从 40px 到 0，1s）
- 首屏右侧圆环：scale-in（scale 从 0.85 到 1 + opacity，1.2s，延迟 0.3s）
- Logo 区域：fade-up，延迟 0.6s
- 全部使用 `cubic-bezier(0.22, 1, 0.36, 1)` easing。

---

### 响应式断点

- **1280px**：圆环缩放至 0.85
- **1024px**：堆叠布局（flex-direction column），标题 48px，圆环缩放至 0.7，导航间距缩小
- **768px**：隐藏导航，标题 36px，圆环缩放至 0.5
- **480px**：标题 28px，圆环缩放至 0.4，按钮/Logo 更小

---

### 关键颜色

- 主强调色：`#A068FF`
- 深色背景：`#060218` / `#070319`
- 深色文字：`#000000`
- 浅色文字：`#ffffff`
- Body 背景回退色：`#0a0a0a`

---

### 技术细节

- React（useState、useEffect、useRef），Vite 构建
- 自定义 `useCountUp` hook：使用 easeOutCubic 在 2s 内从 0 动画递增至 20，延迟 1.2s 后开始
- `TypewriterHeading` 组件：以可配置速度逐字符输入
- 使用 CSS `@property --border-angle` 实现动态边框渐变
- 不使用外部动画库——打字机/计数器使用纯 CSS 动画 + JS