Sobre este template
Averra Testimonials é a referência de seção de depoimentos para uma agência ou estúdio, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. Ela abre com “A truly collaborative process from start to finish. The results completely exceeded our initial expectations” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é branco #EBEFE5 por baixo, preto #111111 para a tipografia e lima vivo #A5E038 carregando os destaques. A stack é React e Tailwind CSS, então dá para levar seção de depoimentos para um projeto sem handoff de design. O movimento cabe todo em transições de 0.04s, cubic-bezier(0.22, 1, 0.36, 1) e um loop de vídeo ao fundo. Se você está briefando uma seção de depoimentos de agência, parta desta composição e substitua o assunto.
Feito para
- Esta seção de depoimentos é feita para agências que precisam da moldura em 1920x1208 sobrevivendo a três rodadas de edições do cliente.
- Feito para product managers que precisam da seção de depoimentos limitada a uma sprint e sem novos assets.
- Esta depoimentos serve fundadores que precisam de uma tela de prova de que o texto de agência aguenta 4,6s de vídeo em loop.
O que está incluído
- A barra segue a grade. Marca, links e a ação #A5E038 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #A5E038 é o único elemento da barra com peso.
- O briefing nomeia os passos. O briefing fixa passos de espaçamento de 28px, transições de 0.04s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1) e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- O vídeo é o fundo, não um painel. O vídeo fica na camada de baixo da composição em 1920x1208, com a tipografia organizada acima e nada entre os dois. O loop é curto o bastante (4,6s) para o olho ler como textura e não como linha do tempo.
- Navegação sem fundo próprio. A fileira gasta o contraste em um lugar só: a ação #A5E038, com a marca e os links recuados na cor do texto.
Movimento e interação
Um loop, não uma linha do tempo
O clipe de fundo roda 4,6s em 1920x1208 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Durações vindas do briefing
Uma única duração cobre as interações (0.04s usando cubic-bezier(0.22, 1, 0.36, 1)), e é isso que mantém hover e clique lendo como um sistema só. A curva de aceleração é especificada junto com a duração (0.04s), então uma reconstrução não pode trocar a sensação sem aviso.
Por que o briefing de agência se sustenta
O design defende o argumento em uma única tela. A mídia é um loop de 4,6s em 1920x1208. A mídia carrega a atmosfera, o texto carrega a oferta, e passos de espaçamento de 28px e transições de 0.04s mantêm os dois separados. Averra Testimonials enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Ler Averra Testimonials como especificação
Não dá para acertar uma composição no olho quando duas pessoas a estão reconstruindo. O briefing elimina a discussão: passos de espaçamento de 28px, transições de 0.04s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1), declaradas uma vez. Nada nesta seção de depoimentos depende de um padrão.
A ordem por trás da seção de depoimentos
Uma tela, uma ação e a navegação e a linha de estatísticas entre as duas. O briefing fixa essa ordem em vez de entregar a primeira tela a uma pilha de seções. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
O que posso fazer com o briefing de Averra Testimonials depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 3.584 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Averra Testimonials?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1208, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Averra Testimonials foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
