Sobre este template
Esta é a landing page da Cordex, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “We protect transport safer across all industries” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A cor se limita a preto #0A0A0B por baixo, #F7F7F8 para a tipografia e vermelho #E23B32 carregando os destaques, composta em Inter. A entrega é um único arquivo HTML autocontido, capturada em 1920x1416 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 0.7s e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. É a referência certa para landing page para uma empresa industrial que precisa parecer intencional já na primeira tela.
Feito para
- Times que constroem uma empresa industrial landing page e precisam de um único arquivo HTML autocontido registrado antes de o orçamento sair.
- A landing page é voltada a times que já conhecem um único arquivo HTML autocontido e só precisam de um breakpoint de 480px escrito.
- Times que reconstroem a landing page de indústria de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Uma barra sem excesso. A barra carrega a marca, os links de seção e um botão #E23B32, tudo medido em tipografia de 12px a 21px e seções de 100vh para nunca virar um segundo cabeçalho. Abaixo de 480px os links colapsam em vez de quebrar para uma segunda linha. Uma ação por barra.
- Um clipe em sangria total atrás da tipografia. A moldura em 1920x1416 é preenchida por um único loop que roda atrás do texto e não pede controles. Exporte em 1920x1416 ou mais largo e o recorte cover continua funcionando.
- Conteúdo dividido em painéis. A grade define a ordem de leitura por você: painéis com o mesmo peso, uma ideia cada, compostos em Inter em tamanho pequeno para a estrutura continuar visível. Cada painel combina uma ideia com um ícone, então o caminho de leitura continua horizontal.
- Topo com uma única ação. Os rótulos são curtos o bastante para caber em uma linha a 480px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente vem do loop de 6,8s em 1920x1416, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Tempos em milissegundos
Hover, clique e foco resolvem todos em 0.7s, e é isso que faz a interface parecer imediata. A curva de aceleração é especificada junto com a duração (0.7s), então uma reconstrução não pode trocar a sensação sem aviso.
A ordem por trás da landing page
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta landing page coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards na frente do leitor e segura o resto. O leitor de indústria recebe a oferta antes das opções.
Ler Cordex como especificação
Se você vai entregar isso a um desenvolvedor, o briefing é o artefato útil. Ele declara tipografia de 12px a 21px, seções de 100vh, passos de espaçamento de 14px, transições de 0.7s e um breakpoint de 480px e não deixa nada para vocês dois interpretarem. Nada nesta landing page depende de um padrão.
Como a landing page se reorganiza
A tipografia é clampada, não escalonada (um clamp entre 12px e 21px), então a linha de display não dá saltos entre larguras. A versão mobile é uma decisão, não um recurso de reserva.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Cordex foi construído em um único arquivo HTML autocontido, 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.
Por que o prompt do Cordex não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 29.696 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Cordex contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1416, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
