Sobre esta plantilla
Lee Cliently Testimonials como especificación de sección de testimonios: los valores se escribieron antes de construir la página. El titular dice “Here's what they shared about their experience working with our team”, y el orden de sección de testimonios gira alrededor de esa línea. La paleta es negro #18181B de base y blanco #F4F4F5 para la tipografía. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1392 antes de escribir código. El presupuesto de movimiento se agota en transiciones de 1500ms y un vídeo en bucle de fondo. Parte del brief capturado y ajusta la composición de sección de testimonios en lugar de empezar de cero.
Pensado para
- Agencias que llevan su sección de testimonios de una agencia o un estudio a una propuesta y quieren citar tipografía de 14px a 56px y pasos de espaciado de 46px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Equipos de producto que escriben los textos de Testimonios y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
- Pensado para responsables de producto que necesitan acotar el diseño de sección de testimonios a un sprint y no añadir material nuevo.
Qué incluye
- Fila superior, una acción. La barra se superpone sobre sección de testimonios en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Tamaños fijados en el brief. El brief nombra las cifras: tipografía de 14px a 56px, pasos de espaciado de 46px y transiciones de 1500ms. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos. Conserva los valores citados cuando traslades la página.
- Vídeo a marco completo, sin panel. El clip dura 10,4s a 1920x1392 y se repite sin corte visible, por eso se lee como superficie y no como metraje. Un fotograma de póster a 1920x1392 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Una barra sin nada de más. La navegación es una sola fila, sin un segundo nivel debajo.
Movimiento e interacción
Duraciones cortas y nombradas
El hover, la pulsación y el foco se resuelven en 1500ms, que es lo que hace que la interfaz se sienta inmediata. Los valores son lo bastante cortos para leerse como respuesta y no como animación. Una duración por comportamiento.
Un bucle, no una secuencia
El clip de fondo se reproduce 10,4s en 1920x1392 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención. Graba o exporta a 1920x1392 o más ancho.
El reflujo de sección de testimonios
Una escala fluida y otra a saltos se parecen en pantalla ancha. Estrecha el viewport y aparece la diferencia: un clamp entre 14px y 56px frente a saltos fijos. La jerarquía es lo que sobrevive al reflujo.
El orden detrás de sección de testimonios
Lee la primera pantalla de una pasada y la oferta ya está clara: navegación, el titular, la fila de clientes y la cuadrícula de tarjetas llegan en secuencia, con tipografía de 14px a 56px y pasos de espaciado de 46px de por medio en lugar de separadores decorativos. Quien busca agencia recibe la oferta antes que las opciones.
Hacer tuyo este tipo de sección de testimonios
Supón que solo tienes una tarde. Cambia el titular y la etiqueta de la acción, no toques tipografía de 14px a 56px y pasos de espaciado de 46px y tendrás una página que parece intencionada. Conserva el marco y la escala; el tema es la parte que debe cambiar.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Cliently Testimonials?
El brief capturado ocupa 4.333 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Cómo está organizada esta ficha de Cliently Testimonials?
Todo lo que se cita en la página procede del brief capturado de 4.333 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de sección de testimonios de Cliently Testimonials con otro stack?
Cliently Testimonials se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
