À propos de ce modèle
Prosthetics Hero est un exemple de section hero santé, construit à partir d’un seul brief écrit, et cette page documente ce brief. Toute la page repose sur blanc #FDFCFC en fond. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. L’animation se résume à 200ms de transitions. Cette référence s’adresse à un produit de santé ou de bien-être qui veut un premier écran réglé avant le début du build.
Conçu pour
- Ce design de section hero sert aux équipes qui doivent justifier un cadre 640x464 auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Équipes internes qui étendent ce design de section hero et ont besoin de retrouver une typographie de 12px à 14px et des pas d’espacement de 13px à l’identique dans les nouveaux blocs.
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour un produit de santé ou de bien-être, sans design system derrière.
Ce qui est inclus
- Une navigation sans fond. La navigation tient sur une seule rangée, sans second niveau en dessous. La barre se pose sur la composition 640x464 sans fond propre, la vidéo court donc bord à bord en dessous.
- Les pas d’espacement sont cités. Le brief énonce ses tailles à la capture (une typographie de 12px à 14px, des pas d’espacement de 13px et des transitions de 200ms), une reconstruction peut donc être vérifiée au lieu d’être approximée. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme. Vérifiez une reconstruction contre les mêmes chiffres.
- La pastille d’annonce. Une petite pastille se place au-dessus du titre pour une annonce unique, et le brief s’en tient à une seule, parce qu’il s’agit de signaler un mouvement sans transformer le haut de la page en panneau d’affichage. Il est positionné pour que le titre garde le centre de la composition. Un badge, un seul message.
- Rangée du haut, une action. Les états de survol et de focus sont spécifiés pour chaque lien, ce qui évite qu’une barre fine paraisse inerte.
Animation et interaction
Une durée pour les contrôles
Ici, l’animation se mesure en millisecondes, 200ms. C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite.
L’interaction est sur les contrôles
Le retour d’information se limite à des états de survol sur les boutons et les liens plutôt que sur chaque carte, et c’est ce qui évite à un premier écran dense de paraître surchargé. Le retour d’information se limite aux contrôles, donc la composition reste immobile autour d’eux. Vérifiez les états sur un appareil tactile.
Par où commencer dans Prosthetics Hero
Là où un thème vous donne des composants, ce brief vous donne une composition, une typographie de 12px à 14px, des pas d’espacement de 13px et des transitions de 200ms et un cadre média, le sujet restant à votre charge. La composition est la partie réutilisable, et elle survit à une autre marque.
Lire Prosthetics Hero comme une spécification
Le brief est une spécification. Il énonce une typographie de 12px à 14px, des pas d’espacement de 13px et des transitions de 200ms et nomme le cadre média en 640x464 avant qu’on dessine quoi que ce soit autour. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Ce qui fonctionne dans section hero
La promesse est faite une fois, à la taille d’affichage. Tout le reste de section hero s’ordonne autour d’elle, la navigation, le titre, le badge d’annonce et le clip de fond, et aucune seconde promesse ne vient disputer la première lecture. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
Questions fréquentes
Le brief de Prosthetics Hero est-il identique au prompt que j’écrirais moi-même?
Tout ce qui est cité sur la page provient du brief capturé de 3 421 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Prosthetics Hero?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 640x464, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire Prosthetics Hero?
La fiche indique React et Tailwind CSS pour la provenance, parce que Prosthetics Hero a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
