{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-hero",
  "title": "Page Hero",
  "description": "The reusable interior/marketing hero with tone (default/brand) and align (left/center) variants, over a decorative backdrop.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/backdrop",
    "@nx-ui/button",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/page-hero.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 * PageHero — the reusable interior-page / marketing hero. A toned band with a\n * decorative `Backdrop`, an optional icon chip and eyebrow, a display headline,\n * a subtitle and up to two CTAs.\n *\n * Variants: `tone` (`default` light surface / `brand` navy) and `align`\n * (`left` / `center`). `tone=\"brand\"` flips the eyebrow to accent yellow, the\n * icon chip to an accent tile, and the CTAs to their on-brand variants.\n */\n\ntype Cta = { label: string; href: string; external?: boolean }\n\ninterface PageHeroProps {\n  eyebrow?: string\n  title: React.ReactNode\n  subtitle?: React.ReactNode\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  badge?: React.ReactNode\n  icon?: React.FC<{ className?: string }>\n  align?: \"left\" | \"center\"\n  tone?: \"default\" | \"brand\"\n  children?: React.ReactNode\n  className?: string\n}\n\nfunction PageHero({\n  eyebrow,\n  title,\n  subtitle,\n  primaryCta,\n  secondaryCta,\n  badge,\n  icon: Icon,\n  align = \"left\",\n  tone = \"default\",\n  children,\n  className,\n}: PageHeroProps) {\n  const onBrand = tone === \"brand\"\n  return (\n    <section\n      data-slot=\"page-hero\"\n      className={cn(\n        \"relative isolate overflow-hidden\",\n        onBrand ? \"bg-brand-600 text-white\" : \"bg-bg-primary\",\n        className\n      )}\n    >\n      <Backdrop tone={onBrand ? \"brand\" : \"default\"} placement=\"hero\" />\n      <div className=\"mx-auto w-full max-w-container px-4 pt-16 pb-20 md:px-8 md:pt-24 md:pb-24\">\n        <div\n          className={cn(\n            \"flex flex-col gap-6\",\n            align === \"center\" && \"mx-auto max-w-3xl items-center text-center\"\n          )}\n        >\n          {Icon ? (\n            <span\n              className={cn(\n                \"flex size-14 items-center justify-center rounded-2xl\",\n                onBrand ? \"bg-accent-300 text-brand-600\" : \"bg-brand-600 text-white\"\n              )}\n            >\n              <Icon className=\"size-7\" />\n            </span>\n          ) : null}\n          {badge}\n          {eyebrow ? (\n            <p\n              className={cn(\n                \"text-sm font-semibold tracking-wide uppercase\",\n                onBrand ? \"text-accent-300\" : \"text-text-brand-secondary\"\n              )}\n            >\n              {eyebrow}\n            </p>\n          ) : null}\n          <h1\n            className={cn(\n              \"max-w-4xl text-display-md font-semibold tracking-tight text-balance md:text-display-xl\",\n              onBrand ? \"text-white\" : \"text-text-primary\",\n              align === \"center\" && \"mx-auto\"\n            )}\n          >\n            {title}\n          </h1>\n          {subtitle ? (\n            <p\n              className={cn(\n                \"max-w-2xl text-lg md:text-xl\",\n                onBrand ? \"text-white/80\" : \"text-text-tertiary\",\n                align === \"center\" && \"mx-auto\"\n              )}\n            >\n              {subtitle}\n            </p>\n          ) : null}\n          {primaryCta || secondaryCta ? (\n            <div\n              className={cn(\n                \"flex flex-col gap-3 pt-2 sm:flex-row sm:items-center\",\n                align === \"center\" && \"justify-center\"\n              )}\n            >\n              {primaryCta ? (\n                <Button\n                  variant={onBrand ? \"accent\" : \"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={primaryCta.external ? \"noopener noreferrer\" : undefined}\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={onBrand ? \"secondary-on-brand\" : \"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 ? \"noopener noreferrer\" : 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          {children}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { PageHero }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/page-hero.tsx"
    }
  ],
  "type": "registry:block"
}