**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 ``` Add this `` inside the `` 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:** `` with classes `bg-[#F5F5F5] px-6 py-24`. **Inner container:** `` 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 `` with classes `md:pr-12 md:pt-2`. Contains three elements stacked vertically: 1. **Eyebrow label:** - Element: `` - Text: **"USD Halo in Practice"** - Classes: `text-black/60 text-sm font-normal mb-2` 2. **Section heading:** - Element: `` - 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: `` - Text: **"USD Halo power
……（完整源码请在站内查看）
.webp)