{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "hero-split.tsx",
      "target": "components/ui/hero-split.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type HeroSplitHeadingLevel = \"h1\" | \"h2\";\n\nexport interface HeroSplitProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: React.ReactNode;\n  /** Second phrase of the title, carrying the accent color. */\n  titleAccent?: React.ReactNode;\n  /** Categorical: any CSS color, keyed to the product. Falls back to accent-alt. */\n  accentColor?: string;\n  headingLevel?: HeroSplitHeadingLevel;\n  /** Pill above the title. Pass an Announcement or a Badge. */\n  badge?: React.ReactNode;\n  body?: React.ReactNode;\n  /** The call to action row. Pass Buttons. */\n  actions?: React.ReactNode;\n  /** Social proof under the actions. Pass an AvatarGroup and a line of copy. */\n  proof?: React.ReactNode;\n  /** Small print under the copy column. */\n  note?: React.ReactNode;\n  /** The product shot, to the side on wide screens and stacked below on narrow. */\n  visual?: React.ReactNode;\n  /**\n   * Painted behind everything, under a scrim. sisu puts a WebGL Plasma here; that one\n   * is provenance-locked, so this is a slot rather than a built-in atmosphere.\n   */\n  background?: React.ReactNode;\n}\n\nexport const HeroSplit = React.forwardRef<HTMLElement, HeroSplitProps>(\n  (\n    {\n      className,\n      title,\n      titleAccent,\n      accentColor,\n      headingLevel: Heading = \"h1\",\n      badge,\n      body,\n      actions,\n      proof,\n      note,\n      visual,\n      background,\n      ...props\n    },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\n        \"@container relative isolate flex flex-col gap-12 overflow-hidden px-6 py-20 sm:px-10\",\n        // Container queries, not viewport ones. A hero dropped into a narrow column\n        // would otherwise still lay itself out side by side and size its title off\n        // the window, overrunning whatever sits next to it.\n        \"@5xl:flex-row @5xl:items-center @5xl:justify-between\",\n        className,\n      )}\n      {...props}\n    >\n      {background != null && (\n        <div className=\"pointer-events-none absolute inset-0 -z-10\">\n          {background}\n          <div\n            data-hero-scrim=\"\"\n            aria-hidden=\"true\"\n            style={{\n              backgroundImage:\n                \"linear-gradient(to bottom, color-mix(in oklab, var(--color-bg) 10%, transparent), color-mix(in oklab, var(--color-bg) 76%, transparent) 76%, var(--color-bg))\",\n            }}\n            className=\"absolute inset-0\"\n          />\n        </div>\n      )}\n\n      <div className=\"z-10 flex w-full flex-col gap-4 text-center @5xl:max-w-[47.5rem] @5xl:text-left\">\n        <div>\n          {badge != null && <div className=\"mb-6 inline-flex\">{badge}</div>}\n          <Heading className=\"text-[clamp(2.5rem,6.5cqi,6.5rem)] font-bold leading-[0.96] text-balance text-ink\">\n            {title}\n            {titleAccent != null && (\n              <>\n                {\" \"}\n                <span\n                  style={{ color: accentColor ?? \"var(--color-accent-alt)\" }}\n                >\n                  {titleAccent}\n                </span>\n              </>\n            )}\n          </Heading>\n        </div>\n\n        {body != null && (\n          <p className=\"mx-auto max-w-[38.75rem] text-[1.08rem] leading-8 text-balance text-muted @5xl:mx-0\">\n            {body}\n          </p>\n        )}\n\n        {(actions != null || proof != null) && (\n          <div>\n            {actions != null && (\n              <div className=\"mt-3 flex flex-wrap justify-center gap-3 @5xl:justify-start\">\n                {actions}\n              </div>\n            )}\n            {proof != null && (\n              <div className=\"mx-auto mt-4 flex w-fit items-center gap-4 text-sm font-semibold text-muted @5xl:mx-0\">\n                {proof}\n              </div>\n            )}\n          </div>\n        )}\n\n        {note != null && (\n          <p className=\"mx-auto mt-4 max-w-[31rem] text-[0.7rem] leading-6 text-pretty text-muted @5xl:mx-0\">\n            {note}\n          </p>\n        )}\n      </div>\n\n      {visual != null && (\n        <div className=\"relative z-10 w-full @5xl:w-auto @5xl:shrink-0\">\n          {visual}\n        </div>\n      )}\n    </section>\n  ),\n);\nHeroSplit.displayName = \"HeroSplit\";\n"
    }
  ]
}