CTA — Final Band

Installation

Variants

Files installed (2)

• src/app/components/blocks/cta-final-band/cta-final-band.component.ts2.4 kB

  Copy

  // Closing call-to-action centred on a bordered band, pairing the primary action
  // with a secondary path and a line of proof. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-cta-final-band, [ui-cta-final-band]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],
    template: `
      <section data-slot="cta-final-band" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-24">
          <div class="border-border bg-card rounded-2xl border px-6 py-14 text-center sm:px-12">
            <span ui-badge variant="secondary">Start today</span>
            <h2 class="mx-auto mt-5 max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Publish one certified metric this afternoon
            </h2>
            <p class="text-muted-foreground mx-auto mt-4 max-w-xl text-lg text-pretty">
              Connect a warehouse, define one number, and invite the team. If it does not stick, you have lost an
              afternoon.
            </p>
  
            <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
              <button ui-button size="lg">
                Start free
                <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
              </button>
              <button ui-button size="lg" variant="outline">Book a walkthrough</button>
            </div>
  
            <ui-separator class="mx-auto my-8 max-w-xs" />
  
            <p class="text-muted-foreground text-sm">
              No card required · 30-day trial · 8,400 engineers on the monthly notes
            </p>
          </div>
        </div>
      </section>
    `,
  })
  export class UiCtaFinalBandComponent {
    protected readonly ArrowRight = ArrowRight
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/cta-final-band/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/cta-final-band.json