Sobre este template
Leia TrustFlow como especificação de landing page: os valores foram escritos antes de a página ser construída. A paleta se reduz a branco #FFFFFF por baixo e preto #191919 para a tipografia, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 1462x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 200ms e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Se você está briefando uma landing page de fintech, parta desta composição e substitua o assunto.
Feito para
- Esta landing page responde a quem constrói e quer saber o que um tamanho de display fixo de 15px e passos de espaçamento de 11px controla de fato no layout.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de fintech aguenta 6,3s de vídeo em loop.
- Quem briefa um modelo para uma landing page vai usar o prompt de 6.275 caracteres como ponto de partida.
O que está incluído
- Navegação em uma só linha. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Tamanhos fixados no briefing. Nada aqui é feito no olho. A especificação fixa um tamanho de display fixo de 15px, passos de espaçamento de 11px e transições de 200ms, e o resto do layout deriva desses valores. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- Um clipe, não uma ilustração. A moldura em 1462x1080 é preenchida por um único loop que roda atrás do texto e não pede controles. O loop é curto o bastante (6,3s) para o olho ler como textura e não como linha do tempo. Exporte em 1462x1080 ou mais largo para o recorte continuar honesto.
- Prova acima da dobra. Os números são compostos em Inter em um tamanho mais próximo do título do que do corpo de texto. Os números ficam na mesma linha de base do texto em volta, então a fileira lê como um objeto só.
Movimento e interação
Uma superfície interativa pequena
Só os controles respondem ao ponteiro (estados de hover nos botões e links, não em todos os cards), então a página parece responsiva sem transformar cada elemento em um alvo. O feedback se limita aos controles, então a composição fica parada em volta deles.
Mudanças de estado, cronometradas
Uma única duração cobre as interações (200ms), e é isso que mantém hover e clique lendo como um sistema só. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição.
O que se move em TrustFlow
Um orçamento curto de movimento custa drama no primeiro quadro. Em troca, compra legibilidade e faz com que transições de 200ms, um loop de mídia de 6,3s e estados de hover e de clique possa ser portado sem biblioteca. Nada anima por si nesta landing page.
O que mudar primeiro em TrustFlow
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. um tamanho de display fixo de 15px, passos de espaçamento de 11px e transições de 200ms são os valores que não devem se mover. O assunto é a parte que deve mudar.
Por que o briefing de fintech se sustenta
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um loop de 6,3s em 1462x1080. A moldura fica silenciosa e um tamanho de display fixo de 15px e passos de espaçamento de 11px mantêm o leitor no texto. TrustFlow enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Qual é o tamanho do prompt por trás de TrustFlow?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1462x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de TrustFlow depende de React e Tailwind CSS?
TrustFlow 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.
Como devo tratar a mídia de TrustFlow em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 1462x1080.
