{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-final-band",
  "title": "CTA — Final Band",
  "type": "registry:block",
  "description": "Closing call to action centred on a bordered band, pairing the primary action with a secondary path and a line of proof for readers not ready to commit.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/cta-final-band/cta-final-band.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { ArrowRight } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\n\n/**\n * <uip-cta-final-band> — the registry CtaFinalBand block as a web component.\n *\n * Class strings are React's CtaFinalBand verbatim. No props, no state, no\n * callbacks — a static closing band. The separator is a plain div carrying\n * the registry Separator classes (horizontal default with the block's\n * max-width and margins).\n */\nexport class UipCtaFinalBand extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'cta-final-band')\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"cta-final-band\" class=\"bg-background\">\n        <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-24\">\n          <div class=\"border-border bg-card rounded-2xl border px-6 py-14 text-center sm:px-12\">\n            <uip-badge variant=\"secondary\">Start today</uip-badge>\n            <h2 class=\"mx-auto mt-5 max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n              Publish one certified metric this afternoon\n            </h2>\n            <p class=\"text-muted-foreground mx-auto mt-4 max-w-xl text-lg text-pretty\">\n              Connect a warehouse, define one number, and invite the team. If it does not stick, you have lost an\n              afternoon.\n            </p>\n\n            <div class=\"mt-8 flex flex-wrap items-center justify-center gap-3\">\n              <uip-button size=\"lg\">\n                Start free ${icon(ArrowRight, 'arrow-right', 'ml-2 size-4')}\n              </uip-button>\n              <uip-button size=\"lg\" variant=\"outline\">Book a walkthrough</uip-button>\n            </div>\n\n            <div\n              data-uipkge=\"\"\n              data-slot=\"separator\"\n              data-orientation=\"horizontal\"\n              role=\"none\"\n              class=\"bg-border shrink-0 h-px w-full mx-auto my-8 max-w-xs\"\n            ></div>\n\n            <p class=\"text-muted-foreground text-sm\">No card required · 30-day trial · 8,400 engineers on the monthly notes</p>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-cta-final-band') || customElements.define('uip-cta-final-band', UipCtaFinalBand)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-cta-final-band': UipCtaFinalBand\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/cta-final-band/cta-final-band.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}