paper-notebook-landing

Page d'atterrissage cahier en papier

Ce skill transforme le contenu réel de n'importe quel produit en une page d'atterrissage autonome dans un langage visuel chaleureux et artisanal de « cahier d'écolier » qui reste calme et digne de confiance. La construction de référence est example/index.html (Atlasio, une plateforme fictive d'étude en Allemagne, en TR/EN/DE). Ouvrez-la avant de commencer ; references/components.md contient chaque motif sous forme de code prêt à copier. screenshots/ montre à quoi chaque section devrait ressembler.

Si l'utilisateur pointe vers un site de référence, prenez le style, jamais son logo, ses illustrations, ses photos de produits, son texte ou sa marque nominale. Utilisez le propre nom de marque, le contenu et les faits du client.

1. Avant de concevoir : lisez le site réel

1. Ouvrez le site actuel du client (ainsi que toute brochure / PDF qu'il partage) et extrayez le contenu réel : proposition de valeur, étapes du processus, services, chiffres avec leurs sources et dates, témoignages, réponses FAQ, coordonnées.
2. Trouvez le processus du client (par exemple « Planifier → Préparer → Postuler → Arriver »). Il devient l'épine dorsale de la page : l'étiquette du cahier, le panneau des étapes, la bande dessinée et le texte comptent tous les mêmes étapes. Si le client a une brochure, sa structure prévaut sur celle du site web.
3. Notez ce que vous ne devez pas inventer : prix, affirmations (« meilleur », « moins cher »), statistiques, exigences légales/visa. Si l'utilisateur demande de masquer les prix, remplacez-les par un langage d'offre (« super offre ✦ », « obtenir une offre → », « avantage du forfait ✦ ») plutôt que par des chiffres fictifs. Les montants officiels (par exemple le solde requis pour un visa) sont des faits, pas des prix ; conservez-les avec la source + la date.

2. ADN visuel (conservez tout cela)

Élément	Règle
Fond	Papier crème #fdfbf9, jamais blanc pur ; bande secondaire #f6efea. Un seul thème clair, délibérément.
Encre	Cacao #2b1a07 pour le texte, charbon #171717 pour les contours, #8a7b6a adouci pour les petits caractères.
Accent	Orange marqueur #ff6f1e pour l'écriture manuscrite, les soulignements et le pied de page. Utilisez l'accent du client s'il est chaleureux ; sinon conservez l'orange comme « marqueur ».
Couleurs des autocollants	vert #22c55e, bleu #3b82f6, rose #ff66cf, jaune autocollant #fadb4b. Chaque scène illustrée possède l'une d'elles pour ses mots surlignés.
Police d'affichage	Empattement charnu, doux, légèrement irrégulier, par exemple Gelica ou Recoleta (payant). Choix gratuit : Fraunces avec SOFT 100, WONK 1, poids 800–900.
Police de corps / UI	Geist (ou Inter) pour les listes, les petits caractères des boutons, les légendes. Empattement (Fraunces 400) pour les sous-titres et les citations.
Écriture manuscrite	Caveat (possède des glyphes turcs/allemands). Uniquement pour les annotations, les notes autocollantes, les étiquettes sur les cahiers, les bulles de BD. Jamais pour les paragraphes.
Boutons	Le bouton « dibs » : pilule crème avec un anneau extérieur crème de 4 px, une bordure intérieure charbon de 1,5 px, étiquette à empattement, petite ombre.
Formes	Cartes avec rayon de 12 px, boutons 20 px, pied de page avec coins supérieurs de 56 px. Les contours sont en charbon de 1,5 à 2 px, comme un stylo.
Ombres	Douces et basses : 0 2px 20px rgba(0,0,0,.06). Les objets (cahiers, notes autocollantes) reçoivent une ombre portée plus longue en dessous.
Navigation	Pas de barre de navigation. Logo rond fixe en haut à gauche ; en haut à droite un commutateur de langue, une petite pastille « connexion » et l'appel à l'action « dibs ».
Titre principal	En minuscules, énorme (clamp 60–112 px), deux lignes courtes, précédé d'une salutation manuscrite orange (« Chers parents, »).

3. Motifs de section (choisissez, ordonnez et remplissez avec le contenu réel)

Utilisez-les à peu près dans cet ordre. Chacun a un extrait prêt dans references/components.md.

1. Héros + couverture du cahier – salutation, titre en minuscules, sous-titre en une ligne avec une annotation manuscrite ("au même endroit. vraiment !"), bouton CTA dibs, petite note atténuée. À droite : un cahier incliné. Deux options de couverture :
   • un cahier en cuir avec une étiquette nominative blanche (Nom / Objectif / Durée / Étape 1/4) qui le personnalise avec un exemple d'utilisateur ;
   • une couverture adaptée du propre support imprimé du client. S'il a une brochure, un livret ou une couverture de flyer, reconstruisez-la en HTML/SVG à la taille de la couverture (unités de conteneur de requête) pour que le web et l'imprimé correspondent. L'exemple fait cela avec un livret « Passeport pour votre avenir » : bleu marine, double cadre doré, globe et avion dorés, bande orange « Study in Germany ».
2. Cahier animé au défilement – le cahier du héros se déplace vers le bas au fur et à mesure que l'utilisateur fait défiler (se redresse, s'agrandit, se centre), puis sa couverture s'ouvre pour révéler une page de bienvenue avec des autocollants en forme d'œil et « TAP TO START ! ». Un seul cahier, un seul mouvement continu.
3. Notes autocollantes – ligne centrée à empattement avec un mot étiré ("Touuuuuut au même endroit.") et 4 notes jaunes pivotées avec les points de preuve les plus forts.
4. Scènes illustrées + panneau en chiffres romains (2 à 3 d'entre elles) – illustration CSS/SVG à fond perdu du monde de l'utilisateur (bureau, ciel avec avion et horizon, campus…), un panneau crème avec un titre à empattement dont les mots clés sont colorés, une liste de fonctionnalités numérotées I, II, III… sur le bord droit, et une maquette d'appareil qui change lorsqu'un élément est cliqué. Une scène doit porter le processus d'étapes du client (panneau = étapes, appareil = les étapes de cette étape + barre de progression).
5. Grille de doodles – grille 3×3 d'icônes linéaires dessinées à la main avec des légendes manuscrites ; la cellule centrale contient le titre de la section. Idéal pour les services / marketplace. Texte de prix ou d'offre en écriture manuscrite orange.
6. Liste sur papier ligné – une feuille inclinée avec marge rouge et règles bleues, liste de contrôle manuscrite (✓ ou ✗), petites étiquettes autocollantes autour. Idéal pour les exigences, « ce qui est inclus », « ce que nous ne faisons jamais ».
7. Cahiers colorés – 3 cahiers (bleu motif nuage, rose, cobalt) avec étiquettes nominatives comme couvertures pour guides/produits.
8. Bande dessinée – une case par étape du processus, personnages SVG plats avec contours charbon, bulles de dialogue à taille automatique, légende sous chaque case avec le chiffre romain et le nom de l'étape. Ensuite, de courts témoignages avec des règles supérieures en pointillés.
9. FAQ – lignes <details> séparées par des lignes pointillées pêche, marqueur orange +/–.
10. Pied de page géant – bloc orange, rayon supérieur de 56 px, titre crème à empattement, champ de newsletter avec bouton dibs, colonnes de liens, et le nom de la marque comme énorme marque nominale orange plus foncé.

4. Interactions signature

• Déplacement et ouverture du cahier – un seul élément. Phase 1 (du haut de la page jusqu'à ce que la section d'ouverture se fixe) : interpoler la translation, la rotation (-14° → 0) et l'échelle du rectangle de l'espace réservé du héros vers le centre de la scène. Phase 2 (pendant que la scène est fixe) : --p 0→1 fait pivoter la couverture rotateY(-178deg * p) autour de son bord gauche. Masquez l'espace réservé du héros uniquement lorsque JS s'exécute et prefers-reduced-motion est désactivé ; mouvement réduit affiche le livre déjà ouvert et statique.
• Panneau → appareil – chaque élément en chiffres romains est un <button aria-current> ; son data-t (et éventuellement data-sub, listes d'étapes séparées par des pipes) s'affiche dans l'écran de l'appareil.
• Bulles de dialogue à taille automatique – ne dessinez jamais les chemins des bulles à la main autour du texte. Mettez uniquement <text> dans un <g class="sb" data-cx data-y data-tx> ; JS mesure getBBox() après document.fonts.ready, réduit la police si elle est plus large que le cadre, dessine le rectangle arrondi et une queue pointant vers le locuteur (data-tx), et fixe la bulle à l'intérieur du cadre de 300 px. Réexécutez après chaque changement de langue.
• Commutateur de langue – conservez la langue source dans le HTML. Un dictionnaire mappe chaque nœud de texte source réduit à [en, de, …] ; parcourez les nœuds de texte une fois, stockez l'original + les espaces de début/fin, échangez au clic ; traduisez également placeholder, data-t, data-sub. Définissez <html lang>, conservez le choix dans localStorage (enveloppé dans try/catch).

5. Règles de construction

• Un seul fichier HTML autonome : CSS/JS en ligne, polices Google uniquement, SVG en ligne pour chaque illustration. Aucune image externe nécessaire.
• Le fichier autonome nécessite <!doctype html>, <meta charset="utf-8"> et <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">, sinon les téléphones affichent la mise en page de bureau.
• Utilisez main{overflow-x:clip} (pas hidden) pour que le cahier en déplacement ne puisse pas provoquer de défilement latéral et que position:sticky fonctionne toujours.
• Toutes les couleurs sous forme de jetons :root ; la page est intentionnellement en mode clair uniquement, alors définissez color-scheme: light et un arrière-plan de corps explicite.
• Les boutons sont de vrais <button>/<a> avec :focus-visible visible ; le SVG décoratif obtient aria-hidden="true" ; les cadres de BD obtiennent role="img" + aria-label décrivant la scène.
• Respectez prefers-reduced-motion : pas de déplacement, livre ouvert, pas d'oscillation au survol.
• Points de rupture : ≤980 px empile les scènes et masque les accessoires décoratifs (.hide-sm) ; ≤600 px ne conserve que le logo + le commutateur de langue dans les coins et affiche la BD sur une case par rangée.

6. Rédaction du texte

• Parlez à la personne de l'autre côté de l'écran, phrases courtes, chaleureuses mais factuelles.
• Titre en minuscules ; tout le reste en casse normale.
• Les apartés manuscrits sont des blagues ou des emphase, 1 à 3 mots, au maximum un par section.
• Divisez les titres qui enveloppent des mots colorés en morceaux qui se lisent toujours naturellement dans chaque langue (l'ordre des mots change !). Préférez des structures comme « Un plan. Quatre étapes, quatorze étapes » où chaque morceau peut être traduit individuellement.
• Marquez les exemples de personnes comme des exemples ("L'histoire d'Elif est un parcours exemplaire").

7. Liste de vérification finale

• Tout le contenu est le contenu réel du client ; rien n'est inventé ; les sources et les dates de « dernière vérification » sont conservées.
• Le cahier du héros se déplace et s'ouvre en douceur ; mouvement réduit affiche un livre ouvert statique.
• Chaque bulle de dialogue contient son texte dans chaque langue (vérifiez avec getBBox ou à l'œil).
• Chaque commutateur de langue ne laisse aucun texte dans la langue source (analysez les nœuds de texte pour les lettres spécifiques à la source telles que ğ ş ı).
• Pas de défilement horizontal à 390 px ; les coins n'affichent que le logo + le commutateur de langue sur les téléphones.
• Captures d'écran de chaque section à 1440×900 et 390×844 (voir scripts/screenshots.mjs).