À propos de ce modèle
Lisez Infrastructure comme une spécification de section hero, dont les valeurs ont été écrites avant la construction de la page. Le titre affiché est « Ready to elevate your digital infrastructure? », et le reste de section hero s’organise autour de lui. La palette est indigo profond #010002 en fond, blanc #DAD6DB pour le texte et bleu #0F2F65 pour les accents. La livraison est en React et Tailwind CSS, capturée en 2076x1498 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 4s de transitions et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 2 467 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 8s de vidéo en boucle.
- 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 Infrastructure.
- Ce design est fait pour les designers qui préfèrent retoucher #0F2F65 plutôt que de reconstruire tout le design de section hero depuis la grille.
Ce qui est inclus
- La barre partage la grille. La rangée concentre son contraste sur un seul élément, l’action en #0F2F65, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #0F2F65 est le seul élément de la barre à porter du gras.
- Les chiffres portés jusqu’au build. Chaque mesure du brief est un nombre que vous pouvez remesurer, des pas d’espacement de 10px et des transitions de 4s. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- Le média derrière la typographie. La vidéo occupe le calque inférieur de la composition 2076x1498, la typographie est disposée au-dessus, sans rien entre les deux. Exportez en 2076x1498 ou plus large et le recadrage en cover continue de fonctionner.
- Une barre sans superflu. La barre se pose sur la composition 2076x1498 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Le timing reste dans le brief
Le brief fixe la transition à 4s, donc une reconstruction ne peut pas lui substituer un défaut plus lent. L’easing est spécifié avec la durée (4s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance vient de la boucle de 8s en 2076x1498 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention.
Le réagencement de section hero
On ne règle pas un écran étroit en le réduisant. Ce brief traite le changement dans la typographie et la navigation, l’échelle est fluide plutôt que par paliers. C’est la hiérarchie qui survit à la réorganisation.
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 boucle de 8s en 2076x1498. C’est ce placement qui garde le texte lisible. Le cadre et l’échelle sont ce qu’il faut laisser tranquilles.
Les chiffres derrière section hero
La typographie est le premier chiffre, des pas d’espacement de 10px et des transitions de 4s. Les espacements en découlent, et tout le reste de la page se positionne par rapport à ces deux valeurs. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Le prompt de Infrastructure 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 2076x1498, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Faut-il React et Tailwind CSS pour reconstruire Infrastructure?
La fiche indique React et Tailwind CSS pour la provenance, parce que Infrastructure 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.
D’où vient le design de Infrastructure?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 2076x1498.
