Gradient CTA

Call-to-action section with vibrant gradient background, decorative circles, grid pattern overlay. Available as card or full-width banner.

ctagradientbannercall-to-action

Installation

bash

# Copy gradient-cta.tsx to your project
cp components/ui/gradient-cta.tsx your-project/components/ui/gradient-cta.tsx

How to use

tsx

import { GradientCTA } from "@/components/ui/gradient-cta";

tsx

<GradientCTA
  heading="Ready to get started?"
  subheading="Join thousands of teams already using our platform."
  variant="card"
>
  <button className="px-6 py-3 bg-white text-zinc-900 rounded-lg font-medium">Start Free</button>
  <button className="px-6 py-3 text-white/80 font-medium">Learn more</button>
</GradientCTA>

Dependencies

framer-motion

Exports

GradientCTA

File

components/ui/gradient-cta.tsx

Preview

Ready to get started?

Join thousands of teams already using our platform to ship faster.

Don't miss out

Limited time offer: 50% off for the first 3 months.