{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split",
  "type": "registry:block",
  "title": "Hero — split",
  "description": "A landing page hero with text on one side and media on the other. The text comes first in reading order on every screen size.",
  "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-split.tsx",
      "type": "registry:component",
      "target": "components/sections/hero-split.tsx",
      "content": "/**\n * HeroSplit — copy on one side, media on the other.\n *\n * `media` is a plain `ReactNode` slot rather than an image prop, because a split\n * hero's media is a one-off: a screenshot, a video, an illustration, a live\n * demo. Passing `<Image … />` straight in is simpler than any indirection this\n * file could offer, and it keeps the section free of framework imports.\n *\n * a11y: on narrow screens the copy comes first in both DOM and visual order, so\n * reading order and tab order agree. `reverse` swaps the columns on large\n * screens only, with `lg:order-*`, which keeps that guarantee intact — reversing\n * the DOM instead would put the media ahead of the headline for screen readers.\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 HeroSplitProps extends StackSlotProps {\n  title: string\n  description?: string\n  eyebrow?: ReactNode\n  actions?: CtaItem[]\n  link?: LinkComponent\n  note?: ReactNode\n  banner?: ReactNode\n  /** The right-hand column. Pass `<Image />`, a video, or anything else. */\n  media?: ReactNode\n  /** Extra content under the buttons, such as a logo strip or a stat row. */\n  children?: ReactNode\n  /** Puts the media on the left from `lg` up. Does not change DOM order. */\n  reverse?: boolean\n  headingLevel?: HeadingLevel\n  size?: \"md\" | \"lg\"\n  as?: \"section\" | \"div\"\n  spacing?: \"sm\" | \"md\" | \"lg\" | \"none\"\n  className?: string\n  id?: string\n}\n\nconst titleSizes = { md: \"text-display-sm\", lg: \"text-display-md\" } as const\n\nexport function HeroSplit({\n  title,\n  description,\n  eyebrow,\n  actions,\n  link,\n  note,\n  banner,\n  media,\n  children,\n  reverse = false,\n  stackAs,\n  blockAs,\n  headingLevel = 1,\n  size = \"lg\",\n  as = \"div\",\n  spacing = \"lg\",\n  className,\n  id,\n}: HeroSplitProps) {\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=\"grid items-center gap-12 lg:grid-cols-2 lg:gap-16\">\n        <Stack className={cn(\"flex flex-col gap-6\", reverse && \"lg:order-2\")}>\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 text-pretty text-lg\">{description}</p>\n            </Block>\n          ) : null}\n\n          {actions?.length ? (\n            <Block>\n              <CtaGroup items={actions} link={link} size=\"lg\" stackOnMobile />\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\n          {children ? <Block>{children}</Block> : null}\n        </Stack>\n\n        {media ? (\n          <div className={cn(\"min-w-0\", reverse && \"lg:order-1\")}>{media}</div>\n        ) : 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-split"
}