À propos de ce modèle
Cette fiche présente Impact Ventures en section hero, avec le brief qui a produit la page au lieu d’une simple capture d’écran. Elle ouvre sur « We shape digital products that define brands » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La palette se limite à bleu #2D64B0 en fond et blanc #C5D5DE pour le texte, et la typographie est Instrument Serif. La livraison est en React et Tailwind CSS, capturée en 640x472 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 700ms de transitions et cubic-bezier(0.76,0,0.24,1), assez discrète pour que le texte reste au premier plan. Servez-vous-en comme référence quand vous construisez un design de section hero pour un produit fintech et que vous voulez une composition finie plutôt qu’un point de départ.
Conçu pour
- Quiconque briefe un modèle sur un design de section hero utilisera le prompt de 4 400 caractères comme point de départ.
- 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 Impact Ventures.
- Copiez l’entrée en 700ms et la courbe cubic-bezier(0.76,0,0.24,1) à l’identique si vous voulez la même construction à la même vitesse.
Ce qui est inclus
- Rangée du haut, une action. La barre tient sur une rangée de texte et une action, mesurée à des transitions de 700ms et un easing cubic-bezier(0.76,0,0.24,1) pour se lire comme un filet et non comme un bandeau. La barre se pose sur la composition 640x472 sans fond propre, la vidéo court donc bord à bord en dessous.
- La typographie fait le style. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Instrument Serif à un corps display serré, puis une chute nette vers le texte secondaire. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même. Vérifiez l’échelle en niveaux de gris.
- Un pied de page qui porte la marque. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Le nom de marque occupe son propre bloc, ce qui garde lisible une longue liste de liens.
- Une navigation sans fond. Une seule action par barre. La référence a été capturée en 640x472.
Animation et interaction
Le pointeur là où il aide
La couche interactive est petite et prévisible, des états de survol sur les boutons et les liens plutôt que sur chaque carte. Tout le reste ne bouge pas, ce qui garde l’accent sur la composition. Les états viennent de la palette de la page et non d’un défaut de composant.
Tout le budget d’animation
Les timings sont courts et constants (700ms avec cubic-bezier(0.76,0,0.24,1)), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite. Des changements d’état rapides, aucune timeline de scroll.
Ce qui tient la route pour Fintech
Il n’y a qu’une promesse sur cette page, maintenue en place par des transitions de 700ms et un easing cubic-bezier(0.76,0,0.24,1). La page le dit sans détour, « We shape digital products that define brands ». Rien sous la ligne de flottaison n’a à porter l’offre en plus. Elle donne à un lecteur fintech le chemin le plus court vers l’offre.
Comment Impact Ventures ordonne la première lecture
Si votre page ouvre aujourd’hui sur les fonctionnalités, voici l’ordre à copier, la navigation, la ligne de statistiques, la liste de fonctionnalités, le clip de fond et le pied de page devant, le détail d’appui ensuite, et des transitions de 700ms et un easing cubic-bezier(0.76,0,0.24,1) pour régler la distance. Un lecteur fintech reçoit l’offre avant les options.
Le réagencement de section hero
En large, la composition est dense, en étroit, la navigation se replie en menu mobile. Les deux états sont décrits dans le brief. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
Questions fréquentes
Quelle est la longueur du prompt derrière Impact Ventures?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 640x472, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Impact Ventures 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.
Quelle part de Impact Ventures est animée?
Les entrées et les changements d’état se situent dans la plage de 700ms avec cubic-bezier(0.76,0,0.24,1). Ils sont déclenchés par des changements d’état plutôt que par une bibliothèque de scroll, et ils ne retardent jamais la lecture du texte.
