{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "hero",
  "type": "registry:block",
  "title": "Hero",
  "description": "A landing-page opening with announcement, h1, highlight line, actions, proof points, and an aside.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "https://abackui.com/r/button.json"
  ],
  "categories": [
    "Marketing"
  ],
  "docs": "https://abackui.com/docs/blocks/hero",
  "meta": {
    "status": "beta",
    "usedIn": [
      "aback-launch",
      "aback-group"
    ]
  },
  "files": [
    {
      "path": "components/blocks/hero.tsx",
      "content": "import { useId, type ReactNode } from \"react\";\nimport { IconArrowRight, IconCheck } from \"@tabler/icons-react\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport interface HeroAction {\n  label: string;\n  href: string;\n}\n\nexport interface HeroBlockProps {\n  /** A short announcement linked from a pill above the title. */\n  announcement?: { label: ReactNode; href: string };\n  /** The first line of the h1. */\n  title: ReactNode;\n  /** An optional second line of the h1, set in the brand colour. */\n  highlight?: ReactNode;\n  description: ReactNode;\n  primaryAction: HeroAction;\n  secondaryAction?: HeroAction;\n  /** A line under the actions, such as \"No credit card required.\" */\n  note?: ReactNode;\n  /** Short proof points with check marks. Keep them true and specific. */\n  highlights?: string[];\n  /** Content for the right column on wide screens: a product shot, stats, or a demo. */\n  aside?: ReactNode;\n}\n\n/**\n * The opening section of a landing page. It renders the page's h1, so use it\n * once. The layout is two columns from lg and stacks on smaller screens, with\n * the aside after the actions.\n */\nexport function HeroBlock({\n  announcement,\n  title,\n  highlight,\n  description,\n  primaryAction,\n  secondaryAction,\n  note,\n  highlights = [],\n  aside,\n}: HeroBlockProps) {\n  const headingId = useId();\n  return (\n    <section aria-labelledby={headingId} className=\"border-b border-separator\">\n      <div className=\"mx-auto grid w-full max-w-6xl gap-12 px-4 py-14 md:px-6 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:py-20\">\n        <div className=\"flex flex-col items-start\">\n          {announcement ? (\n            <a\n              href={announcement.href}\n              className=\"group mb-6 inline-flex items-center gap-2 border border-border bg-card px-2.5 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors duration-200 hover:border-primary-300 hover:text-foreground focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            >\n              <span aria-hidden=\"true\" className=\"size-1.5 bg-primary-500\" />\n              {announcement.label}\n              <IconArrowRight\n                aria-hidden=\"true\"\n                className=\"size-3 transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none\"\n              />\n            </a>\n          ) : null}\n\n          <h1\n            id={headingId}\n            className=\"max-w-xl text-4xl font-bold leading-[1.05] tracking-tight text-foreground text-balance sm:text-5xl\"\n          >\n            {title}\n            {highlight ? <span className=\"block text-link\">{highlight}</span> : null}\n          </h1>\n\n          <p className=\"mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg\">\n            {description}\n          </p>\n\n          <div className=\"mt-8 flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap\">\n            <Button size=\"lg\" variant=\"brand\" asChild>\n              <a href={primaryAction.href}>\n                {primaryAction.label}\n                <IconArrowRight aria-hidden=\"true\" />\n              </a>\n            </Button>\n            {secondaryAction ? (\n              <Button size=\"lg\" variant=\"outline\" asChild>\n                <a href={secondaryAction.href}>{secondaryAction.label}</a>\n              </Button>\n            ) : null}\n          </div>\n\n          {note ? <p className=\"mt-3 text-xs text-muted-foreground\">{note}</p> : null}\n\n          {highlights.length ? (\n            <ul className=\"mt-6 grid gap-x-6 gap-y-2 text-sm text-muted-foreground sm:grid-cols-2\">\n              {highlights.map((item) => (\n                <li key={item} className=\"flex items-start gap-2\">\n                  <IconCheck aria-hidden=\"true\" className=\"mt-0.5 size-4 shrink-0 text-brand-icon\" />\n                  {item}\n                </li>\n              ))}\n            </ul>\n          ) : null}\n        </div>\n\n        {aside ? <div className=\"min-w-0\">{aside}</div> : null}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/hero.tsx"
    }
  ]
}