À propos de ce modèle
Wanderful Hero résout le problème de section hero pour une marque de voyage à partir d’un seul brief capturé. La page affiche son propre titre, « Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure », et la composition est construite autour de ces mots exacts. La typographie repose sur Inter, et le brief fixe les corps au lieu de les laisser à une échelle. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Elle est surtout utile quand le texte de section hero Voyage change sans qu’une refonte soit nécessaire.
Conçu pour
- Ce design de section hero sert aux équipes qui doivent justifier un cadre 640x470 auprès de quelqu’un qui n’était pas à la réunion de lancement.
- Des designers qui veulent d’abord les chiffres, une typographie de 15px à 17px et des pas d’espacement de 11px, tous cités depuis le brief.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 4 223 caractères comme point de départ.
Ce qui est inclus
- La barre partage la grille. La navigation tient sur une seule rangée, sans second niveau en dessous. La barre se pose sur la composition 640x470 sans fond propre, la vidéo court donc bord à bord en dessous.
- Chaque mesure est écrite. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (une typographie de 15px à 17px et des pas d’espacement de 11px). Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire. Là où le brief reste muet, il l’est volontairement.
- Les libellés sous les chiffres. La rangée de chiffres est la preuve, avec trois ou quatre valeurs sur une ligne, un petit libellé sous chacune, dans la même Inter que l’interface pour que l’ensemble se lise comme une donnée et non comme un ornement. L’accent est dépensé sur les chiffres qui portent une affirmation, pas sur toute la rangée. Si un chiffre a besoin d’un paragraphe, ce n’est pas une statistique.
- Une navigation sur une seule ligne. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
Animation et interaction
La page s’assemble en avançant
Parallaxe est le seul comportement de scroll de la page, donc l’effet a une place définie dans la composition. La mise en page statique en dessous reste inchangée, ce qui garde la composition lisible même effet désactivé.
L’interaction est sur les contrôles
La couche interactive est petite et prévisible, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Les états interactifs ne déplacent pas la mise en page, donc rien ne saute sous le pointeur. Moins d’états, tous spécifiés.
Adapter section hero à votre marque
Vous n’avez pas besoin de reconstruire pour vous approprier section hero. Remplacez le titre et les médias, gardez l’échelle (une typographie de 15px à 17px et des pas d’espacement de 11px), et la mise en page se lit toujours comme prévu. Réécrivez la ligne affichée avant de toucher à la couleur.
L’ordre de section hero
Le brief fait 4 223 caractères et nomme explicitement l’ordre de lecture, la navigation, le titre, la ligne de statistiques et le clip de fond, avec une typographie de 15px à 17px et des pas d’espacement de 11px entre eux. Un lecteur voyage reçoit l’offre avant les options.
Lire Wanderful Hero comme une spécification
C’est ce qui rend la référence réutilisable, une typographie de 15px à 17px et des pas d’espacement de 11px. Rien n’est laissé à un réglage par défaut, une substitution qui garde ces chiffres garde donc la composition. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Que contient réellement le brief derrière Wanderful Hero?
Comptez 4 223 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Puis-je reconstruire ce type de section hero de Wanderful Hero avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Wanderful 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.
Le brief de Wanderful 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 4 223 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
