ko-system/landing-page

Page d'atterrissage

Une page d'atterrissage n'a qu'un seul objectif : amener un visiteur spécifique à une action précise. Chaque section construit l'argumentaire en faveur de cette action ou supprime une raison de ne pas la réaliser. Décidez d'abord de l'action, puis concevez.

1. Décidez avant de construire

Notez ces éléments (dans DESIGN.md si l'application en possède un) avant de toucher au JSX :

• Public : qui arrive sur la page, et ce qu'ils savent déjà.
• Action principale : un verbe ("Commencer l'essai gratuit", "Réserver une table", "Obtenir un devis"). Chaque page a exactement un libellé d'appel à l'action (CTA) principal ; répétez-le, ne le variez pas.
• Action secondaire : facultative et moins engageante ("Voir les tarifs", "Regarder la démo").
• Preuve réelle : chiffres réels, noms de clients, citations, évaluations. N'inventez jamais de témoignages, logos, nombres d'utilisateurs ou prix. Si le propriétaire ne les a pas fournis, supprimez la section ou utilisez un TODO clairement marqué dans les données de contenu, pas dans le texte visible.

2. Ordre des sections (par défaut)

#	Section	Objectif	Bloc
1	En-tête	Marque, 3-5 liens de navigation, CTA principal	SiteHeader
2	Héro	Promesse + CTA principal au-dessus de la ligne de flottaison	Hero
3	Bande de preuve	Logos, évaluation ou un chiffre fort	LogoMarquee ou stats en ligne
4	Problème/résultat	Pourquoi le statu quo est néfaste, ce qui change	Section + SectionHeader
5	Fonctionnalités	3-6 avantages, chacun lié à un résultat	FeatureGrid ou BentoGrid
6	Comment ça marche	3-4 étapes lorsque le processus est inhabituel	StepList
7	Témoignages	Citations réelles avec nom et rôle	Testimonials
8	Tarifs	Forfaits, ou prix "à partir de" et ce qui est inclus	PricingTable
9	FAQ	Objections traitées simplement	Faq
10	CTA final	Reformuler la promesse + même CTA principal	CtaBand
11	Pied de page	Contact, mentions légales, liens secondaires	SiteFooter

Supprimez les sections sans contenu réel. Une page courte et honnête vaut mieux qu'une page longue et gonflée. Gardez au minimum les sections 1, 2, 5 et 10.

3. Règles du héro

• Exactement un <h1> sur la page, dans le héro. Hero rend déjà son title en tant que h1 ; n'ajoutez pas d'autre h1 ailleurs. Les titres de section sont des h2.
• Le titre énonce le résultat pour le public en moins de ~10 mots. Le sous-titre (une ou deux phrases, moins de ~25 mots) explique comment, pour qui, ou ce qui le rend différent.
• CTA principal visible sans défilement sur 375x667 et 1280x800. Placez-le dans la prop actions de Hero ; liez à la destination réelle (route, mailto:, tel:, ancre de formulaire), jamais href="#".
• Média : une capture d'écran réelle du produit, une photo ou une illustration qui montre le résultat. Définissez width/height explicites sur l'image et ne chargez pas paresseusement (lazy-load) l'image du héro (c'est généralement l'élément LCP).
• Ligne de confiance facultative sous le CTA : "Aucune carte de crédit requise", "4.8/5 sur 1 200 avis".

4. Hiérarchie du contenu

1. Titre (h1) : résultat. 2. Sous-titre : mécanisme ou public. 3. CTA : verbe + objet.
2. Titres de section (h2) : énoncés d'avantages, pas des libellés ("Clôturez les comptes en un jour", pas "Fonctionnalités").
3. Corps : paragraphes courts, moins de ~80 caractères par ligne (max-w-prose ou max-w-xl).

Écrivez un contenu spécifique et simple dans la langue de l'application. Pas de lorem ipsum, pas de "Révolutionnez votre workflow", pas de "Fonctionnalité 1". Voir references/copy-formulas.md.

5. Disposition et rythme visuel

• Utilisez des jetons sémantiques (bg-background, bg-secondary, text-muted-foreground), jamais de classes de palette brutes. Alternez Section tone="muted" pour séparer les blocs au lieu d'ajouter des bordures et des ombres partout.
• Variez les formes de section : une grille, puis une image/texte divisé(e), puis une citation en pleine largeur. Évitez une page qui ne contient que des grilles de cartes identiques empilées.
• Un élément en gras par page (le visuel du héro ou un traitement typographique). Gardez le reste calme.
• Enveloppez les groupes de contenu dans <Reveal> avec delay={index * 80} décalé ; BentoGrid, Testimonials et PricingTable se révèlent déjà eux-mêmes.
• Mobile first : une seule colonne en dessous de md, boutons CTA en pleine largeur sur téléphone (w-full sm:w-auto), cibles tactiles d'au moins 44 px.

6. Détails de conversion

• Répétez le CTA principal après les fonctionnalités ou les tarifs et dans le CtaBand final.
• Navigation par ancres : donnez des id aux sections (<Section id="pricing">) et liez à #pricing ; ajoutez scroll-mt-20 pour que l'en-tête collant ne recouvre pas les titres.
• Formulaires sur la page : demandez le minimum (email, ou nom + téléphone). Affichez une validation en ligne et un état de succès clair (voir la compétence forms-validation).
• Tarifs : affichez la devise et la période de facturation, mettez en avant un forfait, et indiquez ce qui se passe après le clic (durée d'essai, annulation).
• Accessibilité : focus visible, texte alternatif (alt) sur les images significatives, contraste 4.5:1, boutons qui disent ce qu'ils font.

7. Liste de vérification terminée

• Un seul h1, dans le héro ; les titres de section sont des h2 dans l'ordre.
• CTA principal visible sans défilement sur mobile et desktop, pointant vers une cible réelle.
• Toutes les affirmations, chiffres, logos et citations sont réels ou la section est supprimée.
• L'image du héro a une largeur/hauteur et n'est pas lazy ; les autres images sont lazy.
• Le titre de la page et la méta-description sont définis (voir la compétence seo-metadata).
• Vérifié aux largeurs 375px, 768px et 1280px avec une capture d'écran.
• Exécuté audit_landing_sections et corrigé les échecs.

Script

audit_landing_sections lit le fichier de la page et les composants locaux qu'il importe. Arguments (tous facultatifs) : { "file": "src/pages/Index.tsx" }. Sans file, il essaie src/pages/Index.tsx, app/page.tsx, src/app/page.tsx, pages/index.tsx et src/pages/index.tsx. Il renvoie checks (réussite, avertissement ou échec), sections détectées et placeholders. Il est heuristique : confirmez les échecs en lisant le code avant de modifier quoi que ce soit.