{
  "schemaVersion": 1,
  "name": "cta",
  "useFor": "Use once near the end of the home page, in a wide SiteSection. Pass the primary and secondary Buttons as actions and InstallTabs as media.",
  "constraints": [
    "More than one per page",
    "A blue card",
    "Two primary keys",
    "A gradient or glow behind the headline",
    "Long copy"
  ],
  "documentation": "`Cta` props: `title`, `description`, `actions`, `media`, `glyphs` (default true), plus div props.",
  "source": "opencommerce-agentcard-web src/components/cta.tsx, src/components/install-tabs.tsx, src/app/globals.css (.cta-binary)",
  "exports": [
    "Cta",
    "CtaProps"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/cta",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/cta.md",
  "examples": [
    {
      "path": "examples/cta.tsx",
      "content": "import { Cta } from \"@/components/site/cta\";\nimport { Button } from \"@/components/ui/button\";\nimport { InstallTabs } from \"@/components/ui/install-tabs\";\n\nexport function Site() {\n  return (\n    <div className=\"mx-auto w-(--ds-frame-column) py-16\">\n      <Cta\n        title=\"Give your agent a checkout\"\n        description=\"One endpoint, every online store. Start free: your first purchase can go through today.\"\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://cal.com/agentcard\">Book a call</a>\n            </Button>\n          </>\n        }\n        media={\n          <InstallTabs\n            className=\"w-full max-w-md\"\n            commands={[\n              { label: \"npm\", command: \"npm install @agentcard/sdk\" },\n              { label: \"pnpm\", command: \"pnpm add @agentcard/sdk\" },\n              { label: \"yarn\", command: \"yarn add @agentcard/sdk\" },\n              { label: \"bun\", command: \"bun add @agentcard/sdk\" },\n            ]}\n          />\n        }\n      />\n    </div>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "cta",
        "button",
        "install-tabs"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/cta/Site"
        }
      ]
    }
  ],
  "type": "site",
  "title": "CTA",
  "description": "The closing card: mist, a hairline and 16px corners, the headline, two keys and the install box, glyphs gathering at its edges.",
  "surface": "site",
  "kinds": [
    "card",
    "button-primary",
    "button-secondary"
  ],
  "requires": [
    "theme",
    "glyph-field",
    "utils"
  ],
  "packages": [],
  "files": [
    {
      "path": "components/site/cta.tsx",
      "content": "import * as React from \"react\";\n\nimport { GlyphField } from \"@/components/visuals/glyph-field\";\nimport { cn } from \"@/lib/utils\";\n\n// The call to action (the opencommerce site, cta.tsx): one quiet card on the page's white, across the whole column: mist,\n// a hairline, 16px corners, 80px of air top and bottom. The 48px display headline, one 16px line in muted ink, the two\n// keys (the blue key, then the white), and room under them for the install box. The field of *s and @s drifts in from\n// the card's edges and clears toward the middle, so the copy sits on clean ground. The copy is its own composited layer\n// over the field, so every browser paints it above the canvas.\ntype CtaProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  title: React.ReactNode;\n  /** One line under the headline. */\n  description?: React.ReactNode;\n  /** The keys: the primary Button, then the secondary. */\n  actions?: React.ReactNode;\n  /** Under the keys: the install box (InstallTabs) or a code window. */\n  media?: React.ReactNode;\n  /** The field of *s and @s round the edges. */\n  glyphs?: boolean;\n};\n\nfunction Cta({ title, description, actions, media, glyphs = true, className, ...props }: CtaProps) {\n  return (\n    <div data-slot=\"cta\" className={cn(\"relative isolate overflow-hidden rounded-shell border border-line bg-subtle px-6 py-16 text-center md:py-20\", className)} {...props}>\n      {glyphs && <GlyphField seed={11} fade=\"in\" className=\"absolute inset-0 size-full\" />}\n      <div className=\"relative z-10 [transform:translateZ(0)]\">\n        <h2 className=\"mx-auto max-w-xl font-display text-h1 leading-display font-medium tracking-hero text-balance\">{title}</h2>\n        {description && <p className=\"mx-auto mt-4 max-w-md text-body leading-lead text-pretty text-fg-muted\">{description}</p>}\n        {actions && <div className=\"mt-8 flex flex-wrap justify-center gap-2\">{actions}</div>}\n        {media && <div className=\"mx-auto mt-10 flex justify-center text-left\">{media}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport { Cta };\nexport type { CtaProps };\n"
    }
  ]
}