Landing Page Builder
Transformez un brief en une page d'atterrissage rapide, réactive et autonome, prête à être déployée sur GitHub Pages, Netlify ou tout hébergeur statique.
1. Collecter le brief
Avant d'écrire, assurez-vous de disposer de ces éléments. Demandez uniquement ce qui manque, en un seul message.
| Champ | Exemple |
|---|---|
| Produit / offre | "LearnMizo – apprendre la langue mizo en ligne" |
| Public cible | "Parents de la diaspora qui veulent que leurs enfants parlent mizo" |
| Résultat principal pour le visiteur | "Tenir une conversation simple en 30 jours" |
| Appel à l'action principal | "Commencer la leçon gratuite" + URL de destination |
| Preuve que vous possédez réellement | Chiffres réels, citations réelles, logos (ou "aucune encore") |
| Marque | Couleurs, polices, ton (ou "choisir pour moi") |
Si l'utilisateur dit "construis-la", faites des hypothèses raisonnables et listez-les en haut de votre réponse.
2. Rédiger le contenu d'abord (avant tout HTML)
Suivez la structure dans references/page-structure.md. Règles :
- Titre = résultat, pas fonctionnalité. Maximum ~10 mots. Test : le public dirait-il "oui, c'est ce que je veux" ?
- Sous-titre explique comment en une phrase.
- Un seul CTA principal, répété (hero, milieu de page, pied de page). Même formulation à chaque fois.
- Les avantages sont rédigés avec "Vous pouvez…" ou "Fini…", pas sous forme de listes de fonctionnalités.
- N'inventez jamais de preuve. Pas de faux témoignages, nombres d'utilisateurs, notes ou logos. Si la preuve manque, utilisez un espace réservé clairement identifié :
<!-- TODO: ajouter une citation client réelle -->et un "Votre témoignage ici" visible uniquement dans les brouillons. - Gardez un niveau de lecture simple (visez un niveau CM2–6e).
3. Construire la page
Partez de assets/template.html et remplacez les {{placeholders}}.
Exigences techniques :
- Fichier unique, tout CSS en ligne dans
<style>; pas de frameworks. JavaScript uniquement si nécessaire (ex. bascule FAQ). - Mobile-first ; testez les largeurs 360 px, 768 px, 1280 px.
- HTML sémantique : un
<h1>, sections avec<h2>,<main>,<footer>. - Remplissez
<title>(≤ 60 caractères),meta description(≤ 155 caractères), balises Open Graph. - Contraste de couleurs au moins WCAG AA (4,5:1 pour le texte du corps).
- Boutons ≥ 44 px de hauteur ; CTA visible sans défilement sur mobile.
- Images : utilisez
loading="lazy", largeur/hauteur définies,altdescriptif.
4. Contrôle qualité avant livraison
Parcourez references/checklist.md et corrigez tout ce qui échoue. Livrez ensuite :
- Le fichier HTML.
- Un résumé de 3 lignes : titre choisi, CTA, hypothèses retenues.
- Deux titres alternatifs pour les tests A/B.