USD Halo

使用 React + TypeScript + Vite + Tailwind CSS 构建一个面向名为 "Halo / USD Halo" 的稳定币产品的高端金融科技风格落地页，并使用 lucide-react 提供图标。不得使用其他 UI 库。页面背景色为 #F5F5F5。

全局设置
使用 TT Norms Pro 作为主要字体，通过 @font-face 从 /fonts/tt-norms-pro-regular.woff2（weight 400）和 /fonts/tt-norms-pro-semibold.woff2（weight 600）加载，并设置 font-display: swap。将其应用于 html、body，并让 * 继承。
在 src/index.css 顶部放置 Tailwind base + components + utilities。
页面包装器：flex flex-col bg-[#F5F5F5]。第一个区块（Navbar + Hero）包装在 h-screen flex flex-col overflow-hidden 容器中。
各区块内部内容最大宽度：max-w-[88rem] mx-auto。
自定义 Logo 图标
创建一个使用 currentColor、viewBox 0 0 256 256 的 SVG 组件 LogoIcon，并使用以下 path（由两个相互交叠的圆角方形组成的风格化 "halo" 标记）：


M 128.005 191.173 C 128.448 156.208 156.93 128 192 128 L 192 64 L 128 64 C 128 99.346 99.346 128 64 128 L 64 192 L 128 192 Z M 192 256 L 64 256 C 28.654 256 0 227.346 0 192 L 0 64 L 64 64 L 64 0 L 192 0 C 227.346 0 256 28.654 256 64 L 256 192 L 192 192 Z
1. Navbar（absolute，透明覆盖在 hero 上）
nav 设置为 absolute top-0 left-0 right-0 z-20 px-6 py-5。
内部行：flex items-center justify-between。
左侧：LogoIcon（w-7 h-7，黑色）+ 单词 "Halo"（text-2xl font-medium tracking-tight text-black）。
中间（低于 md 时隐藏）：链接 Network · Ecosystem · Rewards · Help · News，gap-8、text-base text-gray-700 hover:text-black font-medium transition-colors duration-200。
右侧：黑色胶囊按钮 "Open Wallet"——bg-black text-white text-base font-medium px-7 py-2.5 rounded-full hover:bg-gray-800 transition-colors duration-200。
2. Hero Section
外层：flex-1 px-6 pt-20 pb-6 flex items-end。
内部卡片：relative w-full rounded-2xl overflow-hidden，内联样式 height: calc(100vh - 96px)。
背景视频（autoplay、muted、loop、playsInline、object-cover absolute inset-0 w-full h-full）：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_161253_c72b1869-400f-45ed-ac0c-52f68c2ed5bd.mp4

内容覆盖层：relative z-10 flex flex-col items-start justify-start h-full p-12 pt-36。
h1："让你的财富\n运转起来"（使用 <br/>）——text-black text-5xl md:text-6xl font-medium leading-tight max-w-xl mb-4，内联 letterSpacing: '-0.04em'。
p："一款由奖励驱动的自动化数字美元，专为原生被动收益和轻松接入 DeFi 而打造。"——text-black/70 text-base md:text-lg max-w-md mb-8 leading-relaxed，内联 fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif"。
胶囊按钮 "加入我们"，带箭头圆形图标：inline-flex items-center gap-3 bg-black text-white text-base md:text-lg font-medium pl-8 pr-2 py-2 rounded-full hover:bg-gray-800。尾部箭头位于 bg-white rounded-full p-2 内，使用 lucide-react 的 ArrowRight w-5 h-5 text-black。
其下方接 Brand Marquee。
Brand Marquee（位于 hero 内、按钮下方）
容器：mt-24 w-full max-w-md overflow-hidden。
注入作用域限定的 <style>，其中 keyframes marquee 从 0 → -50% 平移，并应用于 .marquee-track { display:flex; width:max-content; animation: marquee 22s linear infinite; }。
将品牌列表渲染两次（使其无缝循环）。
每一项：mx-7 shrink-0 text-black/60 whitespace-nowrap，并使用以下内联样式：
Stripe — Georgia serif，weight 700，letterSpacing -0.02em，fontSize 15px
Coinbase — Arial sans，weight 900，letterSpacing 0.08em，fontSize 13px，uppercase
Uniswap — Trebuchet MS，weight 600，letterSpacing 0.01em，fontSize 15px，italic
Aave — Courier New monospace，weight 700，letterSpacing 0.12em，fontSize 13px，uppercase
Compound — Palatino, Book Antiqua，weight 400，letterSpacing -0.01em，fontSize 16px
MakerDAO — Impact, Arial Narrow，weight 400，letterSpacing 0.04em，fontSize 14px
Chainlink — Verdana，weight 700，letterSpacing -0.03em，fontSize 13px
3. Info Section（"认识 USD Halo。"）
section bg-[#F5F5F5] px-6 py-24。
第 1 行：双列网格（grid-cols-1 md:grid-cols-2 gap-12 mb-16 items-start）。
左侧：h2 "认识 USD Halo。"——text-black text-4xl md:text-5xl font-medium leading-tight mb-8，letterSpacing -0.03em。下方是黑色胶囊按钮 "了解它"，带白色箭头圆形图标（模式与 "加入我们" 相同，但使用 text-base）。
右侧：段落 "USD Halo 是一种可赚取奖励的美元币，能让你的储蓄增长，同时保持与美元挂钩。"——text-black/70 text-2xl md:text-3xl leading-relaxed。
第 2 行——四列卡片网格（grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4）：
卡片 1（在 lg 下横跨 2 列）：rounded-2xl，背景图：
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260423_164207_f243351d-ed59-48ec-83a0-a5e996bdbe3c.png&w=1280&q=85

backgroundSize: cover; backgroundPosition: center。内部：p-7 min-h-80 flex flex-col justify-between。标题（顶部）："让储蓄绽放"——text-black text-2xl font-medium leading-snug letterSpacing -0.02em。正文（底部）："你的美元代币将被配置到表现领先的 DeFi 策略中，从而获得稳定回报。"——text-black/70 text-base max-w-xs。
卡片 2：纯色 #2B2644、rounded-2xl、p-7、min-h-80、flex-col-justify-between。白色标题 "始终灵活，\n始终锚定。"，text-2xl font-medium；正文 "保持完全锚定美元，并可随时取用资金——无需锁定，无需等待。"，text-white/60 text-base。
卡片 3：采用相同的 #2B2644 样式。标题 "完全\n自动化"。正文 "无需亲自调整仓位。USD Halo 会在后台为你运行。"
4. Backed By Section（跑马灯行）
section bg-[#F5F5F5] px-6，内部为 max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 items-center。
左列（1/4）：text-black/70 text-base leading-relaxed——"由顶级合作伙伴\n与前瞻性领袖投资支持。"
右列（3/4）：无限跑马灯（模式与 hero 跑马灯相同，但为 30s linear infinite，class .backers-track，keyframes backers-marquee）。各项使用 mx-10 shrink-0 text-black/50 whitespace-nowrap，并采用以下内联样式：
Fundamental Labs — Times New Roman serif，400，ls 0.02em，14px
KUCOIN — Arial Black，900，ls 0.08em，16px
NGC — Impact，700，ls 0.05em，18px
NxGen — Georgia，600，ls -0.02em，17px
Matter Labs — Helvetica，700，ls -0.01em，15px
DEXTools — Verdana，700，ls 0.06em，14px，uppercase
NGRAVE — Courier New，700，ls 0.18em，14px
Polychain — Palatino，500，ls 0.03em，15px
将品牌渲染两次以实现循环。
5. Use Cases Section
section bg-[#F5F5F5] px-6 py-24。内部：双列网格 grid-cols-1 md:grid-cols-2 gap-8 items-start。
左列（md:pr-12 md:pt-2）：
眉题："USD Halo 的实际应用"——text-black/60 text-sm mb-2。
h2 "使用模式"——text-5xl md:text-6xl font-medium leading-none mb-6，ls -0.04em。
段落："USD Halo 为开发者、企业和资金管理机构提供广泛的使用模式，满足其对安全且具有回报的稳定币集成及更多功能的需求"——text-black/60 text-base leading-relaxed max-w-sm。
右列：大型 relative rounded-3xl overflow-hidden min-h-[720px]，带背景视频（autoplay/muted/loop/playsInline、object-cover absolute inset-0）：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4

覆盖层内容 relative z-10 p-10 md:p-12：
h3 "商业"——text-4xl md:text-5xl font-medium leading-tight mb-5，ls -0.03em。
段落："通过提供 USD Halo 来提升客户留存率。这是一种值得信赖、由美元支持并具有可观收益的稳定币，让你的顾客无需付出任何精力即可在你的平台上赚取收益。"——text-black/70 text-base max-w-md mb-8。
inline-flex 链接 "了解更多"，带前置圆形图标：w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors，其中包含 ArrowRight w-4 h-4 text-black。
动画与交互
两个 CSS keyframe 跑马灯（hero 品牌为 22s，支持方为 30s），均在重复内容的 track 上从 0 → -50% 平移，以实现无缝循环。
所有按钮使用 transition-colors duration-200，hover 状态为 hover:bg-gray-800（白色圆形按钮则为 hover:bg-white）。
Nav 链接在 hover 时从 text-gray-700 过渡到 text-black。
视频设置 autoplay muted，并使用 playsInline 以兼容移动设备。
组成结构
App 按以下顺序渲染：

包含 Navbar（absolute）+ HeroSection 的 h-screen overflow-hidden 包装器。
InfoSection
BackedBySection
UseCasesSection
所有 section 背景均为 #F5F5F5。所有标题均使用负 letter-spacing，营造紧凑、现代的金融科技观感。所有位置最粗仅使用 font-medium (600)。