Sobre este template
Antes de reconstruir uma hero para uma marca de lifestyle, leia F1 Racing Hub: a composição e a especificação por trás dela estão as duas aqui. A página inteira é construída sobre azul profundo #0A0E1C por baixo e laranja vivo #EDB40B carregando os destaques. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O movimento fica restrito a transições de 400ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo. É a referência certa para hero para uma marca de lifestyle que precisa parecer intencional já na primeira tela.
Feito para
- Pegue a moldura em 1470x1080 e tipografia de 13px a 120px e seções de 42vh desta hero antes de pegar qualquer outra coisa.
- Profissionais de marketing de produto que precisam que hero continue legível com 7s de vídeo em loop atrás do texto.
- Quem briefa um modelo para uma hero vai usar o prompt de 10.448 caracteres como ponto de partida.
O que está incluído
- Linha de cima: marca, links, uma ação. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #EDB40B, tudo isso no topo de hero e sem fundo próprio. Abaixo de 768px os links colapsam em vez de quebrar para uma segunda linha.
- O frame de poster importa. Um único arquivo de 7s carrega a primeira tela inteira, e a página não tem uma segunda mídia para manter em sincronia. O loop é curto o bastante (7s) para o olho ler como textura e não como linha do tempo.
- Uma grade, não um texto corrido. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. Em uma coluna só, a grade mantém a ordem dos painéis. Corte um painel antes de encolher a tipografia.
- Fluido onde precisa ser. As mudanças de largura são resolvidas na própria tipografia: um clamp entre 13px e 120px leva o título do celular ao desktop sem uma composição mobile separada. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura.
Movimento e interação
Feedback nos controles
O feedback se limita a estados de hover nos botões e links, não em todos os cards e um carrossel que pagina o conteúdo sob demanda, e é isso que impede uma primeira tela densa de parecer carregada. 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.
O tempo definido no briefing
Uma única duração cobre as interações (400ms usando cubic-bezier(0.16,1,0.3,1)), e é isso que mantém hover e clique lendo como um sistema só. Se a curva de aceleração mudar, a duração precisa ser revista junto.
A hero com a sua cara
Quando você colocar a sua própria mídia, mantenha o recorte e a ordem das camadas. A mídia é um loop de 7s em 1470x1080. É esse posicionamento que mantém o texto legível. Substituir é mais barato que compor, e é esse o ponto.
O que se move em F1 Racing Hub
Uma biblioteca de animações prontas daria mais movimento que isto. O briefing pede menos: transições de 400ms, um loop de mídia de 7s e estados de hover e de clique, e nada decorativo por cima. Nada anima por si nesta hero.
O que se sustenta para Lifestyle
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A hero lê como uma decisão única: a navegação, o título, a linha de estatísticas e a grade de cards em uma sequência só. Dá ao leitor de lifestyle a rota honesta mais curta até a oferta.
Perguntas frequentes
O que o briefing por trás de F1 Racing Hub contém de fato?
O briefing capturado tem 10.448 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.
Posso reconstruir hero do F1 Racing Hub em outra stack?
F1 Racing Hub 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.
Como se comportam as transições de 400ms em F1 Racing Hub?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 400ms usando cubic-bezier(0.16,1,0.3,1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
