Sobre este template
Velora Hero Section mostra uma forma de construir hero para uma marca de viagens e publica as instruções que produziram o resultado. “Rent Your Dream Luxury Car Today” é a linha que o layout foi construído para sustentar. A cor se limita a preto #0A0A0B por baixo e branco #FFFFFF para a tipografia, composta em Archivo. A referência é construída com um único arquivo HTML autocontido, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a um loop de vídeo ao fundo. Se você está briefando uma hero de viagens, parta desta composição e substitua o assunto.
Feito para
- A hero é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de um único arquivo HTML autocontido escrito.
- Times de growth que redesenham uma marca de viagens hero e querem a moldura em 1500x1080 mantida enquanto o texto da oferta muda.
- A página serve desenvolvedores front-end que reconstroem uma marca de viagens hero em um único arquivo HTML autocontido e procuram os números por trás da aparência.
O que está incluído
- Links colapsam em uma largura. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Archivo, para a composição ler conteúdo primeiro e moldura depois. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado.
- Valores que dá para conferir. O briefing fixa seções de 100vh e passos de espaçamento de 56px e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- O loop é o fundo. O clipe roda 4,9s em 1500x1080 e faz loop sem corte visível, então lê como superfície e não como filmagem. Exporte em 1500x1080 ou mais largo e o recorte cover continua funcionando. Exporte em 1500x1080 ou mais largo para o recorte continuar honesto.
- Links antes da ação. Cada link traz estados de foco e de hover próprios, não os do navegador. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
Movimento e interação
Um loop, não uma linha do tempo
O clipe de fundo roda 4,9s em 1500x1080 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. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Estático por decisão
Esta é entregue como composição estática em 1500x1080, então a hierarquia precisa funcionar sem movimento, e funciona. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
A hero com a sua cara
Mude o texto e a mídia primeiro, a cor depois, o layout por último. A moldura em 1500x1080 e a escala em Archivo são o que mantém a página coesa, então substitua em volta deles, não através deles. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Os números por trás da hero
Compare com um template que trata o espaçamento como preferência. Aqui os mesmos valores são nomeados (seções de 100vh e passos de espaçamento de 56px), então uma edição ou os mantém, ou quebra a composição de forma visível. Nada nesta hero depende de um padrão.
Como Velora Hero Section ordena a primeira leitura
Leia a primeira tela de uma vez e a oferta já está clara. a navegação, o título, a linha de estatísticas e o clipe de fundo chegam em sequência, separados por seções de 100vh e passos de espaçamento de 56px em vez de divisores decorativos. O leitor de viagens recebe a oferta antes das opções.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Velora Hero Section?
O briefing capturado tem 3.216 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 Velora Hero Section depende de um único arquivo HTML autocontido?
A referência foi construída em um único arquivo HTML autocontido por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
Por que o prompt do Velora Hero Section não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 3.216 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
