Compétence Page d'Atterrissage Glassmorphism
Produire une page d'atterrissage monofichier dans le style glassmorphism, construite avec les classes utilitaires Tailwind. L'ensemble repose sur une règle : le flou n'est visible que lorsque quelque chose de coloré se trouve derrière — chaque panneau de verre flotte donc sur un champ de dégradé, jamais sur un fond blanc uni.
La recette du verre
Une recette de panneau partagée, appliquée à chaque surface :
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
Règles de superposition :
- L'arrière-plan de la page est un dégradé vif (deux ou trois teintes). Les panneaux sont la seule couche translucide par-dessus.
- Une teinte d'accent pilote les dégradés et les actions principales ; gardez le reste neutre.
- Le texte sur le verre est blanc à 90–100 % d'opacité pour les titres et 60–70 % pour le corps ; ne placez jamais de gris à faible contraste sur un panneau de verre clair.
- Ajoutez une bordure de 1 px
border-white/20à chaque panneau — c'est ce qui fait que le verre se lit comme une feuille physique plutôt qu'un rectangle flou. - Arrondissez généreusement les coins (
rounded-2xl/rounded-3xl) ; le verre se perçoit comme doux, pas angulaire.
Variations de couleurs
Livrez les quatre variations ci-dessous en tant qu'ensemble sélectionnable ; l'exemple les expose sous forme de rangée de puces thématiques qui échangent le champ de dégradé et l'accent en direct.
| Variation | Champ de dégradé | Accent |
|---|---|---|
| aurore | violet → rose → ambre | #7C3AED |
| océan | ciel → cyan → indigo | #0EA5E9 |
| braise | rose → orange → jaune | #F43F5E |
| forêt | émeraude → sarcelle → citron vert | #10B981 |
Flux de travail
- Lisez le DESIGN.md actif (injecté ci-dessus). Là où il définit la couleur et la typographie, utilisez ces jetons pour le texte et l'action principale ; la recette du verre et le dégradé sont la propre contribution de ce style.
- Nommez le produit et la promesse à partir du brief. Un contenu réel uniquement.
- Mise en page : navigation en verre fixe, héros avec un H1 + un paragraphe + CTA sur le dégradé, une rangée de variations thématiques, une grille 3 colonnes de cartes de fonctionnalités en verre, un panneau de témoignage en verre, et un CTA de clôture.
- Tenez le niveau de qualité : un seul H1 ; le CTA principal utilise l'accent ; le texte du corps sur verre reste >= 4,5:1 ; les anneaux de focus sont visibles sur une surface translucide ; la mise en page se réduit à une seule colonne en dessous de 768 px.
- Produisez un
index.htmlautonome. Tailwind est chargé via le Play CDN pour le prototype ; la sortie de production devrait compiler Tailwind à la place.
Anti-patrons
- Panneaux de verre sur un fond blanc uni et presque blanc (le flou disparaît).
- Plus de deux teintes d'accent à l'écran en même temps.
- Texte flouté, ou empilement de verre sur verre jusqu'à ce que le contraste soit perdu.
- Panneaux givrés avec des coins carrés et nets.