Sobre este template
Airlines Hero Section resolve o problema de hero para uma marca de viagens com um único briefing capturado. A paleta se reduz a índigo profundo #20153E por baixo e índigo #56489B carregando os destaques, e a tipografia é Inter. A stack é um único arquivo HTML autocontido; cada medida está registrada, e é isso que a torna reaproveitável. O briefing gasta o orçamento de movimento em um loop de vídeo ao fundo. Esta referência é para uma marca de viagens que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Times que constroem uma marca de viagens hero e precisam de um único arquivo HTML autocontido registrado antes de o orçamento sair.
- Desenvolvedores front-end que reconstroem isso em um único arquivo HTML autocontido e querem as transições especificadas, não adivinhadas.
- Esta hero serve designers que precisam entregar uma construção em um único arquivo HTML autocontido a um engenheiro e querem o movimento escrito.
O que está incluído
- Links antes da ação. A fileira gasta o contraste em um lugar só: a ação #56489B, com a marca e os links recuados na cor do texto. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #56489B é o único elemento da barra com peso.
- Passos de espaçamento citados. Toda medida do briefing é um número que dá para medir de volta: seções de 100vh e passos de espaçamento de 14px. Os valores são citados do prompt capturado em vez de inferidos, então sobrevivem a uma nova renderização. Substitua a família tipográfica ou o texto, não a escala.
- Vídeo na camada de baixo. A moldura em 1466x1080 é preenchida por um único loop que roda atrás do texto e não pede controles. Um frame de poster em 1466x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Duas famílias, funções claras. A linha de display é composta em Inter em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. Trocar a família é seguro desde que tamanhos e pesos fiquem onde o briefing os colocou.
Movimento e interação
Estados de ponteiro, nada mais
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. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação. Se um estado não confirma uma ação, corte.
Movimento ambiente sem biblioteca de scroll
O clipe de fundo roda 2,2s em 1466x1080 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 loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
O que uma marca de viagens ganha aqui
A contrapartida é a densidade: esta hero diz menos na primeira tela do que um layout guiado por recursos diria. O que ela mantém é a ordem de leitura, e a navegação, o título, a linha de estatísticas e o clipe de fundo fazem o trabalho que uma página mais longa espalharia. Airlines Hero Section enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como Airlines Hero Section ordena a primeira leitura
A atenção é conduzida, não deixada ao acaso. A sequência corre por a navegação, o título, a linha de estatísticas e o clipe de fundo, e cada parada é dimensionada contra seções de 100vh e passos de espaçamento de 14px para que nada chegue fora de ordem. O leitor de viagens recebe a oferta antes das opções.
O que se move em Airlines Hero Section
O movimento aqui é um conjunto de decisões, não uma biblioteca: estados de hover e de clique, um loop de mídia de 2,2s e um marquee em loop, e nada anima no scroll. O resultado é uma página que parece autoral: durações curtas, uma entrada e mudanças de estado que confirmam uma ação em vez de decorá-la. Nada anima por si nesta hero.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Airlines Hero Section?
O briefing capturado tem 2.222 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 um único arquivo HTML autocontido?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para um único arquivo HTML autocontido, mas a mesma composição se reconstrói no que você já usa. A stack é nomeada para você saber como a referência foi feita.
Como devo tratar a mídia de Airlines Hero Section 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 1466x1080.
