About this template
Cliently Testimonials solves the testimonials section problem for an agency or studio with a single captured brief. The page's own headline reads “Here's what they shared about their experience working with our team”, and the composition is built around those exact words. The palette is black #18181B underneath and white #F4F4F5 for the type. Delivery is React and Tailwind CSS, captured at 1920x1392 so the frame is fixed before any code is written. The brief spends its motion budget on 1500ms transitions and a looping video bed. Take it on when the testimonials section needs a decided order before any new sections are added.
Designed for
- Teams building an agency or studio testimonials section who want the measured detail (type from 14px to 56px and 46px spacing steps) rather than a screenshot to copy.
- Studio leads who run several projects at once will use this testimonials section as the pattern every other page copies.
- Product teams writing their own Testimonials copy who need every line to keep the length the display type was sized for.
What's included
- Top row: wordmark, links, one action. The bar overlays the testimonials section instead of pushing it down, so the composition keeps the full height of the first screen. The bar sits over the 1920x1392 composition without a background of its own, so the media runs edge to edge underneath it.
- Measured, not eyeballed. The list stays short (type from 14px to 56px, 46px spacing steps and 1500ms transitions), which is why the whole system can be checked by hand. Values are quoted from the captured prompt rather than inferred, so they survive a re-render. The numbers are the design; the rest is arrangement.
- A navigation bar that gets out of the way. Focus and hover states are specified for each link rather than inherited from the browser. If your own page has more sections, group them rather than widening the bar.
- The brief names the steps. Spacing is quoted the same way (type from 14px to 56px, 46px spacing steps and 1500ms transitions), not as a scale that grows on its own.
Motion & interaction
Short, matched timings
Motion in the controls is short and repeatable: 1500ms on each state change. The quoted timing covers state changes, so the feedback is the part of the motion that is specified. Carry the durations into your build.
A loop, not a timeline
One 10.4s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The loop is cropped to cover, which means the composition does not depend on a particular frame size. Shoot or export at 1920x1392 or wider.
How the testimonials section reflows
Compared with a mobile layout that hides sections, this one keeps them and changes their shape: the scale is fluid rather than stepped. Autoplay and motion are handled honestly, so the page still communicates when they are unavailable.
The order behind the testimonials section
You could shuffle these blocks and the page would still load. It would stop reading as an argument, though: navigation, the headline, the client row and the card grid are a sequence, and type from 14px to 56px and 46px spacing steps only work in that order. A agency reader gets the offer before the options.
What to change first in Cliently Testimonials
If your brand runs a heavier palette, test it against the frame before you commit. black #18181B carries the page, so a darker accent needs more contrast than the reference uses. Substitution is cheaper than composition, and that is the point.
Frequently asked questions
What can I do with the Cliently Testimonials brief once I have it?
Everything quoted on the page comes from the captured 4,333-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Is the Cliently Testimonials prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1920x1392, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Cliently Testimonials depends on React and Tailwind CSS?
Cliently Testimonials was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
