À propos de ce modèle
Subscription Agency est un exemple de section hero agence, construit à partir d’un seul brief écrit, et cette page documente ce brief. La palette se limite à #FFFFFF en fond, #0A0A0A pour le texte et vert #17C964 pour les accents, et la typographie est Inter. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se limite à 0.4s de transitions et un fond vidéo en boucle. Gardez-la ouverte pendant la rédaction, car le brief de 6 172 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les chefs de produit qui doivent chiffrer la reconstruction liront un cadre 1476x1080 comme le périmètre du travail.
- Partez de un corps display fixe de 82px et des pas d’espacement de 14px et laissez la palette suivre, car ce sont les espacements qui font lire ce design de section hero.
- Des responsables marketing produit qui ont besoin qu’une section hero reste lisible avec 6,3s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Repli des liens à une largeur. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #17C964, le tout au plus petit corps de l’échelle du brief. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #17C964 est le seul élément de la barre à porter du gras.
- Les pas d’espacement sont cités. Chaque mesure du brief est un nombre que vous pouvez remesurer, un corps display fixe de 82px, des pas d’espacement de 14px et des transitions de 0.4s. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire. Remplacez la fonte ou le texte, pas l’échelle.
- La vidéo est le fond, pas un panneau. Le média fait un travail d’ambiance et non de récit, une seule boucle de 6,3s en 1476x1080 derrière tout le reste. Exportez en 1476x1080 ou plus large et le recadrage en cover continue de fonctionner.
- Un bandeau de nav volontairement fin. Dessinez l’état replié avant d’ajouter un sixième lien. La référence a été capturée en 1476x1080.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 6,3s en 1476x1080 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.
Le timing reste dans le brief
Les contrôles répondent en 0.4s, assez vite pour que la page réagisse dès qu’on la touche, et non après. L’easing est spécifié avec la durée (0.4s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Lire Subscription Agency comme une spécification
La typographie est le premier chiffre, un corps display fixe de 82px et des pas d’espacement de 14px. 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.
L’ordre de section hero
Le compromis demande de la patience, car la page retient le détail qu’une grille balayable livrerait tout de suite. Ce qu’elle gagne, c’est un premier écran où l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et le pied de page ne prête pas à confusion. Un lecteur agence reçoit l’offre avant les options.
Ce qui bouge dans Subscription Agency
Vous pourriez poser une bibliothèque de presets sur cette composition, elle paraîtrait plus chargée, pas meilleure. Le brief garde 0.4s de transitions, une boucle média de 6,3s et des états de survol et de clic et dépense le budget là. Rien ne s’anime pour lui-même dans le design de section hero.
Questions fréquentes
Que recevez-vous en copiant le brief de Subscription Agency?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1476x1080, 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 Subscription Agency?
La fiche indique React et Tailwind CSS pour la provenance, parce que Subscription Agency 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.
Qu’est-ce qui déclenche les animations de Subscription Agency?
Les transitions sont rattachées à des états de l’interface plutôt qu’à une chronologie de scroll, et elles se résolvent dans la plage 0.4s. Le brief en consigne les valeurs pour qu’un portage n’ait pas à les deviner.
