CTA

Apercu

Le composant CTA est une banniere audacieuse en pleine largeur concue pour favoriser les conversions. Il utilise un fond indigo avec du texte blanc, un titre, un sous-titre et un bouton CTA bien visible.

Fichier : src/components/CTA.tsx

Structure

Le composant est une section simple et sans etat, sans props ni fichiers de configuration :

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>
  );
}

Personnalisation

Changer le titre et le sous-titre

Modifiez directement les elements <h2> et <p> :

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

Changer le bouton

Mettez a jour le texte et le lien du bouton. Pour un lien de paiement Stripe :

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

Changer la couleur de fond

Remplacez bg-indigo-600 sur la <section> par n'importe quelle couleur Tailwind :

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

Mettez egalement a jour text-indigo-100 en consequence (par ex. text-emerald-100) ainsi que le text-indigo-600 du bouton en text-emerald-600.

Classes Tailwind principales

Conseils

• Placez la section CTA entre la FAQ et le Footer pour une visibilite maximale.
• Ajoutez un second bouton (par ex. "Voir la demo") pour les utilisateurs qui ne sont pas prets a acheter.
• Utilisez un fond en degrade (bg-gradient-to-r from-indigo-600 to-purple-600) pour un aspect plus dynamique.