{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-centered",
  "type": "registry:block",
  "title": "Hero — centred",
  "description": "A centred landing page hero: eyebrow, headline, text and buttons, with optional media below.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/cta-group.json",
    "https://facadeui.dev/r/eyebrow.json",
    "https://facadeui.dev/r/heading.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/hero-centered.tsx",
      "type": "registry:component",
      "target": "components/sections/hero-centered.tsx",
      "content": "/**\n * HeroCentered — the classic centred landing hero: eyebrow, headline, copy,\n * buttons, and optional media below.\n *\n * a11y: `headingLevel` defaults to `1`, because a hero usually *is* the page\n * title — but it stays a prop, so the same component can be an `<h2>` further\n * down a page without its appearance changing. `size` controls the visual scale\n * independently.\n *\n * The band is a `<div>`, not a `<section>`: a hero at the top of a page is the\n * start of `<main>`, and wrapping it in a second landmark only adds noise to the\n * landmark list.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/cta-group, @/components/ui/eyebrow,\n * @/components/ui/heading, @/components/ui/section.\n */\n\nimport type { ElementType, ReactNode } from \"react\"\n\nimport type {\n  CtaItem,\n  HeadingLevel,\n  LinkComponent,\n  StackSlotProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { CtaGroup } from \"@/components/ui/cta-group\"\nimport { Eyebrow } from \"@/components/ui/eyebrow\"\nimport { Heading } from \"@/components/ui/heading\"\nimport { Section } from \"@/components/ui/section\"\n\nexport interface HeroCenteredProps extends StackSlotProps {\n  title: string\n  description?: string\n  eyebrow?: ReactNode\n  actions?: CtaItem[]\n  link?: LinkComponent\n  /** Small print under the buttons, such as \"No card required\". */\n  note?: ReactNode\n  /** Shown above the eyebrow, such as a Badge, an announcement or a rating. */\n  banner?: ReactNode\n  /** Shown below the buttons, such as a screenshot, a video or a logo strip. */\n  media?: ReactNode\n  headingLevel?: HeadingLevel\n  size?: \"md\" | \"lg\" | \"xl\"\n  as?: \"section\" | \"div\"\n  spacing?: \"sm\" | \"md\" | \"lg\" | \"none\"\n  className?: string\n  id?: string\n}\n\nconst titleSizes = {\n  md: \"text-display-md\",\n  lg: \"text-display-lg\",\n  xl: \"text-display-xl\",\n} as const\n\nexport function HeroCentered({\n  title,\n  description,\n  eyebrow,\n  actions,\n  link,\n  note,\n  banner,\n  media,\n  stackAs,\n  blockAs,\n  headingLevel = 1,\n  size = \"lg\",\n  as = \"div\",\n  spacing = \"lg\",\n  className,\n  id,\n}: HeroCenteredProps) {\n  const Stack = (stackAs ?? \"div\") as ElementType\n  const Block = (blockAs ?? \"div\") as ElementType\n  const titleId = id ? `${id}-title` : slugId(title)\n\n  return (\n    <Section\n      as={as}\n      spacing={spacing}\n      labelledBy={as === \"section\" ? titleId : undefined}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col items-center gap-12\">\n        <Stack className=\"flex max-w-3xl flex-col items-center gap-6 text-center\">\n          {banner ? <Block>{banner}</Block> : null}\n          {eyebrow ? (\n            <Block>\n              <Eyebrow tone=\"primary\">{eyebrow}</Eyebrow>\n            </Block>\n          ) : null}\n\n          <Block>\n            <Heading\n              level={headingLevel}\n              id={titleId}\n              className={cn(\"text-balance font-semibold\", titleSizes[size])}\n            >\n              {title}\n            </Heading>\n          </Block>\n\n          {description ? (\n            <Block>\n              <p className=\"text-muted-foreground max-w-2xl text-pretty text-lg sm:text-xl\">\n                {description}\n              </p>\n            </Block>\n          ) : null}\n\n          {actions?.length ? (\n            <Block className=\"w-full sm:w-auto\">\n              <CtaGroup\n                items={actions}\n                link={link}\n                size=\"lg\"\n                align=\"center\"\n                stackOnMobile\n              />\n            </Block>\n          ) : null}\n\n          {note ? (\n            <Block>\n              <p className=\"text-muted-foreground text-pretty text-sm\">{note}</p>\n            </Block>\n          ) : null}\n        </Stack>\n\n        {media ? <div className=\"w-full\">{media}</div> : null}\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/hero-centered"
}