TetraKits UI Gradient Block CTA ← Library

Gradient Block CTA

Bold gradient block CTA spanning fuchsia, violet, and indigo. Centered white headline and pill button for campaign landing pages, launch weeks, and free-tier promotions. Maximum visual impact section.

gradient ctabold marketing blockcampaign landingfuchsia gradientreact section
Live preview

Dependencies

react
npm install react react-dom
export function GradientBlockCta() {
  return (
    <section className="rounded-3xl bg-gradient-to-br from-fuchsia-600 via-violet-600 to-indigo-700 px-8 py-16 text-center text-white">
      <h2 className="text-3xl font-bold sm:text-4xl">Start building for free</h2>
      <p className="mx-auto mt-3 max-w-md text-fuchsia-100">Copy components, paste into Cursor, ship tonight.</p>
      <button className="mt-8 rounded-full bg-white px-8 py-3 text-sm font-bold text-violet-700 hover:bg-fuchsia-50">
        Open library
      </button>
    </section>
  );
}