whicencer/product-landing

Landing Produit

Construisez un site marketing d'une seule page pour un seul produit, dans un style visuel cohérent. Les fichiers de section dans references/ contiennent les règles détaillées ; ce fichier contient le flux de travail et les règles partagées par toutes les sections.

Flux de travail

Étape 1 — Demander (un seul message, avant d'écrire du code)

Collectez les informations bloquantes ci-dessous dans un seul message. Demandez dans la langue de l'utilisateur.

• Ignorez chaque élément que l'utilisateur a déjà fourni dans sa demande.
• Si rien ne manque, ignorez complètement cette étape.
• Proposez une valeur par défaut pour chaque élément afin que l'utilisateur puisse répondre brièvement ou passer.

Élément	Valeur par défaut si ignoré
Nom du produit + ce qu'il fait en une phrase	— (obligatoire, ne peut être ignoré)
4 à 8 fonctionnalités clés	Dériver de la description du produit
Action principale : libellé du bouton + lien	"Commencer" → #
Tarifs : forfaits, prix, devise — ou "pas de section tarifs"	Pas de section tarifs
Couleur de marque	#229ED9

Ne demandez PAS le nom légal, l'adresse, les contacts ou les liens vers les pages légales — utilisez des placeholders (voir Étape 5). Ne demandez PAS de tours supplémentaires. Après la réponse, construisez.

Étape 2 — Planifier

Décidez silencieusement, sans demander :

• Mode d'affichage des fonctionnalités (agent / command / search / task) — voir references/features.md.
• 1 à 3 exemples par fonctionnalité, les 3-4 étapes "comment ça marche", tous les titres et le texte.

Étape 3 — Lire les règles des sections

Lisez chaque fichier juste avant de construire sa section, dans l'ordre de la page :

1. references/hero.md — barre de navigation + hero
2. references/features.md — showcase des fonctionnalités + tableau (utilise assets/feature-showcase.js)
3. references/how-it-works.md
4. references/pricing.md — ignorez s'il n'y a pas de section tarifs
5. references/final-cta.md
6. references/footer.md

Étape 4 — Construire

Produisez cette structure de fichiers (sauf si l'utilisateur a demandé un framework) :

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — balisage uniquement. Pas de blocs <style>, pas d'attributs style="" sauf là où un script les définit, pas de JS en ligne. Le seul <script> en ligne autorisé est le bloc JSON d'exemples de la section des fonctionnalités.

• css/styles.css — tous les styles. Commence par les jetons de design sur :root, puis les sections dans l'ordre de la page, chacune sous un en-tête de commentaire (/* ===== Hero ===== */).

• js/main.js — comportement de la page écrit par vous (état de la barre de navigation, menu mobile, année dans le footer, etc.).

• js/feature-showcase.js — copie de assets/feature-showcase.js octet par octet. Ne le fusionnez jamais dans main.js et ne le modifiez pas.

• Incluez les fichiers comme ceci :

  • <link rel="stylesheet" href="css/styles.css"> dans <head>;
  • <script src="js/feature-showcase.js" defer></script> et <script src="js/main.js" defer></script> à la fin de <head>.

• Scripts simples uniquement — pas de type="module", pas d'imports. La page doit fonctionner lorsqu'elle est ouverte directement depuis le disque (file://).

• Chemins relatifs uniquement, afin que le dossier puisse être téléchargé sur n'importe quel hébergeur tel quel.

Étape 5 — Vérifier et signaler

1. Parcourez la liste de vérification de chaque fichier de section et la liste de vérification globale ci-dessous. Corrigez ce qui échoue.
2. Répondez à l'utilisateur avec une courte liste de tous les placeholders qu'il doit remplir (nom légal, adresse, contacts, liens vers les pages légales, liens #, prix $XX).

Règles globales

Faits

N'inventez jamais de faits sur l'entreprise : prix, forfaits, chiffres, noms de clients, témoignages, nom légal, adresse, e-mails, identifiants, URL. Utilisez des placeholders évidents et listez-les à l'étape 5.

Jetons de design

Définissez-les comme variables CSS sur :root et utilisez-les exclusivement :

:root {
  --brand: #229ED9;              /* remplacé par la couleur de marque de l'utilisateur */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* cartes, panneaux */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• Thème clair uniquement. Une seule couleur d'accent (--brand) ; tout le reste est noir, gris et blanc.
• Police : Inter via Google Fonts (poids 400, 500, 600, 700, 800).
• Icônes : Phosphor Icons via https://unpkg.com/@phosphor-icons/[email protected] (version figée).

En-tête de section (partagé par les fonctionnalités, comment ça marche, tarifs)

• H2 : clamp(32px, 5vw, 48px), poids 800, letter-spacing: -0.03em, line-height: 1.05, --text, aligné à gauche.
• Sous-titre optionnel : 18px, normal, --text-muted, largeur max ~540px, 12px en dessous.

Espacement et rythme

• Conteneur de contenu : max-width: var(--container), remplissage latéral 24px (16px sur mobile).
• Écart vertical entre les sections : clamp(80px, 12vw, 140px).
• Alternez sections lourdes et légères. Ne créez jamais deux sections interactives à la suite.

Texte

• Simple, concret, humain. Phrases courtes. Noms et chiffres réels.
• Mots interdits : seamless, puissant, révolutionnaire, débloquer, suralimenter, sans effort, de pointe.
• Tout le texte de la page dans la langue demandée par l'utilisateur (par défaut : la langue de la description du produit).

Mouvement

• Subtile uniquement : élévations au survol, transitions de 150 à 250 ms, optionnellement fondu à l'apparition au défilement.
• Tout respecte prefers-reduced-motion.
• La seule animation en boucle sur la page est la pulsation de la marque dans le hero (voir references/hero.md). Aucune autre animation infinie.

Liste de vérification globale

• Seulement les sections listées à l'étape 3, dans cet ordre.
• Uniquement les couleurs des jetons ; une seule couleur d'accent.
• Aucun fait d'entreprise inventé ; tous les placeholders signalés à l'utilisateur.
• Le CTA du hero, le CTA de la barre de navigation et le CTA final sont la même action.
• Pas de défilement horizontal de la page à 375 px ; tout est lisible sur mobile.
• Bases du clavier et du lecteur d'écran : vrais boutons, texte alternatif, états de focus visibles.
• Chaque <script> en ligne se termine uniquement par sa balise fermante réelle : pas de </script dans le code JS, les commentaires ou les chaînes.
• Fichiers : index.html, css/styles.css, js/main.js, js/feature-showcase.js — rien d'autre, pas de CSS/JS en ligne.
• js/feature-showcase.js est identique à assets/feature-showcase.js.
• Le bloc d'exemples JSON ne contient pas de texte </script.
• La page fonctionne lorsque index.html est ouvert directement depuis le disque.