Build a **single-page React + TypeScript (Vite)** landing hero for a product called **"Xero"** that recreates the following section exactly. Use the **Inter** Google Font (weights 300, 400, 500, 600, 700, 800). Do not use Tailwind utility classes for the hero — write plain CSS in a global stylesheet. No purple/indigo branding outside the specified pink-magenta gradient arc. ## Layout & Structure Render three top-level blocks centered on a black page (`#0a0a0f`), each constrained to `max-width: 1600px`, in this vertical order: 1. **``** — sticky-style top bar (not actually sticky, just at top) 2. **``** — the rounded dark hero card with the animated icon pipeline 3. **``** — a row of 5 monochrome brand logos The body uses `display: flex; flex-direction: column; align-items: center; padding: 14px;` and `font-family: 'Inter', sans-serif;`. ### CSS Variables (on `:root`) ``` --bg: #0a0a0f; --surface: #111118; --text: #f0f0f5; --text-muted: #8888a8; --accent: #c8a0e0; --accent-pink: #b04090; --border: rgba(255, 255, 255, 0.08); ``` ## NAVBAR - Grid layout: `grid-template-columns: 1fr auto 1fr; padding: 12px 24px; margin-bottom: 14px;` - **Left**: `Xero` — `font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;` - **Center**: `` with three `` items: **Method**, **Pricing**, **Docs**. Color `--text-muted`, `font-size: 0.85rem`, gap 32px, hover transitions to `--text` over 0.2s. - **Right**: `` containing two pill buttons: - `.btn-login` — `rgba(255,255,255,0.06)` bg, 1px bor
……（完整源码请在站内查看）
.webp)