USD Halo

网站 · Landing Page · 免费
USD Halo 预览

在云境TS 中打开并复制 →

内容预览

Build a premium, fintech-style landing page for a stablecoin product called "Halo / USD Halo" using React + TypeScript + Vite + Tailwind CSS, with lucide-react for icons. No other UI libraries. Background color of the page is #F5F5F5. Global Setup Use TT Norms Pro as the primary font, loaded via @font-face from /fonts/tt-norms-pro-regular.woff2 (weight 400) and /fonts/tt-norms-pro-semibold.woff2 (weight 600), with font-display: swap. Apply it to html, body, and inherit on *. Tailwind base + components + utilities at the top of src/index.css. Page wrapper: flex flex-col bg-[#F5F5F5]. The first section (Navbar + Hero) is wrapped in a h-screen flex flex-col overflow-hidden container. Inner content max width across sections: max-w-[88rem] mx-auto. Custom Logo Icon Create an SVG component LogoIcon using currentColor, viewBox 0 0 256 256, with this path (a stylized "halo" mark made of two interlocking rounded squares): 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, transparent over hero) nav is absolute top-0 left-0 right-0 z-20 px-6 py-5. Inner row: flex items-center justify-between. Left: LogoIcon (w-7 h-7, black) + word "Halo" (text-2xl font-medium tracking-tight text-black). Center (hidden below md): links Network · Ecosystem · Rewards · Help · News, ga

……(完整源码请在站内查看)