提示词
**提示词：**
使用 **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>
);
}
```
---原文提示词（English）
**Prompt:**
Build a "Use Cases" section for a fintech stablecoin landing page using **React + TypeScript + Tailwind CSS** with **lucide-react** for icons (use `ArrowRight`). Make it fully mobile responsive.
---
### Font Setup
The page uses **"TT Norms Pro"** loaded via a stylesheet link in `index.html`:
```html
<link href="https://db.onlinewebfonts.com/c/49bf5d043a27b890a040cf393277e2b2?family=TT+Norms+Pro+Regular" rel="stylesheet">
```
Add this `<link>` inside the `<head>` of your `index.html`.
Then in `index.css`, apply it globally:
```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;
}
}
```
No local font files are needed. The font is served from the external stylesheet URL above.
---
### Section Component: `UseCasesSection`
**Outer wrapper:** `<section>` with classes `bg-[#F5F5F5] px-6 py-24`.
**Inner container:** `<div>` with classes `max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start`.
---
#### LEFT COLUMN (text-only intro)
Wrapper `<div>` with classes `md:pr-12 md:pt-2`.
Contains three elements stacked vertically:
1. **Eyebrow label:**
- Element: `<p>`
- Text: **"USD Halo in Practice"**
- Classes: `text-black/60 text-sm font-normal mb-2`
2. **Section heading:**
- Element: `<h2>`
- Text: **"Use modes"**
- Classes: `text-black text-5xl md:text-6xl font-medium leading-none mb-6`
- Inline style: `{ letterSpacing: '-0.04em' }`
3. **Description paragraph:**
- Element: `<p>`
- Text: **"USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more"**
- Classes: `text-black/60 text-base leading-relaxed max-w-sm`
---
#### RIGHT COLUMN (large video background card)
Wrapper `<div>` with classes `relative rounded-3xl overflow-hidden min-h-[720px]`.
**Background video** (fills entire card as ambient background):
- Element: `<video>`
- Classes: `absolute inset-0 w-full h-full object-cover`
- Attributes: `autoPlay`, `muted`, `loop`, `playsInline`
- `src` URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4`
**Content overlay** (sits above video):
- Wrapper `<div>` with classes `relative z-10 p-10 md:p-12`
Contains three elements:
1. **Card heading:**
- Element: `<h3>`
- Text: **"Commerce"**
- Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-5`
- Inline style: `{ letterSpacing: '-0.03em' }`
2. **Card description:**
- Element: `<p>`
- Text: **"Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform."**
- Classes: `text-black/70 text-base leading-relaxed max-w-md mb-8`
3. **"Know more" button:**
- Element: `<button>`
- Classes: `inline-flex items-center gap-3 text-black text-base font-medium group`
- Contains (in this exact order):
- **Icon circle first:** `<span>` with classes `w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors`, containing `<ArrowRight className="w-4 h-4 text-black" />` from lucide-react.
- **Text label second:** the plain text **"Know more"** (placed after the span, so icon is on the left).
---
### Key Design Specifications
- **Page background:** `#F5F5F5` (light warm gray).
- **Video card:** Video fills the entire rounded card via `object-cover` and loops silently. There is **no gradient overlay, no dark scrim, no blur layer** -- text sits directly on the video.
- **Card corner radius:** `rounded-3xl` (24px).
- **Card minimum height:** `min-h-[720px]`.
- **Typography system:**
- All text uses inherited "TT Norms Pro Regular" from the web font link.
- Headings: `font-medium` with tight negative letter-spacing (`-0.04em` for section title, `-0.03em` for card title).
- Body text: default weight (400), `text-base` size.
- Color hierarchy: `text-black` for headings, `text-black/70` for card body text, `text-black/60` for muted/secondary text.
- **"Know more" button:** Frosted-glass circle icon (`bg-white/80 backdrop-blur`) transitions to solid white on hover via Tailwind `group`/`group-hover`. Icon circle comes before text label.
- **Layout:** Two-column grid on `md:` breakpoint. Stacks to single column on mobile. Left column has `md:pr-12` and `md:pt-2` for breathing room.
- **Spacing:** `gap-8` between columns. Section padding `py-24` vertical, `px-6` horizontal.
---
### Complete JSX Reference
```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">
{/* Left column */}
<div className="md:pr-12 md:pt-2">
<p className="text-black/60 text-sm font-normal mb-2">USD Halo in Practice</p>
<h2 className="text-black text-5xl md:text-6xl font-medium leading-none mb-6" style={{ letterSpacing: '-0.04em' }}>
Use modes
</h2>
<p className="text-black/60 text-base leading-relaxed max-w-sm">
USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more
</p>
</div>
{/* Right column -- big card with bg video */}
<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' }}>
Commerce
</h3>
<p className="text-black/70 text-base leading-relaxed max-w-md mb-8">
Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform.
</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>
Know more
</button>
</div>
</div>
</div>
</section>
);
}
```
---
