Sobre este template
Adventra resolve o problema de hero para uma agência ou estúdio com um único briefing capturado. “Home, Our Story, FAQ, Policies” é a linha que o layout foi construído para sustentar. A cor se limita a preto #303230 por baixo e cinza #CAC7BD para a tipografia, composta em Inter. A entrega é um único arquivo HTML autocontido: uma página só, sem plugin e sem ferramenta de build entre você e o design. O orçamento de movimento é um loop de vídeo ao fundo. É a referência certa para hero para uma agência ou estúdio que precisa parecer intencional já na primeira tela.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da hero e deixe o prompt segurar um único arquivo HTML autocontido.
- A hero é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de uma moldura em 1856x1398 escrito.
- Desenvolvedores front-end que precisam entregar isso normalmente vão usar um único arquivo HTML autocontido como implementação de referência.
O que está incluído
- Uma barra sem excesso. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a um tamanho de display fixo de 60px e seções de 100vh, para a barra nunca competir com a composição atrás dela. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
- Vídeo no quadro inteiro. O fundo é um único loop de 7s em 1856x1398, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Exporte em 1856x1398 ou mais largo e o recorte cover continua funcionando.
- Topo com uma única ação. Cada link traz estados de foco e de hover próprios, não os do navegador. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Passos de espaçamento citados. O briefing nomeia os números: um tamanho de display fixo de 60px, seções de 100vh e passos de espaçamento de 16px. É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
Movimento e interação
Um loop, não uma linha do tempo
O clipe de fundo roda 7s em 1856x1398 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. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Interação mantida local
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards. Os alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles. Mantenha os efeitos de ponteiro nos controles.
O que se move em Adventra
Quando uma página parece inquieta, a causa costuma ser entradas demais. Esta mantém a lista curta: um título palavra por palavra, um loop de mídia de 7s e estados de hover e de clique. Nada anima por si nesta hero.
O que mudar primeiro em Adventra
Mude o texto e a mídia primeiro, a cor depois, o layout por último. A moldura em 1856x1398 e a escala em Inter são o que mantém a página coesa, então substitua em volta deles, não através deles. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
A ordem por trás da hero
Nada aqui compete com a primeira decisão. A página diz isso em voz alta: “Home, Our Story, FAQ, Policies”. O material de apoio espera abaixo da dobra, e a navegação e o clipe de fundo sustentam o topo da página sozinhos. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Adventra contém de fato?
O briefing capturado tem 3.134 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.
Quanto de Adventra depende de um único arquivo HTML autocontido?
Adventra foi construído em um único arquivo HTML autocontido, 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.
Por que o prompt do Adventra não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 3.134 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
