# 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.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/usd-halo).

- Page, with a live preview: https://shadcn.exchange/r/hirael/usd-halo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/usd-halo-light-85acd335352a5ea1.png
- Registry item: https://hirael.com/r/usd-halo.json
- Categories: templates
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

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

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/hirael/bases/radix/templates/usd-halo/usd-halo.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

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';

const UsdHalo = () => {
  return (
    <div
      className={cn(
        manrope.variable,
        inter.variable,
        'flex flex-col bg-muted text-foreground antialiased',
        '[font-family: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>
  );
};

export default UsdHalo;
```

### `registry/hirael/bases/radix/templates/usd-halo/navbar.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { LogoIcon } from './primitives';

const NAV_LINKS = ['Network', 'Ecosystem', 'Rewards', 'Help', 'News'];

export const Navbar = () => {
  return (
    <nav className="absolute inset-x-0 top-0 z-20 px-6 py-5">
      <div className="mx-auto flex max-w-[88rem] items-center justify-between">
        <a href="#" aria-label="Halo home" className="flex items-center gap-2.5">
          <LogoIcon className="h-7 w-7 text-foreground" />
          <span className="text-2xl font-medium tracking-tight text-foreground">Halo</span>
        </a>

        <div className="hidden items-center gap-8 md:flex">
          {NAV_LINKS.map((link) => (
            <a
              key={link}
              href="#"
              className="text-base font-medium text-foreground/70 transition-colors duration-200 hover:text-foreground"
            >
              {link}
            </a>
          ))}
        </div>

        <button
          type="button"
          className="inline-flex shrink-0 items-center justify-center rounded-full bg-foreground px-7 py-2.5 text-base font-medium whitespace-nowrap text-background transition-all duration-200 outline-none hover:bg-foreground/90 focus-visible:ring-[3px] focus-visible:ring-ring/50"
        >
          Open Wallet
        </button>
      </div>
    </nav>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/hero.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Marquee, type MarqueeBrand, PillButton } from './primitives';

const HERO_IMAGE = 'https://hirael.com/media/templates/usd-halo/hero.webp';

const HERO_BRANDS: MarqueeBrand[] = [
  {
    name: 'Stripe',
    style: {
      fontFamily: "Georgia, 'Times New Roman', serif",
      fontWeight: 700,
      letterSpacing: '-0.02em',
      fontSize: '15px',
    },
  },
  {
    name: 'Coinbase',
    style: {
      fontFamily: 'Arial, Helvetica, sans-serif',
      fontWeight: 900,
      letterSpacing: '0.08em',
      fontSize: '13px',
      textTransform: 'uppercase',
    },
  },
  {
    name: 'Uniswap',
    style: {
      fontFamily: "'Trebuchet MS', sans-serif",
      fontWeight: 600,
      letterSpacing: '0.01em',
      fontSize: '15px',
      fontStyle: 'italic',
    },
  },
  {
    name: 'Aave',
    style: {
      fontFamily: "'Avenir Next', Avenir, 'Segoe UI', sans-serif",
      fontWeight: 600,
      letterSpacing: '0.12em',
      fontSize: '13px',
      textTransform: 'uppercase',
    },
  },
  {
    name: 'Compound',
    style: {
      fontFamily: "Palatino, 'Book Antiqua', serif",
      fontWeight: 400,
      letterSpacing: '-0.01em',
      fontSize: '16px',
    },
  },
  {
    name: 'MakerDAO',
    style: {
      fontFamily: "Impact, 'Arial Narrow', sans-serif",
      fontWeight: 400,
      letterSpacing: '0.04em',
      fontSize: '14px',
    },
  },
  {
    name: 'Chainlink',
    style: {
      fontFamily: 'Verdana, sans-serif',
      fontWeight: 700,
      letterSpacing: '-0.03em',
      fontSize: '13px',
    },
  },
];

export const HeroSection = () => {
  return (
    <section className="flex flex-1 items-end px-6 pt-20 pb-6">
      <div className="relative mx-auto h-[calc(100dvh-96px)] w-full max-w-[88rem] overflow-hidden rounded-2xl">
        {/* eslint-disable-next-line @next/next/no-img-element -- unlike a CSS background, an img is found by the preload scanner and fetched first for Largest Contentful Paint */}
        <img
          src={HERO_IMAGE}
          alt=""
          width={1920}
          height={1280}
          loading="eager"
          fetchPriority="high"
          decoding="async"
          className="absolute inset-0 size-full object-cover object-center"
        />
        <div
          aria-hidden
          className="absolute inset-0 bg-gradient-to-b from-background/70 via-background/20 to-background/10"
        />
        <div
          aria-hidden
          className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-background/85 via-background/40 to-transparent"
        />

        <div className="relative z-10 flex h-full flex-col items-start justify-start p-12 pt-36">
          <h1 className="mb-4 max-w-xl text-5xl leading-tight font-medium tracking-[-0.04em] text-foreground md:text-6xl">
            Your Wealth
            <br />
            Works
          </h1>

          <p className="mb-8 max-w-md [font-family:var(--font-inter),ui-sans-serif,system-ui,sans-serif] text-base leading-relaxed text-foreground/70 md:text-lg">
            An automated, reward-powered digital dollar built for native passive earnings and effortless connection into
            DeFi.
          </p>

          <PillButton label="Join us" large />

          <div className="mt-auto w-full max-w-md overflow-hidden pt-24">
            <Marquee
              brands={HERO_BRANDS}
              trackClass="marquee-track"
              keyframesName="marquee"
              durationSeconds={22}
              itemClass="mx-7 shrink-0 whitespace-nowrap text-foreground/80"
            />
          </div>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/info.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { PillButton } from './primitives';

const CARD_IMAGE = 'https://hirael.com/media/templates/usd-halo/info-card.webp';

export const InfoSection = () => {
  return (
    <section className="bg-muted px-6 py-24">
      <div className="mx-auto max-w-[88rem]">
        <div className="mb-16 grid grid-cols-1 items-start gap-12 md:grid-cols-2">
          <div>
            <h2 className="mb-8 text-4xl leading-tight font-medium tracking-[-0.03em] text-foreground md:text-5xl">
              Meet USD Halo.
            </h2>
            <PillButton label="Discover it" />
          </div>
          <p className="text-2xl leading-relaxed text-foreground/70 md:text-3xl">
            USD Halo is a reward-earning dollar coin that lets your savings grow while remaining tied to the U.S.
            dollar.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div
            className="relative flex min-h-80 flex-col justify-between overflow-hidden rounded-2xl bg-cover bg-center p-7 lg:col-span-2"
            style={{ backgroundImage: `url(${CARD_IMAGE})` }}
          >
            <div aria-hidden className="pointer-events-none absolute inset-0 bg-background/30" />
            <h3 className="relative z-10 text-2xl leading-snug font-medium tracking-[-0.02em] text-foreground">
              Savings that bloom
            </h3>
            <p className="relative z-10 max-w-xs text-base text-foreground/70">
              Gain steady returns as your dollar tokens are routed into top-performing DeFi strategies.
            </p>
          </div>

          <div className="flex min-h-80 flex-col justify-between rounded-2xl bg-foreground p-7">
            <h3 className="text-2xl leading-snug font-medium tracking-[-0.02em] text-background">
              Always fluid,
              <br />
              always pegged.
            </h3>
            <p className="text-base text-background/60">
              Keep fully dollar-anchored with on-demand access to funds, no lockups or waits.
            </p>
          </div>

          <div className="flex min-h-80 flex-col justify-between rounded-2xl bg-foreground p-7">
            <h3 className="text-2xl leading-snug font-medium tracking-[-0.02em] text-background">
              Fully
              <br />
              automated
            </h3>
            <p className="text-base text-background/60">
              Skip the task of tuning positions yourself. USD Halo runs in the background for you.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/backed-by.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Marquee, type MarqueeBrand } from './primitives';

const BACKERS: MarqueeBrand[] = [
  {
    name: 'Fundamental Labs',
    style: {
      fontFamily: "'Times New Roman', serif",
      fontWeight: 400,
      letterSpacing: '0.02em',
      fontSize: '14px',
    },
  },
  {
    name: 'KUCOIN',
    style: {
      fontFamily: "'Arial Black', Arial, sans-serif",
      fontWeight: 900,
      letterSpacing: '0.08em',
      fontSize: '16px',
    },
  },
  {
    name: 'NGC',
    style: {
      fontFamily: 'Impact, sans-serif',
      fontWeight: 700,
      letterSpacing: '0.05em',
      fontSize: '18px',
    },
  },
  {
    name: 'NxGen',
    style: {
      fontFamily: 'Georgia, serif',
      fontWeight: 600,
      letterSpacing: '-0.02em',
      fontSize: '17px',
    },
  },
  {
    name: 'Matter Labs',
    style: {
      fontFamily: 'Helvetica, Arial, sans-serif',
      fontWeight: 700,
      letterSpacing: '-0.01em',
      fontSize: '15px',
    },
  },
  {
    name: 'DEXTools',
    style: {
      fontFamily: 'Verdana, sans-serif',
      fontWeight: 700,
      letterSpacing: '0.06em',
      fontSize: '14px',
      textTransform: 'uppercase',
    },
  },
  {
    name: 'NGRAVE',
    style: {
      fontFamily: "'Franklin Gothic Medium', 'Arial Narrow', sans-serif",
      fontWeight: 700,
      letterSpacing: '0.18em',
      fontSize: '14px',
    },
  },
  {
    name: 'Polychain',
    style: {
      fontFamily: "Palatino, 'Book Antiqua', serif",
      fontWeight: 500,
      letterSpacing: '0.03em',
      fontSize: '15px',
    },
  },
];

export const BackedBySection = () => {
  return (
    <section className="bg-muted px-6">
      <div className="mx-auto grid max-w-[88rem] grid-cols-1 items-center gap-8 md:grid-cols-4">
        <p className="text-base leading-relaxed text-foreground/70">
          Funded by premier partners
          <br />
          and forward-thinking leaders.
        </p>
        <div className="overflow-hidden md:col-span-3">
          <Marquee
            brands={BACKERS}
            trackClass="backers-track"
            keyframesName="backers-marquee"
            durationSeconds={30}
            itemClass="mx-10 shrink-0 whitespace-nowrap text-foreground/50"
          />
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/use-cases.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowRight } from 'lucide-react';

const USE_CASES_VIDEO = 'https://hirael.com/media/templates/usd-halo/use-cases.mp4';

export const UseCasesSection = () => {
  return (
    <section className="bg-muted px-6 py-24">
      <div className="mx-auto grid max-w-[88rem] grid-cols-1 items-start gap-8 md:grid-cols-2">
        <div className="md:pe-12 md:pt-2">
          <p className="mb-2 text-sm text-foreground/60">USD Halo in Practice</p>
          <h2 className="mb-6 text-5xl leading-none font-medium tracking-[-0.04em] text-foreground md:text-6xl">
            Use modes
          </h2>
          <p className="max-w-sm text-base leading-relaxed text-foreground/60">
            USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding
            stablecoin integrations plus more
          </p>
        </div>

        <div className="relative min-h-[720px] overflow-hidden rounded-3xl">
          <video
            autoPlay
            muted
            loop
            playsInline
            className="absolute inset-0 h-full w-full object-cover"
            src={USE_CASES_VIDEO}
          />
          <div
            aria-hidden
            className="absolute inset-0 bg-gradient-to-b from-background/70 via-background/15 to-transparent"
          />
          <div className="relative z-10 p-10 md:p-12">
            <h3 className="mb-5 text-4xl leading-tight font-medium tracking-[-0.03em] text-foreground md:text-5xl">
              Commerce
            </h3>
            <p className="mb-8 max-w-md text-base text-foreground/70">
              Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields,
              letting your patrons earn with zero effort on your platform.
            </p>
            <a href="#" className="group inline-flex items-center gap-3 text-base font-medium text-foreground">
              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-background/80 backdrop-blur transition-colors duration-200 group-hover:bg-background">
                <ArrowRight className="h-4 w-4 text-foreground rtl:rotate-180" />
              </span>
              Know more
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/footer.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { LogoIcon, PillButton } from './primitives';

const FOOTER_COLUMNS: { heading: string; links: string[] }[] = [
  { heading: 'Product', links: ['Wallet', 'Rewards', 'Network', 'Security'] },
  { heading: 'Developers', links: ['Docs', 'API', 'Status', 'GitHub'] },
  { heading: 'Company', links: ['About', 'Careers', 'Blog', 'Press'] },
  { heading: 'Legal', links: ['Terms', 'Privacy', 'Disclosures', 'Cookies'] },
];

export const FooterSection = () => {
  const year = new Date().getFullYear();

  return (
    <footer className="bg-muted px-6 pb-6">
      <div className="mx-auto max-w-[88rem]">
        <div className="rounded-2xl bg-foreground p-10 md:p-14">
          <div className="flex flex-col justify-between gap-10 border-b border-background/10 pb-12 md:flex-row md:items-end">
            <div className="max-w-sm">
              <div className="mb-5 flex items-center gap-2.5">
                <LogoIcon className="h-7 w-7 text-background" />
                <span className="text-2xl font-medium tracking-tight text-background">Halo</span>
              </div>
              <p className="text-base leading-relaxed text-background/60">
                A reward-earning digital dollar, pegged to USD and built to grow while you hold it.
              </p>
            </div>

            <PillButton label="Open Wallet" inverted className="self-start md:self-auto" />
          </div>

          <div className="grid grid-cols-2 gap-8 py-12 md:grid-cols-4">
            {FOOTER_COLUMNS.map((column) => (
              <div key={column.heading}>
                <h3 className="mb-4 text-sm font-medium text-background">{column.heading}</h3>
                <ul className="flex flex-col gap-3">
                  {column.links.map((link) => (
                    <li key={link}>
                      <a
                        href="#"
                        className="text-sm text-background/55 transition-colors duration-200 hover:text-background"
                      >
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="flex flex-col items-start justify-between gap-3 border-t border-background/10 pt-8 sm:flex-row sm:items-center">
            <p className="text-sm text-background/50">© {year} Halo. All rights reserved.</p>
            <p className="text-sm text-background/40">USD Halo is a digital dollar token, not a bank deposit.</p>
          </div>
        </div>
      </div>
    </footer>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/primitives.tsx`

```tsx
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import type { ComponentProps, CSSProperties } from 'react';
import { ArrowRight } from 'lucide-react';

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

const LOGO_PATH =
  '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';

interface LogoIconProps {
  className?: string;
}

export const LogoIcon = ({ className }: LogoIconProps) => {
  return (
    <svg
      viewBox="0 0 256 256"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      <path d={LOGO_PATH} />
    </svg>
  );
};

interface PillButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
  label: string;
  /** Larger label from md up. */
  large?: boolean;
  /** White pill with a dark arrow, for dark surfaces. */
  inverted?: boolean;
}

export const PillButton = ({ label, large = false, inverted = false, className, ...props }: PillButtonProps) => {
  return (
    <button
      type="button"
      className={cn(
        'inline-flex shrink-0 items-center justify-center gap-3 rounded-full py-2 ps-8 pe-2 text-base font-medium whitespace-nowrap transition-all duration-200 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
        inverted
          ? 'bg-background text-foreground hover:bg-background/90'
          : 'bg-foreground text-background hover:bg-foreground/90',
        large && 'md:text-lg',
        className,
      )}
      {...props}
    >
      <span>{label}</span>
      <span className={cn('rounded-full p-2', inverted ? 'bg-foreground' : 'bg-background')}>
        <ArrowRight className={cn('size-5 rtl:rotate-180', inverted ? 'text-background' : 'text-foreground')} />
      </span>
    </button>
  );
};

export interface MarqueeBrand {
  name: string;
  style: CSSProperties;
}

interface MarqueeProps {
  brands: MarqueeBrand[];
  trackClass: string;
  keyframesName: string;
  durationSeconds: number;
  itemClass: string;
}

export const Marquee = ({ brands, trackClass, keyframesName, durationSeconds, itemClass }: MarqueeProps) => {
  return (
    <>
      <style>{`
        @keyframes ${keyframesName} {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .${trackClass} {
          display: flex;
          width: max-content;
          animation: ${keyframesName} ${durationSeconds}s linear infinite;
        }
        [dir="rtl"] .${trackClass} {
          animation-direction: reverse;
        }
      `}</style>
      <div className={trackClass}>
        {[...brands, ...brands].map((brand, index) => (
          <span key={`${brand.name}-${index}`} className={itemClass} style={brand.style}>
            {brand.name}
          </span>
        ))}
      </div>
    </>
  );
};
```

### `registry/hirael/bases/radix/templates/usd-halo/fonts.ts`

```ts
// USD Halo from Hirael <https://hirael.com/templates/usd-halo>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Inter, Manrope } from 'next/font/google';

export const manrope = Manrope({
  variable: '--font-manrope',
  subsets: ['latin'],
  display: 'swap',
});

export const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  display: 'swap',
});
```