Sobre este template
VEX Ventures entrega a um produto fintech uma primeira tela pronta e os números que a produziram. O título diz “We back visionaries and craft ventures that define what comes next”, e o resto da hero se organiza em volta disso. A página é composta em Inter, com os tamanhos fixados no briefing. A entrega é React e Tailwind CSS, capturada em 800x603 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 1000ms. Se você está briefando uma hero de fintech, parta desta composição e substitua o assunto.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da VEX Ventures.
- Quem briefa um modelo para uma hero vai usar o prompt de 5.051 caracteres como ponto de partida.
- Se você é designer e vai redesenhar a hero da VEX Ventures com a sua própria família, mantenha as proporções de Inter ou a escala para de bater.
O que está incluído
- A barra segue a grade. A navegação é uma fileira só, sem um segundo nível embaixo dela. A marca é tratada como tipografia, não como um logo fechado, o que mantém a linha de cima em uma só linha de base.
- Toda medida está escrita. O briefing nomeia os números: passos de espaçamento de 18px e transições de 1000ms. É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Números em vez de promessa. A fileira fica no alto da hero como prova, não como decoração. Os números usam a mesma família da interface, então pertencem à página em vez de interrompê-la.
- Estrutura em uma tela. A composição de hero é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 800x603 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 800x603, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Estados de ponteiro, nada mais
O feedback se limita a estados de hover nos botões e links, não em todos os cards, e é isso que impede uma primeira tela densa de parecer carregada. Os estados interativos não mexem no layout, então nada salta sob o ponteiro. Não anime o layout no hover.
Tempos em milissegundos
O movimento aqui é medido em milissegundos: 1000ms. Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. Como os valores são curtos, uma reconstrução que os deixe mais lentos fica visível na hora.
Como a hero se reorganiza
Se os seus breakpoints foram escolhidos para fazer as coisas caberem, e não para mudar o layout, leia esta entrada. a escala é fluida, não em degraus em vez de uma lista de elementos escondidos. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
Ler VEX Ventures como especificação
Quase toda decisão aqui é um valor que dá para conferir: passos de espaçamento de 18px e transições de 1000ms. A mídia é um frame estático em 800x603. A tipografia segue em Inter, então qualquer substituição precisa manter as mesmas proporções. Nada nesta hero depende de um padrão.
O que mudar primeiro em VEX Ventures
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe passos de espaçamento de 18px e transições de 1000ms em paz, e você tem uma página que parece intencional. A moldura e a escala são o que deixar em paz.
Perguntas frequentes
O prompt de VEX Ventures é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x603, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de VEX Ventures depende de React e Tailwind CSS?
VEX 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 devo tratar a mídia de VEX Ventures 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 800x603.
