Sobre este template
Wanderful Hero é 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. Ela abre com “Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A tipografia é Inter, e o briefing fixa os tamanhos em vez de deixá-los a cargo de uma escala. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. É mais útil quando a hero de Viagens precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 640x470 como teste de aceite da primeira rodada.
- Feito para agências que cobram por rodada e querem tipografia de 15px a 17px e passos de espaçamento de 11px acordado antes da primeira.
- Quem briefa um modelo para uma hero vai usar o prompt de 4.223 caracteres como ponto de partida.
O que está incluído
- Uma barra de navegação que sai do caminho. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- O briefing nomeia os passos. Os tamanhos são declarados, não herdados: tipografia de 15px a 17px e passos de espaçamento de 11px. Troque a família tipográfica ou o texto e essas relações continuam valendo. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro. Os números são o design; o resto é arranjo.
- Estrutura em uma tela. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x470 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x470, e é por isso que ela se sustenta quando o texto muda. Nada decorativo pertence à região acima da dobra.
- Navegação em uma só linha. A barra é uma linha de texto e uma ação, medida em tipografia de 15px a 17px e passos de espaçamento de 11px, para ler como faixa e não como bloco.
Movimento e interação
As seções chegam conforme você rola
Parallax roda enquanto a página se move, então a composição tem um estado de repouso definido. Nada no efeito altera a ordem de leitura das seções.
Interação mantida local
A página responde só onde dá para agir: estados de hover nos botões e links, não em todos os cards. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação. Confira os estados em um dispositivo de toque.
A hero com a sua cara
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe tipografia de 15px a 17px e passos de espaçamento de 11px em paz, e você tem uma página que parece intencional. A composição é a parte reaproveitável, e ela sobrevive a uma marca diferente.
Como Wanderful Hero ordena a primeira leitura
Uma ordem rígida custa flexibilidade depois. Acrescente uma seção acima da dobra e tipografia de 15px a 17px e passos de espaçamento de 11px precisam ser recortadas de novo, porque a sequência é estrutural, não decorativa. O leitor de viagens recebe a oferta antes das opções.
Os números por trás da hero
Uma reconstrução normalmente começa com uma captura de tela e uma suposição. Aqui ela começa com 4.223 caracteres de especificação: a moldura, o espaçamento e o movimento estão escritos antes da primeira linha de código. Nada nesta hero depende de um padrão.
Perguntas frequentes
O que o briefing por trás de Wanderful Hero contém de fato?
O briefing capturado tem 4.223 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.
Preciso de React e Tailwind CSS para reconstruir Wanderful Hero?
Wanderful Hero 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.
O briefing de Wanderful Hero é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 4.223 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
