{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-2",
  "title": "Hero 2: developer tool with install command",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Centered hero for developer tools: headline, two actions, package-manager install tabs and a terminal window with a light beam tracing its border.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/border-beam.json",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/install-tabs.json",
    "https://ui.ballmac.com/r/terminal.json",
    "https://ui.ballmac.com/r/text-reveal.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/hero-2/hero-2.tsx",
      "content": "// Ballmac UI: Hero 2. https://ui.ballmac.com/blocks/hero-2\nimport * as React from \"react\"\nimport { ArrowRight } from \"lucide-react\"\n\nimport { BorderBeam } from \"@/components/ballmac/border-beam\"\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { InstallTabs } from \"@/components/ballmac/install-tabs\"\nimport { Terminal, TerminalLine } from \"@/components/ballmac/terminal\"\nimport { TextReveal } from \"@/components/ballmac/text-reveal\"\nimport { cn } from \"@/lib/utils\"\n\ntype Hero2Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Mono label above the headline. */\n  eyebrow?: string\n  /** The headline. */\n  title?: string\n  /** One or two sentences under the headline. */\n  description?: string\n  /** CLI command without the runner, shown in package-manager tabs. */\n  command?: string\n  /** Main call to action. */\n  primaryAction?: { label: string; href: string }\n  /** Secondary call to action. */\n  secondaryAction?: { label: string; href: string }\n}\n\nfunction Hero2({\n  eyebrow = \"v2.0 · Open source\",\n  title = \"Install it once. Use it everywhere.\",\n  description = \"A developer tool that fits your stack in one command, with typed APIs, sensible defaults and nothing to configure on day one.\",\n  command = \"create-acme-app@latest my-app\",\n  primaryAction = { label: \"Read the docs\", href: \"#\" },\n  secondaryAction = { label: \"View on GitHub\", href: \"#\" },\n  className,\n  ...props\n}: Hero2Props) {\n  return (\n    <section data-slot=\"hero-2\" className={cn(\"relative isolate overflow-hidden\", className)} {...props}>\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-x-0 top-0 -z-10 h-[520px] bg-[radial-gradient(ellipse_60%_60%_at_50%_0%,color-mix(in_oklch,var(--ring)_18%,transparent),transparent_70%)]\"\n      />\n      <div className=\"mx-auto max-w-4xl px-4 pt-20 pb-16 text-center sm:px-6 md:pt-28\">\n        <p className=\"font-mono text-xs tracking-[0.16em] text-muted-foreground uppercase\">{eyebrow}</p>\n        <TextReveal as=\"h1\" className=\"mt-5 text-4xl font-semibold tracking-[-0.04em] text-balance sm:text-6xl\">\n          {title}\n        </TextReveal>\n        <p className=\"mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n        <div className=\"mt-8 flex flex-wrap justify-center gap-3\">\n          <a className={buttonVariants({ size: \"lg\", shape: \"pill\" })} href={primaryAction.href}>\n            {primaryAction.label} <ArrowRight  className=\"rtl:rotate-180\"/>\n          </a>\n          <a className={buttonVariants({ variant: \"outline\", size: \"lg\", shape: \"pill\" })} href={secondaryAction.href}>{secondaryAction.label}</a>\n        </div>\n        <InstallTabs command={command} className=\"mx-auto mt-10 max-w-lg text-start\" />\n      </div>\n      <div className=\"mx-auto max-w-3xl px-4 pb-20 sm:px-6\">\n        <div className=\"relative rounded-xl\">\n          <Terminal title=\"~/projects\" className=\"w-full\">\n            <TerminalLine variant=\"command\">npx {command}</TerminalLine>\n            <TerminalLine>Creating a new app in ./my-app</TerminalLine>\n            <TerminalLine>Installing dependencies…</TerminalLine>\n            <TerminalLine variant=\"success\">Ready in 4.2s</TerminalLine>\n            <TerminalLine variant=\"comment\"># cd my-app && npm run dev</TerminalLine>\n          </Terminal>\n          <BorderBeam duration={8} className=\"rounded-xl\" />\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Hero2, type Hero2Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/hero-2/hero-2.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hero",
      "developer",
      "cli",
      "open source",
      "install"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "The top section for a CLI, SDK or library: the install command is the call to action. Set `command` to your package's command without the runner.",
      "whenToUse": [
        "Developer tools, SDKs and open-source libraries",
        "Pages where installing is the first step"
      ],
      "whenNotToUse": [
        "Consumer or visual products (use hero-1)"
      ],
      "composesWith": [
        "header-1",
        "features-2",
        "footer-1"
      ],
      "a11y": [],
      "customization": [
        "command: e.g. \"shadcn@latest add @ballmac/button\"",
        "eyebrow, title, description and action props",
        "Replace the terminal lines with your tool's output"
      ]
    },
    "examples": [
      "hero-2-demo"
    ],
    "url": "https://ui.ballmac.com/components/hero-2"
  },
  "categories": [
    "blocks",
    "hero"
  ],
  "type": "registry:block"
}