À propos de ce modèle
Cliently Testimonials est la référence section témoignages pour une agence ou un studio, et le brief qui l’accompagne est une spécification de construction complète, pas un mood board. Le titre affiché est « Here's what they shared about their experience working with our team », et le reste de section témoignages s’organise autour de lui. La palette est noir #18181B en fond et blanc #F4F4F5 pour le texte. La livraison est en React et Tailwind CSS, capturée en 1920x1392 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 1500ms de transitions et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Partez du brief capturé, puis retouchez le contenu de section témoignages au lieu de repartir de zéro.
Conçu pour
- Des équipes qui construisent une section témoignages pour une agence ou un studio et veulent le détail mesuré (une typographie de 14px à 56px et des pas d’espacement de 46px) plutôt qu’une capture d’écran à copier.
- Cette page est dimensionnée pour les chefs de produit qui veulent un design de section témoignages cadré sur un sprint et aucun nouveau visuel à produire.
- Ce design de section témoignages sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte agence peut porter 10,4s de vidéo en boucle.
Ce qui est inclus
- En haut, marque, liens et action unique. La navigation tient sur une seule rangée, sans second niveau en dessous. La barre se pose sur la composition 1920x1392 sans fond propre, la vidéo court donc bord à bord en dessous.
- Un bandeau de nav volontairement fin. Les états de focus et de survol sont spécifiés pour chaque lien au lieu d’être hérités du navigateur. Une seule action par barre.
- Des tailles fixées par le brief. Les valeurs sont la spécification, une typographie de 14px à 56px, des pas d’espacement de 46px et des transitions de 1500ms, relevées sur 1920x1392 et non déduites d’une capture d’écran. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio. Gardez les valeurs nommées quand vous portez la page.
- La boucle sert de fond. Le fond est une seule boucle de 10,4s en 1920x1392, recadrée en cover et laissée sans voile. Tout le reste flotte au-dessus, sur un calque supérieur. Une image d’attente en 1920x1392 tient la composition quand la lecture automatique est indisponible, la mise en page ne s’effondre donc jamais.
Animation et interaction
Une durée pour les contrôles
L’animation des contrôles est courte et répétable, 1500ms à chaque changement d’état. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite. Une durée par comportement.
La boucle fait l’ambiance
Le mouvement d’ambiance est un clip de 10,4s en 1920x1392, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. 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. Tournez ou exportez en 1920x1392 ou plus large.
Le réagencement de section témoignages
On ne règle pas un écran étroit en le réduisant. Ce brief traite le changement dans la typographie et la navigation, l’échelle est fluide plutôt que par paliers. L’ordre est la dernière chose à changer.
L’ordre de section témoignages
Quand un lecteur agence arrive sur un écran unique, il balaie avant de lire. La mise en page y répond en réglant la navigation, le titre, la ligne de clients et la grille de cartes pour le balayage, une typographie de 14px à 56px et des pas d’espacement de 46px gardant chaque étape distincte. Un lecteur agence reçoit l’offre avant les options.
Adapter section témoignages à votre marque
Si votre marque porte une palette plus lourde, testez-la sur le cadre avant de valider. noir #18181B 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.
Questions fréquentes
Que faire du brief de Cliently Testimonials une fois qu’on l’a en main?
Tout ce qui est cité sur la page provient du brief capturé de 4 333 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Que recevez-vous en copiant le brief de Cliently Testimonials?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1920x1392, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Cliently Testimonials dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Cliently Testimonials 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.
