bittencourtthulio/perfect-landing-page

Perfect Landing Page

Génère une page d'accueil complète en un seul fichier HTML (HTML + CSS + JS en ligne, uniquement les polices externes de Google Fonts), prête à être ouverte dans un navigateur et publiée.

Le modèle de référence est exemples/osvaldo-software.html (un logiciel de gestion pour magasins de coques de téléphone, utilisé comme exemple). Il est né de plusieurs cycles de révision dans le but d'être « professionnel et avec moins d'apparence IA ».

Quand utiliser

• Demande de site, landing page ou page d'accueil pour une entreprise.
• Demande « dans le même format que les exemples » ou « similaire à ce site de référence ».
• Demande de refaire un site déjà créé pour qu'il ait l'air plus professionnel.

Ne pas utiliser pour : systèmes avec connexion/back-end, boutiques avec panier, sites multipages, ou éléments de réseaux sociaux.

Étape 1 : Briefing (ne demander que ce qui manque)

S'il existe un fichier de briefing (BRIEFING.md, BRIEFING2.md), lisez-le et utilisez-le. Sinon, à partir de la demande, prenez ce qui a déjà été dit et demandez, en une seule session, uniquement ce qui n'est pas clair :

1. Nom de l'entreprise et ce qu'elle vend (segment/niche).
2. Différentiel principal : la seule chose que l'entreprise veut que le visiteur retienne. C'est lui qui organise toute la page.
3. Public : qui achète et quelle est sa routine.
4. Fonctionnalités ou services (3 à 6). Si l'utilisateur ne sait pas, proposez-en en fonction de la niche et précisez qu'il s'agit de suggestions.
5. Contact : téléphone, WhatsApp, e-mail. S'il n'y en a pas, utilisez des espaces réservés évidents, comme (00) 0000-0000.
6. Couleurs ou ambiance visuelle (facultatif). S'il n'y en a pas, dérivez-les de la niche.

Si l'utilisateur a déjà donné suffisamment d'informations, ne demandez rien : écrivez et laissez les ajustements pour plus tard.

Si l'utilisateur envoie un site de référence, analysez-le avant d'écrire : police, hero, densité, coins et bordures, rythme des sections, pied de page. Apportez les principes, pas la copie. Les blocs de la référence qui dépendent de données que l'entreprise n'a pas (témoignages, logos de clients, plans et tarifs) ne sont pas inclus : dites-le lors de la livraison et listez les données qui débloqueraient chacun.

Étape 1b : Images (automatique, ne jamais demander)

Avant d'écrire, exécutez depuis la racine du projet :

python3 -I <dossier-de-la-competence>/scripts/gerer_imagens.py --detectar

(<dossier-de-la-competence> est le dossier où cette compétence est installée, par exemple ~/.claude/skills/perfect-landing-page ; le script imprime seulement sim ou nao, jamais la clé)

• sim : le projet a une clé OpenRouter dans le fichier d'environnement. Générez le site avec images, sans rien demander et sans demander confirmation (Étape 2c).
• nao : générez le site sans images, sans demander et sans prévenir que « la clé manquait ». La page est la version sans photo (écran du produit et blocs de couleur), qui est déjà complète. Uniquement lors de la livraison, en une ligne, dites qu'elle est sortie sans images.
• Ne lisez, n'imprimez et ne commentez jamais le contenu du fichier d'environnement. Seul le script y touche.

Étape 2 : Direction visuelle

Ce qui donne à la page un aspect professionnel, c'est la retenue. Définissez avant de coder :

• Palette courte : la couleur foncée de la marque, une couleur d'accent, un blanc cassé neutre pour les sections claires et deux gris de texte (un pour fond foncé, un pour fond clair). Si la marque est noire, utilisez du noir réel (#000), pas un presque noir. Tout en variables CSS dans :root : changer l'identité doit nécessiter de ne toucher qu'à elles.
• L'accent apparaît à peu d'endroits : bouton principal, dernière ligne du H1, élément actif et blocs de couleur derrière les écrans du produit. Pas de brillance, de dégradé radial ou de bande entière dans la couleur d'accent.
• Texte sur l'accent clair (jaune, par exemple) est toujours dans la couleur foncée de la marque, jamais blanc. Sur fond clair, n'utilisez pas l'accent comme couleur de texte.
• Les sections alternent fond foncé et fond clair, de bord à bord. Hero, modules et pied de page foncés ; différentiel et contact clairs.
• Typographie : une seule famille sans serif, avec hiérarchie par poids et taille. Évitez les polices devenues standard des sites générés (Space Grotesk, Inter seule, paire serif + sans). Avant de choisir, rendez le H1 réel dans 4 à 6 candidates de Google Fonts et comparez sur l'impression. Dans le modèle : Hanken Grotesk, poids 400 à 800.
• Échelle contenue : H1 jusqu'à ~52px (poids 800, interligne 1.05, tracking négatif), H2 jusqu'à ~40px, corps 16 à 18px. Un titre géant et un espace exagéré sont une marque de modèle.
• Coins par hiérarchie : 8px sur les boutons et champs, 12px sur les fenêtres, 16px sur les boîtes, 28px uniquement sur les blocs de couleur. Rien de pilule ni de rayon unique partout.
• Bordures fines à la place des ombres. Ombre uniquement sous les fenêtres du produit.
• Boutons rectangulaires, sans brillance colorée et sans flèche dans le texte.
• Pas d'emoji sur la page. Ni dans les icônes, avatar, contacts, bouton WhatsApp ou messages de confirmation.

Ce qui trahit un site fait par IA (à éviter)

• Sceau ou pilule avec point clignotant dans le hero.
• Étiquette en majuscules au-dessus de chaque titre.
• Grille de cartes identiques côte à côte pour présenter les fonctionnalités.
• Carte inclinée, brillance radiale dans les coins, ombre colorée sur les boutons.
• Bande de texte en mouvement (marquee).
• Grand nombre inventé juste pour avoir une « donnée d'ancrage » (ex. : écrire « Chine » à la place d'un nombre).
• Animation de montée et d'apparition sur chaque section.
• Emoji et icône de bibliothèque standard.
• Textes unis par un point au milieu (« A · B · C ») et flèche à la fin des boutons.

Étape 2b : Icônes dessinées à la main (obligatoire)

• Dessinez les icônes en SVG propre, un par concept métier, et rassemblez-les toutes dans un <svg> caché avec <symbol> au début du <body> ; utilisez <svg><use href="#i-nom"/></svg> là où vous en avez besoin.
• Même famille visuelle partout : viewBox 32x32 (24x24 pour les contacts), trait de 2px avec bouts ronds, couleur currentColor et un détail d'accent rempli avec var(--accent). Lorsque l'icône se trouve sur l'accent lui-même, remplacez --accent par du blanc.
• Donnez une raison liée à la niche aux icônes (feuille dans le rayon fruits et légumes, téléphone avec coque dans le magasin de coques).
• Évitez les icônes évidentes (éclair, poignée de main, cadenas, fusée). Préférez une métaphore du métier.

Étape 2c : Images générées (uniquement si l'Étape 1b a donné sim)

Générez 3 images, qui couvrent tout (le coût est de quelques centimes) : hero (fond), différentiel (soutient la fiche du différentiel) et contact (à côté du titre).

1. Écrivez imagens.json à la racine du projet, avec un estilo commun et les prompts en portugais. Le style fixe : photographie éditoriale réaliste, lumière de cinéma, la palette de la marque (couleur foncée dominante, la couleur d'accent comme lumière), sans aucun texte, lettres, logos, marques réelles ou filigrane.
2. Chaque prompt décrit le public et la routine de la niche, pas le logiciel : le lieu de travail du client (pour un magasin de coques, le comptoir avec le mur de coques), les mains effectuant la tâche que le différentiel résout, le service client. Rien d'écran d'ordinateur avec interface (ça sort illisible).
   • hero (16:9, modèle pro) : scène large, côté gauche plus sombre et vide pour le texte.
   • différentiel (4:5, modèle flash) : détail de la tâche que le différentiel résout, vue de dessus.
   • contact (3:2, modèle flash) : moment humain de service, sans écriture sur l'emballage ni panneaux (« emballage lisse, aucun panneau ou mot visible »).
3. Exécutez python3 -I <dossier-de-la-competence>/scripts/gerer_imagens.py imagens.json (pour en refaire une seule, passez le nom à la fin). Les images sortent dans imagens/*.jpg. La proportion 16:10 n'existe pas : utilisez 3:2.
4. Regardez chaque image avant de l'utiliser. Refaites (uniquement celle qui a échoué) si elle a du texte, un logo lisible, une main ou un visage déformé, ou si la scène n'a rien à voir avec la niche. Maximum de 2 refontes par image.
5. Dans le HTML, les images sont dans imagens/ et sont référencées par chemin relatif (le dossier sera inclus dans la publication). Voir exemples/osvaldo-software-com-imagens.html :
   • Hero : photo dans le background de la section, avec deux couches de dégradé noir par-dessus : horizontal (≈94% à gauche jusqu'à ≈22% à droite) et vertical léger. Le texte est toujours sur la partie sombre. Testez la lisibilité du H1 et du sous-titre sur l'impression.
   • Différentiel : la photo va à l'intérieur du bloc de couleur, dans un ::before avec filter:brightness(2.4) grayscale(.35) et mix-blend-mode:multiply sur l'accent : devient duotone dans la palette de la marque. La légende dessus reste claire.
   • Contact : <img> en deux colonnes avec le titre, aspect-ratio:3/2, height:auto (sinon l'attribut height étire l'image), loading="lazy", width/height et alt descriptif. Sur mobile, il va sous le texte.
   • Le alt des photos indique que l'image est illustrative, créée avec IA.
6. L'avertissement du pied de page indique désormais que les écrans et les photos sont des illustrations, créées avec IA. Une photo générée n'est jamais présentée comme une photo du magasin, de l'équipe ou de clients réels.

Sans clé (nao) : sautez cette étape entièrement. Le hero reste noir uni, le bloc de couleur du différentiel reste dans la couleur d'accent et la section de contact reste en une colonne, comme dans exemples/osvaldo-software.html.

Étape 2d : Effets réactifs à la souris (par défaut, toujours)

Chaque site sort avec des effets qui répondent à la souris, principalement dans le hero. Copiez le bloc CSS et le script de exemples/osvaldo-software-com-efeitos.html et ajustez uniquement les couleurs et l'intensité. Canvas 2D et requestAnimationFrame, sans bibliothèque (n'utilisez pas Tween.js ni GSAP).

Hero (l'endroit le plus vivant) :

• Couches : la photo (ou le fond uni, sans images) va dans une div.hero-bg dédiée, avec inset:-36px ; par-dessus, div.hero-light et canvas.hero-fx, toutes aria-hidden et pointer-events:none ; le contenu reste en z-index:3.
• Lampe torche : radial-gradient dans la couleur d'accent, avec mix-blend-mode:screen, qui suit le curseur via --mx/--my et disparaît lorsque la souris sort.
• Poussière de lumière sur le canvas : jusqu'à 120 petits points (couleur d'accent et blanc) montant lentement et clignotant ; près du curseur (rayon ~150px), ils fuient et se connectent au curseur par des lignes fines dans la couleur d'accent ; un anneau discret marque le curseur. Utilisez devicePixelRatio (jusqu'à 2) et refaites les mesures lors du resize.
• Profondeur : le fond se déplace dans le sens inverse de la souris (jusqu'à ~22px) ; la fenêtre du produit s'incline en 3D (jusqu'à ~6°) avec un reflet de lumière (::after avec soft-light) ; la carte flottante et le bloc de couleur se déplacent à des vitesses différentes, via la propriété translate (pas transform, pour ne pas interférer avec l'animation d'entrée).

Reste de la page :

• .tilt sur les éléments en évidence (fiche du différentiel, panneau des écrans) : s'inclinent jusqu'à ~7° (3.5° sur le grand panneau) avec une brillance sous le curseur, et reviennent au centre lorsque la souris sort.
• Boutons magnétiques (.btn-y, .btn-k, .fab) : attirent ~25% dans la direction du curseur, avec transition sur translate.

Règles :

• Tout mouvement est lissé avec interpolation (lerp), jamais de saut.
• La boucle du hero s'arrête lorsque le hero sort de l'écran (IntersectionObserver).
• prefers-reduced-motion : aucun effet.
• Sans souris (pointer: fine false, mobile et tablette) : seule la poussière monte, sans inclinaison ni boutons magnétiques.
• L'entrée des lignes des écrans utilise @keyframes (animation), pas transition : c'est plus robuste avec la boucle d'animation en cours.
• Les effets ne changent pas la mise en page ni le texte. Si l'utilisateur demande une version sans effets, il suffit de supprimer le bloc de script et les trois couches du hero.

Étape 3 : Structure de la page (dans cet ordre)

Tout aligné à gauche. Chaque section fait un seul travail ; si deux disent la même chose, fusionnez-les.

1. En-tête fixe dans la couleur foncée : logo sur une ligne (marque + nom), menu d'ancres à droite, lien WhatsApp en texte et bouton CTA. Sur mobile, seuls le logo et le bouton restent.
2. Hero en deux colonnes. À gauche : H1 en trois lignes courtes qui rassemblent niche + différentiel, avec la dernière ligne dans la couleur d'accent ; sous-titre de deux phrases ; deux boutons (plein et contourné) ; une petite ligne de support sous les boutons indiquant ce qui se passe après le clic. Pas d'étiquette au-dessus du titre. À droite : une fenêtre du système qui prouve le différentiel, avec menu latéral, recherche et liste, sur un bloc dans la couleur d'accent qui saigne jusqu'au bord de l'écran, plus une carte flottante avec le détail de l'élément sélectionné.
3. Bande statique : une ligne avec 4 courtes phrases du différentiel, chacune avec une icône, séparées par des lignes fines.
4. Différentiel (section claire) : à gauche, un recadrage agrandi de l'écran du produit sur le bloc d'accent, saignant du côté opposé au hero. À droite : titre affirmatif, un paragraphe, trois étapes reliées par une ligne (le « comment ça marche » vit ici) et un bouton.
5. Modules en onglets (section foncée) : titre et paragraphe à gauche, suivis de la liste numérotée (01, 02...) avec icône propre, nom et une ligne de support ; l'élément actif ouvre une phrase et gagne une barre d'accent. À droite, un panneau fixe avec l'aperçu dessiné de l'écran de chaque module, en HTML/CSS simple. Numérotez seulement si l'ordre a un sens (dans le modèle, le chemin de la marchandise : du fournisseur au comptoir). Changez par survol, clic et clavier ; utilisez role="tablist", role="tab", role="tabpanel", aria-selected et tabindex uniquement sur l'onglet actif. Sur mobile, le panneau va sous la liste. Utilisez de 4 à 6 modules.
6. Contact (section claire) : titre en question, la phrase de mise en avant du différentiel juste en dessous, et deux boîtes côte à côte : une foncée avec le formulaire (nom, entreprise, WhatsApp) et une dans la couleur d'accent avec les contacts directs.
7. Pied de page en colonnes : marque et une phrase, navigation, modules et contact. En bas, le copyright et l'avertissement que les écrans sont une illustration. Ne mettez que des liens qui existent : rien de réseaux sociaux, blog ou politique sans la page réelle.
8. Bouton flottant WhatsApp, petit, dans la couleur d'accent.

Écrans du produit

• Dessinez-les comme un vrai produit : menu latéral, barre de recherche, tableau avec colonnes, bouton d'action. Écran clair sur fond foncé donne le contraste.
• Gardez la même interface partout (hero, différentiel, onglets).
• Chaque écran est étiqueté comme « Illustration avec données d'exemple ».
• L'écran ne peut pas promettre ce que le texte ne peut pas : rien de comptage de clients ou fournisseurs, sceau de « vérifié », délai, prix d'importation ou évaluation par étoiles si …

[suite tronquée pour la traduction]