CTA — Final Band

Installation

Variants

Files installed (1)

• app/components/blocks/CtaFinalBand.vue1.4 kB

  Copy

  <script setup lang="ts">
  import { ArrowRight } from 'lucide-vue-next'
  import { Badge } from '@/components/ui/badge'
  import { Button } from '@/components/ui/button'
  import { Separator } from '@/components/ui/separator'
  </script>
  
  <template>
    <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">
          <Badge variant="secondary">Start today</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">
            <Button size="lg">
              Start free
              <ArrowRight class="ml-2 size-4" aria-hidden="true" />
            </Button>
            <Button size="lg" variant="outline">Book a walkthrough</Button>
          </div>
  
          <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>
  </template>
  

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