Solo Developer
Halo / USD Halo
reacttypescriptvitetailwindcssfrontendfintech
View project ↗USD Halo 落地页，金融科技风格。方向是克制、可信：大量留白、负字距标题、两段无限滚动的品牌 marquee。
设计参考 motionsites.ai。代码基于 Kimi For Code 生成。
技术栈：React 19 + TypeScript，Vite 8，Tailwind CSS 4，图标 lucide-react，测试 Vitest + React Testing Library + jsdom。
页面结构：
Navbar 为 absolute 透明浮层，带 Logo、导航链接和黑色 Open Wallet 胶囊按钮。
Hero 用全屏背景视频，"Your Wealth Works" 大标题，下面放 Join us 箭头按钮，再跟一条 22 秒循环品牌 marquee。
Info Section 是 "Meet USD Halo." 加 4 列卡片网格，包含一张图片卡和两张深色（#2B2644）卡。
Backed By 为合作伙伴 marquee，30 秒一圈。
Use Cases 放了一个 Commerce 视频卡片。
实现细节：
先用 impeccable skill 输出 PRODUCT.md 和 DESIGN.md，方向确定后再写代码。
TDD：先写 Vitest 测试，再实现组件，6 个用例通过。
跑了一次 code-reviewer agent 做内联审查，修复 focus 状态、语义 HTML、reduced-motion 回退。
字体规格原本要 WOFF2，实际拿到的是 TTF，改为项目内直接引用 TTF，Regular 400 和 DemiBold 600。
视频加了背景色和渐变兜底，防止 CDN 异常时容器留白。