Build a full-screen hero section for a fictional vinyl record label called **"quietpress"** using React, TypeScript, Tailwind CSS, and Vite. The page is a single viewport-height hero with no scrolling. Use **lucide-react** for icons. No other UI libraries. --- ### Font Load **Helvetica Regular** via this stylesheet in `index.html`: ``` https://db.onlinewebfonts.com/c/a64ff11d2c24584c767f6257e880dc65?family=Helvetica+Regular ``` Set the base font in CSS: ```css html { font-family: 'Helvetica Regular', Helvetica, Arial, sans-serif; } ``` --- ### Background: Boomerang Video Loop Use this CloudFront video as the background: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260611_183632_c311af08-e4b7-458f-81e7-79847a49b3d3.mp4 ``` Create a `BoomerangVideoBg` component that: 1. Plays the video once (muted, playsInline, crossOrigin="anonymous"), capturing every frame into off-screen canvases (max width 960px, scaled proportionally). 2. Uses `requestVideoFrameCallback` when available, falling back to `requestAnimationFrame`. 3. When the video ends, hides the `` element and renders a `` that plays the captured frames in a ping-pong (boomerang) loop at 30fps -- forward then backward, endlessly. 4. The container is `absolute inset-0 z-0` with `scale-[1.08] origin-center overflow-hidden` to slightly zoom the video and hide edges. --- ### Liquid Glass CSS Effect Create a reusable `.liquid-glass` CSS class: ```css .liquid-glass { background: rgba(255, 255, 255
……（完整源码请在站内查看）
.webp)