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 Vue ->

Installation

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

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

Examples

npm dependencies

lucide-react

Includes

button

Files (1)

  • components/blocks/Cta01.tsx 1.3 kB 
    import { ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'

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

      <div className="mx-auto max-w-4xl px-6 py-24 text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          Ready to give your team a Monday they'll actually look forward to?
        </h2>
        <p className="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 className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <Button size="lg">
            Start free trial
            <ArrowRight className="ml-2 size-4" />
          </Button>
          <Button size="lg" variant="outline">Book a demo</Button>
        </div>
        <p className="text-muted-foreground mt-4 text-xs">14-day free trial · No credit card required · Cancel anytime</p>
      </div>
    </section>
  )
}

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