À propos de ce modèle
Avant toute reconstruction de section hero pour un produit IA ou SaaS, lisez Zyphor, qui publie ensemble la composition et la spécification. Elle ouvre sur « Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette est bleu profond #0B0C10 en fond, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 1930x1400 pour que le cadre soit fixé avant la première ligne de code. L’animation se cantonne à un fond vidéo en boucle. Traitez-la comme le brief de section hero pour un produit IA ou SaaS, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Ce design est taillé pour les agences qui facturent à la série et veulent valider des pas d’espacement de 20px avant la première.
- Ce design de section hero sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 7,2s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 3 562 caractères comme point de départ.
Ce qui est inclus
- La barre partage la grille. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Inter pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 1930x1400 sans fond propre, la vidéo court donc bord à bord en dessous. Dessinez l’état replié avant d’ajouter un sixième lien.
- Les chiffres portés jusqu’au build. La liste reste courte (des pas d’espacement de 20px), c’est pourquoi tout le système se vérifie à la main. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- Un bandeau de nav volontairement fin. Les libellés sont assez courts pour tenir sur une ligne à toutes les largeurs couvertes par le brief. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Rien n’est hérité ici. Les espacements sont cités de la même façon (des pas d’espacement de 20px), et non comme une échelle qui grandit toute seule.
Animation et interaction
Du survol, mais avec parcimonie
Le retour se limite aux contrôles (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc le reste de la mise en page est une composition fixe. Les états viennent de la palette de la page et non d’un défaut de composant. Gardez la couche interactive réduite.
Une boucle, pas une timeline
Le mouvement d’ambiance vient de la boucle de 7,2s en 1930x1400 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.
Lire Zyphor comme une spécification
Ici, le design de section hero est mesuré plutôt qu’estimé à l’œil, car les valeurs de des pas d’espacement de 20px viennent du brief et la mise en page s’aligne sur ces pas au lieu d’être ajustée au jugé. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Le réagencement de section hero
Responsive signifie ici que l’échelle change et que la séquence non, la navigation se replie en menu mobile, et l’ordre de lecture reste là où le brief l’a placé. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur.
L’ordre de section hero
Un écran, une action, et la navigation et le clip de fond entre les deux. Le brief fixe cet ordre au lieu de confier le premier écran à une pile de sections. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Le prompt de Zyphor 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 1930x1400, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de section hero de Zyphor avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Zyphor 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 publier une page reconstruite d’après Zyphor 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 1930x1400.
