Sobre este template
Vectrus Energy mostra uma forma de construir landing page para uma empresa industrial e publica as instruções que produziram o resultado. “Advancing resources for a cleaner future” é a linha que o layout foi construído para sustentar. A paleta é cinza #C7CED7 por baixo e azul profundo #1D3045 para a tipografia, com tipografia Helvetica, Arial. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O orçamento de movimento é transições de 200ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo landing page para uma empresa industrial e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Se a referência é só um ponto de partida, os designers podem manter uma moldura em 1468x1080 e reconstruir o resto da landing page.
- Agências que apresentam uma empresa industrial landing page e querem seções de 500vh e passos de espaçamento de 40px citado no deck, para o orçamento ainda valer depois do kickoff.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de indústria aguenta 5,6s de vídeo em loop.
O que está incluído
- Links colapsam em uma largura. A barra é uma linha de texto e uma ação, medida em seções de 500vh e passos de espaçamento de 40px, para ler como faixa e não como bloco. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- Mídia sem sobreposição. Um único arquivo de 5,6s carrega a primeira tela inteira, e a página não tem uma segunda mídia para manter em sincronia. O loop é curto o bastante (5,6s) para o olho ler como textura e não como linha do tempo.
- Uma lista, não uma parede de cards. Os recursos são compostos como lista em Helvetica, Arial, não como uma parede de cards. O espaçamento entre linhas faz o agrupamento, então nenhuma caixa é necessária.
- Prova em uma fileira. A fileira fica no alto da landing page como prova, não como decoração. Os números ficam na mesma linha de base do texto em volta, então a fileira lê como um objeto só. A referência tem captura em 1468x1080.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 5,6s em 1468x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação. Grave ou exporte em 1468x1080 ou mais largo.
Tempos curtos e combinados
Os tempos são curtos e consistentes (200ms usando cubic-bezier(0.16,1,0.3,1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Como os valores são curtos, uma reconstrução que os deixe mais lentos fica visível na hora. Cronometre o feedback com exatidão.
A landing page com a sua cara
Comece pelo texto, não pela cor. Reescreva “Advancing resources for a cleaner future” como uma frase sobre o seu produto e componha em Helvetica, Arial no tamanho que o briefing usa. Uma marca diferente pode reaproveitar a moldura inteira.
Como Vectrus Energy ordena a primeira leitura
A atenção é conduzida, não espalhada. A página diz isso em voz alta: “Advancing resources for a cleaner future”. O olho cai primeiro na linha de display, depois no texto de apoio, depois na ação. A prova, onde aparece, fica como faixa ou linha, e não como parede de depoimentos. Essa sequência é o design. O leitor de indústria recebe a oferta antes das opções.
Como a landing page se reorganiza
Comparado a um layout mobile que esconde seções, este as mantém e muda a forma delas: a escala é fluida, não em degraus, a seção fica presa a 500vh e a navegação vira um menu compacto no celular. A escala muda com a viewport; a sequência, não.
Perguntas frequentes
O briefing de Vectrus Energy é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 8.300 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 Vectrus Energy?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1468x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Vectrus Energy depende de React e Tailwind CSS?
Vectrus Energy 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.
