Sobre este template
AI Trip Planner é uma referência prática para uma marca de viagens: seção de preços com layout definido, medidas tiradas e tudo pronto para reconstruir. “Where will you go next?” é a linha que o layout foi construído para sustentar. O esquema de cores é branco #FAFAFA por baixo e preto #0A0A0A para a tipografia, e a página é composta em Geist. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a um loop de vídeo ao fundo. Parta do briefing capturado e depois edite a seção de preços em vez de reconstruí-la do zero.
Feito para
- Cite um breakpoint de 760px na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Se a referência é só um ponto de partida, os designers podem manter uma moldura em 1470x1080 e reconstruir o resto da seção de preços.
- Se três pessoas vão editar esta seção de preços, dê a quem cuida do conteúdo tipografia de 15px a 40px e passos de espaçamento de 15px em vez de uma captura de tela.
O que está incluído
- Uma barra de navegação que sai do caminho. A barra fica sobre a seção de preços em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Abaixo de 760px os links colapsam em vez de quebrar para uma segunda linha.
- Vídeo na camada de baixo. Um único arquivo de 6s carrega a primeira tela inteira, e a página não tem uma segunda mídia para manter em sincronia. Exporte em 1470x1080 ou mais largo e o recorte cover continua funcionando. Exporte em 1470x1080 ou mais largo para o recorte continuar honesto.
- Selo acima da dobra. Um selo, uma mensagem: a pílula fica acima do título em Geist no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia.
- O comportamento é definido por largura. O briefing usa um clamp entre 15px e 40px no título, e é isso que impede uma linha longa de quebrar em um ponto ruim. Como a escala é clampada, a linha de display nunca dá saltos entre breakpoints.
Movimento e interação
Hover onde faz sentido
O feedback se limita a estados de hover nos botões e links, não em todos os cards, e é isso que impede uma primeira tela densa de parecer carregada. Os estados saem da paleta da própria página, não do padrão de um componente.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 6s em 1470x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
A ordem por trás da seção de preços
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards no lugar e gasta tipografia de 15px a 40px e passos de espaçamento de 15px para tornar a rota óbvia. O leitor de viagens recebe a oferta antes das opções.
Por que esta composição funciona para viagens
A contrapartida é a densidade: esta seção de preços 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, o selo de anúncio, a linha de estatísticas e a grade de cards fazem o trabalho que uma página mais longa espalharia. AI Trip Planner enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A seção de preços com a sua cara
Repintar a paleta primeiro é o erro de sempre. Isso muda o clima sem tocar na composição, e tipografia de 15px a 40px e passos de espaçamento de 15px continuam sustentando o layout; faça o texto e a mídia primeiro e a paleta por último. Substituir é mais barato que compor, e é esse o ponto.
Perguntas frequentes
O prompt de AI Trip Planner é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.398 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.
O briefing de AI Trip Planner é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 6.398 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir seção de preços do AI Trip Planner em outra stack?
AI Trip Planner 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.
