{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta",
  "type": "registry:ui",
  "title": "Call to action (MIAN)",
  "description": "A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form.",
  "categories": [
    "sections",
    "cta",
    "call to action",
    "banner",
    "signup"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/cta.css",
      "type": "registry:file",
      "target": "mian/components/cta.css",
      "content": ".mn-cta { display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2.25rem, 6cqi, 5rem); border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-fg); }\n.mn-cta > *, .mn-cta > div > * { margin: 0; }\n.mn-cta > div { display: grid; gap: 1rem; }\n.mn-cta-plain { padding-inline: 0; background: none; border-radius: 0; }\n.mn-cta-center { justify-items: center; text-align: center; }\n.mn-cta-center .mn-hero-actions { justify-content: center; }\n@container mn (min-width: 52rem) { .mn-cta-split { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; column-gap: 3rem; } }\n.mn-subscribe { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; max-width: 28rem; }\n.mn-subscribe > .mn-input { flex: 1 1 13rem; min-width: 0; }"
    },
    {
      "path": "mian/examples/cta.html",
      "type": "registry:file",
      "target": "mian/examples/cta.html",
      "content": "<!-- Split call to action -->\n<section class=\"mn-section mn-section-sm\"><div class=\"mn-container\">\n  <div class=\"mn-cta mn-cta-split\">\n    <div><h2 class=\"mn-title\">Try this month’s close on Ledger.</h2><p class=\"mn-intro\">Free for 30 days. Your data stays yours, and exports are one click.</p></div>\n    <div class=\"mn-hero-actions\"><a class=\"mn-btn mn-btn-lg\" href=\"#\">Start free</a><a class=\"mn-btn mn-btn-lg mn-btn-ghost\" href=\"#\">Book a demo</a></div>\n  </div>\n</div></section>\n\n<!-- Newsletter -->\n<section class=\"mn-section mn-section-sm\" data-mode=\"dark\" style=\"background:var(--mn-bg)\"><div class=\"mn-container\">\n  <div class=\"mn-cta mn-cta-center mn-cta-plain\">\n    <h2 class=\"mn-title\">One good essay a week.</h2><p class=\"mn-intro\">Field Notes arrives on Sunday morning. No tracking pixels.</p>\n    <form class=\"mn-subscribe\" action=\"#\"><label class=\"mn-sr-only\" for=\"sub-ex\">Email</label><input class=\"mn-input mn-input-lg\" id=\"sub-ex\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required><button class=\"mn-btn mn-btn-lg\">Subscribe</button></form>\n  </div>\n</div></section>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/cta",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-cta",
        "mn-hero-actions",
        "mn-subscribe"
      ],
      "accessibility": [
        "The email field needs a label (visually hidden is fine) and type=\"email\" autocomplete=\"email\".",
        "Say what happens after signing up and how often you will write.",
        "For a dark band, set data-mode=\"dark\" on the section instead of inverting colours by hand."
      ],
      "intents": [
        "call to action",
        "sign up band",
        "newsletter signup",
        "book a demo",
        "final section",
        "contact prompt"
      ]
    }
  }
}