{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-3",
  "title": "Hero 3: AI product with live prompt",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Hero for AI products: a real prompt input on the left, and on the right a mock answer with a reasoning panel, a tool call and a streaming reply.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/badge.json",
    "https://ui.ballmac.com/r/prompt-input.json",
    "https://ui.ballmac.com/r/reasoning-disclosure.json",
    "https://ui.ballmac.com/r/streaming-text.json",
    "https://ui.ballmac.com/r/tool-call-card.json",
    "https://ui.ballmac.com/r/media.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/hero-3/hero-3.tsx",
      "content": "// Ballmac UI: Hero 3. https://ui.ballmac.com/blocks/hero-3\n\"use client\"\n\nimport * as React from \"react\"\nimport { Sparkles } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { PromptInput, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar } from \"@/components/ballmac/prompt-input\"\nimport { ReasoningDisclosure } from \"@/components/ballmac/reasoning-disclosure\"\nimport { StreamingText } from \"@/components/ballmac/streaming-text\"\nimport { ToolCallCard } from \"@/components/ballmac/tool-call-card\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Hero3Props = Omit<React.ComponentProps<\"section\">, \"title\" | \"onSubmit\"> & {\n  /** 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  /** Placeholder for the demo prompt. */\n  placeholder?: string\n  /** Called when a visitor submits the prompt, e.g. to route them to sign-up with their question. */\n  onSubmit?: (value: string) => void\n  /** Your product image instead of the sample conversation. 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\nconst ANSWER = \"Revenue grew 18% quarter over quarter, driven by annual plans. Churn fell to 2.1%, the lowest this year.\"\n\nfunction Hero3({\n  eyebrow = \"AI analyst\",\n  title = \"Ask your data anything.\",\n  description = \"Type a question in plain English. The assistant finds the right tables, runs the queries and explains the answer with sources.\",\n  placeholder = \"How did revenue change last quarter?\",\n  onSubmit,\n  media,\n  mediaAlt,\n  className,\n  ...props\n}: Hero3Props) {\n  return (\n    <section data-slot=\"hero-3\" className={cn(\"relative isolate overflow-hidden\", className)} {...props}>\n      <div className=\"mx-auto grid max-w-6xl items-center gap-12 px-4 py-20 sm:px-6 md:py-28 lg:grid-cols-2\">\n        <div>\n          <Badge variant=\"outline\" className=\"gap-1.5 rounded-full px-3 py-1\">\n            <Sparkles className=\"size-3.5\" aria-hidden=\"true\" />\n            {eyebrow}\n          </Badge>\n          <h1 className=\"mt-6 text-4xl font-semibold tracking-[-0.04em] text-balance sm:text-5xl lg:text-6xl\">{title}</h1>\n          <p className=\"mt-6 max-w-xl text-lg leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n          <PromptInput className=\"mt-8 max-w-xl\" onSubmit={(v) => onSubmit?.(v)}>\n            <PromptInputTextarea placeholder={placeholder} aria-label=\"Ask a question\" />\n            <PromptInputToolbar>\n              <span className=\"px-2 text-xs text-muted-foreground\">Press Enter to ask</span>\n              <PromptInputSubmit className=\"ms-auto\" />\n            </PromptInputToolbar>\n          </PromptInput>\n        </div>\n        <Media media={media} alt={mediaAlt} frame priority fallback={\n        <div className=\"space-y-3 rounded-2xl border bg-card p-5 shadow-[0_30px_80px_-40px_rgb(0_0_0/0.35)] sm:p-6\">\n          <p className=\"ms-auto w-fit max-w-[85%] rounded-xl rounded-ee-sm bg-muted px-3.5 py-2 text-sm\">{placeholder}</p>\n          <ReasoningDisclosure duration={4} defaultOpen={false}>\n            Revenue lives in the invoices table; churn in subscriptions. Compare Q3 against Q2 and group by plan.\n          </ReasoningDisclosure>\n          <ToolCallCard name=\"run_sql\" status=\"success\" duration={318} input={{ query: \"select plan, sum(amount) from invoices group by plan\" }} result=\"3 rows\" />\n          <div className=\"text-sm leading-7\">\n            <StreamingText text={ANSWER} animate speed={50} />\n          </div>\n        </div>\n        } />\n      </div>\n    </section>\n  )\n}\n\nexport { Hero3, type Hero3Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/hero-3/hero-3.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hero",
      "ai",
      "assistant",
      "prompt",
      "agent"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "Top section for an AI assistant or agent product. The prompt is real: handle onSubmit (e.g. send visitors to sign-up with their question).",
      "whenToUse": [
        "AI assistants, copilots and agents",
        "Products whose value is best shown as a question and answer"
      ],
      "whenNotToUse": [
        "Products without a conversational interface (use hero-1)"
      ],
      "composesWith": [
        "ai-chat-1",
        "features-1",
        "pricing-1"
      ],
      "a11y": [],
      "customization": [
        "eyebrow, title, description, placeholder props",
        "onSubmit(value) to capture the visitor's question",
        "Change the demo answer, reasoning and tool call to match your product"
      ]
    },
    "examples": [
      "hero-3-demo"
    ],
    "url": "https://ui.ballmac.com/components/hero-3"
  },
  "categories": [
    "blocks",
    "hero"
  ],
  "type": "registry:block"
}