{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "title": "Section",
  "description": "The marketing layout backbone: Section (toned, padded band) plus Eyebrow and SectionHeading.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/section.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Section / Eyebrow / SectionHeading — the layout backbone of every marketing\n * page. `Section` wraps content in a toned, vertically-padded band with the\n * shared 1280px max-width container; `Eyebrow` and `SectionHeading` are the\n * standard label + title pair that sits atop each band.\n *\n * These compose everything else in the marketing family, so they carry zero\n * primitive dependencies — pure tokens and layout.\n */\n\ntype Tone = \"default\" | \"muted\" | \"brand\" | \"invert\"\n\nconst toneStyles: Record<Tone, string> = {\n  default: \"bg-bg-primary text-text-primary\",\n  muted: \"bg-bg-secondary text-text-primary\",\n  brand: \"bg-brand-25 text-text-primary\",\n  invert: \"bg-brand-600 text-white\",\n}\n\nconst sizeStyles = {\n  sm: \"py-12 md:py-16\",\n  md: \"py-16 md:py-24\",\n  lg: \"py-20 md:py-32\",\n}\n\ninterface SectionProps {\n  children: React.ReactNode\n  /** Surface tone. `default`/`muted` flip with the theme; `brand`/`invert` are navy-anchored. */\n  tone?: Tone\n  /** Vertical rhythm. */\n  size?: \"sm\" | \"md\" | \"lg\"\n  className?: string\n  id?: string\n  as?: \"section\" | \"div\" | \"article\"\n}\n\nfunction Section({\n  children,\n  tone = \"default\",\n  size = \"md\",\n  className,\n  id,\n  as: Tag = \"section\",\n}: SectionProps) {\n  return (\n    <Tag\n      id={id}\n      data-slot=\"section\"\n      className={cn(toneStyles[tone], sizeStyles[size], className)}\n    >\n      <div className=\"mx-auto w-full max-w-container px-4 md:px-8\">{children}</div>\n    </Tag>\n  )\n}\n\ninterface EyebrowProps {\n  children: React.ReactNode\n  /** Render for a dark brand surface — accent yellow instead of brand text. */\n  onBrand?: boolean\n  className?: string\n}\n\nfunction Eyebrow({ children, onBrand, className }: EyebrowProps) {\n  return (\n    <p\n      data-slot=\"eyebrow\"\n      className={cn(\n        \"text-sm font-semibold tracking-wide uppercase\",\n        onBrand ? \"text-accent-300\" : \"text-text-brand-secondary\",\n        className\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n\ninterface SectionHeadingProps {\n  eyebrow?: string\n  title: React.ReactNode\n  subtitle?: React.ReactNode\n  align?: \"left\" | \"center\"\n  onBrand?: boolean\n  className?: string\n}\n\nfunction SectionHeading({\n  eyebrow,\n  title,\n  subtitle,\n  align = \"left\",\n  onBrand,\n  className,\n}: SectionHeadingProps) {\n  return (\n    <div\n      data-slot=\"section-heading\"\n      className={cn(\n        \"flex max-w-3xl flex-col gap-4\",\n        align === \"center\" && \"mx-auto items-center text-center\",\n        className\n      )}\n    >\n      {eyebrow ? <Eyebrow onBrand={onBrand}>{eyebrow}</Eyebrow> : null}\n      <h2\n        className={cn(\n          \"text-display-sm font-semibold tracking-tight md:text-display-md\",\n          onBrand ? \"text-white\" : \"text-text-primary\"\n        )}\n      >\n        {title}\n      </h2>\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          )}\n        >\n          {subtitle}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nexport { Section, Eyebrow, SectionHeading }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/section.tsx"
    }
  ],
  "type": "registry:block"
}