À propos de ce modèle
Cette fiche présente SkyElite Private Jets en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. Elle ouvre sur « Your dedication deserves recognition » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette est bleu profond #1A2229 en fond, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 1920x1455 pour que le cadre soit fixé avant la première ligne de code. Partez du brief capturé, puis retouchez le contenu de section hero au lieu de repartir de zéro.
Conçu pour
- Équipes d’agence qui défendent un design de section hero pour une marque de voyage et tiennent à citer des sections de 100vh et des pas d’espacement de 12px dans la présentation, pour que le devis tienne encore après la réunion de lancement.
- 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 SkyElite Private Jets.
- Cette base est calibrée pour un fondateur seul qui livre un design de section hero pour une marque de voyage, sans design system derrière.
Ce qui est inclus
- En haut, marque, liens et action unique. Une barre fine se pose en tête de section hero, avec le nom de marque à gauche et les liens composés en Inter, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 1920x1455 sans fond propre, la vidéo court donc bord à bord en dessous.
- Une navigation sur une seule ligne. La rangée est dimensionnée par sa propre typographie, pas par une hauteur d’en-tête fixe. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Les pas d’espacement sont cités. Les valeurs sont la spécification, des sections de 100vh et des pas d’espacement de 12px, relevées sur 1920x1455 et non déduites d’une capture d’écran. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- Des graisses nommées par rôle. Les fontes reçoivent des rôles au lieu d’être mélangées, Inter porte à la fois le display et l’interface. Un changement de fonte reste sûr tant que les tailles et les graisses restent là où le brief les a placées.
Animation et interaction
Les contrôles forment la couche interactive
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. Chaque état ne change qu’une propriété, ce qui garde le retour lisible. Gardez les effets de pointeur sur les contrôles.
Presque aucune animation
Celle-ci est livrée comme une composition fixe en 1920x1455, 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. L’immobilité est un choix valable.
Le réagencement de section hero
Là où un template s’effondre en une seule colonne en espérant que ça tienne, ce brief énonce ce qui se passe (la section est tenue à 100vh et la navigation se replie en menu mobile) et garde l’ordre intact. Les deux états sont décrits dans le même brief.
Adapter section hero à votre marque
Quand vous intégrez vos propres médias, gardez le cadrage et l’ordre des calques. Le média est une image fixe en 1920x1455. C’est ce placement qui garde le texte lisible. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Les chiffres derrière section hero
Une capture d’écran dit à quoi ressemble la page, le brief dit pourquoi, et l’écart entre les deux se comble avec des sections de 100vh et des pas d’espacement de 12px. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Que recevez-vous en copiant le brief de SkyElite Private Jets?
Comptez 2 285 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.
Que faire du brief de SkyElite Private Jets une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 2 285 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que SkyElite Private Jets 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.
