À propos de ce modèle
La capture de Velora Hero Section a été faite en 1500x1080 et conservée comme spécification, pas comme image de galerie. « Rent Your Dream Luxury Car Today » est la ligne que la mise en page doit porter. La palette repose sur noir #0A0A0B en fond et blanc #FFFFFF pour le texte, et la page est composée en Archivo. La référence est construite avec un seul fichier HTML autonome, et les décisions de mise en page sont énoncées indépendamment de cette stack. La page s’en tient à un fond vidéo en boucle. Prenez-la lorsque l’ordre de section hero doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Toute personne qui utilise un générateur IA et veut un brief contenant déjà un seul fichier HTML autonome au lieu de laisser le modèle décider.
- Les développeurs front-end qui doivent livrer ce type de page en production utiliseront un seul fichier HTML autonome comme implémentation de référence.
- Ce design de section hero sert aux designers qui doivent transmettre à un ingénieur un build en un seul fichier HTML autonome et veulent l’animation écrite noir sur blanc.
Ce qui est inclus
- Une navigation sur une seule ligne. La navigation tient sur une seule rangée, sans second niveau en dessous. La barre se pose sur la composition 1500x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Une seule échelle, texte et cadre. Le brief fixe des sections de 100vh et des pas d’espacement de 56px et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. La liste est assez courte pour être vérifiée élément par élément.
- Les libellés sous les chiffres. Les chiffres sont composés comme du texte et non dans une carte, avec Archivo au corps display et des libellés un palier en dessous. Les libellés sont composés à une seule taille, un libellé long ne change donc pas la hauteur de la rangée. Donnez à chaque chiffre un libellé court.
- Rangée du haut, une action. Le menu mobile appartient au brief, l’état replié est donc dessiné plutôt qu’improvisé. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
Animation et interaction
La boucle fait l’ambiance
Le clip de fond tourne 4,9s en 1500x1080 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction.
Presque aucune animation
Celle-ci est livrée comme une composition fixe en 1500x1080, donc la hiérarchie doit tenir sans animation, et elle tient. Le brief ne contient aucune bibliothèque d’animation, ce qui garde la reconstruction légère.
Par où commencer dans Velora Hero Section
Commencez par le texte, pas par la couleur. Réécrivez « Rent Your Dream Luxury Car Today » en une phrase sur votre produit, puis composez-la en Archivo au corps utilisé dans le brief. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
Lire Velora Hero Section comme une spécification
Comparez avec un template qui traite ses espacements comme une préférence. Ici, les mêmes valeurs sont nommées (des sections de 100vh et des pas d’espacement de 56px), donc une modification les respecte ou casse visiblement la composition. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’ordre de section hero
S’engager sur un seul parcours de lecture ferme les autres. Le brief l’accepte, fige la navigation, le titre, la ligne de statistiques et le clip de fond en place et dépense des sections de 100vh et des pas d’espacement de 56px pour rendre le trajet évident. Un lecteur voyage reçoit l’offre avant les options.
Questions fréquentes
Faut-il un seul fichier HTML autonome pour reconstruire Velora Hero Section?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que Velora Hero Section 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.
Pourquoi le prompt de Velora Hero Section n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 3 216 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 Velora Hero Section?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1500x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
