À propos de ce modèle
Alertix donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. « Stay Ahead With *Cutting-Edge* » est la ligne que la mise en page doit porter. Toute la page repose sur bleu profond #0A0F14 en fond, sarcelle sourd #C3DFE8 pour le texte et bleu #1D1D6D pour les accents. 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 à un fond vidéo en boucle. Si vous préparez un brief pour section hero SaaS, partez de cette composition et remplacez le sujet.
Conçu pour
- Équipes internes qui étendent ce design de section hero et ont besoin de retrouver des pas d’espacement de 120px à l’identique dans les nouveaux blocs.
- Les fondateurs qui briefent une agence utiliseront le cadre 1932x1400 comme critère de recette pour la première série.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 3 245 caractères comme point de départ.
Ce qui est inclus
- Une barre sans superflu. La barre porte le nom de marque, les liens de la section et un bouton en #1D1D6D, mesurée à des pas d’espacement de 120px pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #1D1D6D est le seul élément de la barre à porter du gras.
- La vidéo est le fond, pas un panneau. Le média est un seul clip de 7,9s recadré en cover dans le cadre 1932x1400, il ne laisse donc jamais de bandes noires, quelle que soit la largeur. La boucle est assez courte (7,9s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1932x1400 ou plus large pour garder un cadrage honnête.
- Repli des liens à une largeur. La barre se pose sur la composition 1932x1400 sans fond propre, la vidéo court donc bord à bord en dessous.
- Mesuré contre le viewport. Le brief fixe des pas d’espacement de 120px et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 7,9s en 1932x1400 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 assez court pour boucler sans couture visible, ce qui compte plus que sa résolution.
Statique par choix
Il n’y a aucune bibliothèque de scroll ici, la composition en 1932x1400 reste immobile et seuls les éléments qui vous répondent bougent. Le brief ne contient aucune bibliothèque d’animation, ce qui garde la reconstruction légère. Aucune timeline de scroll nécessaire.
Adapter section hero à votre marque
S’il ne vous reste qu’un après-midi, changez le titre et le libellé d’action, ne touchez pas à des pas d’espacement de 120px, et vous avez une page qui semble voulue. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Le réagencement de section hero
Le design de section hero est composé en 1932x1400 puis recomposé pour les largeurs étroites, la navigation se replie en menu mobile, pour que la version téléphone soit une décision et non un écrasement. La version mobile est une décision, pas un repli.
L’ordre de section hero
L’attention est canalisée plutôt que dispersée. La page le dit sans détour, « Stay Ahead With *Cutting-Edge* ». L’œil se pose d’abord sur la ligne display, puis sur le texte de soutien, puis sur l’action. Cette séquence est le design. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Le prompt de Alertix est-il une spécification aboutie ou un simple point de départ?
Comptez 3 245 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.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Alertix 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.
Puis-je utiliser Alertix dans un projet client?
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 1932x1400.
