À propos de ce modèle
Email Marketing est un exemple de section hero SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. Le titre affiché est « Design Rocket Certificates », et le reste de section hero s’organise autour de lui. La palette est noir #0A0A0A en fond, jaune vif #DCFF00 pour le texte et jaune vif #D8F90A pour les accents, composée en Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 800x702 pour que le cadre soit fixé avant la première ligne de code. Gardez-la ouverte pendant la rédaction, car le brief de 7 972 caractères est la partie qui se transfère à votre page.
Conçu pour
- Si trois personnes doivent modifier ce design de section hero, donnez aux responsables de contenu une typographie de 12px à 58px et des pas d’espacement de 18px plutôt qu’une capture d’écran.
- 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 Email Marketing.
- Fixez #0A0A0A et #D8F90A comme les deux couleurs de marque, puis reconstruisez le design de section hero dans cette limite.
Ce qui est inclus
- Rien n’est hérité ici. Rien ici n’est estimé à l’œil. La spécification fixe une typographie de 12px à 58px et des pas d’espacement de 18px, et le reste de la mise en page découle de ces valeurs. Chaque valeur se vérifie contre le prompt capturé, ce qui rend une reconstruction vérifiable plutôt qu’approximative. Remplacez la fonte ou le texte, pas l’échelle.
- La preuve en haut de l’écran. Une rangée de chiffres se place au-dessus de la ligne de flottaison, composée en Instrument Serif en haut de l’échelle, l’accent #D8F90A réservé aux chiffres qui portent une affirmation. Les chiffres portent l’accent #D8F90A tandis que tout ce qui les entoure reste sur la couleur d’encre. Vérifiez la rangée à la largeur la plus étroite.
- Le balayage prime sur la lecture. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de section hero balayable. L’espacement entre les panneaux tient à une seule valeur, c’est ce qui évite qu’une grille dense ne paraisse surchargée. Gardez une idée par panneau.
- Les pas d’espacement sont cités. Les espacements sont cités de la même façon (une typographie de 12px à 58px et des pas d’espacement de 18px), et non comme une échelle qui grandit toute seule.
Animation et interaction
Le survol là où il sert
Seuls les contrôles réagissent au pointeur (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc la page paraît réactive sans transformer chaque élément en cible. Parce que les états sont simples, ils se portent dans n’importe quel système de composants. Gardez la couche interactive réduite.
Statique par choix
Celle-ci est livrée comme une composition fixe en 800x702, 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. Aucune timeline de scroll nécessaire.
Pourquoi cette composition fonctionne pour SaaS
La plupart des pages SaaS échouent par accumulation, plus de sections, plus de dégradés, plus de promesses. Email Marketing fait l’inverse. « Design Rocket Certificates » fait ce travail dès la première image. La composition reste sur noir #0A0A0A avec jaune vif #D8F90A pour les actions, ce qui suffit à paraître délibérée. Email Marketing énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Le réagencement de section hero
Le brief décrit ce qui change à chaque largeur (l’échelle est fluide plutôt que par paliers), la version mobile est donc une décision et non un écrasement. Le contraste est tenu sur l’accent #D8F90A par-dessus le média, et la vidéo est muette et en lecture inline. La réorganisation garde l’action accessible à chaque largeur.
L’ordre de section hero
Une page de ce type enterre d’habitude l’action sous une grille de fonctionnalités. Celle-ci place le titre, le badge d’annonce, la ligne de statistiques, la grille de cartes et le clip de fond dans une séquence fixe, avec l’action dans le premier écran plutôt qu’après trois écrans de défilement. Un lecteur SaaS reçoit l’offre avant les options.
Questions fréquentes
Le prompt de Email Marketing 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 800x702, 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 Email Marketing avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Email Marketing 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.
Comment gérer les médias de Email Marketing 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 800x702.
