Sobre este template
Esta é a hero da RIVR, publicada com o briefing que a produziu em vez de apenas uma captura de tela. “Fluid Asset Streams” é a linha que o layout foi construído para sustentar. A cor se limita a cinza #969BA2 por baixo, composta em Helvetica. A entrega é React e Tailwind CSS, capturada em 800x599 para a moldura estar fixada antes de qualquer linha de código. Esta referência é para um produto fintech que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Feito para agências que cobram por rodada e querem tipografia de 12px a 80px e passos de espaçamento de 14px acordado antes da primeira.
- Feito para um fundador solo lançando uma hero para um produto fintech, sem nenhum design system atrás.
- Quem briefa um modelo para uma hero vai usar o prompt de 8.089 caracteres como ponto de partida.
O que está incluído
- Linha de cima: marca, links, uma ação. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Helvetica, para a composição ler conteúdo primeiro e moldura depois. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Números levados para a construção. Nada no layout fica por sensação: o briefing cita tipografia de 12px a 80px e passos de espaçamento de 14px e a construção precisa atingir esses valores. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição.
- Texto primeiro, decoração depois. A composição inteira cabe em uma tela e é entregue como React e Tailwind CSS, com texto, mídia e controles nomeados no briefing. A página é uma composição só em 800x599, e é por isso que ela se sustenta quando o texto muda. Nada decorativo pertence à região acima da dobra.
- A navegação é fina de propósito. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Helvetica, para a barra pertencer à página abaixo e não a um sistema separado.
Movimento e interação
A interação está nos controles
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. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 800x599 conduzir a página, com estados de hover e de clique como únicas mudanças. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
Por que o briefing de fintech se sustenta
Uma tela significa uma decisão para o leitor, e esse é o custo deste layout: todo o resto vai para baixo da dobra. O briefing declara tipografia de 12px a 80px e passos de espaçamento de 14px para que as seções de baixo mantenham o mesmo ritmo. RIVR enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A ordem por trás da hero
Coloque o seu próprio texto nesta hero e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a navegação, a linha de estatísticas, a lista de recursos e o clipe de fundo carrega uma função. O leitor de fintech recebe a oferta antes das opções.
O tempo por trás da hero
Conte os elementos animados e a lista continua curta: estados de hover e de clique. Nada anima por si nesta hero.
Perguntas frequentes
O que o briefing por trás de RIVR contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x599, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir hero do RIVR em outra stack?
RIVR 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.
Posso usar RIVR 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 800x599.
