UIPackage
Vue React

Cta 01

block marketing
Edit on GitHub

Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/cta-01.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/cta-01

Examples

npm dependencies

lucide-vue-next

Includes

button

Files (1)

  • app/components/blocks/Cta01.vue 1.2 kB 
    <script setup lang="ts">
import { ArrowRight } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
</script>

<template>
  <section class="bg-background relative overflow-hidden">
    <div
      class="from-primary/15 via-background to-background pointer-events-none absolute inset-0 -z-10 bg-gradient-to-br"
    />
    <div class="bg-primary/10 pointer-events-none absolute right-1/4 -bottom-40 size-[500px] rounded-full blur-3xl" />

    <div class="mx-auto max-w-4xl px-6 py-24 text-center">
      <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">
        Ready to give your team a Monday they'll actually look forward to?
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        Set up takes 12 minutes. Migrate from your current tool with one CSV upload.
      </p>
      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
        <Button size="lg">
          Start free trial
          <ArrowRight class="ml-2 size-4" />
        </Button>
        <Button size="lg" variant="outline">Book a demo</Button>
      </div>
      <p class="text-muted-foreground mt-4 text-xs">14-day free trial · No credit card required · Cancel anytime</p>
    </div>
  </section>
</template>

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