À propos de ce modèle
Convix Software est un design de section hero pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. La couleur se réduit à blanc #EDEDED en fond, bleu profond #0B0F1A pour le texte et rouge vif #EF4D23 pour les accents, composée en Inter. La construction repose sur React et Lucide icons. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Gardez-la ouverte pendant la rédaction, car le brief de 5 587 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si vous briefez un modèle plutôt qu’un designer, partez de la structure de section hero et laissez le prompt porter un cadre 800x578.
- Si l’animation doit sauter, le design de section hero reste lisible, un corps display fixe de 22px et des sections de 100vh assurant la hiérarchie.
- 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 Convix Software.
Ce qui est inclus
- Un bandeau de nav volontairement fin. La barre porte le nom de marque, les liens de la section et un bouton en #EF4D23, mesurée à un corps display fixe de 22px et des sections de 100vh pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #EF4D23 est le seul élément de la barre à porter du gras. Testez la barre sur vos propres médias avant de lui donner un fond.
- Les cartes font la structure. La grille fait la structure, des panneaux de même taille, composés en Inter, disposés pour que l’œil aille vers la droite plutôt que vers le bas. Chaque panneau associe une idée à une icône, le parcours de lecture reste donc horizontal.
- Le comportement est défini par largeur. Le haut de l’échelle est fluide (un clamp entre 32px et 13px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur. Gardez la hiérarchie, changez l’échelle.
- Les liens avant l’action. La barre se pose sur la composition 800x578 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Statique par choix
Celle-ci est livrée comme une composition fixe en 800x578, donc la hiérarchie doit tenir sans animation, et elle tient. Le mouvement est traité comme un retour d’information et non comme une décoration.
Une animation qui reste discrète
Le brief laisse l’animation de côté et laisse la mise en page en 800x578 porter la page, les états de survol et d’appui étant les seuls changements. Aucune timeline de scroll nécessaire.
Les timings derrière section hero
Comptez les éléments animés, la liste est courte, des états de survol et de clic. Rien ne s’anime pour lui-même dans le design de section hero.
Adapter section hero à votre marque
La composition est la partie réutilisable, le sujet est le vôtre. Changez le titre, gardez l’échelle typographique (un corps display fixe de 22px) et retestez l’accent #EF4D23 sur vos propres médias. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison. Composez le nouveau texte au même corps display et revérifiez le contraste avant d’ajouter quoi que ce soit.
Les chiffres derrière section hero
Comparez avec un template qui traite ses espacements comme une préférence. Ici, les mêmes valeurs sont nommées (un corps display fixe de 22px, des sections de 100vh et des pas d’espacement de 13px), 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.
Questions fréquentes
Le prompt de Convix Software est-il une spécification aboutie ou un simple point de départ?
Comptez 5 587 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.
Quelle part de Convix Software dépend de React et Lucide icons?
La référence se trouve avoir été construite en React et Lucide icons, mais ce choix n’engage rien dans la mise en page. Les espacements, la typographie et les valeurs d’animation se transposent dans la stack que vous utilisez déjà.
Puis-je publier une page reconstruite d’après Convix Software sans mentionner la source?
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 800x578.
