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.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/cta-final-band.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/cta-final-band.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/cta-final-band.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/cta-final-band.jsonnpx shadcn-vue@latest add @uipkge/cta-final-bandInstalls to:app/components/blocks/<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
