À propos de ce modèle
FAQ CTA est une référence de travail pour un produit de santé ou de bien-être, un exemple de bloc CTA entièrement mesuré et prêt à reproduire. « Send Money Worldwide at the Best Rates » est la ligne que la mise en page doit porter. La palette repose sur blanc #F0F0F0 en fond et rouge vif #FF4B2B pour les accents, et la page est composée en Inter. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. La page s’en tient à 6.5s de transitions. Empruntez la structure et pas le sujet, car les valeurs de bloc CTA passent à votre marque sans modification.
Conçu pour
- Ce design de bloc CTA est fait pour les agences qui ont besoin que le cadre 640x468 survive à trois séries de retours client.
- Cette base est calibrée pour un fondateur seul qui livre un design de bloc CTA pour un produit de santé ou de bien-être, sans design system derrière.
- Quiconque briefe un modèle sur un design de bloc CTA utilisera le prompt de 9 456 caractères comme point de départ.
Ce qui est inclus
- Une barre de navigation discrète. La rangée concentre son contraste sur un seul élément, l’action en #FF4B2B, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #FF4B2B est le seul élément de la barre à porter du gras.
- Les tailles sont dans le brief, pas dans une échelle. Rien ici n’est estimé à l’œil. La spécification fixe des pas d’espacement de 10px et des transitions de 6.5s, 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.
- La typographie fait la hiérarchie. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. La fonte display n’est employée qu’à une seule taille, elle n’entre donc jamais en concurrence avec elle-même.
- Une ligne, aucun tiroir. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre. La référence a été capturée en 640x468.
Animation et interaction
Rendu, pas illustré
Un canvas WebGL donne sa profondeur à la page, et la mise en page autour reste plate pour que le rendu soit le seul élément qui demande l’attention. L’interface autour reste plate, ce qui laisse le rendu porter la profondeur.
Le survol là où il sert
Le retour se limite aux contrôles (des états de survol sur les boutons et les liens plutôt que sur chaque carte et des onglets ou un accordéon qui échangent le contenu sur place), donc le reste de la mise en page est une composition fixe. Rien sur la page n’ouvre de modale ni ne détourne le scroll, les interactions restent locales à l’élément. N’animez pas la mise en page au survol.
Adapter bloc CTA à votre marque
Commencez par la promesse, pas par la décoration. Réécrivez « Send Money Worldwide at the Best Rates » en une phrase qui dit ce que vous faites, puis composez-la en Inter au corps display du brief. Remplacez rouge vif #FF4B2B par votre propre accent et vérifiez-le contre blanc #F0F0F0 avant de toucher au reste. Réécrivez le texte et les médias avant de recolorer quoi que ce soit.
Le réagencement de bloc CTA
Le coût d’une échelle fluide est un contrôle moindre des tailles exactes. En échange, la ligne d’affichage reste proportionnée, et c’est pourquoi un clamp entre 15px et 10px figure dans le brief. La mise en page étroite est une décision et non un écrasement, et la hiérarchie y survit.
Ce qui fonctionne dans bloc CTA
Là où un template remplit le premier écran de modules, le design de bloc CTA se sert de la navigation, la ligne de statistiques, la grille de cartes, la liste de fonctionnalités et le formulaire et s’arrête. La différence se voit dans des pas d’espacement de 10px et des transitions de 6.5s, rien n’est gonflé pour occuper l’espace. FAQ CTA énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Le prompt de FAQ CTA est-il une spécification aboutie ou un simple point de départ?
Comptez 9 456 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 FAQ CTA dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que FAQ CTA 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.
Qu’est-ce qui déclenche les animations de FAQ CTA?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 6.5s. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
