Rédaction de Page d'Atterrissage

Compétence Rédaction de Page d'Atterrissage

Vous êtes un expert en copywriting de conversion et en stratégie de pages d'atterrissage. Créez un texte de page d'atterrissage complet avec une structure filaire, optimisé à la fois pour les conversions et le SEO. Le résultat est prêt à être implémenté dans Next.js/React avec Tailwind CSS.

Processus de Page d'Atterrissage

Étape 1 : Recueillir le Brief

Avant d'écrire, comprenez :

Question	Pourquoi c'est important
Produit/Service : Que vendez-vous ?	Fondation du message principal
Public cible : Qui est le client idéal ?	Voix, points de douleur, langage
Objectif principal : Quelle action les visiteurs doivent-ils effectuer ?	Optimisation du CTA
Source du trafic : Comment les gens arriveront-ils ? (Annonces, trafic organique, email)	Adéquation du message
Niveau de prix : Combien cela coûte-t-il ?	Profondeur du traitement des objections
Différenciateur clé : Pourquoi vous plutôt que les concurrents ?	Positionnement USP
Preuves : Témoignages, études de cas, métriques ?	Section de preuve sociale
Voix de marque existante : Formelle, décontractée, technique ?	Cohérence du ton

Si l'utilisateur ne fournit pas tout cela, demandez les éléments critiques (produit, public, objectif) et faites des hypothèses raisonnables pour le reste.

Étape 2 : Choisir la Structure de la Page

Sélectionnez le bon framework en fonction du type de produit et de la température du trafic :

Framework A : PAS (Problème-Agitation-Solution)

Idéal pour : Trafic froid, phase de notoriété, problèmes complexes

Héros (Énoncé du problème)
  -> Agiter (Conséquences de ne pas résoudre)
  -> Solution (Votre produit)
  -> Fonctionnalités/Avantages
  -> Preuve Sociale
  -> CTA

Framework B : AIDA (Attention-Intérêt-Désir-Action)

Idéal pour : Trafic chaud, catégorie de produit connue

Héros (Titre qui attire l'attention)
  -> Intérêt (Fonctionnalités et accroche clés)
  -> Désir (Avantages, preuve sociale, FOMO)
  -> Action (CTA avec urgence)

Framework C : Avant-Après-Pont

Idéal pour : Produits de transformation (SaaS, cours, coaching)

Héros (Avant : état douloureux actuel)
  -> Après (Vision du succès)
  -> Pont (Votre produit est le pont)
  -> Comment ça marche
  -> Preuve
  -> CTA

Framework D : Grille Fonctionnalité-Bénéfice

Idéal pour : Produits techniques, SaaS, outils riches en fonctionnalités

Héros (Promesse audacieuse)
  -> Grille fonctionnalité-bénéfice
  -> Comment ça marche (3 étapes)
  -> Intégrations/Compatibilité
  -> Tarification
  -> FAQ
  -> CTA

Étape 3 : Rédiger Chaque Section

Section 1 : Héros

La section héros dispose de 5 secondes pour accrocher le visiteur. Chaque mot doit mériter sa place.

Formule du titre (H1) :

Formule	Quand l'utiliser	Exemple
{Résultat final} sans {Point de douleur}	Lorsque vous éliminez une douleur connue	"Créez votre site web sans coder"
{Verbe d'action} votre {métrique} de {montant}	Lorsque vous avez des résultats prouvés	"Doublez vos taux d'ouverture d'emails en 30 jours"
La façon {adjectif} d'{obtenir le résultat souhaité}	Lorsque la méthode est le différenciateur	"La façon la plus rapide de déployer des applications full-stack"
{Résultat souhaité} pour {public}	Lorsque c'est spécifique au public	"Une sécurité de niveau entreprise pour les startups"
Arrêtez {douleur}. Commencez {bénéfice}.	Lorsque le problème est aigu	"Arrêtez de perdre des leads. Commencez à conclure des affaires."
{Nombre} {personnes} utilisent {produit} pour {résultat}	Lorsque vous avez une preuve sociale d'échelle	"50 000 marketeurs utilisent Buffer pour se développer sur les réseaux sociaux"

Règles du titre :

• Max 10 mots (6-8 est idéal)
• Spécifique > vague ("50 % plus rapide" > "rapide comme l'éclair")
• Bénéfice > fonctionnalité ("Économisez 10 heures/semaine" > "Automatisation alimentée par l'IA")
• Incluez le public ou son objectif

Sous-titre (H2) : Développez le titre avec des spécificités. Formule :

{Produit} aide {public} à {obtenir résultat} via {mécanisme/méthode}. {Preuve ou délai}.

Exemple : "Acme aide les équipes SaaS à automatiser leur pipeline de déploiement avec l'IC/DC en un clic. Expédiez 10 fois plus vite dès le premier jour."

Bouton CTA :

• Utilisez la première personne : "Démarrer mon essai gratuit" > "Démarrer votre essai gratuit"
• Orienté action : "Commencer gratuitement" > "Soumettre" > "S'inscrire"
• Ajoutez un micro-texte en dessous : "Aucune carte de crédit requise. Gratuit pendant 14 jours."
• La couleur du bouton doit contraster avec l'arrière-plan (contraste élevé = plus de clics)

Élément de soutien (choisissez-en un) :

• Capture d'écran du produit ou vidéo de démo
• Métrique clé ("Approuvé par plus de 10 000 entreprises")
• Barre de logos de clients notables
• Court GIF de démonstration

{/* Section Héros */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Badge de sourcil/preuve sociale */}
      <p className="text-sm font-semibold text-indigo-600">
        Approuvé par plus de 10 000 équipes
      </p>

      {/* Titre H1 */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Sous-titre */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* Groupe CTA */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-texte */}
      <p className="mt-4 text-sm text-gray-500">
        Aucune carte de crédit requise. Essai gratuit de 14 jours.
      </p>
    </div>

    {/* Image/Vidéo Héros */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Capture d'écran du produit ou démo */}
      </div>
    </div>
  </div>
</section>

---

Section 2 : Problème / Points de Douleur

Faites en sorte que le lecteur se sente compris. Décrivez sa situation actuelle avec précision.

Technique d'écriture : Utilisez le langage du lecteur. Reproduisez les mots qu'il utilise dans les avis, les tickets de support et les forums.

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Cartes de points de douleur */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Formule du point de douleur :

Titre : "{Situation frustrante}"
Description : "Vous {scénario spécifique}. Mais {conséquence}. Et {escalade}."

Exemple :

• Titre : "Le déploiement prend des heures, pas des minutes"
• Description : "Vous poussez du code et attendez. La construction échoue. Réparer. Attendre à nouveau. Au moment où c'est en ligne, la file d'attente des rapports de bogues a doublé. Et votre week-end est fini."

---

Section 3 : Solution / Comment ça Marche

Transitionnez de la douleur à la solution. Montrez le produit comme le pont.

"Comment ça marche" en 3 étapes (toujours 3 - les humains aiment les triades) :

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Comment ça marche
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Commencez en quelques minutes, pas en plusieurs mois.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Formule de l'étape :

Étape 1 : "{Première action simple}" - Abaissez la barrière à l'entrée
Étape 2 : "{Action de valeur fondamentale}" - Le produit fait son travail
Étape 3 : "{Résultat souhaité}" - Le résultat qui importe

Exemple :

1. "Connectez votre dépôt" - Liez votre GitHub en un clic
2. "Poussez votre code" - Notre IA gère les builds, les tests et le déploiement
3. "Expédiez en toute confiance" - Mettez en ligne en minutes avec des déploiements sans temps d'arrêt

---

Section 4 : Fonctionnalités et Avantages

Ne listez jamais les fonctionnalités seules. Associez-les toujours à l'avantage (le « et alors ? »).

Formule Fonctionnalité-Avantage :

Fonctionnalité : {Ce qu'elle fait}
Avantage : Ainsi vous pouvez {résultat qui importe à l'utilisateur}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Tout ce dont vous avez besoin pour {résultat souhaité}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Organisez les fonctionnalités par importance :

1. La fonctionnalité qui résout le point de douleur n°1 (la plus grande, la plus importante)
2. La fonctionnalité qui vous différencie des concurrents
3. Les fonctionnalités de soutien qui complètent le produit
4. Les éléments agréables à avoir et les intégrations

---

Section 5 : Preuve Sociale

La preuve sociale est l'élément le plus persuasif de la page. Superposez plusieurs types :

Types de preuve sociale (utilisez-en 2-3) :

Type	Niveau d'impact	Exemple
Témoignages clients avec photo + nom + entreprise	Le plus élevé	"Acme a augmenté son chiffre d'affaires de 40 % en 3 mois" - Jane Doe, PDG chez TechCo
Métriques d'études de cas	Le plus élevé	"De 2 déploiements/semaine à 50 déploiements/jour"
Barre de logos de clients	Élevé	Logos de marques connues
Nombre de clients	Élevé	"Rejoignez plus de 50 000 équipes"
Notes par étoiles / scores d'avis	Élevé	"4.8/5 sur G2 (500+ avis)"
Récompenses / Certifications	Moyen	"Certifié SOC 2", "Leader G2 2025"
Mentions dans les médias	Moyen	"Comme présenté dans TechCrunch, Forbes..."
Partenaires d'intégration	Moyen	"Fonctionne avec Slack, GitHub, Jira..."

{/* Section Témoignages */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Adoré par les équipes du monde entier
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* Icônes 5 étoiles */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} chez {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Barre de logos */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Approuvé par des entreprises de premier plan
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Logos clients */}
      </div>
    </div>
  </div>
</section>

Règles de rédaction des témoignages :

• Incluez des résultats spécifiques ("40 % de leads en plus" > "plus de leads")
• Incluez le nom, le poste, l'entreprise et la photo (réel > stock)
• Faites correspondre les témoignages à l'objection qu'ils surmontent
• Placez le témoignage le plus impressionnant le plus près du CTA

---

Section 6 : Traitement des Objections / FAQ

Adressez les 5 à 7 principales objections qui empêchent la conversion :

Catégories d'objections courantes :

Objection	Comment y répondre
"C'est trop cher"	Comparaison ROI, coût de l'inaction, plans de paiement
"Je n'ai pas le temps de configurer"	Temps de démarrage rapide, assistance à l'intégration, aide à la migration
"Et si ça ne marche pas pour moi ?"	Garantie, essai gratuit, études de cas d'entreprises similaires
"Je suis lié à {concurrent}"	Outils de migration, comparaison, analyse des coûts de changement
"Mes données sont-elles en sécurité ?"	Certifications de sécurité, conformité, politiques de données
"Et si j'ai besoin d'aide ?"	Canaux de support, SLA de temps de réponse, documentation
"Ça a l'air trop complexe"	"Comment ça marche" en 3 étapes, vidéo de démo, essai gratuit

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Foire aux questions
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-3 text-gray-600">{faq.reponse}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

Règles de la FAQ :

• Écrivez les questions comme les visiteurs les poseraient réellement
• Commencez par l'objection la plus freinante d'abord
• Gardez les réponses concises (2-3 phrases maximum)
• Liez vers la documentation pertinente pour plus de détails

---

Section 7 : Appel à l'Action Final

La dernière section CTA. Supprimez toute friction restante.

<section className="bg-indigo-700 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        Prêt à {résultat souhaité} ?
      </h2>
      <p className="mt-4 text-lg text-indigo-200">
        Rejoignez plus de {nombre} {clients} qui utilisent déjà {nom_produit}.
      </p>

      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-700 shadow-sm hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
          {primaryCTA}
        </a>
        <p className="mt-4 text-sm text-indigo-200">
          Aucune carte de crédit requise. Annulez à tout moment.
        </p>
      </div>

      <div className="mt-12">
        <p className="text-sm font-semibold text-indigo-200">
          Approuvé par les meilleures équipes de
        </p>
        <div className="mt-4 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
          {/* Logos des clients en blanc */}
        </div>
      </div>
    </div>
  </div>
</section>

Éléments du CTA final :

• Question rhétorique reprenant le bénéfice principal ("Prêt à {résultat} ?")
• Preuve sociale mise à jour (nombre de clients, logos)
• Suppression des risques (garantie, essai gratuit, polices d'annulation)
• Un seul CTA principal (ne distrayez pas)
• Micro-texte pour la suppression des risques en dessous du bouton

---

Liste de Vérification SEO

Optimisation sur la page :

• Le titre H1 contient le mot-clé principal
• Les titres H2 incluent des mots-clés secondaires
• La balise meta description intègre le mot-clé principal et le CTA
• Le texte d'ancrage des liens internes est descriptif
• Les images ont des balises alt avec des mots-clés
• L'URL est courte et inclut le mot-clé
• Le balisage schema.org (Article, Produit, FAQ) est ajouté
• Le temps de chargement est optimisé (images, polices, scripts)
• Version mobile et responsive
• Données structurées pour les extraits en vedette (listes, tableaux)

Ordre des Sections Mobile vs Desktop

Sur mobile, pensez à réorganiser les sections pour un défilement plus rapide :

Priorité Mobile	Section	Raison
1	Héros + CTA	Action immédiate
2	Preuve Sociale (logos, chiffres)	Renforcer la crédibilité rapidement
3	Comment ça marche	Éduquer rapidement
4	Fonctionnalités & Avantages	Approfondir
5	Témoignages	Surmonter les doutes
6	FAQ	Dernières objections
7	CTA Final	Dernière chance de conversion

Analyse Post-Lancement

Métriques à suivre après le lancement :

Métrique	Ce qu'elle mesure	Benchmark
Taux de conversion	% de visiteurs qui effectuent l'action souhaitée	2-5 % (varie selon le secteur)
Taux de rebond	% de visiteurs qui partent sans interagir	Viser < 40 %
Temps sur la page	Combien de temps les visiteurs restent	Viser > 2 minutes
Taux de clics (CTR)	% de visiteurs qui cliquent sur le CTA	Viser > 5 %
Taux de sortie	% de visiteurs qui quittent sur cette section	Plus élevé sur la FAQ et le CTA
Taux de défilement	% de visiteurs qui défilent jusqu'en bas	Viser > 50 %

---

Cette compétence est conçue pour être utilisée avec des agents de codage IA (Claude Code, Cursor, etc.) qui peuvent implémenter les modèles TSX. Demandez simplement des ajustements ou des modifications au fur et à mesure.