{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-1",
  "title": "Hero 1: split with product visual",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Split hero: badge, word-by-word headline, two calls to action and proof points on the left, a live product summary card on the right, over an animated grid.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/animated-grid.json",
    "https://ui.ballmac.com/r/badge.json",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/number-ticker.json",
    "https://ui.ballmac.com/r/text-reveal.json",
    "https://ui.ballmac.com/r/media.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/hero-1/hero-1.tsx",
      "content": "// Ballmac UI: Hero 1. https://ui.ballmac.com/blocks/hero-1\nimport * as React from \"react\"\nimport { ArrowRight, Check } from \"lucide-react\"\n\nimport { AnimatedGrid } from \"@/components/ballmac/animated-grid\"\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { NumberTicker } from \"@/components/ballmac/number-ticker\"\nimport { TextReveal } from \"@/components/ballmac/text-reveal\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Action = { label: string; href: string }\n\ntype Hero1Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Short label above the headline, e.g. a release note. */\n  eyebrow?: string\n  /** The headline. Revealed word by word. */\n  title?: string\n  /** One or two sentences under the headline. */\n  description?: string\n  /** Main call to action. */\n  primaryAction?: Action\n  /** Secondary call to action. */\n  secondaryAction?: Action\n  /** Short proof points under the buttons. */\n  highlights?: string[]\n  /** Your product image instead of the sample deploy card. An image URL (give it mediaAlt), an object with alt text and a dark-mode file, or your own element. */\n  media?: MediaSource\n  /** Describes `media` when it is a plain URL. */\n  mediaAlt?: string\n}\n\nfunction Hero1({\n  eyebrow = \"New · Deploy previews for every branch\",\n  title = \"Ship with confidence, not guesswork.\",\n  description = \"Every change gets a live preview, a performance budget and a rollback button. Your team reviews real behavior, not screenshots.\",\n  primaryAction = { label: \"Start free\", href: \"#\" },\n  secondaryAction = { label: \"Book a demo\", href: \"#\" },\n  highlights = [\"No credit card\", \"SOC 2 Type II\", \"Cancel anytime\"],\n  media,\n  mediaAlt,\n  className,\n  ...props\n}: Hero1Props) {\n  return (\n    <section data-slot=\"hero-1\" className={cn(\"relative isolate overflow-hidden\", className)} {...props}>\n      <AnimatedGrid className=\"absolute inset-0 -z-10 [mask-image:radial-gradient(ellipse_70%_60%_at_30%_30%,#000_30%,transparent_75%)]\" />\n      <div className=\"mx-auto grid max-w-6xl items-center gap-14 px-4 py-20 sm:px-6 md:py-28 lg:grid-cols-[1.05fr_1fr]\">\n        <div>\n          <Badge variant=\"outline\" className=\"rounded-full px-3 py-1\">\n            {eyebrow}\n          </Badge>\n          <TextReveal as=\"h1\" className=\"mt-6 text-4xl font-semibold tracking-[-0.04em] text-balance sm:text-5xl lg:text-6xl\">\n            {title}\n          </TextReveal>\n          <p className=\"mt-6 max-w-xl text-lg leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n          <div className=\"mt-8 flex flex-wrap 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          <ul className=\"mt-8 flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground\">\n            {highlights.map((h) => (\n              <li key={h} className=\"flex items-center gap-2\">\n                <Check className=\"size-4 text-foreground\" aria-hidden=\"true\" />\n                {h}\n              </li>\n            ))}\n          </ul>\n        </div>\n        <Media media={media} alt={mediaAlt} frame priority fallback={<HeroVisual />} />\n      </div>\n    </section>\n  )\n}\n\n/** Product visual: a deploy summary card built from Ballmac components. */\nfunction HeroVisual() {\n  const stats = [\n    { label: \"Previews this week\", value: 1284 },\n    { label: \"Median build\", value: 42, suffix: \"s\" },\n    { label: \"Rollbacks avoided\", value: 17 },\n  ]\n  return (\n    <div className=\"relative rounded-2xl border bg-card p-6 shadow-[0_30px_80px_-40px_rgb(0_0_0/0.35)] sm:p-8\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <div>\n          <p className=\"font-mono text-xs text-muted-foreground\">feat/checkout-v2</p>\n          <p className=\"mt-1 font-medium\">Preview ready</p>\n        </div>\n        <Badge status=\"success\">Passing</Badge>\n      </div>\n      <dl className=\"mt-8 grid grid-cols-3 gap-px overflow-hidden rounded-xl border bg-border\">\n        {stats.map((s) => (\n          <div key={s.label} className=\"bg-card p-4\">\n            <dt className=\"text-xs text-muted-foreground\">{s.label}</dt>\n            <dd className=\"mt-2 text-2xl font-semibold tracking-tight\">\n              <NumberTicker value={s.value} />\n              {s.suffix}\n            </dd>\n          </div>\n        ))}\n      </dl>\n      <ol className=\"mt-6 space-y-3 text-sm\">\n        {[\"Build\", \"Tests\", \"Performance budget\", \"Preview deployed\"].map((step) => (\n          <li key={step} className=\"flex items-center justify-between rounded-lg border px-3 py-2\">\n            <span>{step}</span>\n            <Check className=\"size-4 text-chart-2\" aria-label=\"Done\" />\n          </li>\n        ))}\n      </ol>\n    </div>\n  )\n}\n\nexport { Hero1, type Hero1Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/hero-1/hero-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hero",
      "landing",
      "saas",
      "split"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "The top section of a SaaS or product landing page. Edit the props for copy and swap HeroVisual for your own product screenshot or component.",
      "whenToUse": [
        "Landing pages with a product to show",
        "Launch pages that need a clear primary action"
      ],
      "whenNotToUse": [
        "Developer tools where the install command is the hero (use hero-2)",
        "AI products where a live prompt sells best (use hero-3)"
      ],
      "composesWith": [
        "header-1",
        "features-1",
        "cta-1"
      ],
      "a11y": [],
      "customization": [
        "eyebrow, title, description, primaryAction, secondaryAction, highlights props",
        "Replace HeroVisual with an image or live component"
      ]
    },
    "examples": [
      "hero-1-demo"
    ],
    "url": "https://ui.ballmac.com/components/hero-1"
  },
  "categories": [
    "blocks",
    "hero"
  ],
  "type": "registry:block"
}