tmj-90/générateur-de-landing-page

Générer des landing pages à fort taux de conversion

Livrez une vraie page : des composants TSX fonctionnels, une structure de copywriting réelle et des performances mesurées. Respectez le framework, le style et les conventions de composants du dépôt existant, en utilisant uniquement les dépendances qu'il possède déjà : une livraison n'en installe jamais une nouvelle (le hook de sécurité le bloque). Un bootstrap greenfield sans stack choisie peut utiliser par défaut Next.js + Tailwind ; ailleurs, si la page a vraiment besoin d'une dépendance manquante, appelez mark_ticket_blocked en la nommant.

Cibles (Core Web Vitals "good", p75 sur le terrain) : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Atteignez également WCAG 2.2 AA : contraste de texte ≥ 4,5:1, un anneau de focus visible, des champs labelisés, et une page utilisable au clavier.

Framework de copywriting (choisir un par page)

Framework	Structure	Idéal pour
PAS	Problème → Agitation → Solution	Trafic orienté problème
AIDA	Attention → Intérêt → Désir → Action	Trafic froid, nouvelle catégorie
BAB	Avant → Après → Pont	Offres de résultat/transformation

Les templates et la FAQ des cinq objections se trouvent dans references/copy-frameworks.md. Le skill copywriting couvre le travail sur le titre principal et le CTA.

Plan des sections

1. Hero : un titre orienté résultat (≤ ~10 mots), un sous-titre d'une phrase sur le "comment", un CTA principal et un signal de preuve (un chiffre, des logos ou une évaluation). Pas de carrousel.
2. Problème : le coût du statu quo, dans les mots du client.
3. Solution / bénéfices : 3–6 bénéfices, chacun avec une explication d'une ligne et un visuel optionnel.
4. Preuve sociale : témoignages avec nom, rôle, entreprise et résultat ; logos.
5. Tarifs (si applicable) : 2–4 paliers avec le recommandé mis en évidence.
6. FAQ : les cinq objections. Utilisez les éléments natifs <details>/<summary> ou un accordéon accessible. Le balisage FAQPage est optionnel car Google n'affiche plus les résultats enrichis de FAQ.
7. CTA footer : répète l'action principale avec un minimum de friction (par exemple email uniquement).

Étapes

1. Collectez les entrées. Nom du produit, audience, problème clé, résultat principal, CTA principal et sa destination, la preuve disponible et la direction stylistique. Lisez le ticket, BRAND.md/les tokens et les pages existantes en premier. En l'absence d'instructions, ne vous arrêtez pas pour demander : utilisez ce qui existe et marquez les lacunes comme [TODO: …] dans la copie. Ne fabriquez jamais de témoignages, logos, chiffres clients ou évaluations.

2. Choisissez le framework en fonction de la source de trafic et du niveau de conscience. Rédigez la copie avant la mise en page. Ébauchez cinq titres principaux et gardez le plus clair.

3. Construisez les sections en tant que composants séparés dans le répertoire des composants du dépôt. Placez la copie dans les props ou un objet de contenu, pas dispersée dans le JSX. Gardez la page principalement rendue côté serveur, avec des composants clients uniquement là où l'interaction le nécessite.

4. Métadonnées SEO. Définissez un <title> unique, une méta description, une canonique, des balises Open Graph et Twitter, et un seul <h1>. Dans Next.js App Router, utilisez l'export metadata.

5. Performance.

   • Chargez l'image Hero/LCP de manière eager avec fetchpriority="high". Dans Next.js 16+ utilisez <Image preload> (ou loading="eager" + fetchPriority="high") ; priority est la forme Next.js ≤ 15, dépréciée en 16. Ne la lazy-loader jamais.
   • Images en lazy-load en dessous de la ligne de flottaison.
   • Chaque image reçoit des width/height explicites et AVIF/WebP.
   • Les polices utilisent font-display: swap (ou next/font) avec seulement les graisses nécessaires.
   • Pas de scripts tiers au-dessus de la ligne de flottaison.

6. Formulaire (capture de leads). Utilisez des champs labelisés avec le bon type et autocomplete, validation en ligne, et un résumé d'erreur qui conserve ce que l'utilisateur a tapé. Affichez un état de succès, désactivez la double soumission et postez vers le point d'accès réel nommé dans le ticket.

7. Vérifiez. Exécutez et enregistrez chaque vérification :

   • la vérification de type (npx --no -- tsc --noEmit, qui échoue plutôt que de télécharger) et le lint du dépôt ;
   • le script de build du dépôt (par ex. npm run build) ;
   • un test de composant qui rend la page et vérifie le h1, le href du CTA principal et les états de succès et d'erreur du formulaire ;
   • Lighthouse (mobile) comme vérification en laboratoire, en enregistrant LCP, CLS, TBT et le score d'accessibilité, uniquement s'il est déjà installé (npx --no -- lighthouse) ;
   • une vérification de viewport à 375 px, 768 px et 1440 px pour les débordements et pour le CTA au-dessus de la ligne de flottaison, via le testeur de navigateur du dépôt s'il en a un.

   N'installez jamais et ne récupérez jamais un outil pour effectuer une vérification. Nommez toute vérification que vous n'avez pas pu effectuer dans vos preuves au lieu de prétendre l'avoir fait.

Fait quand

• La page se construit, passe la vérification de type et ses tests de composants.
• Le hero énonce un résultat et le CTA principal est au-dessus de la ligne de flottaison à 375 px et 1440 px (vérifié par un test de viewport, ou nommé comme non vérifié).
• Là où Lighthouse ou axe est disponible, l'exécution en laboratoire montre LCP ≤ 2,5 s et CLS ≤ 0,1 sur mobile et aucune violation d'accessibilité automatisée ; sinon les preuves indiquent que ces métriques n'ont pas été mesurées.
• Aucune preuve inventée. Chaque lacune est marquée [TODO] et listée dans le rapport.

Anti-patrons

• Une image Hero lazy-loadée, ou un décalage de mise en page dû à des médias non dimensionnés ou des polices tardives.
• Plusieurs CTA de poids égal, ou une navigation complète du site sur une page de campagne payante.
• Lorem ipsum ou contenu générique de remplissage laissé dans le build. Le seul espace réservé autorisé est une lacune explicite [TODO: …] que le rapport liste.
• Carrousels et vidéo en lecture automatique dans le hero.