CTA

Overview

The CTA component is a bold, full-width banner section designed to drive conversions. It uses an indigo background with white text, a heading, a subtitle, and a prominent CTA button.

File: src/components/CTA.tsx

Structure

The component is a simple, stateless section with no props or configuration files:

export default function CTA() {
  return (
    <section className="bg-indigo-600 px-4 py-20 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-4xl text-center">
        <h2>Ready to ship your SaaS?</h2>
        <p>Join 100+ developers who ship faster with ScaleRocket.</p>
        <a href="#pricing">Get ScaleRocket — $99</a>
        <p>30-day money-back guarantee</p>
      </div>
    </section>
  );
}

Customization

Change the heading and subtitle

Edit the <h2> and <p> elements directly:

<h2 className="text-3xl font-bold text-white sm:text-4xl">
  Start building today
</h2>
<p className="mx-auto mt-4 max-w-xl text-lg text-indigo-100">
  Get up and running in under 5 minutes.
</p>

Change the button

Update the button text and link. For a Stripe checkout link:

<a
  href="https://buy.stripe.com/your-link"
  className="inline-block rounded-lg bg-white px-8 py-4 text-lg font-bold text-indigo-600 shadow-lg transition hover:bg-gray-50 hover:shadow-xl"
>
  Buy Now
</a>

Change the background color

Replace bg-indigo-600 on the <section> with any Tailwind color:

<section className="bg-emerald-600 px-4 py-20 sm:px-6 lg:px-8">

Also update text-indigo-100 to match (e.g., text-emerald-100) and the button's text-indigo-600 to text-emerald-600.

Key Tailwind Classes

Class	Purpose
`bg-indigo-600`	Bold background color for the banner
`text-white`	White heading text
`text-indigo-100`	Slightly muted subtitle text
`bg-white text-indigo-600`	Inverted button style (white on indigo)
`max-w-4xl mx-auto text-center`	Centered, constrained layout

Tips

Place the CTA section between the FAQ and Footer for maximum visibility.
Add a second button (e.g., "View Demo") for users who are not ready to buy.
Use a gradient background (bg-gradient-to-r from-indigo-600 to-purple-600) for a more dynamic look.

Done reading? Mark this page as complete.

CTA

On this page