{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-final-band",
  "title": "CTA — Final Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cta-final-band/cta-final-band.component.ts",
      "content": "// Closing call-to-action centred on a bordered band, pairing the primary action\n// with a secondary path and a line of proof. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cta-final-band, [ui-cta-final-band]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <section data-slot=\"cta-final-band\" [class]=\"rootClass\">\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          <span ui-badge variant=\"secondary\">Start today</span>\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            <button ui-button size=\"lg\">\n              Start free\n              <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button size=\"lg\" variant=\"outline\">Book a walkthrough</button>\n          </div>\n\n          <ui-separator class=\"mx-auto my-8 max-w-xs\" />\n\n          <p class=\"text-muted-foreground text-sm\">\n            No card required · 30-day trial · 8,400 engineers on the monthly notes\n          </p>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCtaFinalBandComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-final-band/cta-final-band.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cta-final-band/index.ts",
      "content": "export { UiCtaFinalBandComponent } from './cta-final-band.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-final-band/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "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"
  ]
}