Une landing page sans call-to-action fort, c'est une brochure. Elle informe, mais elle ne convertit pas. La section CTA est l'endroit où vous demandez aux visiteurs de passer à l'action — s'inscrire, démarrer un essai, réserver une démo, s'abonner. Et le design de cette section affecte directement s'ils le font ou non.
Ce guide couvre cinq patterns CTA en React avec Tailwind CSS qui surpassent systématiquement le classique bandeau "Inscrivez-vous maintenant".
1. CTA pleine largeur avec fond en dégradé
Le CTA à fort impact le plus courant : une bande pleine largeur avec un titre accrocheur, une description courte et un seul bouton. Le fond en dégradé crée une séparation visuelle avec le contenu au-dessus et en dessous.
function FullWidthCTA() {
return (
<section className="bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-50 dark:to-neutral-200">
<div className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight text-white dark:text-neutral-900 sm:text-4xl">
Commencez à construire plus vite dès aujourd'hui
</h2>
<p className="mt-4 text-lg text-neutral-300 dark:text-neutral-600">
Rejoignez 10 000+ développeurs qui livrent des UIs production-ready en heures, pas en semaines.
</p>
<div className="mt-8 flex justify-center gap-4">
<a
href="/signup"
className="rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 hover:bg-neutral-100 transition-colors"
>
Démarrer gratuitement
</a>
<a
href="/demo"
className="rounded-full border border-neutral-600 px-8 py-3 text-sm font-semibold text-white hover:border-neutral-400 transition-colors"
>
Réserver une démo
</a>
</div>
</div>
</section>
);
}
Deux boutons battent un seul bouton. L'action principale ("Démarrer gratuitement") est à fort contraste et évidente. L'action secondaire ("Réserver une démo") capte les personnes pas encore prêtes à s'engager mais suffisamment intéressées pour en savoir plus. Le style ghost button communique clairement son rôle secondaire.
Pourquoi le design CTA compte
La recherche en optimisation de taux de conversion montre systématiquement trois choses sur les CTAs :
Le contraste gagne. La section CTA doit être visuellement différente de tout ce qui l'entoure. Une section sombre entre des sections claires (ou vice versa) crée un point d'arrêt naturel qui attire l'oeil.
La spécificité convertit. "Démarrer gratuitement" surpasse "S'inscrire". "Livrez votre première page en 5 minutes" surpasse "Commencer". Plus la promesse est spécifique, plus le taux de clic est élevé.
Réduire la friction. "Pas de carte bancaire requise" et "Gratuit pour toujours pour les petites équipes" répondent directement à l'hésitation que le visiteur ressent à ce moment précis.
2. CTA split (texte + image)
Un layout à deux colonnes où le côté gauche a le titre et le bouton, et le côté droit montre une capture d'écran produit, une illustration ou un aperçu vidéo. Ce pattern fonctionne bien pour les CTAs orientés produit.
Le layout utilise grid md:grid-cols-2 items-center gap-12. Sur mobile, l'image s'empile sous le texte. Sur desktop, ils sont côte à côte.
La colonne image doit montrer le produit en contexte — un dashboard, un éditeur, un outil de design. Les illustrations abstraites sont moins efficaces car elles n'aident pas le visiteur à s'imaginer utilisant le produit.
3. CTA avec preuve sociale
Ajouter de la preuve sociale directement dans la section CTA est l'un des changements à plus fort levier que vous puissiez faire. Des citations de témoignages, des compteurs d'utilisateurs ou des barres de logos à côté du bouton d'inscription réduisent le risque perçu.
Le pattern : titre et bouton en haut, puis un fin séparateur, puis une ligne d'avatars avec un libellé comme "Utilisé par 8 000+ équipes" ou une bande de logos clients.
function CTAWithSocialProof() {
return (
<section className="mx-auto max-w-4xl px-6 py-24 text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
Prêt à lancer votre prochain projet ?
</h2>
<p className="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
Copiez-collez des composants production. Personnalisez en minutes.
</p>
<a
href="/signup"
className="mt-8 inline-flex rounded-full bg-neutral-900 px-8 py-3 text-sm font-semibold text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors"
>
Commencer à construire
</a>
<div className="mt-10 flex items-center justify-center gap-3">
<div className="flex -space-x-2">
{[1, 2, 3, 4, 5].map((i) => (
<img
key={i}
src={`/avatars/${i}.jpg`}
alt=""
className="h-8 w-8 rounded-full border-2 border-white dark:border-neutral-900"
/>
))}
</div>
<p className="text-sm text-neutral-500">
Utilisé par <strong className="text-neutral-900 dark:text-white">8 000+</strong> développeurs
</p>
</div>
</section>
);
}
L'empilement d'avatars superposés (-space-x-2) crée un sentiment de communauté. Les vraies photos surpassent les icônes placeholder. Si vous n'avez pas de vraies photos d'utilisateurs, utilisez des initiales dans des cercles colorés.
4. CTA flottant / sticky
Pour les pages longues (articles de blog, études de cas, documentation), une barre CTA sticky en bas du viewport capte les visiteurs qui ont lu suffisamment pour être convaincus mais ne veulent pas remonter en haut.
Implémentez-le avec fixed bottom-0 left-0 right-0 et un fond backdrop-blur-md. Affichez-le uniquement après que l'utilisateur ait scrollé au-delà d'un certain point en utilisant un IntersectionObserver :
"use client";
import { useEffect, useState } from "react";
function StickyBar() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => setVisible(!entry.isIntersecting),
{ threshold: 0 }
);
const hero = document.getElementById("hero");
if (hero) observer.observe(hero);
return () => observer.disconnect();
}, []);
if (!visible) return null;
return (
<div className="fixed bottom-0 inset-x-0 z-50 border-t bg-white/80 backdrop-blur-md dark:bg-neutral-950/80 dark:border-neutral-800">
<div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-3">
<p className="text-sm font-medium">Prêt à construire plus vite ?</p>
<a
href="/signup"
className="rounded-full bg-neutral-900 px-6 py-2 text-sm font-semibold text-white dark:bg-white dark:text-neutral-900"
>
Commencer
</a>
</div>
</div>
);
}
L'IntersectionObserver surveille la section hero. Dès que le hero sort du viewport, la barre sticky apparaît. Cela évite de montrer le CTA quand le visiteur vient d'arriver et n'a encore vu aucun contenu.
5. CTA newsletter
Tous les CTAs ne sont pas des inscriptions. Les CTAs newsletter collectent des adresses email en échange de contenu — mises à jour, conseils, accès anticipé. Le design est plus simple : un titre, un pitch d'une ligne, et un champ email avec un bouton de soumission.
Le champ et le bouton doivent être sur la même ligne sur desktop (flex gap-2) et s'empiler sur mobile. Le libellé du bouton doit dire ce qui se passe ensuite : "S'abonner" est générique ; "Recevoir les tips hebdo" est spécifique.
Ajoutez une mention de confidentialité sous le champ : "Pas de spam, jamais. Désabonnement en un clic." Cette seule ligne améliore mesurément les taux de conversion sur les formulaires newsletter.
Stratégie de placement
La section CTA devrait apparaître au moins deux fois sur une landing page :
- Après le hero : pour les visiteurs qui savent déjà ce qu'ils veulent
- Après la section preuve sociale ou pricing : pour les visiteurs qui avaient besoin d'être davantage convaincus
Ne mettez pas un CTA après chaque section — ça crée de la fatigue décisionnelle et paraît agressif. Deux à trois CTAs par page est le sweet spot.
Couleur et contraste
Le bouton CTA doit être l'élément au plus fort contraste de la page. Si votre site utilise des tons neutres, faites du bouton CTA votre couleur accent de marque. Si votre site est déjà coloré, utilisez le noir ou le blanc pour le CTA afin qu'il se démarque.
N'utilisez jamais un ghost button pour le CTA principal. Les ghost buttons sont pour les actions secondaires. L'action principale a besoin d'un remplissage solide qui crie "cliquez-moi".
Sections CTA pré-construites
Le catalogue CTA d'Incubator propose 15+ variantes de sections CTA — pleine largeur, split, avec preuve sociale, barres sticky, newsletter, et plus encore — le tout en React avec Tailwind CSS et prêt à personnaliser.
Consultez la bibliothèque de composants complète pour chaque section, des navbars aux footers.