{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "cta-band",
    "type": "registry:component",
    "title": "CTA band",
    "description": "A call-to-action band with an eyebrow, two-tone heading, a checklist, an avatar group and a gold CTA button.",
    "registryDependencies": [
        "tokens",
        "button",
        "avatar"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/cta-band.html",
            "type": "registry:file",
            "target": "components/cta-band.html",
            "content": "<!-- CTA band\n     A call-to-action band. Two-tone heading (bold + light), a checklist, an\n     avatar group and the gold CTA button. Marketing theme. -->\n\n<section class=\"dp-cta-band\">\n  <div class=\"dp-cta-lead\">\n    <p class=\"dp-cta-eyebrow\">Book a free demo</p>\n    <h2 class=\"dp-cta-heading\">And move from guesswork <span class=\"light\">to data-driven decisions</span></h2>\n  </div>\n\n  <ul class=\"dp-cta-list\">\n    <li class=\"dp-cta-item\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n      A personalised demo, not a sales pitch\n    </li>\n    <li class=\"dp-cta-item\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n      Completely free, zero obligations\n    </li>\n    <li class=\"dp-cta-item\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg>\n      30 to 60 minutes based on your needs\n    </li>\n  </ul>\n\n  <div class=\"dp-cta-action\">\n    <span class=\"dp-avatar-group\">\n      <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">AK</span>\n      <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">RV</span>\n      <span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Team member\">MB</span>\n    </span>\n    <a class=\"dp-btn\" data-variant=\"cta\" href=\"/contact/\">\n      Get your data advantage\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 18 6-6-6-6\"></path></svg>\n    </a>\n  </div>\n</section>\n"
        },
        {
            "path": "components/cta-band.css",
            "type": "registry:file",
            "target": "components/cta-band.css",
            "content": "/* CTA band\n   A call-to-action band: eyebrow, two-tone heading, a checklist, an avatar\n   group and a CTA button. Colour and type from tokens.css (marketing theme). */\n\n.dp-cta-band {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-8);\n  flex-wrap: wrap;\n  padding: var(--dp-space-8) var(--dp-space-10);\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n}\n\n.dp-cta-lead {\n  flex: 1 1 18rem;\n  padding-right: var(--dp-space-8);\n  border-right: 1px solid var(--dp-border);\n}\n\n.dp-cta-eyebrow {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-link);\n}\n\n.dp-cta-heading {\n  margin: 0;\n  font-size: var(--dp-text-3xl);\n  line-height: var(--dp-leading-tight);\n  color: var(--dp-navy);\n  font-weight: var(--dp-weight-bold);\n}\n\n.dp-cta-heading .light { font-weight: var(--dp-weight-light); }\n\n.dp-cta-list {\n  flex: 1 1 16rem;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.dp-cta-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  color: var(--dp-text);\n}\n\n.dp-cta-item svg {\n  width: 1.15rem;\n  height: 1.15rem;\n  flex: none;\n  color: var(--dp-success);\n}\n\n.dp-cta-action {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-5);\n  margin-left: auto;\n}\n"
        }
    ]
}