À propos de ce modèle
Avant toute reconstruction de section hero pour une agence ou un studio, lisez Portiva Hero, qui publie ensemble la composition et la spécification. Elle ouvre sur « Less complexity, more impact in every project » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette se limite à sarcelle #087573 en fond, blanc #D1E5E7 pour le texte et orange #C25E2E pour les accents, et la typographie est Inter. L’ensemble est livré en un seul fichier HTML autonome, ce qui permet de transposer un design de section hero dans un projet sans passation de design. L’animation se limite à 120ms de transitions et un fond vidéo en boucle. C’est la référence qu’il faut pour un design de section hero destiné à une agence ou un studio, quand le premier écran doit sembler intentionnel.
Conçu pour
- Les ingénieurs qui veulent que ce design de section hero tienne sur une connexion lente utiliseront 1466x1080 et l’échelle typographique comme budget de poids.
- Cette base est prévue pour un designer qui arrive sur un projet déjà livré en un seul fichier HTML autonome et qui n’a que les textes à remplacer.
- Équipes qui reprennent un design de section hero agence repéré chez un concurrent et veulent un seul fichier HTML autonome dans le brief avant que quiconque choisisse un framework.
Ce qui est inclus
- Une navigation sur une seule ligne. La navigation est une bande fine et non un bandeau, avec le nom de marque à gauche, les liens vers le centre droit et une action en #C25E2E, le tout posé en tête de section hero, sans fond propre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #C25E2E est le seul élément de la barre à porter du gras.
- Les pas d’espacement sont cités. La mise en page travaille sur des valeurs absolues plutôt que sur des ratios (des pas d’espacement de 62px et des transitions de 120ms). Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu.
- Un média sans surcouche. Un seul fichier de 4,5s porte tout le premier écran, et la page n’a aucun second média à synchroniser. La boucle est assez courte (4,5s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1466x1080 ou plus large pour garder un cadrage honnête.
- L’échelle est le style. 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 paliers de taille sont des valeurs fixes, c’est ce qui permet de changer de fonte en gardant la même hiérarchie.
Animation et interaction
Le timing reste dans le brief
Les changements d’état sont fixés à 120ms, donc le retour des contrôles est une valeur de design et non un défaut du navigateur. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez. Reprenez ces durées dans votre intégration.
Une boucle, pas une timeline
Le mouvement d’ambiance vient de la boucle de 4,5s en 1466x1080 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
L’ordre de section hero
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place la navigation, le badge d’annonce, la grille de cartes et le clip de fond dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur agence reçoit l’offre avant les options.
Les chiffres derrière section hero
La page contient plus de chiffres qu’elle n’en a l’air, et une reconstruction doit garder des pas d’espacement de 62px et des transitions de 120ms en priorité, le reste peut bouger. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Le réagencement de section hero
La mise en page étroite est conçue, pas héritée, et la hiérarchie survit à la réorganisation, la navigation se replie en menu mobile à chaque largeur. La réorganisation garde l’action accessible à chaque largeur.
Questions fréquentes
Quelle est la longueur du prompt derrière Portiva Hero?
Comptez 2 639 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 Portiva Hero avec une autre stack?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Portiva 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 Portiva 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 2 639 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
