À propos de ce modèle
Avant toute reconstruction de section hero pour un produit de santé ou de bien-être, lisez Wellness Hero, qui publie ensemble la composition et la spécification. La page est composée en Inter, les corps étant fixés dans le brief. La fiche nomme la stack qui a produit la page (React et Tailwind CSS) au lieu de la passer sous silence. Servez-vous-en comme référence quand vous construisez un design de section hero pour un produit de santé ou de bien-être et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Empruntez la structure de section hero telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un cadre 640x468.
- Équipes produit qui rédigent leurs propres textes de Section hero et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Wellness Hero.
Ce qui est inclus
- En haut, marque, liens et action unique. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Inter pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 640x468 sans fond propre, la vidéo court donc bord à bord en dessous. Une seule action par barre.
- Une navigation sans fond. La section active se signale par la graisse, pas par une pastille ni un soulignement. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Le corps display porte le ton. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. Les chiffres partagent la fonte d’interface, statistiques et libellés appartiennent donc au même système.
- Un badge au-dessus de la ligne de flottaison. Un badge, un message. La pastille se place au-dessus du titre en Inter au plus petit palier, et rien d’autre ne vient concurrencer cette position. La pastille occupe le plus petit palier du brief, elle se lit donc comme un libellé et non comme un second titre. Retirez-le quand l’annonce a vieilli.
Animation et interaction
Statique par choix
Le brief laisse l’animation de côté et laisse la mise en page en 640x468 porter la page, les états de survol et d’appui étant les seuls changements. Le mouvement est traité comme un retour d’information et non comme une décoration.
Une animation qui reste discrète
Celle-ci est livrée comme une composition fixe en 640x468, donc la hiérarchie doit tenir sans animation, et elle tient.
Lire Wellness Hero comme une spécification
Chaque relation de cette page est une valeur vérifiable, un cadre 640x468. C’est ce qui rend Wellness Hero reconstructible et pas seulement reproductible. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’ordre de section hero
Une mise en page pilotée par les fonctionnalités énumère ce que fait le produit, celle-ci conduit le lecteur vers une seule décision. Le trajet se voit dans la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond et dans l’espacement réglé par un cadre 640x468. Un lecteur santé reçoit l’offre avant les options.
Adapter section hero à votre marque
La composition est la partie réutilisable, le sujet vous appartient. Gardez un cadre 640x468 et remplacez les mots, les médias et les signes de marque. Une autre marque peut réutiliser tout le cadre.
Questions fréquentes
Que faire du brief de Wellness Hero une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 4 719 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que contient réellement le brief derrière Wellness Hero?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 640x468, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Wellness Hero dépend de React et Tailwind CSS?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour React et Tailwind CSS, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
