À propos de ce modèle
Avant toute reconstruction de landing page pour un produit fintech, lisez Aurex Finance, qui publie ensemble la composition et la spécification. La couleur se réduit à noir #000000 en fond, blanc #FFFFFF pour le texte et bleu sourd #AFDDFF pour les accents, composée en Manrope. La livraison est en React et Tailwind CSS, capturée en 1920x1410 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à 900ms de transitions, cubic-bezier(0.16, 1, 0.3, 1) et un fond vidéo en boucle. Si vous préparez un brief pour landing page fintech, partez de cette composition et remplacez le sujet.
Conçu pour
- Si l’animation doit sauter, le design de landing page reste lisible, une typographie de 12px à 68px et des pas d’espacement de 20px assurant la hiérarchie.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 6,5s de vidéo en boucle derrière le texte.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 29 337 caractères comme point de départ.
Ce qui est inclus
- En haut, marque, liens et action unique. Les liens tiennent sur une ligne à un seul corps, et l’action en #AFDDFF ferme la rangée à droite, l’œil finit donc là où la navigation s’arrête. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #AFDDFF est le seul élément de la barre à porter du gras.
- Des valeurs vérifiables. Les valeurs sont la spécification, une typographie de 12px à 68px, des pas d’espacement de 20px, des transitions de 900ms et un easing cubic-bezier(0.16, 1, 0.3, 1), relevées sur 1920x1410 et non déduites d’une capture d’écran. Les valeurs étant fixes, une substitution change l’aspect sans changer le rythme. Là où le brief reste muet, il l’est volontairement.
- Le contenu découpé en panneaux. La grille fait l’ordre de lecture à votre place, avec des panneaux de même poids, une idée chacun, composés en Manrope à petite taille pour que la structure reste visible. Les panneaux sont séparés par l’espacement et non par des bordures, ce qui garde la grille silencieuse.
- Repli des liens à une largeur. La barre se pose sur la composition 1920x1410 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
La boucle fait l’ambiance
Le mouvement d’ambiance vient de la boucle de 6,5s en 1920x1410 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis.
Une durée pour les contrôles
Le budget d’animation est faible et explicite, 900ms avec cubic-bezier(0.16, 1, 0.3, 1), appliqué aux changements d’état plutôt qu’aux entrées. Si l’easing change, la durée doit être revue avec lui. Une durée par comportement.
Adapter landing page à votre marque
Si votre marque porte une palette plus lourde, testez-la sur le cadre avant de valider. noir #000000 porte la page, donc un accent plus sombre demande plus de contraste que dans la référence. Réécrivez la ligne affichée avant de toucher à la couleur.
L’argument de landing page
Si cela fonctionne pour un produit fintech, c’est que la page ne demande jamais au lecteur de reconstituer le message. Mise en page, typographie et couleur sont décidées (noir #000000 et bleu sourd #AFDDFF, composées en Manrope), le premier écran se lit donc comme un argument terminé et non comme un tas de pièces. Elle donne à un lecteur fintech le chemin le plus court vers l’offre.
Le réagencement de landing page
La mise en page étroite est conçue, pas héritée, et la hiérarchie survit à la réorganisation, la navigation se replie en menu mobile à chaque largeur. C’est la hiérarchie qui survit à la réorganisation.
Questions fréquentes
Que recevez-vous en copiant le brief de Aurex Finance?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1410, 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 landing page de Aurex Finance avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que Aurex Finance 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 Aurex Finance 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 1920x1410.
