液态玻璃 CTA

为 React + Vite + Tailwind CSS 项目构建一个“CTA + 页脚”区块组件。这是一个具有电影质感的全宽行动号召区块，包含 HLS 视频背景、居中文本、两个 CTA 按钮，以及底部的极简页脚栏。黑色背景、白色文本、液态玻璃拟态效果。

---

### 字体（在 index.css 或 HTML head 中导入）

```
https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap
```

- 标题：`Instrument Serif` 斜体——Tailwind 类 `font-heading`
- 正文：`Barlow`——Tailwind 类 `font-body`

在 `tailwind.config.ts` 的 `theme.extend.fontFamily` 下添加：
```js
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
```

`index.css` 中的基础样式：
```css
body {
  font-family: 'Barlow', sans-serif;
  background: #000;
  color: #fff;
}
h1, h2, h3 {
  font-family: 'Instrument Serif', serif;
}
```

---

### 液态玻璃 CSS（添加到 index.css 的 `@layer components` 内）

```css
@layer components {
  .liquid-glass-strong {
    background: rgba(255, 255, 255, 0.01);
    background-blend-mode: luminosity;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: none;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),
      inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
  }

  .liquid-glass-strong::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.2) 80%,
      rgba(255, 255, 255, 0.5) 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;
  }
}
```

`::before` 伪元素使用 mask-composite 技巧渲染一条纤细的发光渐变边框，并在每条边的中间逐渐淡出。

---

### 依赖项

```
npm install lucide-react hls.js
```

- 来自 `lucide-react` 的 `ArrowUpRight` 图标
- 用于流式播放 Mux HLS 视频的 `hls.js`

---

### HLS 视频 URL（Mux）

```
https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
```

这是一个 HLS 流，在非 Safari 浏览器中需要使用 `hls.js` 播放。Safari 通过 `<video>` 原生支持 HLS。

---

### 完整组件代码

```tsx
import { useEffect, useRef } from "react";
import { ArrowUpRight } from "lucide-react";
import Hls from "hls.js";

const CtaFooter = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const src = "https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8";

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(video);
      return () => hls.destroy();
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = src;
    }
  }, []);

  return (
    <section className="relative py-32 px-6 md:px-16 lg:px-24 text-center overflow-hidden">
      {/* HLS 视频背景 */}
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover z-0"
      />

      {/* 顶部淡出 */}
      <div
        className="absolute top-0 left-0 right-0 z-[1] pointer-events-none"
        style={{ height: '200px', background: 'linear-gradient(to bottom, black, transparent)' }}
      />
      {/* 底部淡出 */}
      <div
        className="absolute bottom-0 left-0 right-0 z-[1] pointer-events-none"
        style={{ height: '200px', background: 'linear-gradient(to top, black, transparent)' }}
      />

      {/* 内容 */}
      <div className="relative z-10">
        <h2 className="text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4">
          你的下一个网站，从这里开始。
        </h2>
        <p className="text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8">
          预约一次免费策略通话。看看 AI&#8209;驱动的设计能带来什么。无需承诺，没有压力。只有无限可能。
        </p>
        <div className="flex items-center justify-center gap-6">
          <button className="liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body">
            预约通话
            <ArrowUpRight className="h-5 w-5" />
          </button>
          <button className="bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body">
            查看价格
            <ArrowUpRight className="h-4 w-4" />
          </button>
        </div>

        {/* 页脚 */}
        <div className="mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-white/40 font-body font-light text-xs">
            &copy; 2026 Studio。保留所有权利。
          </p>
          <div className="flex items-center gap-6">
            {["隐私", "条款", "联系"].map((link) => (
              <a key={link} href="#" className="text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors">
                {link}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default CtaFooter;
```

---

### 区块结构拆解

```
<section>  (relative, py-32, px-6 md:px-16 lg:px-24, text-center, overflow-hidden)
  |
  +-- <video>  (absolute inset-0, full cover, z-0, autoPlay loop muted playsInline)
  |
  +-- 顶部渐变淡出  (absolute top-0, 高 200px, black->transparent, z-[1])
  +-- 底部渐变淡出  (absolute bottom-0, 高 200px, transparent<-black, z-[1])
  |
  +-- 内容容器  (relative z-10)
       |
       +-- <h2> 标题
       +-- <p> 副文案
       +-- 按钮行 (flex, 居中, gap-6)
       |    +-- "预约通话" (liquid-glass-strong, rounded-full)
       |    +-- "查看价格" (bg-white text-black, rounded-full)
       |
       +-- 页脚栏 (mt-32, border-t border-white/10)
            +-- 版权信息（左侧）
            +-- 链接：隐私、条款、联系（右侧）
```

---

### HLS 视频设置模式

`useEffect` hook 为非 Safari 浏览器初始化 `hls.js`，并为 Safari 回退到原生 HLS：

1. 检查 `Hls.isSupported()`——如果为 true，则创建一个 `Hls` 实例，加载 `.m3u8` 源，并将其附加到 `<video>` 元素
2. 如果不支持，但浏览器可以播放 `application/vnd.apple.mpegurl`（Safari），则直接设置 `video.src`
3. 清理：卸载时调用 `hls.destroy()`

`<video>` 元素使用 `autoPlay loop muted playsInline`——要使自动播放在各浏览器（尤其是移动端）中正常工作，这四个属性缺一不可。

---

### 视频叠层淡出模式

两个绝对定位的 `<div>` 元素在顶部和底部边缘创建黑色渐变淡出，使视频与周围的黑色背景无缝融合：

- **顶部淡出**：`height: 200px`、`background: linear-gradient(to bottom, black, transparent)`、`z-[1]`、`pointer-events-none`
- **底部淡出**：`height: 200px`、`background: linear-gradient(to top, black, transparent)`、`z-[1]`、`pointer-events-none`

内容位于 `z-10`，处在视频和两个淡出层之上。

---

### 响应式行为

| 断点 | 标题字号 | 内边距 | 页脚布局 |
|---|---|---|---|
| 移动端（默认） | `text-5xl` | `px-6` | 垂直堆叠（`flex-col`） |
| 平板端（`md:`） | `text-6xl` | `px-16` | 水平排列（`md:flex-row`） |
| 桌面端（`lg:`） | `text-7xl` | `px-24` | 水平排列 |

- 按钮行始终水平排列（`flex items-center justify-center gap-6`），如果视口非常窄，按钮会自然堆叠
- 页脚：`flex-col md:flex-row`——版权信息和链接在移动端堆叠，在平板端及以上并排显示
- 副文案限制为 `max-w-xl mx-auto`
- 标题限制为 `max-w-3xl mx-auto`

---

### 排版细节

| 元素 | 类 |
|---|---|
| 标题 | `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4` |
| 副文案 | `text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8` |
| 玻璃按钮文本 | `text-sm font-medium text-white font-body` |
| 实心按钮文本 | `text-sm font-medium`（继承 `bg-white text-black` 中的 `text-black`） |
| 版权信息 | `text-white/40 font-body font-light text-xs` |
| 页脚链接 | `text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors` |

---

### 按钮细节

**主要 CTA（“预约通话”）：**
`liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body`
- 通过 `::before` 实现带渐变边框的玻璃背景
- `ArrowUpRight` 图标尺寸为 `h-5 w-5`

**次要 CTA（“查看价格”）：**
`bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body`
- 纯白背景、黑色文本
- `ArrowUpRight` 图标尺寸为 `h-4 w-4`（比主要按钮稍小）

---

### 准确文本内容

**标题**：“你的下一个网站，从这里开始。”
**副文案**：“预约一次免费策略通话。看看 AI-powered 设计能带来什么。无需承诺，没有压力。只有无限可能。”
**按钮 1**：“预约通话”
**按钮 2**：“查看价格”
**版权信息**：“(c) 2026 Studio。保留所有权利。”
**页脚链接**：“隐私”、“条款”、“联系”

---

### 父级上下文

此区块位于一个 `bg-black` 父容器中，是页面的最后一个区块。顶部渐变淡出让视频融入上方区块（其背景同样为黑色）。页脚栏属于同一个组件——不存在单独的页脚组件。