{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split",
  "title": "Hero Split",
  "description": "The two-column landing hero — headline and CTAs beside a media slot — with the CSS-only animated accent underline.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/backdrop",
    "@nx-ui/button",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/hero-split.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowRight, LinkExternal01 } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Backdrop } from \"@/components/blocks/marketing/backdrop\"\n\n/**\n * HeroSplit — the signature two-column landing hero: headline + CTAs on the\n * left, any node (product mockup, image, illustration) in the right slot.\n *\n * The `AccentUnderline` wrapper draws a hand-drawn accent underline beneath one\n * word of the headline — the Nexus signature move. It is pure CSS\n * (`hero-underline`, shipped in the theme): it draws in from the left just after\n * load and is disabled under `prefers-reduced-motion`.\n */\n\ntype Cta = { label: string; href: string; external?: boolean }\n\n/**\n * Wrap a word (or phrase) in the headline to give it the animated accent\n * underline. Keep it on a single word so the underline reads as a highlight.\n */\nfunction AccentUnderline({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-block whitespace-nowrap\", className)}>\n      {children}\n      <span\n        aria-hidden=\"true\"\n        className=\"hero-underline absolute -bottom-1 left-0 h-2 w-full rounded-full bg-accent-300 md:h-3\"\n      />\n    </span>\n  )\n}\n\ninterface HeroSplitProps {\n  eyebrow?: string\n  title: React.ReactNode\n  subtitle?: React.ReactNode\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  /** The right column — a mockup, image or illustration. */\n  media?: React.ReactNode\n  className?: string\n}\n\nfunction HeroSplit({\n  eyebrow,\n  title,\n  subtitle,\n  primaryCta,\n  secondaryCta,\n  media,\n  className,\n}: HeroSplitProps) {\n  return (\n    <section\n      data-slot=\"hero-split\"\n      className={cn(\n        \"relative isolate overflow-hidden bg-bg-primary\",\n        className\n      )}\n    >\n      <Backdrop tone=\"default\" placement=\"hero\" />\n      <div className=\"mx-auto w-full max-w-container px-4 py-16 md:px-8 md:py-24\">\n        <div className=\"grid items-center gap-12 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:gap-16\">\n          <div className=\"flex flex-col gap-6\">\n            {eyebrow ? (\n              <p className=\"text-sm font-semibold tracking-wide text-text-brand-secondary uppercase\">\n                {eyebrow}\n              </p>\n            ) : null}\n            <h1 className=\"max-w-2xl text-display-md font-semibold tracking-tight text-balance text-text-primary md:text-display-xl\">\n              {title}\n            </h1>\n            {subtitle ? (\n              <p className=\"max-w-xl text-lg text-text-tertiary md:text-xl\">\n                {subtitle}\n              </p>\n            ) : null}\n            {primaryCta || secondaryCta ? (\n              <div className=\"flex flex-col gap-3 pt-2 sm:flex-row sm:items-center\">\n                {primaryCta ? (\n                  <Button\n                    variant=\"default\"\n                    size=\"xl\"\n                    className=\"cta-arrow\"\n                    nativeButton={false}\n                    render={\n                      <a\n                        href={primaryCta.href}\n                        target={primaryCta.external ? \"_blank\" : undefined}\n                        rel={\n                          primaryCta.external ? \"noopener noreferrer\" : undefined\n                        }\n                      />\n                    }\n                  >\n                    <span data-text>{primaryCta.label}</span>\n                    {primaryCta.external ? (\n                      <LinkExternal01 data-icon />\n                    ) : (\n                      <ArrowRight data-icon />\n                    )}\n                  </Button>\n                ) : null}\n                {secondaryCta ? (\n                  <Button\n                    variant=\"link-color\"\n                    size=\"xl\"\n                    nativeButton={false}\n                    render={\n                      <a\n                        href={secondaryCta.href}\n                        target={secondaryCta.external ? \"_blank\" : undefined}\n                        rel={\n                          secondaryCta.external\n                            ? \"noopener noreferrer\"\n                            : undefined\n                        }\n                      />\n                    }\n                  >\n                    <span data-text>{secondaryCta.label}</span>\n                    {secondaryCta.external ? (\n                      <LinkExternal01 data-icon />\n                    ) : (\n                      <ArrowRight data-icon />\n                    )}\n                  </Button>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"relative\">\n            {media ?? (\n              <div\n                aria-hidden=\"true\"\n                className=\"aspect-[5/4] overflow-hidden rounded-3xl bg-brand-25 ring-1 ring-brand-100\"\n              >\n                <div\n                  className=\"size-full\"\n                  style={{\n                    backgroundImage:\n                      \"radial-gradient(circle at 30% 20%, rgb(247 236 51 / 0.35), transparent 40%), radial-gradient(circle at 70% 80%, rgb(18 21 65 / 0.25), transparent 50%)\",\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { HeroSplit, AccentUnderline }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/hero-split.tsx"
    }
  ],
  "type": "registry:block"
}