Sobre este template
Cross-Border é uma landing page de indústria construída a partir de um único briefing escrito, e esta página documenta esse briefing. “Complete the form and our team will contact you soon” é a linha que o layout foi construído para sustentar. A paleta é amarelo vivo #FFDA00 por baixo, preto #1A1A1A para a tipografia e verde-água profundo #002A35 carregando os destaques, com tipografia Helvetica, Arial. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. Tudo o que se move cabe em transições de 0.6s e um loop de vídeo ao fundo. Trate como o briefing de uma landing page para uma empresa industrial que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Cite uma moldura em 1440x1080 na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Times internos que estendem esta landing page e precisam de seções de 12vh e passos de espaçamento de 20px levado para os novos blocos sem alteração.
- Profissionais de marketing de produto que precisam que landing page continue legível com 5,8s de vídeo em loop atrás do texto.
O que está incluído
- Navegação sem fundo próprio. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #002A35, tudo isso no topo de landing page e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #002A35 é o único elemento da barra com peso.
- O briefing nomeia os passos. Nada no layout fica por sensação: o briefing cita seções de 12vh, passos de espaçamento de 20px e transições de 0.6s e a construção precisa atingir esses valores. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- O frame de poster importa. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 5,8s em 1440x1080 atrás de tudo. Um frame de poster em 1440x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma família, usada com disciplina. As famílias recebem papéis em vez de serem misturadas: Helvetica, Arial carrega o display e a interface juntos. Substituir a família é possível, mas as proporções precisam sobreviver à troca.
Movimento e interação
O loop faz o trabalho ambiente
O clipe de fundo roda 5,8s em 1440x1080 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
Todo o orçamento de animação
As transições estão especificadas em 0.6s, e é esse o tempo ao qual os controles obedecem. A curva de aceleração é especificada junto com a duração (0.6s), então uma reconstrução não pode trocar a sensação sem aviso.
O argumento que esta landing page faz
Cross-Border é a referência de landing page para uma empresa industrial e responde ao problema que esse público realmente tem. “Complete the form and our team will contact you soon” já faz esse trabalho desde o primeiro frame. A paleta se mantém disciplinada (amarelo vivo #FFDA00 e verde-água profundo #002A35) e a tipografia é Helvetica, Arial, então nada na composição depende de uma tendência emprestada. Na hora de briefar uma construção, é esta a parte que vale copiar: uma promessa no tamanho de display, com o detalhe de apoio mantido abaixo dela. Dá ao leitor de indústria a rota honesta mais curta até a oferta.
Ler Cross-Border como especificação
Um briefing de 6.698 caracteres produz uma especificação completa. A parte estrutural é curta: seções de 12vh, passos de espaçamento de 20px e transições de 0.6s. Nada nesta landing page depende de um padrão.
O tempo por trás da landing page
Um pacote de animações prontas teria sido mais rápido de publicar. O briefing especifica transições de 0.6s, um loop de mídia de 5,8s e estados de hover e de clique, e é por isso que a página lê como autoral, não como montada. Nada anima por si nesta landing page.
Perguntas frequentes
O prompt de Cross-Border é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.698 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.
Por que o prompt do Cross-Border não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 6.698 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
Cross-Border 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.
