cskwork/landing-page-skill

Constructeur de Pages d'Atterrissage

Aperçu

Un système de conception complet + une bibliothèque de composants pour créer de magnifiques pages d'atterrissage interactives en HTML/CSS/JS pur — sans framework, sans étape de build. Livré sous forme de tokens de design CSS réutilisables, de motifs d'interaction JavaScript et de modèles de composants HTML.

Principe fondamental : Copiez les fichiers du système de conception, assemblez les sections à partir des modèles de composants, personnalisez les tokens. Tout fonctionne sans aucune dépendance (optionnel : Google Fonts CDN).

Quand l'utiliser

• Création d'une page produit, d'un site marketing ou d'une vitrine
• Création de sites de documentation avec éléments interactifs
• Déploiement sur GitHub Pages, Netlify ou tout hébergeur statique
• Besoin de basculement de thème sombre/clair, d'animations de défilement, d'info-bulles
• Besoin d'un design soigné sans React/Vue/outils de build

Quand NE PAS l'utiliser :

• Applications web complexes avec gestion d'état (utiliser un framework)
• Pages rendues par le serveur (ceci est uniquement statique)
• Tableaux de bord d'administration internes (trop lourd)

Référence Rapide

Composant	Fichier	Classes clés
Tokens de design	design-system/design-system.css	:root variables, --accent-*, --gradient-*
Barre de navigation	components-reference.html	.navbar, .nav-links, .lang-toggle
Hero	components-reference.html	.hero, .hero-title, .gradient-text, .hero-stats
Cartes de fonctionnalités	components-reference.html	.feature-grid, .feature-card, .reveal
Blocs de code	components-reference.html	.code-block, .code-header, .code-copy
Info-bulles	components-reference.html	.tooltip-trigger, [data-tooltip]
Onglets	components-reference.html	.tab-list, .tab-btn, .tab-panel
Basculement de thème	design-system.css + app-template.js	[data-theme], .icon-btn[data-toggle="theme"]
Boutons de langue	design-system.css	.lang-toggle, .lang-btn[data-lang]
Révélation au défilement	app-template.js	.reveal → .visible via IntersectionObserver
i18n	app-template.js	[data-i18n] + dictionnaire de traductions

Système de Conception

design-system.css livre l'ensemble complet des tokens pour les deux thèmes. Ajustez-les pour votre marque ; lisez le fichier pour le reste.

Lisez design-system/design-system.css pour les tokens sombre/clair maintenus ; ajustez-les à la marque demandée au lieu de maintenir une deuxième liste de tokens ici.

Fichiers

Fichier	Objectif
design-system/design-system.css	CSS complet : tokens, barre de navigation, hero, cartes, blocs de code, info-bulles, onglets, pied de page, responsive
design-system/app-template.js	JS : révélation au défilement, défilement de la barre de navigation, copie de code, onglets, basculement de thème, menu mobile, i18n
design-system/components-reference.html	Chaque composant avec des extraits HTML copiables
templates/landing-template.html	Modèle de démarrage complet — maquette avec toutes les sections

Motif d'Info-bulle

Les info-bulles fonctionnent sur ordinateur (survol) et mobile/tactile (tap pour basculer). Nécessite app-template.js pour la prise en charge tactile.

<!-- S'ouvre vers le haut (par défaut) -->
<span class="tooltip-trigger" data-tooltip="Explication utile ici">
    Survolez-moi
</span>

<!-- S'ouvre vers le bas (pour les déclencheurs près du haut de la page) -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="Explication">
    Survolez-moi
</span>

<!-- Variante large pour texte plus long (se rétracte sur mobile) -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="Explication plus longue sur plusieurs lignes...">
    Survolez-moi
</span>

Ordinateur : Le CSS :hover affiche l'info-bulle. Mobile/tablette : Le JS ajoute un basculement par tap avec fermeture en cliquant à l'extérieur. Clavier : Tab pour focus, Entrée/Espace pour basculer, Échap pour fermer.

Les chemins tactiles et clavier fonctionnent en basculant .tooltip-active sur le déclencheur. Le CSS d'info-bulle écrit à la main doit styliser .tooltip-trigger:hover::after et .tooltip-trigger.tooltip-active::after ensemble, sinon le tap ne fait rien — lisez la section 10 (Info-bulles) de design-system/design-system.css avant d'écrire le vôtre.

Empilement : Les info-bulles s'échappent de leur conteneur via z-index:10 sur .feature-card:hover, .code-block:hover et .callout:hover. Conservez ces règles et masquez les coins arrondis avec border-radius sur l'élément enfant (comme le fait .feature-card::before) — overflow:hidden sur le conteneur coupe l'info-bulle et aucun z-index ne peut la sauver.

Flux de Travail de Construction

1. Copiez design-system.css, app-template.js et templates/landing-template.html (renommé index.html) dans votre projet — tous les trois côte à côte, car le modèle les lie par leur nom de fichier nu
2. Ajoutez des sections à partir de components-reference.html (fonctionnalités, blocs de code, onglets, encadrés, pied de page) dans la maquette
3. Personnalisez les tokens dans :root (couleurs, polices, dégradés)
4. Ajoutez le contenu au HTML, reliez les clés data-i18n si multilingue
5. Testez localement — ouvrez index.html dans un navigateur et parcourez chaque ligne des Erreurs Courantes ci-dessous ; terminé lorsque chaque ligne est vérifiée
6. Livrez les fichiers vérifiés. Déployez uniquement sur demande, en utilisant l'hôte et le flux de travail de dépôt convenus.

Déploiement sur GitHub Pages

Lorsque la publication est demandée, inspectez le dépôt existant et la configuration Pages, préparez les fichiers révisés et suivez son flux de travail de déploiement. Créez un dépôt public ou modifiez la visibilité uniquement sur autorisation. Étapez les fichiers de sortie nommés, en préservant le travail non lié. Vérifiez la révision déployée et le contenu en direct avant de signaler une URL publique ; un simple HTTP 200 n'est pas une preuve visuelle.

Erreurs Courantes

Erreur	Correctif
Pas de balise meta viewport	Ajoutez <meta name="viewport" content="width=device-width, initial-scale=1.0">
[data-theme] manquant sur <html>	Définissez <html data-theme="dark"> pour le thème par défaut
Éléments de révélation invisibles	Assurez-vous que app-template.js est chargé et que .reveal a une logique .visible correspondante
Révélation dans un panneau d'onglets caché	Le changement d'onglet révèle automatiquement ; ou retirez .reveal du contenu de l'onglet
Info-bulles coupées en haut	Utilisez la variante .tooltip-bottom pour les déclencheurs près du haut de la fenêtre
Flash du thème au chargement	<script> en ligne dans <head> lisant localStorage.getItem('lp-theme') dans data-theme avant le rendu — déjà dans templates/landing-template.html
Contenu sans JS invisible	class="no-js" sur <html> + .no-js .reveal { opacity:1 } de secours
Copie de code ne fonctionne pas	Vérifiez que le bouton .code-copy existe et que le JS est chargé
Flash de contenu non stylisé	Mettez la <link> de police dans <head> avant la feuille de style
Styles de focus manquants	Tous les éléments interactifs ont un contour :focus-visible intégré

Accessibilité

Le système de conception inclut :

• Contours :focus-visible sur tous les éléments interactifs (navigation au clavier)
• Media query prefers-reduced-motion (désactive les animations)
• Secours .no-js (contenu visible sans JavaScript)
• Étiquettes ARIA sur les boutons icône uniquement
• Structure HTML sémantique (hiérarchie de titres appropriée)
• Tokens de contraste de thème ; vérifiez le contraste après personnalisation avant de revendiquer la conformité WCAG