提示词
为“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原文提示词（English）
Create a single-page React + Vite landing page for "Marketeam" -- a marketing talent platform. Use Inter (400, 500, 600, 700) and Urbanist (600, 700) from Google Fonts. The page is a full-viewport hero with a header, left content area, right animated circles visualization, and a bottom logo ticker strip.
---
### Background
Full-page background image covering the entire viewport:
```
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
```
Applied as `background: url(...) center center / cover no-repeat` on the root `.app` container.
---
### Header
- Flexbox row, `justify-content: space-between`, padding `24px 64px`, max-width `1920px`, centered.
- **Left side**: Logo image + nav links
- Logo: `<img>` with height 32px from: `https://polo-pecan-73837341.figma.site/_assets/v11/17ae538989a509947a8de3892c644664895e69b1.png`
- Nav links: "Your Team", "Solutions", "Blog", "Pricing" -- color `#000000`, 15px, font-weight 400, with underline animation on hover (scaleX from 0 to 1, transform-origin left, 0.3s ease).
- **Right side**: "Log In" link + "Join Now" button
- Log In: color `#ffffff`, 15px, weight 500, same underline hover as nav but white.
- Join Now: pill button (border-radius 50px), black bg (`#000000`), white text, padding `12px 26px`, 15px, weight 500. On hover a `#A068FF` fill slides in from left using `::after` with `translateX(-100%)` to `translateX(0)`, cubic-bezier(0.22, 1, 0.36, 1), 0.4s. Button uses `overflow: hidden`.
- The button is wrapped in a `.btn-border-wrap` div that has a rotating conic-gradient border using `::before` with `inset: -3px`, `padding: 3px`, mask technique for border-only effect. The gradient is: `conic-gradient(from var(--border-angle), #A068FF, #070319, #A068FF, #070319, #A068FF)`. It rotates via CSS `@property --border-angle` from `0deg` to `360deg` in 3s linear infinite.
---
### Hero Left
- `flex: 0 1 600px`, `padding-top: 40px`
- **Heading**: Typewriter effect, font Urbanist, 64px, weight 600, line-height 64px, letter-spacing -1.5px. Text: "Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!". The first 67 characters are colored `#000000`, the rest `#ffffff`. A blinking purple cursor (`#A068FF`) appears during typing. Typing speed: 35ms per character, starts after 400ms delay.
- **"Start Project" button**: Same pill style as Join Now but slightly larger (padding `14px 28px`, 16px), bg `#060218`. Has a right-arrow chevron SVG icon (18x18). Hover fill slides from right (`translateX(100%)` to `translateX(0)`). Also wrapped in `.btn-border-wrap` with the same rotating gradient border. Appears after typing finishes (animation-delay 3.2s).
- **Cursor element**: A purple cursor icon (SVG: pointer arrow filled `#A068FF`) + "David" label (pill badge, bg `#A068FF`, white text, 16px, weight 500, padding `8px 16px`, border-radius 20px). Positioned `margin-left: 290px`, `margin-top: 40px`. Appears with animation-delay 3.6s.
---
### Hero Right -- Circles Visualization
- Container: `720x720px`, centered.
- 4 concentric circles (orbits), each rotating slowly:
- Orbit 1 (innermost): 353px diameter, spins left (counterclockwise) 30s
- Orbit 2: 501px diameter, spins right 40s
- Orbit 3: 649px diameter, spins right 50s
- Orbit 4 (outermost): 797px diameter, spins left 60s
- Each circle has a 1px gradient border: `linear-gradient(180deg, rgba(217, 161, 255, 0) 0%, rgba(217, 161, 255, 1) 43%, rgba(217, 161, 255, 0) 100%)` applied via the mask technique.
- **Center circle (orbit-1)**: Displays an animated count-up number "20k+" (Urbanist 64px, weight 500) and "Specialists" label (Urbanist 16px, weight 600). Counter-rotates to stay upright.
- **Avatars** placed on orbits using `transform: translate(-50%, -50%) rotate(Xdeg) translate(radius) rotate(-Xdeg)`:
- Avatar images (58px default, some 78px/88px) from these URLs:
- `https://polo-pecan-73837341.figma.site/_assets/v11/aa51718fb3af3637e6d666b6543fc27a175fada6.png` (orbit 1, at 270deg, 177px radius, square with border-radius 20px, purple glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/ca755f7f93c1126fb8bdbf99ab364a33aa9ab272.png` (orbit 2, at 60deg, 251px, round, yellow glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/dc01064c7093dcc32674876ee3cf5e41c4a485c6.png` (orbit 2, at 180deg, 251px, 78px, pink glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/d5470a58b02388336141575048720f19a50de832.png` (orbit 2, at 300deg, 251px, square border-radius 20px, blue glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/018736aa5d0275c4ce56cfebaf2ae3007d81ca1e.png` (orbit 3, at 130deg, 325px, 88px, pink glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/c76d8a0b99676de31c014344bfaf75bad090758d.png` (orbit 4, at 30deg, 399px, purple glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/7b1b5f039de7b54cc9913e96c1923c3b15a157fa.png` (orbit 4, at 95deg, 399px, 88px, square border-radius 24px, orange glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/9ae171d8895199349755c43fbff00e122221a027.png` (orbit 4, at 220deg, 399px, 88px, square border-radius 24px, pink glow)
- `https://polo-pecan-73837341.figma.site/_assets/v11/926c9eb7b4bc1df846fa0e39f0b0dc3fefd80671.png` (orbit 4, at 320deg, 399px, purple glow)
- Each avatar has a staggered fly-in animation (scale 0.3 + rotate -180deg + blur -> normal), delays from 0.6s to 2.3s.
---
### Logo Ticker (Bottom)
- Horizontal infinitely scrolling strip of partner logos, `gap: 64px`, 20s animation.
- Fade masks on left/right edges (linear-gradient mask).
- 5 unique SVG logos repeated 4x for seamless loop:
- `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`
- Each logo: `width: 137px`, `height: 40px`, `object-fit: contain`.
---
### Entrance Animations
- Header: fade-down (translateY -20px to 0, 0.8s)
- Hero left: fade-up (translateY 40px to 0, 1s)
- Hero right circles: scale-in (scale 0.85 to 1 + opacity, 1.2s, delay 0.3s)
- Logos section: fade-up, delay 0.6s
- All using `cubic-bezier(0.22, 1, 0.36, 1)` easing.
---
### Responsive Breakpoints
- **1280px**: circles scale 0.85
- **1024px**: stack layout (flex-direction column), heading 48px, circles scale 0.7, nav gap shrinks
- **768px**: hide nav, heading 36px, circles scale 0.5
- **480px**: heading 28px, circles scale 0.4, smaller buttons/logos
---
### Key Colors
- Primary accent: `#A068FF`
- Background dark: `#060218` / `#070319`
- Text dark: `#000000`
- Text light: `#ffffff`
- Body bg fallback: `#0a0a0a`
---
### Technical Details
- React (useState, useEffect, useRef), Vite build
- Custom `useCountUp` hook: animates 0 to 20 over 2s with easeOutCubic, starts after 1.2s delay
- `TypewriterHeading` component: types char by char at configurable speed
- CSS `@property --border-angle` for the animated border gradient
- No external animation libraries -- pure CSS animations + JS for typewriter/counter
