{
  "schemaVersion": 1,
  "name": "hero",
  "useFor": "Use at the top of the home page. Pass the primary and secondary Buttons as actions, LogoStrip as strip and a CodeWindow as media. Use titleClassName to adjust wrapping for a longer headline.",
  "constraints": [
    "A blue or tinted hero",
    "A gradient behind the title",
    "More than two keys",
    "Long paragraphs in the hero",
    "An image in place of the code",
    "The glyph field over the title"
  ],
  "documentation": "`Hero` props: `title`, `titleClassName`, `eyebrow` (the pill), `eyebrowHref`, `subtitle`, `actions`, `strip`,\n`media`, `glyphs` (default true: the field behind the media), plus section props.",
  "source": "opencommerce-agentcard-web src/components/hero.tsx, src/components/binary-stage.tsx, src/app/globals.css (.h-hero, .lead, .hero-binary)",
  "exports": [
    "Hero",
    "HeroProps"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/hero",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/hero.md",
  "examples": [
    {
      "path": "examples/hero.tsx",
      "content": "import { Hero } from \"@/components/site/hero\";\nimport { LogoStrip } from \"@/components/site/logo-strip\";\nimport { Button } from \"@/components/ui/button\";\nimport { CodeWindow } from \"@/components/ui/code-window\";\n\nconst CODE = `import { Agentcard } from \"@agentcard/sdk\";\n\nconst agentcard = new Agentcard({\n  clientSecret: process.env.AGENTCARD_SECRET,\n});\n\n// One call: find the item, check out, track the order.\nconst order = await agentcard.commerce.buy({\n  query: \"USB-C charger, 65W\",\n  maxPrice: 40,\n});`;\n\nconst STORES = [\"Northwind\", \"Acme Supply\", \"Globex\", \"Initech\", \"Umbrella\", \"Hooli\", \"Vandelay\", \"Soylent\"].map((name) => ({ name }));\n\nexport function Site() {\n  return (\n    <Hero\n      eyebrow=\"Buy from 4000+ stores\"\n      eyebrowHref=\"#monitoring\"\n      title=\"Open router for commerce\"\n      subtitle=\"Let your agent buy from any online store through one endpoint.\"\n      actions={\n        <>\n          <Button asChild>\n            <a href=\"https://app.agentcard.sh\">Get started</a>\n          </Button>\n          <Button asChild variant=\"secondary\">\n            <a href=\"https://docs.agentcard.sh\">Read the docs</a>\n          </Button>\n        </>\n      }\n      strip={<LogoStrip brands={STORES} />}\n      media={<CodeWindow title=\"agent.ts\" code={CODE} copy highlight={[7, 8, 9, 10]} preClassName=\"text-caption leading-normal\" />}\n    />\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "hero",
        "logo-strip",
        "button",
        "code-window"
      ],
      "packages": [
        "@agentcard/sdk"
      ],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/hero/Site"
        }
      ]
    }
  ],
  "type": "site",
  "title": "Hero",
  "description": "White, centered page opening: a pill, the title, a line, two keys, the strip of marks and a code window over a field of glyphs.",
  "surface": "site",
  "kinds": [
    "hero",
    "hero-title",
    "hero-subtitle",
    "button-primary",
    "button-secondary"
  ],
  "requires": [
    "theme",
    "glyph-field",
    "utils"
  ],
  "packages": [],
  "files": [
    {
      "path": "components/site/hero.tsx",
      "content": "import * as React from \"react\";\n\nimport { GlyphField } from \"@/components/visuals/glyph-field\";\nimport { cn } from \"@/lib/utils\";\n\n// The hero (the opencommerce site, hero.tsx): white like the rest of the page, stacked and centered. A squarish pill\n// link (6px corners, a hairline, 14px muted type that darkens on hover) names the reach; under it the 54px display title\n// (40px on phones) tracked -0.03em on leading 1.02, a one-line 16px standfirst in muted ink, and the actions 40px\n// lower (the blue key and the white key). Then the strip of marks (LogoStrip), and the media in the 800px column (a\n// code window) with the field of *s and @s behind it, spilling wide past the card and feathering out, so the card stays\n// the subject. The field is clipped at the screen's edges, not the column's.\ntype HeroProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  title: React.ReactNode;\n  /** Override title sizing and wrapping for shorter or longer headlines. */\n  titleClassName?: string;\n  /** The pill over the title: a short line, optionally a link. */\n  eyebrow?: React.ReactNode;\n  eyebrowHref?: string;\n  subtitle?: React.ReactNode;\n  /** The keys under the title: the primary Button, then the secondary. Two at most. */\n  actions?: React.ReactNode;\n  /** The strip of marks between the actions and the media (LogoStrip). */\n  strip?: React.ReactNode;\n  /** The media in the 800px column (a code window). */\n  media?: React.ReactNode;\n  /** The field of *s and @s behind the media. */\n  glyphs?: boolean;\n};\n\nconst PILL = \"inline-flex items-center rounded-card border border-line-strong bg-surface px-3.5 py-1.5 text-body-sm leading-body font-medium tracking-snug text-fg-muted\";\n\nfunction Hero({ title, titleClassName, eyebrow, eyebrowHref, subtitle, actions, strip, media, glyphs = true, className, ...props }: HeroProps) {\n  return (\n    <section data-slot=\"hero\" className={cn(\"relative overflow-x-clip\", className)} {...props}>\n      <div className=\"mx-auto flex w-(--ds-frame-column) flex-col items-center gap-12 pt-14 pb-14 md:gap-14 md:pt-12 md:pb-20\">\n        <div className=\"relative z-10 flex flex-col items-center text-center\">\n          {eyebrow &&\n            (eyebrowHref ? (\n              <a\n                href={eyebrowHref}\n                className={cn(\n                  PILL,\n                  \"outline-none transition-colors duration-(--ds-duration-fast) ease-out hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring motion-reduce:transition-none\",\n                )}\n              >\n                {eyebrow}\n              </a>\n            ) : (\n              <p className={PILL}>{eyebrow}</p>\n            ))}\n          <h1 className={cn(\"mt-4 font-display text-hero leading-heading font-medium tracking-hero text-balance\", !eyebrow && \"mt-0\", titleClassName)}>{title}</h1>\n          {subtitle && <p className=\"mt-3 max-w-md text-body leading-lead text-pretty text-fg-muted\">{subtitle}</p>}\n          {actions && <div className=\"mt-10 flex flex-wrap justify-center gap-2\">{actions}</div>}\n        </div>\n        {strip && <div className=\"w-full max-w-(--ds-layout-medium)\">{strip}</div>}\n        {media && (\n          <div className=\"relative isolate w-full max-w-(--ds-layout-medium) min-w-0\">\n            {glyphs && <GlyphField className=\"absolute -top-8 left-[calc(-1*max(32vw,1.5rem))] -z-10 h-[calc(100%+8.75rem)] w-[calc(100%+2*max(32vw,1.5rem))]\" />}\n            <div className=\"relative z-10\">{media}</div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport { Hero };\nexport type { HeroProps };\n"
    }
  ]
}