{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero",
  "type": "registry:ui",
  "title": "Hero",
  "description": "The above-the-fold section every landing page reaches for: eyebrow, headline, supporting copy, primary + secondary CTAs, optional media slot. Server-component-safe; the calm-confident-technical voice is enforced by Typography variants (no h1 with…",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "marketing",
    "pattern"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json",
    "https://ds.interlace.tools/r/stack.json",
    "https://ds.interlace.tools/r/typography.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/patterns/hero.tsx",
      "target": "components/ui/patterns/hero.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\n\n// @interlace/hero v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/hero\n// What changed since: https://ds.interlace.tools/c/hero#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — Hero\n *\n * The above-the-fold section every landing page reaches for: eyebrow,\n * headline, supporting copy, primary + secondary CTAs, optional media slot.\n * Server-component-safe; the calm-confident-technical voice is enforced by\n * Typography variants (no h1 with weight=900 anywhere).\n *\n * ## Anatomy\n *\n *   Hero                             (section — data-min-viewport=320)\n *     ├─ Stack                       (text column)\n *     │   ├─ {eyebrow}               (Typography variant=ui-sm tone=primary)\n *     │   ├─ Typography variant=h1   (headline)\n *     │   ├─ Typography variant=long (subhead, max-w-prose)\n *     │   └─ {actions}               (Cluster of Buttons — primary first)\n *     └─ {media}                     (optional right-column visual slot)\n *\n * ## MIN_VIEWPORT — 320\n *\n * Heroes must read on phones — the headline reflows, the CTA stacks\n * vertically, the media slot drops below.\n *\n * | Rule | Concept                          | Where in this file                                          |\n * | ---- | -------------------------------- | ----------------------------------------------------------- |\n * | R4   | Extends native <section>         | `React.ComponentProps<'section'> & HeroProps`               |\n * | R6   | data-slot on root                | `data-slot=\"hero\"`                                          |\n * | R10  | Composition seams                | `eyebrow` + `actions` + `media` props                       |\n * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |\n * | R19  | Tokens only                      | spacing/typography from primitives                          |\n * | R25  | Server component                 | No hooks → no `'use client'`                                |\n * | R26  | A11y landmark                    | `<section aria-labelledby>` is the rendered element         |\n */\n\nimport { cn } from '@/lib/utils';\nimport { Stack } from '@/components/ui/stack';\nimport { Typography } from '@/components/ui/typography';\n\nexport const MIN_VIEWPORT = 320 as const;\n\ntype HeroProps = React.ComponentProps<'section'> & {\n  /** Small accent line above the headline — e.g. \"v2.0 · February 2026\". */\n  eyebrow?: React.ReactNode;\n  /** Big display headline. */\n  headline: React.ReactNode;\n  /** Supporting paragraph — max-w-prose by default. */\n  body?: React.ReactNode;\n  /** CTA cluster — typically a primary Button and a secondary link/Button. */\n  actions?: React.ReactNode;\n  /** Optional right-column visual — image, video, code window, decorative SVG. */\n  media?: React.ReactNode;\n};\n\nexport function Hero({\n  className,\n  eyebrow,\n  headline,\n  body,\n  actions,\n  media,\n  ...props\n}: HeroProps) {\n  return (\n    <section\n      data-slot=\"hero\"\n      data-min-viewport={String(MIN_VIEWPORT)}\n      className={cn(\n        'relative isolate w-full py-16 sm:py-24',\n        media ? 'grid gap-10 lg:grid-cols-2 lg:items-center' : '',\n        className,\n      )}\n      {...props}\n    >\n      <Stack gap=\"lg\">\n        {eyebrow ? (\n          <Typography\n            variant=\"ui-sm\"\n            tone=\"primary\"\n            className=\"font-semibold uppercase tracking-wider\"\n          >\n            {eyebrow}\n          </Typography>\n        ) : null}\n        <Typography as=\"h1\" variant=\"h1\">\n          {headline}\n        </Typography>\n        {body ? (\n          <Typography variant=\"long\" tone=\"muted\" className=\"max-w-prose\">\n            {body}\n          </Typography>\n        ) : null}\n        {actions ? (\n          <div className=\"flex flex-wrap items-center gap-3\">{actions}</div>\n        ) : null}\n      </Stack>\n      {media ? (\n        <div className=\"relative w-full\" aria-hidden={typeof media === 'string' ? undefined : true}>\n          {media}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"
    }
  ],
  "meta": {
    "tier": "pattern",
    "client": false,
    "minViewport": 320,
    "loading": false,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/hero\n\nInstalled to `components/ui/patterns/hero.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/patterns/hero';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/hero\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}