{
  "schemaVersion": 1,
  "name": "home-page",
  "useFor": "Use as a starting point for an opencommerce landing page. Replace the sample content and pictures, and check every link.",
  "constraints": [
    "A blue or dark section",
    "Two closing cards",
    "A window bar on the hero's pill",
    "Sections out of this order without a reason"
  ],
  "documentation": "",
  "source": "opencommerce-agentcard-web src/components/home-page.tsx",
  "exports": [
    "HomePage"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/home-page",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/home-page.md",
  "examples": [
    {
      "path": "examples/home-page.tsx",
      "content": "import { HomePage } from \"@/components/blocks/home-page\";\n\nexport function Block() {\n  return <HomePage />;\n}\n",
      "exports": [
        "Block"
      ],
      "requires": [
        "home-page"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Block",
          "url": "https://opencommerce-ds.vercel.app/preview/home-page/Block"
        }
      ]
    }
  ],
  "type": "block",
  "title": "Home page",
  "description": "Home page template: header, hero, features, steps, live status, pricing, closing card, questions and footer.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "cta",
    "faq",
    "feature-rows",
    "hero",
    "logo-strip",
    "pricing",
    "section",
    "site-footer",
    "site-header",
    "status-table",
    "steps",
    "button",
    "code-window",
    "install-tabs"
  ],
  "packages": [
    "@agentcard/sdk"
  ],
  "files": [
    {
      "path": "components/blocks/home-page.tsx",
      "content": "import { Cta } from \"@/components/site/cta\";\nimport { Faq } from \"@/components/site/faq\";\nimport { FeatureGrid } from \"@/components/site/feature-rows\";\nimport { Hero } from \"@/components/site/hero\";\nimport { LogoStrip } from \"@/components/site/logo-strip\";\nimport { Pricing } from \"@/components/site/pricing\";\nimport { SectionHeading, SiteSection } from \"@/components/site/section\";\nimport { SiteFooter } from \"@/components/site/site-footer\";\nimport { SiteHeader } from \"@/components/site/site-header\";\nimport { StatusTable, type DayStatus } from \"@/components/site/status-table\";\nimport { Steps } from \"@/components/site/steps\";\nimport { Button } from \"@/components/ui/button\";\nimport { CodeWindow } from \"@/components/ui/code-window\";\nimport { InstallTabs } from \"@/components/ui/install-tabs\";\n\n// The home page as the opencommerce site draws it, top to bottom on one white page: the glass header, the hero (pill,\n// title, two keys, the strip of stores, the code over its field of glyphs), what you get (four feature windows), how it\n// works (the steps and their code), the live status table, pricing, the closing card with the install box, the\n// questions, and the footer with its outlined wordmark. Sample content in its shape; replace it with your own and check\n// every link.\n\nconst SIGNUP = \"https://app.agentcard.sh\";\nconst DOCS = \"https://docs.agentcard.sh\";\n\nconst LINKS = [\n  { label: \"Home\", href: \"#top\" },\n  { label: \"Features\", href: \"#features\" },\n  { label: \"Monitoring\", href: \"#monitoring\" },\n  { label: \"Pricing\", href: \"#pricing\" },\n  { label: \"FAQ\", href: \"#faq\" },\n  { label: \"Docs\", href: DOCS },\n];\n\nconst HERO_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\", \"Wonka\", \"Pied Piper\"].map((name) => ({ name }));\n\n// Thirty days drawn in left to right when the card is first seen; the one rough day stays pale.\nfunction Uptime() {\n  return (\n    <div aria-hidden className=\"w-full max-w-75 font-mono text-snippet\">\n      <div className=\"flex items-baseline justify-between text-fg-muted\">\n        <span className=\"flex items-center gap-2\">\n          <span className=\"size-1.5 rounded-full bg-brand\" />\n          Uptime\n        </span>\n        <span className=\"text-fg\">99.9%</span>\n      </div>\n      <div className=\"mt-2.5 flex h-14 items-end gap-0.75\">\n        {Array.from({ length: 30 }, (_, i) => (\n          <span\n            key={i}\n            style={{ animationDelay: `${i * 26}ms` }}\n            className={`h-full flex-1 origin-bottom rounded-chip group-data-[state=idle]/feature:scale-y-0 group-data-[state=play]/feature:animate-chart-bar ${i === 19 ? \"bg-brand/25\" : \"bg-brand\"}`}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction Route({ label, time, width, warm }: { label: string; time: string; width: string; warm?: boolean }) {\n  return (\n    <div>\n      <div className={warm ? \"flex justify-between text-fg-brand\" : \"flex justify-between text-fg-muted\"}>\n        <span>{label}</span>\n        <span>{time}</span>\n      </div>\n      <div className=\"mt-2 h-2.5 overflow-hidden rounded-chip bg-line\">\n        <div style={{ width }} className={warm ? \"h-full bg-brand\" : \"h-full bg-line-strong\"} />\n      </div>\n    </div>\n  );\n}\n\nfunction Race() {\n  return (\n    <div aria-hidden className=\"flex w-full max-w-75 flex-col gap-5 font-mono text-snippet\">\n      <Route label=\"Cold route\" time=\"2m 40s\" width=\"100%\" />\n      <Route label=\"Warmed route\" time=\"9s\" width=\"6%\" warm />\n    </div>\n  );\n}\n\nconst FEATURES = [\n  { title: \"Every store, one endpoint\", description: \"Search the catalogue, check out and track the order at any store through the same call.\", media: <Race />, file: \"merchants.feature\" },\n  { title: \"Uptime you can see\", description: \"Every route is exercised around the clock, so you know a store works before your agent tries it.\", media: <Uptime />, file: \"uptime.feature\" },\n  { title: \"Warmed routes\", description: \"The stores your agents use most stay warm, so a purchase takes seconds, not minutes.\", media: <Race />, file: \"speed.feature\" },\n  { title: \"Checkout that finishes\", description: \"Payment, shipping and confirmation, with the order number back in your agent’s hands.\", media: <Uptime />, file: \"checkout.feature\" },\n];\n\nconst STEPS = [\n  { title: \"Add the commerce tool to your agent\", code: `npm install @agentcard/sdk\\n\\nimport { Agentcard } from \"@agentcard/sdk\";\\n\\nconst agentcard = new Agentcard({\\n  clientSecret: process.env.AGENTCARD_SECRET,\\n});\\n\\nconst tools = [agentcard.tools.commerce()];` },\n  { title: \"Search catalogues and place orders conversationally\", code: `const results = await agentcard.commerce.search({\\n  query: \"running shoes, size 10\",\\n  maxPrice: 120,\\n});` },\n  { title: \"Pay with your customer’s stored card\", code: `const order = await agentcard.commerce.checkout({\\n  item: results[0].id,\\n  card: customer.cardId,\\n});` },\n  { title: \"Follow orders and report back to users\", code: `const status = await agentcard.commerce.track(order.id);\\n// \"shipped\", with the carrier and tracking number` },\n];\n\n// Deterministic per name, so the server and the browser draw the same bars.\nfunction history(name: string): DayStatus[] {\n  let seed = [...name].reduce((a, c) => a * 31 + c.charCodeAt(0), 7) >>> 0;\n  return Array.from({ length: 45 }, () => {\n    seed = (seed * 1664525 + 1013904223) >>> 0;\n    const r = seed / 2 ** 32;\n    return r < 0.03 ? \"down\" : r < 0.08 ? \"degraded\" : \"up\";\n  });\n}\n\nconst STATUS = [\n  [\"Northwind\", \"100%\", \"5 min ago\", \"12 sec\"],\n  [\"Acme Supply\", \"99.9%\", \"1 min ago\", \"9 sec\"],\n  [\"Globex\", \"99.8%\", \"2 min ago\", \"14 sec\"],\n  [\"Initech\", \"100%\", \"4 min ago\", \"11 sec\"],\n  [\"Umbrella\", \"99.6%\", \"7 min ago\", \"16 sec\"],\n].map(([name, ...values]) => ({ name, values, days: history(name) }));\n\nconst FAQS = [\n  { question: \"What is opencommerce?\", answer: \"An open router for commerce: one endpoint your agent calls to search a store, check out and track the order.\" },\n  { question: \"Which stores can my agent buy from?\", answer: \"More than 4,000 online stores, from marketplaces to restaurants, with new routes added every week.\" },\n  { question: \"How are payments handled?\", answer: \"Your customers’ cards stay in Agentcard’s vault; the agent pays with them, within the limits they set.\" },\n  { question: \"Which agent frameworks does it work with?\", answer: \"Any that can call a tool: the SDK ships tools for the common frameworks and a plain HTTP API.\" },\n  { question: \"What happens when a merchant’s checkout changes?\", answer: \"The route is re-learned within minutes; monitoring shows the store as degraded until it is.\" },\n  { question: \"How does the 1% platform fee work?\", answer: \"It is charged on each completed order. Failed and cancelled orders cost nothing.\" },\n];\n\nconst FOOTER = [\n  { title: \"Product\", links: [{ label: \"Features\", href: \"#features\" }, { label: \"Monitoring\", href: \"#monitoring\" }, { label: \"Pricing\", href: \"#pricing\" }, { label: \"FAQ\", href: \"#faq\" }] },\n  { title: \"Developers\", links: [{ label: \"Docs\", href: DOCS }, { label: \"SDK\", href: \"https://www.npmjs.com/package/@agentcard/sdk\" }] },\n  { title: \"Company\", links: [{ label: \"Agentcard\", href: \"https://agentcard.sh\" }, { label: \"Contact\", href: \"mailto:hello@agentcard.sh\" }] },\n];\n\nexport function HomePage() {\n  return (\n    <div id=\"top\" className=\"bg-surface text-fg\">\n      <SiteHeader links={LINKS} action={{ label: \"Get started\", href: SIGNUP }} />\n      <main className=\"overflow-x-clip\">\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={SIGNUP}>Get started</a>\n              </Button>\n              <Button asChild variant=\"secondary\">\n                <a href={DOCS}>Read the docs</a>\n              </Button>\n            </>\n          }\n          strip={<LogoStrip brands={STORES} />}\n          media={<CodeWindow title=\"agent.ts\" code={HERO_CODE} copy highlight={[7, 8, 9, 10]} preClassName=\"text-caption leading-normal\" />}\n        />\n        <SiteSection id=\"features\" aria-label=\"Features\" width=\"medium\">\n          <SectionHeading title=\"Everything your agent needs to buy\" description=\"One endpoint for every store, routes kept warm, and checkout that finishes.\" />\n          <FeatureGrid features={FEATURES} />\n        </SiteSection>\n        <SiteSection id=\"in-action\" aria-label=\"In action\">\n          <SectionHeading title=\"See it in action\" description=\"From a single tool call to a delivered order. Pick a step to see the code behind it.\" />\n          <Steps steps={STEPS} />\n        </SiteSection>\n        <SiteSection id=\"monitoring\" aria-label=\"Monitoring\">\n          <SectionHeading title=\"Merchant monitoring\" description=\"Every route is exercised around the clock. This is the live picture of the stores your agents buy from most.\" />\n          <StatusTable\n            nameLabel=\"Merchant\"\n            columns={[{ label: \"Success rate\", mono: true }, { label: \"Last purchase\", muted: true }, { label: \"Duration\", mono: true, muted: true }]}\n            daysLabel=\"Uptime · 45 days\"\n            filterLabel=\"Filter merchants\"\n            filterPlaceholder=\"Filter merchants…\"\n            note=\"+ 4000 more merchants\"\n            rows={STATUS}\n          />\n        </SiteSection>\n        <SiteSection id=\"pricing\" aria-label=\"Pricing\">\n          <Pricing\n            title=\"Pricing\"\n            description=\"Start free while you build. Move to Standard when your agent is buying for real.\"\n            rows={[\"Platform fees\", \"Merchants\", \"PSPs\"]}\n            plans={[\n              { name: \"Free\", price: \"$0\", unit: \"while you build\", blurb: \"Everything you need to wire up your agent and make its first purchases.\", values: [\"N/A\", \"5 merchants\", \"2 PSPs\"], action: { label: \"Try free\", href: SIGNUP } },\n              { name: \"Standard\", badge: \"Every merchant\", price: \"1%\", unit: \"of each completed order\", blurb: \"For agents buying for real, across every store and payment provider.\", values: [\"1%\", \"Every merchant\", \"Every PSP\"], featured: true, action: { label: \"Get started\", href: SIGNUP } },\n            ]}\n          />\n        </SiteSection>\n        <SiteSection aria-label=\"Get started\">\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={SIGNUP}>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        </SiteSection>\n        <SiteSection id=\"faq\" aria-label=\"FAQ\" className=\"pb-18 md:pb-30\">\n          <Faq title=\"Questions\" lead=\"What teams ask before their agent makes its first purchase. Still unsure? Book a call and we’ll walk you through it.\" items={FAQS} />\n        </SiteSection>\n      </main>\n      <SiteFooter description=\"The open router for commerce. Buy from any online store from a single endpoint.\" legal={<span>© 2026 Agentcard, Inc.</span>} groups={FOOTER} />\n    </div>\n  );\n}\n"
    }
  ]
}