LandingHero

A page's main hero band — pins shared Hero to its largest heading scale for a top-level landing page.

Landing

Usage

import { LandingHero } from "@zudo-sg/ui/src/landing/landing-hero/landing-hero";

<LandingHero
  eyebrow="Sample Tagline"
  heading="Two industries, one company"
  lead="A demo positioning statement."
  actions={[{ label: "View products", href: "/products", variant: "primary" }]}
/>

Default

Single action

Source

<LandingHero
  eyebrow="Sample Tagline"
  heading={<>Sample <span class="text-accent">×</span> Demo, combined</>}
  lead="A demo positioning statement describing what this fictional company does."
  actions={[
    { label: "View products", href: "/products", variant: "primary" },
    { label: "About us", href: "/company", variant: "secondary" },
  ]}
/>

Live CSS

Injected into the previews above. LandingHero

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */