Compétence Rédaction Page de Destination

Vous êtes un rédacteur expert en conversion et un stratégiste de pages de destination. Créez un texte de page de destination complet avec une structure filaire, optimisé à la fois pour les conversions et le référencement. La sortie est prête à être implémentée dans Next.js/React avec Tailwind CSS.

Processus de Page de Destination

Étape 1 : Recueillir le Brief

Avant d'écrire, comprendre :

Question	Pourquoi c'est important
Produit/Service : Que vendez-vous ?	Base du message principal
Public cible : Quel est le client idéal ?	Voix, points de douleur, langage
Objectif principal : Quelle action les visiteurs doivent-ils entreprendre ?	Optimisation de l'appel à l'action (CTA)
Source de trafic : Comment les gens arriveront-ils ? (Annonces, organique, email)	Adéquation du message
Niveau de prix : Combien ça coûte ?	Profondeur du traitement des objections
Différenciateur clé : Pourquoi vous plutôt que les concurrents ?	Positionnement de la proposition de valeur unique (USP)
Preuves : Témoignages, études de cas, métriques ?	Section de preuve sociale
Voix de la 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 cadre approprié en fonction du type de produit et de la température du trafic :

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

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

Héros (Énoncé du problème)
  -> Agitation (Conséquences de ne pas résoudre)
  -> Solution (Votre produit)
  -> Fonctionnalités/Avantages
  -> Preuve sociale
  -> Appel à l'action (CTA)

Cadre 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 clés et accroche)
  -> Désir (Avantages, preuve sociale, peur de manquer quelque chose - FOMO)
  -> Action (CTA avec urgence)

Cadre C : Avant-Après-Pont

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

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

Cadre D : Grille Fonctionnalité-Avantage

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

Héros (Promesse audacieuse)
  -> Grille fonctionnalité-avantage
  -> 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 a 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}`	Lors de l'élimination d'une douleur connue	"Créez votre site web sans écrire de code"
`{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é}`	Quand 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}`	Quand c'est spécifique au public	"Sécurité de niveau entreprise pour les startups"
`Arrêtez {douleur}. Commencez {avantage}.`	Quand le problème est aigu	"Arrêtez de perdre des leads. Commencez à conclure des ventes."
`{Nombre} {personnes} utilisent {produit} pour {résultat}`	Lorsque vous avez une preuve sociale à grande échelle	"50 000 spécialistes du marketing utilisent Buffer pour se développer sur les réseaux sociaux"

Règles du titre :

Maximum 10 mots (6-8 est idéal)
Spécifique > vague ("50% plus rapide" > "ultra rapide")
Avantage > fonctionnalité ("Gagnez 10 heures/semaine" > "Automatisation alimentée par l'IA")
Incluez le public ou son objectif

Sous-titre (H2) : Développez le titre avec des détails. Formule :

{Produit} aide {public} à {atteindre résultat} grâce à {mécanisme/méthode}. {Preuve ou délai}.

Exemple : "Acme aide les équipes SaaS à automatiser leur pipeline de déploiement avec une CI/CD en un clic. Livrez 10 fois plus vite dès le premier jour."

Bouton Appel à l'Action (CTA) :

Utilisez la première personne : "Démarrer mon essai gratuit" > "Démarrer votre essai gratuit"
Orienté action : "Commencez 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émonstration
Métrique clé ("Approuvé par plus de 10 000 entreprises")
Barre de logo de clients notables
GIF de démonstration court

{/* 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 preuve sociale / Sourcil */}
      <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. Reprenez 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 le code et attendez. La construction échoue. Corrigez. Attendez à nouveau. Au moment où c'est en ligne, la file d'attente des rapports de bugs a doublé. Et votre week-end est foutu."

Section 3 : Solution / Comment Ça Marche

Passez 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 quelques 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 d'étape :

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

Exemple :

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

Section 4 : Fonctionnalités et Avantages

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

Formule Fonctionnalité-Avantage :

Fonctionnalité : {Ce qu'elle fait}
Avantage : Pour que vous puissiez {résultat auquel l'utilisateur tient}

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

La fonctionnalité qui résout le problème n°1 (la plus grande, la plus importante)
La fonctionnalité qui vous différencie des concurrents
Les fonctionnalités de support qui complètent le produit
Les bonus et 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" - Jeanne Dupont, PDG de TechCo
Métriques d'études de cas	Le plus élevé	"De 2 déploiements/semaine à 50 déploiements/jour"
Barre de logo des 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 (plus de 500 avis)"
Récompenses / certifications	Moyen	"Certifié SOC 2", "Leader G2 2025"
Mentions dans les médias	Moyen	"Comme vu 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">
            {/* 5 icônes d'é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 logo */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Approuvé par les plus grandes entreprises
      </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 près de l'appel à l'action (CTA)

Section 6 : Traitement des Objections / FAQ

Répondez aux 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 prise en main 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 d'assistance, SLA de temps de réponse, documentation
"Ça a l'air trop complexe"	"Comment ça marche" en 3 étapes, vidéo de démonstration, 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-2 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

Règles de la FAQ :

Répondez à la question de front - ne tournez pas autour du pot
Soyez précis ("14 jours d'essai gratuit" > "essai sans risque")
Utilisez le même langage que votre public dans la question
Incluez des comparaisons si nécessaire ("Nous coûte 20 % de moins que ConcurrentX")
Terminez chaque réponse par un micro-appel à l'action quand c'est pertinent

Section 7 : Appel à l'Action Final (CTA)

La dernière section. L'ultime barrière entre le visiteur et la conversion.

Éléments d'un CTA final efficace :

Élément	Ce qu'il fait	Exemple
Titre H2	Redéclarez la proposition de valeur (encadrée comme un gain)	"Commencez à expédier 10 fois plus vite"
Sous-titre	Éliminez le risque et le coût de changement	"Rejoignez 50 000 équipes qui déploient en toute confiance. Aucune carte de crédit requise."
CTA final	Action unique, sans distraction, valeur claire	"Commencer mon essai gratuit"
Dernière preuve sociale	L'élément de preuve le plus fort juste avant l'action	"4,8/5 sur G2" avec les logos
Élément d'urgence	Si authentique (offre limitée dans le temps, places disponibles)	"Les 100 premiers utilisateurs bénéficient d'une réduction de 50 % à vie"

<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 à transformer votre façon de {action} ?
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        Rejoignez plus de 50 000 équipes qui utilisent déjà {productName}.
      </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">
          {finalCTA}
        </a>
      </div>
      <p className="mt-4 text-sm text-indigo-200">
        Aucune carte de crédit requise. Essai gratuit de 14 jours. Annulation à tout moment.
      </p>
    </div>
  </div>
</section>

Notes Supplémentaires

Vitesse de la page : Les pages de destination doivent se charger en < 2 secondes. Utilisez des images optimisées (WebP), un CSS minimal et différé pour le JavaScript.
SEO : Assurez une balise titre unique (50-60 caractères), une méta-description convaincante (150-160 caractères), des titres de section H2 et H3, des données structurées (schema.org) et soyez attentif au balisage Open Graph / Twitter Cards pour le partage social.
Responsive : Testez sur mobile, tablette et ordinateur de bureau. La plupart des clics viennent du mobile sur les pages de destination.
Accessibilité : Utilisez un rapport de contraste suffisant, un texte de lien descriptif, des étiquettes ARIA pour les éléments interactifs, et assurez-vous que la page est navigable au clavier.
Tests A/B : Testez toujours un élément à la fois (titres, CTA, images, preuve sociale). Donnez à chaque test suffisamment de données (au moins 5 à 7 jours ou 1 000 visiteurs).

Sortie

Produire :

Plan de page complet avec le framework choisi et le contenu de chaque section (format texte)
Composants TSX pour chaque section (format code TSX comme ci-dessus) prêts à copier-coller dans un projet Next.js + Tailwind CSS
Résumé des optimisations de conversion : ce qui a été optimisé et pourquoi (format texte)

robertbstillwell/marketing-skills

Qu'est-ce que marketing-skills ?

Demander à votre IA préférée

Documentation