Sobre este template
Antes de reconstruir uma hero para um produto fintech, leia Impact Ventures: a composição e a especificação por trás dela estão as duas aqui. “We shape digital products that define brands” é a linha que o layout foi construído para sustentar. A paleta se reduz a azul #2D64B0 por baixo e branco #C5D5DE para a tipografia, e a tipografia é Instrument Serif. A entrega é React e Tailwind CSS, capturada em 640x472 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 700ms e cubic-bezier(0.76,0,0.24,1). Trate como o briefing de uma hero para um produto fintech que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Quem briefa um modelo para uma hero vai usar o prompt de 4.400 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Impact Ventures.
- Feito para desenvolvedores front-end que querem o tempo de 700ms e a cubic-bezier(0.76,0,0.24,1) definidos antes de escrever um keyframe.
O que está incluído
- A barra segue a grade. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a transições de 700ms e curva de aceleração cubic-bezier(0.76,0,0.24,1), para a barra nunca competir com a composição atrás dela. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só.
- Uma família, usada com disciplina. Os passos de tamanho e o tracking do briefing são o que dá o tom: Instrument Serif em um tamanho de display apertado, depois uma queda clara para o texto de apoio. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados. Não acrescente um tamanho sem função.
- O rodapé é uma composição inteira. Os links se agrupam em colunas e a marca fica em um bloco próprio, o que mantém um rodapé longo legível em vez de virar uma lista corrida. A marca ganha um bloco próprio, o que mantém legível uma lista longa de links.
- Texto primeiro, decoração depois. A composição está completa em 640x472: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x472, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Feedback nos controles
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards, aplicado aos elementos que já parecem interativos. Os estados interativos não mexem no layout, então nada salta sob o ponteiro.
Tempos em milissegundos
O orçamento de animação é pequeno e explícito: 700ms com cubic-bezier(0.76,0,0.24,1), aplicado a mudanças de estado, não a entradas. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback. Os tempos fazem parte do design, não são um acabamento final.
O que esta hero acerta
Há uma única promessa nesta página, e transições de 700ms e curva de aceleração cubic-bezier(0.76,0,0.24,1) a sustentam no lugar. A página diz isso em voz alta: “We shape digital products that define brands”. Nada abaixo da dobra precisa carregar a oferta também. Dá ao leitor de fintech a rota honesta mais curta até a oferta.
Como Impact Ventures ordena a primeira leitura
A atenção é conduzida, não deixada ao acaso. A sequência corre por a navegação, a linha de estatísticas, a lista de recursos, o clipe de fundo e o rodapé, e cada parada é dimensionada contra transições de 700ms e curva de aceleração cubic-bezier(0.76,0,0.24,1) para que nada chegue fora de ordem. O leitor de fintech recebe a oferta antes das opções.
Como a hero se reorganiza
Enquanto um template colapsa para uma coluna e torce, este briefing declara o que acontece (a navegação vira um menu compacto no celular) e mantém a ordem intacta. A reorganização mantém a ação alcançável em qualquer largura.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Impact Ventures?
O briefing capturado tem 4.400 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Por que a entrada cita React e Tailwind CSS?
Impact Ventures 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 se comportam as transições de 700ms em Impact Ventures?
As entradas e as mudanças de estado ficam na faixa de 700ms com cubic-bezier(0.76,0,0.24,1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
