CTA — Final Band

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface HTMLElementTagNameMap {
    'uip-cta-final-band': UipCtaFinalBand
  }
}

Files installed (1)

• src/uip/blocks/cta-final-band/cta-final-band.ts2.9 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { ArrowRight } from 'lucide'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  import { icon } from '../../lib/icon'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/badge/badge'
  import '../../components/button/button'
  
  /**
   * <uip-cta-final-band> — the registry CtaFinalBand block as a web component.
   *
   * Class strings are React's CtaFinalBand verbatim. No props, no state, no
   * callbacks — a static closing band. The separator is a plain div carrying
   * the registry Separator classes (horizontal default with the block's
   * max-width and margins).
   */
  export class UipCtaFinalBand extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'cta-final-band')
    }
  
    render() {
      return html`
        <section data-slot="cta-final-band" class="bg-background">
          <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">
              <uip-badge variant="secondary">Start today</uip-badge>
              <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">
                <uip-button size="lg">
                  Start free ${icon(ArrowRight, 'arrow-right', 'ml-2 size-4')}
                </uip-button>
                <uip-button size="lg" variant="outline">Book a walkthrough</uip-button>
              </div>
  
              <div
                data-uipkge=""
                data-slot="separator"
                data-orientation="horizontal"
                role="none"
                class="bg-border shrink-0 h-px w-full mx-auto my-8 max-w-xs"
              ></div>
  
              <p class="text-muted-foreground text-sm">No card required · 30-day trial · 8,400 engineers on the monthly notes</p>
            </div>
          </div>
        </section>
      `
    }
  }
  
  customElements.get('uip-cta-final-band') || customElements.define('uip-cta-final-band', UipCtaFinalBand)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-cta-final-band': UipCtaFinalBand
    }
  }
  

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