Network Hero

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://assets.motionin.app/imports/75cf15a2de58237a572adc7b.webp
```
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://assets.motionin.app/imports/42fa9fdd8d0aa308de6bf4a7.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://assets.motionin.app/imports/b28ac021f10c3bf21886896b.png` (orbit 1, at 270deg, 177px radius, square with border-radius 20px, purple glow)
    - `https://assets.motionin.app/imports/4b317ea90f93e2c9c00b0a15.png` (orbit 2, at 60deg, 251px, round, yellow glow)
    - `https://assets.motionin.app/imports/88ecc1ce69280609ce2d2c81.png` (orbit 2, at 180deg, 251px, 78px, pink glow)
    - `https://assets.motionin.app/imports/85c950ebb8dffc2be4c09c56.png` (orbit 2, at 300deg, 251px, square border-radius 20px, blue glow)
    - `https://assets.motionin.app/imports/b9b8a6047bcd1b564317ae60.png` (orbit 3, at 130deg, 325px, 88px, pink glow)
    - `https://assets.motionin.app/imports/a811429fe36bc2ca3c3033dc.png` (orbit 4, at 30deg, 399px, purple glow)
    - `https://assets.motionin.app/imports/4cc7298ec4d229e3a0d0a7a7.png` (orbit 4, at 95deg, 399px, 88px, square border-radius 24px, orange glow)
    - `https://assets.motionin.app/imports/561f7f32c4d9ec2d601d40e0.png` (orbit 4, at 220deg, 399px, 88px, square border-radius 24px, pink glow)
    - `https://assets.motionin.app/imports/978040afddbeef6c48adafbf.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://assets.motionin.app/imports/464a14c8e1b9e991dbd1be36.svg`
  - `https://assets.motionin.app/imports/b6440c8405df48654d424220.svg`
  - `https://assets.motionin.app/imports/1aae4d8d39c35ddbbd1c224c.svg`
  - `https://assets.motionin.app/imports/191eac4d7fe0f4da2fd41423.svg`
  - `https://assets.motionin.app/imports/cad8ebca7d3073cb2ff2c149.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