Landing page SaaS : guide de design section par section

Chaque landing page SaaS réussie suit la même structure. Non pas parce que les fondateurs manquent de créativité, mais parce que la structure fonctionne — elle correspond directement à la façon dont les prospects évaluent un logiciel. Ils doivent comprendre ce que le produit fait (hero), voir que d'autres lui font confiance (preuve sociale), apprendre comment il résout leur problème (fonctionnalités), comparer les plans (tarification), entendre des utilisateurs réels (témoignages), obtenir des réponses à leurs objections (FAQ), et être poussés à agir (CTA final). Ce guide décompose chaque section avec les bonnes pratiques et des patterns d'implémentation React.

1. Hero avec CTA

La section hero est la plus impactante de la page. Elle a un seul objectif : communiquer votre proposition de valeur assez clairement pour que les visiteurs continuent à scroller.

<section style={{
  minHeight: "85vh",
  display: "flex",
  alignItems: "center",
  padding: "var(--section-padding-y-lg) 0",
  background: "var(--color-background)",
}}>
  <div style={{
    maxWidth: "720px",
    margin: "0 auto",
    textAlign: "center",
    padding: "0 var(--container-padding-x)",
  }}>
    <span style={{
      display: "inline-block",
      padding: "0.5rem 1.25rem",
      borderRadius: "var(--radius-full)",
      border: "1px solid var(--color-accent-border)",
      background: "var(--color-accent-subtle)",
      fontSize: "0.8125rem",
      fontWeight: 500,
      marginBottom: "1.5rem",
    }}>
      Maintenant en bêta publique
    </span>
    <h1 style={{
      fontSize: "clamp(2.5rem, 5vw, 4.5rem)",
      fontWeight: 700,
      lineHeight: 1.08,
      letterSpacing: "-0.03em",
    }}>
      Livrez des fonctionnalités, pas de l'infrastructure
    </h1>
    <p style={{
      fontSize: "1.125rem",
      lineHeight: 1.7,
      color: "var(--color-foreground-muted)",
      marginTop: "1.5rem",
      maxWidth: "560px",
      margin: "1.5rem auto 0",
    }}>
      La plateforme développeur qui gère l'auth, la facturation et le déploiement
      pour que vous puissiez vous concentrer sur ce qui rend votre produit unique.
    </p>
    <div style={{ display: "flex", gap: "1rem", justifyContent: "center", marginTop: "2rem" }}>
      <a href="/signup" style={{
        padding: "0.875rem 2rem",
        borderRadius: "var(--radius-full)",
        background: "var(--color-accent)",
        color: "#fff",
        fontWeight: 600,
        textDecoration: "none",
      }}>
        Essai gratuit
      </a>
      <a href="/demo" style={{
        padding: "0.875rem 2rem",
        borderRadius: "var(--radius-full)",
        border: "1px solid var(--color-border)",
        color: "var(--color-foreground)",
        fontWeight: 500,
        textDecoration: "none",
      }}>
        Voir la démo
      </a>
    </div>
  </div>
</section>

Bonnes pratiques pour les heroes SaaS :

• Une seule proposition de valeur — pas trois. "Livrez des fonctionnalités, pas de l'infrastructure" est clair. "Livrez des fonctionnalités, collaborez mieux et économisez" c'est trois messages qui se battent pour l'attention.
• CTA orienté action — "Essai gratuit" bat "Commencer". "Essai gratuit" dit exactement à l'utilisateur ce qui va se passer.
• Badge d'urgence — "Maintenant en bêta publique" ou "Nouveau : analytics IA" donne une raison d'agir maintenant.
• Deux CTAs maximum — primaire (engagement fort) et secondaire (engagement faible). Le CTA secondaire rattrape les prospects qui ne sont pas prêts à s'inscrire.

2. Barre de preuve sociale

Placez la preuve sociale immédiatement après le hero. Cette section fait le pont entre "ça a l'air intéressant" et "d'autres sont d'accord" :

<section style={{
  padding: "3rem 0",
  borderTop: "1px solid var(--color-border)",
  borderBottom: "1px solid var(--color-border)",
}}>
  <div style={{
    maxWidth: "var(--container-max-width)",
    margin: "0 auto",
    textAlign: "center",
  }}>
    <p style={{ fontSize: "0.875rem", color: "var(--color-foreground-muted)", marginBottom: "2rem" }}>
      Adopté par les équipes d'ingénierie de
    </p>
    <div style={{
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "center",
      alignItems: "center",
      gap: "3rem",
      opacity: 0.6,
    }}>
      {logos.map((logo) => (
        <img key={logo.alt} src={logo.src} alt={logo.alt} style={{ height: 28 }} />
      ))}
    </div>
  </div>
</section>

Les barres de logos fonctionnent mieux avec 4 à 6 noms de marques reconnaissables. Si vous n'avez pas encore de clients de renom, substituez par des métriques : "4 200+ équipes", "99,9% de disponibilité", "50M+ appels API traités". Les chiffres sont aussi de la preuve sociale.

3. Vitrine de fonctionnalités

La section fonctionnalités explique comment le produit marche. Deux layouts dominent les landing pages SaaS :

Lignes alternées — texte à gauche, capture d'écran à droite, puis on inverse. Chaque ligne met en avant une fonctionnalité. Ce layout fonctionne bien pour 3 à 4 fonctionnalités.

Grille de fonctionnalités — un grid à 3 colonnes de cartes, chacune avec une icône, un titre et une description. Mieux adapté pour 6+ fonctionnalités où la parité visuelle compte.

Bonnes pratiques :

• Commencez par le bénéfice, pas la fonctionnalité — "Déployez en 30 secondes" (bénéfice) vs "Déploiement en un clic" (fonctionnalité). Les bénéfices répondent à "pourquoi ça m'intéresse ?"
• Une capture d'écran par fonctionnalité — montrer l'interface renforce la crédibilité. Si votre produit est beau, montrez-le. S'il ne l'est pas, corrigez l'UI avant la landing page.
• Descriptions de 2 phrases maximum — les sections de fonctionnalités sont faites pour le scan, pas pour la lecture. Si une fonctionnalité nécessite un paragraphe pour s'expliquer, elle mérite sa propre page.

4. Table de tarification

La section tarification est là où l'intention se convertit en action. Les pages de pricing SaaS montrent typiquement 3 plans côte à côte :

• Gratuit / Starter — établit une base de référence, élimine le risque
• Pro — le plan que vous voulez réellement que les gens achètent, visuellement mis en avant
• Enterprise — signale la scalabilité, généralement "Contactez-nous"

Bonnes pratiques :

• Mettez en avant le plan du milieu — utilisez un accent de bordure, un badge "Le plus populaire", ou une carte surélevée
• Toggle annuel/mensuel — affichez l'annuel par défaut, montrez les économies explicitement
• Liste de fonctionnalités sous chaque plan — 5 à 8 points maximum, avec des checkmarks
• Un CTA par plan — "Commencer gratuitement", "Essai gratuit", "Nous contacter"

Pour les patterns d'implémentation, consultez le guide détaillé sur la construction de tableaux comparatifs React.

5. Témoignages

Les témoignages répondent à la question "est-ce que ça marche vraiment ?". Trois formats fonctionnent bien :

• Cartes de citations — grid à 3 colonnes de témoignages courts avec nom, titre, entreprise et avatar
• Témoignage vedette — une grande citation avec photo, centrée, fort poids visuel
• Mur de témoignages — un grid masonry de 6 à 12 citations, signalant le volume de clients satisfaits

Bonnes pratiques :

• Vrais noms et photos — les témoignages anonymes ont zéro crédibilité
• Résultats spécifiques — "A réduit notre temps de déploiement de 2 heures à 5 minutes" bat "Super produit, je recommande"
• Faites correspondre le témoignage à la section — placez un témoignage sur la tarification près de la section pricing, un témoignage sur l'onboarding près du hero

6. FAQ

La section FAQ gère les objections qui empêcheraient autrement un prospect de convertir. Sujets FAQ SaaS courants :

• Tarification et facturation (durée de l'essai gratuit, politique d'annulation, remboursements)
• Sécurité et conformité (SOC 2, RGPD, localisation des données)
• Migration (import de données, passage depuis un concurrent)
• Support (temps de réponse, canaux, documentation)

Implémentez sous forme d'accordéon avec des transitions de hauteur fluides :

"use client";

import { useState } from "react";

interface FAQItem {
  question: string;
  answer: string;
}

export function FAQ({ items }: { items: FAQItem[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <div style={{ maxWidth: "720px", margin: "0 auto" }}>
      {items.map((item, i) => (
        <div
          key={item.question}
          style={{ borderBottom: "1px solid var(--color-border)" }}
        >
          <button
            onClick={() => setOpenIndex(openIndex === i ? null : i)}
            style={{
              width: "100%",
              padding: "1.25rem 0",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              background: "none",
              border: "none",
              cursor: "pointer",
              fontSize: "1rem",
              fontWeight: 600,
              color: "var(--color-foreground)",
              textAlign: "left",
            }}
          >
            {item.question}
            <span style={{
              transform: openIndex === i ? "rotate(45deg)" : "rotate(0deg)",
              transition: "transform 200ms ease",
              fontSize: "1.5rem",
              lineHeight: 1,
            }}>
              +
            </span>
          </button>
          <div style={{
            maxHeight: openIndex === i ? "500px" : "0",
            overflow: "hidden",
            transition: "max-height 300ms ease",
          }}>
            <p style={{
              paddingBottom: "1.25rem",
              fontSize: "0.9375rem",
              lineHeight: 1.7,
              color: "var(--color-foreground-muted)",
            }}>
              {item.answer}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

Gardez les réponses concises — 2 à 3 phrases chacune. Renvoyez vers la documentation pour les réponses détaillées.

7. CTA final

Le CTA en bas de page est votre dernière chance de convertir. Il doit être visuellement distinct du reste de la page — une couleur de fond contrastante, un texte plus grand, et une seule action claire :

Bonnes pratiques :

• Répétez la proposition de valeur — les visiteurs qui ont scrollé jusqu'en bas sont intéressés. Renforcez pourquoi ils devraient agir.
• Supprimez le langage de friction — "Sans carte bancaire", "Gratuit pour les équipes de moins de 5", "Annulez à tout moment"
• Un seul bouton — pas de CTA secondaire ici. Une action, un bouton.

L'ordre des sections compte

La séquence ci-dessus n'est pas arbitraire. Elle suit le framework AIDA adapté au SaaS :

1. Attention — le Hero capte l'attention avec la proposition de valeur
2. Intérêt — la preuve sociale et les fonctionnalités construisent l'intérêt
3. Désir — la tarification, les témoignages et la FAQ créent le désir et gèrent les objections
4. Action — le CTA final convertit

Réorganiser les sections (mettre la tarification avant les fonctionnalités, ou la FAQ avant les témoignages) perturbe le flux psychologique. Testez des variations, mais commencez par l'ordre qui a fait ses preuves.

Sections de landing page SaaS prêtes à l'emploi

Construire chacune de ces sections from scratch — responsive, accessible, thématisée, animée — prend des semaines. Le catalogue Incubator a des versions production-ready de chaque section décrite ci-dessus : heroes, barres de preuve sociale, sections de fonctionnalités, tables de tarification, témoignages, accordéons FAQ, et sections CTA. Pour une expérience guidée, le constructeur de landing page SaaS vous permet de choisir des sections par catégorie et d'exporter une page complète. Chaque composant est construit pour Next.js 15 avec Tailwind CSS v4 et Framer Motion, prêt à copier-coller.