Sobre este template
SkyElite Private Jets é a referência de hero para uma marca de viagens, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. O título da própria página é “Your dedication deserves recognition”, e a composição é construída em volta exatamente dessas palavras. A paleta é azul profundo #1A2229 por baixo, com tipografia Inter. A entrega é React e Tailwind CSS, capturada em 1920x1455 para a moldura estar fixada antes de qualquer linha de código. Trate como o briefing de uma hero para uma marca de viagens que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Designers que precisam dos números antes de tudo: seções de 100vh e passos de espaçamento de 12px, tudo citado do briefing.
- Feito para um fundador solo lançando uma hero para uma marca de viagens, sem nenhum design system atrás.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da SkyElite Private Jets.
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. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte.
- Toda medida está escrita. A tipografia e o espaçamento saem de uma lista só aqui: seções de 100vh e passos de espaçamento de 12px. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
- Texto primeiro, decoração depois. A composição inteira cabe em uma tela e é entregue como React e Tailwind CSS, com texto, mídia e controles nomeados no briefing. A página é uma composição só em 1920x1455, e é por isso que ela se sustenta quando o texto muda.
- Linha de cima: marca, links, uma ação. Cada link traz estados de foco e de hover próprios, não os do navegador.
Movimento e interação
Uma superfície interativa pequena
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Os estados saem da paleta da própria página, não do padrão de um componente. Mantenha a camada interativa pequena.
Movimento que sai da frente
Não há biblioteca de scroll aqui: a composição em 1920x1455 fica parada e só se movem os elementos que respondem a você. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta. A quietude é uma escolha válida.
Como a hero se reorganiza
Comparado a um layout mobile que esconde seções, este as mantém e muda a forma delas: a seção fica presa a 100vh e a navegação vira um menu compacto no celular. A versão mobile é uma decisão, não um recurso de reserva.
A hero com a sua cara
Comece pelo texto, não pela cor. Reescreva “Your dedication deserves recognition” como uma frase sobre o seu produto e componha em Inter no tamanho que o briefing usa. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Ler SkyElite Private Jets como especificação
Desmonte a hero e os valores ainda a descrevem: seções de 100vh e passos de espaçamento de 12px para a moldura e o ritmo abaixo. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que o briefing por trás de SkyElite Private Jets contém de fato?
O briefing capturado tem 2.285 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.
Como esta entrada de SkyElite Private Jets está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 2.285 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir SkyElite Private Jets?
SkyElite Private Jets 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.
