À propos de ce modèle
Adventra est la référence section hero pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Elle ouvre sur « Home, Our Story, FAQ, Policies » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette se limite à noir #303230 en fond et gris #CAC7BD pour le texte, et la typographie est Inter. La fiche nomme la stack qui a produit la page (un seul fichier HTML autonome) au lieu de la passer sous silence. L’animation se résume à un fond vidéo en boucle. Si vous préparez un brief pour section hero agence, partez de cette composition et remplacez le sujet.
Conçu pour
- Si la reconstruction part de un seul fichier HTML autonome, relevez d’abord un corps display fixe de 60px et des sections de 100vh et laissez la palette tranquille jusqu’à ce que la grille tienne.
- Mettez un cadre 1856x1398 dans la note de passation pour que la prochaine reconstruction n’ait pas à reparcourir la page.
- Écrivez votre propre titre, puis reconstruisez ce design de section hero en un seul fichier HTML autonome avec les mesures intactes.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à un corps display fixe de 60px et des sections de 100vh pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 1856x1398 sans fond propre, la vidéo court donc bord à bord en dessous. La barre compte une poignée d’éléments, elle se reconstruit donc sans bibliothèque de composants.
- Repli des liens à une largeur. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Dessinez l’état replié avant d’ajouter un sixième lien.
- Des valeurs vérifiables. Le brief fixe un corps display fixe de 60px, des sections de 100vh et des pas d’espacement de 16px et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. Les espacements sont cités dans les mêmes unités que la typographie, les deux se comparent donc directement.
- L’image d’attente compte. La vidéo en 1856x1398 tourne en boucle 7s derrière le texte, muette et en lecture inline, sans aucun voile entre les deux. Exportez en 1856x1398 ou plus large et le recadrage en cover continue de fonctionner.
Animation et interaction
Une boucle, pas une timeline
Le mouvement d’ambiance est un clip de 7s en 1856x1398, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
Une petite surface interactive
Le retour se limite aux contrôles (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc le reste de la mise en page est une composition fixe. Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse. Si un état ne confirme pas une action, supprimez-le.
Les timings derrière section hero
Comptez les éléments animés, la liste est courte, un titre mot par mot, une boucle média de 7s et des états de survol et de clic. Rien ne s’anime pour lui-même dans le design de section hero.
Adapter section hero à votre marque
Le brief nomme Inter et l’échelle qui l’accompagne. Substituez une police aux mêmes proportions et la composition survit. Votre accent doit passer le même test de contraste que celui de la référence.
Comment Adventra ordonne la première lecture
Vous pourriez mélanger ces blocs, la page se chargerait encore. Elle cesserait en revanche de se lire comme un argument, car ce qui porte la page est l’ordre de la navigation et le clip de fond, réglé par un corps display fixe de 60px et des sections de 100vh. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Quelle part de Adventra dépend de un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Adventra 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.
Comment cette fiche de Adventra est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 3 134 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Adventra est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1856x1398, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
