Sobre este template
Gulfselite preserva o rastro das decisões: o briefing que produziu esta hero tem 2.498 caracteres. A paleta se reduz a laranja suave #69574B por baixo e branco #FEFEFE para a tipografia, e a tipografia é Inter. A referência é construída com Tailwind e JavaScript puro, e as decisões de layout estão declaradas independentemente dela. O movimento cabe todo em transições de 120ms e um loop de vídeo ao fundo. Use como referência quando estiver construindo hero para uma marca de viagens e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Desenvolvedores front-end que precisam entregar isso normalmente vão usar Tailwind e JavaScript puro como implementação de referência.
- Feito para um designer entrando em um projeto que já entrega Tailwind e JavaScript puro e só precisa do texto substituído.
- Desenvolvedores front-end que reconstroem isso em Tailwind e JavaScript puro e querem as transições especificadas, não adivinhadas.
O que está incluído
- Uma linha, sem gaveta. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. 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. Uma ação por barra.
- Números, não impressões. A lista é curta (passos de espaçamento de 20px e transições de 120ms), e é por isso que o sistema inteiro pode ser conferido à mão. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Um elemento de mídia carrega o clima. O fundo é um único loop de 9,9s em 1920x1448, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Exporte em 1920x1448 ou mais largo e o recorte cover continua funcionando.
- Links antes da ação. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Inter, para a barra pertencer à página abaixo e não a um sistema separado.
Movimento e interação
Tempos em milissegundos
Os tempos são curtos e consistentes (120ms), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Os valores são curtos o bastante para ler como feedback, não como animação.
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 9,9s em 1920x1448, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
O que se move em Gulfselite
Dá para jogar uma biblioteca de presets sobre esta composição e ela ficaria mais ocupada, não melhor. O briefing mantém transições de 120ms, um loop de mídia de 9,9s e um título palavra por palavra e gasta o orçamento ali. Nada anima por si nesta hero.
A hero com a sua cara
Componha o texto novo no tamanho de display que o briefing nomeia (passos de espaçamento de 20px e transições de 120ms), e o resto da escala acompanha sem um novo design. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Como a hero se reorganiza
Uma escala fluida custa menos controle sobre os tamanhos exatos. O que você ganha é uma linha de display que se mantém proporcional, e é por isso que um clamp entre 40px e 20px está no briefing. A versão mobile é uma decisão, não um recurso de reserva.
Perguntas frequentes
O que o briefing por trás de Gulfselite contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1448, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de Tailwind e JavaScript puro para reconstruir Gulfselite?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para Tailwind e JavaScript puro, 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 Gulfselite 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 1920x1448.
