Build a full-screen hero landing page for a creative agency called "Mainframe" using React, TypeScript, Vite, and Tailwind CSS. Here is every detail: --- FONTS Load two fonts in `index.html` via these stylesheet links: - Heading: `https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium` - Body: `https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg` In `index.css`, define CSS variables: ```css :root { --font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif; --font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif; } body { font-family: var(--font-body); } ``` The entire page uses `var(--font-body)` except the logo text which uses `var(--font-heading)`. --- BACKGROUND VIDEO (mouse-scrub controlled) - A full-screen `` element is `position: fixed; inset: 0; z-index: 0; object-fit: cover; object-position: 70% center;`. - Video source URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4` - The video is `muted`, `playsInline`, `preload="auto"`. It does NOT autoplay. - The video scrubs forward/backward based on horizontal mouse movement. Use a `mousemove` event listener on `window`. Track `prevX`, compute `delta = currentX - prevX`, convert to a time offset: `(delta / window.innerWidth) SENSITIVITY video.duration` where `SENSITIVITY = 0.8`. Clamp `targetTime` between 0
……（完整源码请在站内查看）
.webp)