Sobre esta plantilla
Averra Testimonials es un caso de sección de testimonios de agencia: nace de un único brief escrito y esta página lo documenta. El titular dice “A truly collaborative process from start to finish. The results completely exceeded our initial expectations”, y el orden de sección de testimonios gira alrededor de esa línea. La paleta es blanco #EBEFE5 de base, negro #111111 para la tipografía y lima brillante #A5E038 para los acentos. Se entrega como React y Tailwind CSS, así que el conjunto de sección de testimonios se puede trasladar a un proyecto sin traspaso de diseño. Todo el movimiento cabe en transiciones de 0.04s, cubic-bezier(0.22, 1, 0.36, 1) y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de sección de testimonios en una agencia o un estudio, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya un marco de 1920x1208 en vez de dejarlo todo al modelo.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección de testimonios como patrón que copian las demás páginas.
- Este diseño de sección de testimonios sirve a fundadores que necesitan una pantalla de prueba de que los textos de agencia aguantan 4,6s de vídeo en bucle.
Qué incluye
- Una barra de navegación que no estorba. Marca, enlaces y la acción #A5E038 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #A5E038 es el único elemento de la barra con peso.
- Una escala para tipo y marco. El brief nombra las cifras: pasos de espaciado de 28px, transiciones de 0.04s y easing cubic-bezier(0.22, 1, 0.36, 1). Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- Un clip, no una ilustración. La composición se construye encima del clip de 1920x1208 y no a su lado, de modo que los medios nunca reciben un panel ni un borde. Un fotograma de póster a 1920x1208 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Una fila, sin desplegables. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #A5E038, todo al paso de tipo más pequeño del brief.
Movimiento e interacción
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 4,6s en 1920x1208, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Cambios de estado medidos
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 0.04s usando cubic-bezier(0.22, 1, 0.36, 1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. El easing se especifica junto a la duración (0.04s), así que una reconstrucción no puede colar otra sensación sin avisar.
El acierto de sección de testimonios
La mayoría de las páginas de agencia añade otra sección cuando la primera pantalla es floja. Esta hace lo contrario y quita opciones: navegación y la fila de cifras, en ese orden, y nada que repita la oferta. Averra Testimonials enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Leer Averra Testimonials como especificación
Desmonta este tipo de sección de testimonios y los valores siguen describiéndolo: pasos de espaciado de 28px y transiciones de 0.04s para el marco y el ritmo de debajo. Nada de este tipo de sección de testimonios depende de un valor por defecto.
Cómo ordena Averra Testimonials la primera lectura
Este tipo de sección de testimonios tiene un recorrido de lectura declarado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. A partir de ahí la mirada recorre navegación y la fila de cifras en secuencia, y eso es lo que impide que una sola pantalla se lea como una lista. Quien busca agencia recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué puedo hacer con el brief de Averra Testimonials una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 3.584 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Averra Testimonials?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1920x1208. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Averra Testimonials depende de React y Tailwind CSS?
Averra 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.
