À propos de ce modèle
Cortexa FAQ est la référence section FAQ pour un produit IA ou SaaS, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. La page affiche son propre titre, « How do I start the process of buying a home? », et la composition est construite autour de ces mots exacts. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de section FAQ dans un projet sans passation de design. L’animation se résume à 400ms de transitions et un fond vidéo en boucle. C’est la référence qu’il faut pour un design de section FAQ destiné à un produit IA ou SaaS, quand le premier écran doit sembler intentionnel.
Conçu pour
- Ce design de section FAQ est fait pour les agences qui ont besoin que le cadre 1826x1302 survive à trois séries de retours client.
- Ce design de section FAQ sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 0,1s de vidéo en boucle.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de section FAQ comme le motif que toutes les autres pages recopient.
Ce qui est inclus
- Les tailles sont dans le brief, pas dans une échelle. Chaque mesure du brief est un nombre que vous pouvez remesurer, des pas d’espacement de 15px et des transitions de 400ms. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- L’image d’attente compte. Le média fait un travail d’ambiance et non de récit, une seule boucle de 0,1s en 1826x1302 derrière tout le reste. Une image d’attente en 1826x1302 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
- Un champ, une action. Il n’y a qu’une décision à prendre ici, remplir le formulaire ou partir. Tout le reste de l’écran soutient cette décision. Les champs sont empilés sur une seule colonne, l’ordre de tabulation suit donc l’ordre de lecture.
- Des valeurs vérifiables. Les espacements sont cités de la même façon (des pas d’espacement de 15px et des transitions de 400ms), et non comme une échelle qui grandit toute seule.
Animation et interaction
Des durées en millisecondes
Le budget d’animation est faible et explicite, 400ms, appliqué aux changements d’état plutôt qu’aux entrées. Si l’easing change, la durée doit être revue avec lui.
Une boucle, pas une timeline
Un clip de 0,1s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Une image poster prend le relais quand la lecture automatique est bloquée, donc le mouvement est un plus et non une nécessité.
Les chiffres derrière section FAQ
La page contient plus de chiffres qu’elle n’en a l’air, et une reconstruction doit garder des pas d’espacement de 15px et des transitions de 400ms en priorité, le reste peut bouger. Rien dans le design de section FAQ ne dépend d’une valeur par défaut.
L’ordre de section FAQ
Là où une page marketing empile les preuves sous la ligne de flottaison en espérant, le design de section FAQ met le formulaire devant le lecteur et retient le reste. Un lecteur SaaS reçoit l’offre avant les options.
Par où commencer dans Cortexa FAQ
Changez le contenu d’abord et vérifiez le cadre ensuite. Les valeurs à protéger pendant le remplacement du texte sont des pas d’espacement de 15px et des transitions de 400ms. Votre accent doit passer le même test de contraste que celui de la référence.
Questions fréquentes
Quelle est la longueur du prompt derrière Cortexa FAQ?
Comptez 4 955 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.
Que faire du brief de Cortexa FAQ une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 4 955 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Quelle part de Cortexa FAQ dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Cortexa FAQ 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.
