Sobre este template
Mostar Guide é uma referência prática para uma marca de viagens: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. Ela abre com “A cinematic three-screen scroll story for Mostar city” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A cor se limita a #111411 por baixo, tom claro #FDF1E1 para a tipografia e azul #7FB4D4 carregando os destaques, composta em Inter. A stack é vanilla JS; cada medida está registrada, e é isso que a torna reaproveitável. O orçamento de movimento é transições de 640ms, cubic-bezier(0.22, 1, 0.36, 1) e um loop de vídeo ao fundo. É a referência certa para landing page para uma marca de viagens que precisa parecer intencional já na primeira tela.
Feito para
- Quem usa um builder de IA e quer um briefing que já traga um breakpoint de 560px em vez de deixar isso para o modelo.
- Engenheiros que precisam que a landing page sobreviva a uma conexão lenta vão usar 798x584 e a escala tipográfica como orçamento de peso.
- Profissionais de marketing de produto que precisam que landing page continue legível com 7,4s de vídeo em loop atrás do texto.
O que está incluído
- A navegação é fina de propósito. Os links ficam em uma linha só, em um único tamanho, e a ação #7FB4D4 fecha a fileira à direita, então o olho termina onde a navegação termina. Os rótulos são curtos o bastante para caber em uma linha a 560px, e o item ativo é marcado por peso, não por uma pílula. Mantenha a linha de cima em uma só.
- O vídeo é o fundo, não um painel. O vídeo fica na camada de baixo da composição em 798x584, com a tipografia organizada acima e nada entre os dois. Um frame de poster em 798x584 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Linha de cima: marca, links, uma ação. Abaixo de 560px os links colapsam em vez de quebrar para uma segunda linha.
- Uma escala para tipo e moldura. O layout é resolvido sobre valores fixos (tipografia de 12px a 24px, seções de 19vh, uma grade de 2 colunas e cantos de 24px), e é isso que mantém a primeira tela composta em qualquer largura. A lista é curta o bastante para um revisor conferir elemento por elemento. Mantenha os valores nomeados quando portar a página.
Movimento e interação
Todo o orçamento de animação
Uma única duração cobre as interações (640ms usando cubic-bezier(0.22, 1, 0.36, 1)), e é isso que mantém hover e clique lendo como um sistema só. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback.
Feedback nos controles
A interação é local a cada controle aqui (um elemento sticky que segura a posição enquanto o conteúdo passa por baixo e um carrossel que pagina o conteúdo sob demanda), então nada na página se move por efeito colateral. Os alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles.
O que mudar primeiro em Mostar Guide
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. tipografia de 12px a 24px, seções de 19vh, uma grade de 2 colunas, cantos de 24px e passos de espaçamento de 24px são os valores que não devem se mover. Reescreva a linha de display antes de tocar na cor.
Como a landing page se reorganiza
Responsivo aqui significa que a escala muda e a sequência não. a tipografia é clampada entre 12px e 24px, o layout muda em 560px e a seção fica presa a 19vh, e a ordem de leitura fica onde o briefing a colocou. A hierarquia é o que sobrevive à reorganização.
A ordem por trás da landing page
Leia na ordem: a navegação, o selo de anúncio, a linha de estatísticas, a grade de cards e a lista de recursos. Cada elemento tem uma função, e o destaque azul #7FB4D4 é gasto só no elemento que você deve pressionar. O leitor de viagens recebe a oferta antes das opções.
Perguntas frequentes
Por que o prompt do Mostar Guide não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 27.876 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de Mostar Guide?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 798x584, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita vanilla JS?
Mostar Guide foi construído em vanilla JS, 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.
