USD Halo

Premium fintech landing page for a stablecoin: a full-bleed video hero with a custom halo wordmark and an infinite brand marquee, a meet-the-product card grid, a backers marquee, and a use-modes split with an autoplaying video panel, closing on a dark anchor footer. Self-contained light palette.

Preview

Installation

npx shadcn@latest add https://hirael.com/r/usd-halo.json

Code

components/templates/usd-halo/usd-halo.tsx

import { cn } from "@/lib/utils";

import { BackedBySection } from "./backed-by";
import { inter, manrope } from "./fonts";
import { FooterSection } from "./footer";
import { HeroSection } from "./hero";
import { InfoSection } from "./info";
import { Navbar } from "./navbar";
import { UseCasesSection } from "./use-cases";

export default function UsdHalo() {
  return (
    <div
      className={cn(
        manrope.variable,
        inter.variable,
        "flex flex-col bg-[#F5F5F5] text-black antialiased",
      )}
      style={{
        fontFamily: "var(--font-manrope), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <div className="relative flex h-dvh flex-col overflow-hidden">
        <Navbar />
        <HeroSection />
      </div>
      <InfoSection />
      <BackedBySection />
      <UseCasesSection />
      <FooterSection />
    </div>
  );
}

Dependencies

npm

lucide-react