音频展示

使用 React、TypeScript、Tailwind CSS 和 Vite，为一个名为 **"quietpress"** 的虚构黑胶唱片厂牌构建全屏 hero 区域。页面是一个占满单个视口高度、不可滚动的 hero。图标使用 **lucide-react**。不要使用其他 UI 库。

---

### 字体

通过 `index.html` 中的以下样式表加载 **Helvetica Regular**：
```
https://db.onlinewebfonts.com/c/a64ff11d2c24584c767f6257e880dc65?family=Helvetica+Regular
```
在 CSS 中设置基础字体：
```css
html { font-family: 'Helvetica Regular', Helvetica, Arial, sans-serif; }
```

---

### 背景：Boomerang 视频循环

使用以下 CloudFront 视频作为背景：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260611_183632_c311af08-e4b7-458f-81e7-79847a49b3d3.mp4
```

创建一个 `BoomerangVideoBg` 组件：
1. 将视频播放一次（muted、playsInline、crossOrigin="anonymous"），同时把每一帧捕获到屏幕外的 canvas 中（最大宽度 960px，按比例缩放）。
2. 可用时使用 `requestVideoFrameCallback`，否则回退到 `requestAnimationFrame`。
3. 视频结束后，隐藏 `<video>` 元素并渲染一个 `<canvas>`，以 30fps 按 ping-pong（boomerang）方式循环播放捕获的帧——先正向再反向，无限循环。
4. 容器使用 `absolute inset-0 z-0`，并设置 `scale-[1.08] origin-center overflow-hidden`，让视频略微放大并隐藏边缘。

---

### 液态玻璃 CSS 效果

创建一个可复用的 `.liquid-glass` CSS 类：
```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

---

### 向上淡入入场动画

```css
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-up {
  animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; }
}
```

**关键：** 使用 `animation-fill-mode: backwards`（不要使用 `both` 或 `forwards`）。使用 `both` 或 `forwards` 会在动画结束后让元素保留 `transform`，从而破坏任何使用 `.liquid-glass` 的子元素上的 `backdrop-filter`。`backwards` 会在动画开始前应用 "from" 状态，但会在动画结束时完全释放所有属性，因此玻璃模糊效果可以正常工作。

---

### 页眉（absolute、顶部、z-20）

- **Logo（左侧）：** 一个自定义 SVG 图标（四分之一圆形状，中央带圆点，白色填充，20x20px），旁边是文本 "quietpress"，使用 `text-base tracking-tight text-white`。
  - SVG path：`M 256 256 L 128 256 C 198.692 256 256 198.692 256 128 C 256 57.308 198.692 0 128 0 C 57.308 0 0 57.308 0 128 C 0 198.692 57.308 256 128 256 L 0 256 L 0 0 L 256 0 Z M 128 104 C 141.255 104 152 114.745 152 128 C 152 141.255 141.255 152 128 152 C 114.745 152 104 141.255 104 128 C 104 114.745 114.745 104 128 104 Z`（viewBox `0 0 256 256`）

- **导航链接（居中，移动端隐藏）：** "选集"、"音乐人"、"声音日记"、"回放沙龙"——`text-sm text-white/90 hover:text-white`，gap-8。

- **右侧：**
  - **购物车按钮：** 白色胶囊形（`rounded-xl bg-white p-1 pr-3 sm:pr-4`）。包含一个 blue-700 图标方块（`h-7 w-7 rounded-lg bg-blue-700`），其中放置 `ShoppingCart` 图标（size 14、strokeWidth 2），然后是文本 "购物车 (0)"（移动端隐藏文字，小屏幕仅显示 "(0)"）。带有 `hover:scale-105 active:scale-95`。
  - **移动端菜单开关：** `liquid-glass` 方形按钮（`h-9 w-9 rounded-xl`），显示 `Menu` 或 `X` 图标（size 18）。在 `md:` 及以上尺寸隐藏。

- **移动端导航下拉菜单**（菜单打开时显示）：`liquid-glass mx-4 rounded-2xl p-2`，每个链接使用 `rounded-xl px-4 py-3 text-sm text-white/90 hover:bg-white/10`。

---

### Hero 内容（居中，z-10）

内边距：`pt-28 sm:pt-36 md:pt-44`、`px-4 sm:px-6`。

1. **标签徽章**（animate-fade-up delay-1）：`liquid-glass rounded-lg px-4 py-1.5 text-xs sm:text-sm text-white`，内联样式为 `background: rgba(255, 255, 255, 0.16)`。文本："第 04 期 · 春日林间"。下外边距为 `mb-5 sm:mb-6`。

2. **标题**（animate-fade-up delay-2）：`max-w-3xl text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-[1.1] text-white`。分为两行：
   ```
   为安静的聆听者
   刻录唱片。
   ```

3. **副文案**（animate-fade-up delay-3）：`mt-5 sm:mt-6 max-w-md text-sm sm:text-base md:text-lg leading-relaxed text-white/90`。文本："将 Drone、根源音乐与自然采集之声刻入黑胶 LP。每张唱片只刻一次，抢到即拥有，错过便不再。"

4. **两个按钮**（animate-fade-up delay-4、`mt-8`，移动端纵向堆叠，在 `sm:` 上横向排列）：
   - **主按钮：** `rounded-xl bg-white px-7 py-2.5 text-sm text-gray-900 hover:scale-105 active:scale-95`。标签："浏览唱片架"
   - **次按钮：** `liquid-glass rounded-xl px-7 py-2.5 text-sm text-white hover:scale-105 active:scale-95`。标签："最新上架"

---

### 正在播放组件（右下角，z-20）

位置为 `absolute bottom-4 right-4 sm:bottom-6 sm:right-6 md:bottom-8 md:right-10`。移动端最大宽度为 `270px`，在 sm+ 上使用 `w-72`。带有 `animate-fade-up delay-5`。

- **曲目卡片：** `rounded-2xl bg-white p-2.5 pr-4 shadow-lg`。包含：
  - Blue 图标方块（`h-11 w-11 rounded-xl bg-blue-700`），其中放置 `BarChart3` 图标（size 20、strokeWidth 2.5）。
  - 曲目信息："Helia Marsh -- Fern Light"（截断显示，`text-sm text-gray-900`）。
  - 进度条：`h-1 rounded-full bg-gray-200`，填充部分使用 `w-[30%] bg-blue-700`。
  - 时间："0:33" 和 "-1:21"，使用 `text-[10px] text-gray-500`。

- **控制行**（gap-2）：
  - "上一首" 和 "下一首" 按钮：`flex-1 rounded-2xl bg-white py-2 text-sm text-gray-900 shadow-lg hover:scale-105 active:scale-95`。
  - 爱心按钮（居中）：`h-10 w-10 rounded-full bg-white shadow-lg hover:scale-110 active:scale-95`。使用 `Heart` 图标（size 16），颜色为 `text-blue-700`，喜欢时填充（`fill-blue-700`）。点击时切换状态。

---

### 关键技术说明
- 最外层容器使用 `relative h-screen w-full overflow-hidden`。
- 所有交互元素均使用 `transition-transform duration-200`。
- 全局强调色使用 Tailwind 的 `blue-700`。
- 不需要 Supabase 或后端——这只是一个静态 hero。