Halo 使用案例

**提示词：**

使用 **React + TypeScript + Tailwind CSS** 构建一个金融科技稳定币落地页的“使用案例”版块，并使用 **lucide-react** 提供图标（使用 `ArrowRight`）。确保完全适配移动端。

---

### 字体设置

页面使用通过 `index.html` 中的样式表链接加载的 **"TT Norms Pro"**：

```html
<link href="https://db.onlinewebfonts.com/c/49bf5d043a27b890a040cf393277e2b2?family=TT+Norms+Pro+Regular" rel="stylesheet">
```

将此 `<link>` 添加到 `index.html` 的 `<head>` 中。

然后在 `index.css` 中全局应用：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;
  }
  body {
    font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;
  }
  * {
    font-family: inherit;
  }
}
```

不需要本地字体文件。字体由上方的外部样式表 URL 提供。

---

### 版块组件：`UseCasesSection`

**外层容器：** 使用 `<section>`，类为 `bg-[#F5F5F5] px-6 py-24`。

**内层容器：** 使用 `<div>`，类为 `max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start`。

---

#### 左栏（纯文本介绍）

使用 `<div>` 作为容器，类为 `md:pr-12 md:pt-2`。

包含三个垂直堆叠的元素：

1. **眉题标签：**
   - 元素：`<p>`
   - 文本：**“USD Halo 实践”**
   - 类：`text-black/60 text-sm font-normal mb-2`

2. **版块标题：**
   - 元素：`<h2>`
   - 文本：**“使用模式”**
   - 类：`text-black text-5xl md:text-6xl font-medium leading-none mb-6`
   - 内联样式：`{ letterSpacing: '-0.04em' }`

3. **描述段落：**
   - 元素：`<p>`
   - 文本：**“USD Halo 为开发者、企业和资金管理机构提供广泛的使用模式，满足其对安全、高回报稳定币集成及更多功能的需求”**
   - 类：`text-black/60 text-base leading-relaxed max-w-sm`

---

#### 右栏（大型视频背景卡片）

使用 `<div>` 作为容器，类为 `relative rounded-3xl overflow-hidden min-h-[720px]`。

**背景视频**（作为氛围背景填满整张卡片）：
- 元素：`<video>`
- 类：`absolute inset-0 w-full h-full object-cover`
- 属性：`autoPlay`、`muted`、`loop`、`playsInline`
- `src` URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4`

**内容叠层**（位于视频上方）：
- 使用 `<div>` 作为容器，类为 `relative z-10 p-10 md:p-12`

包含三个元素：

1. **卡片标题：**
   - 元素：`<h3>`
   - 文本：**“商业”**
   - 类：`text-black text-4xl md:text-5xl font-medium leading-tight mb-5`
   - 内联样式：`{ letterSpacing: '-0.03em' }`

2. **卡片描述：**
   - 元素：`<p>`
   - 文本：**“通过提供 USD Halo 提高客户留存率。这是一种可信赖、由美元支持且收益丰厚的稳定币，让你的客户无需费力即可在平台上赚取收益。”**
   - 类：`text-black/70 text-base leading-relaxed max-w-md mb-8`

3. **“了解更多”按钮：**
   - 元素：`<button>`
   - 类：`inline-flex items-center gap-3 text-black text-base font-medium group`
   - 包含以下内容（严格遵循此顺序）：
     - **图标圆形容器在前：** `<span>`，类为 `w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors`，其中包含来自 lucide-react 的 `<ArrowRight className="w-4 h-4 text-black" />`。
     - **文本标签在后：** 纯文本 **“了解更多”**（放在 span 之后，因此图标位于左侧）。

---

### 关键设计规范

- **页面背景：** `#F5F5F5`（浅暖灰色）。
- **视频卡片：** 视频通过 `object-cover` 填满整个圆角卡片，并静音循环播放。**没有渐变叠层、没有深色遮罩、没有模糊层**——文本直接置于视频之上。
- **卡片圆角半径：** `rounded-3xl`（24px）。
- **卡片最小高度：** `min-h-[720px]`。
- **字体排版系统：**
  - 所有文本使用从网页字体链接继承的 "TT Norms Pro Regular"。
  - 标题：使用 `font-medium` 和紧凑的负字距（版块标题为 `-0.04em`，卡片标题为 `-0.03em`）。
  - 正文：默认字重（400），字号为 `text-base`。
  - 颜色层级：标题使用 `text-black`，卡片正文使用 `text-black/70`，弱化/次要文本使用 `text-black/60`。
- **“了解更多”按钮：** 磨砂玻璃圆形图标（`bg-white/80 backdrop-blur`）通过 Tailwind `group`/`group-hover` 在悬停时过渡为纯白色。图标圆形容器位于文本标签之前。
- **布局：** 在 `md:` 断点使用双栏网格。移动端堆叠为单栏。左栏使用 `md:pr-12` 和 `md:pt-2` 留出空间。
- **间距：** 栏之间使用 `gap-8`。版块垂直内边距为 `py-24`，水平内边距为 `px-6`。

---

### 完整 JSX 参考

```tsx
import { ArrowRight } from 'lucide-react';

function UseCasesSection() {
  return (
    <section className="bg-[#F5F5F5] px-6 py-24">
      <div className="max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
        {/* 左栏 */}
        <div className="md:pr-12 md:pt-2">
          <p className="text-black/60 text-sm font-normal mb-2">USD Halo 实践</p>
          <h2 className="text-black text-5xl md:text-6xl font-medium leading-none mb-6" style={{ letterSpacing: '-0.04em' }}>
            使用模式
          </h2>
          <p className="text-black/60 text-base leading-relaxed max-w-sm">
            USD Halo 为开发者、企业和资金管理机构提供广泛的使用模式，满足其对安全、高回报稳定币集成及更多功能的需求
          </p>
        </div>

        {/* 右栏——带背景视频的大卡片 */}
        <div className="relative rounded-3xl overflow-hidden min-h-[720px]">
          <video
            className="absolute inset-0 w-full h-full object-cover"
            src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4"
            autoPlay
            muted
            loop
            playsInline
          />
          <div className="relative z-10 p-10 md:p-12">
            <h3 className="text-black text-4xl md:text-5xl font-medium leading-tight mb-5" style={{ letterSpacing: '-0.03em' }}>
              商业
            </h3>
            <p className="text-black/70 text-base leading-relaxed max-w-md mb-8">
              通过提供 USD Halo 提高客户留存率。这是一种可信赖、由美元支持且收益丰厚的稳定币，让你的客户无需费力即可在平台上赚取收益。
            </p>
            <button className="inline-flex items-center gap-3 text-black text-base font-medium group">
              <span className="w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors">
                <ArrowRight className="w-4 h-4 text-black" />
              </span>
              了解更多
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
```

---