Sobre este template
Veyra Electric é uma landing page de indústria construída a partir de um único briefing escrito, e esta página documenta esse briefing. O esquema de cores é azul suave #6B879D por baixo e branco #FFFFFF para a tipografia, e a página é composta em Space Grotesk. A stack é React e Vite; cada medida está registrada, e é isso que a torna reaproveitável. O orçamento de movimento é um loop de vídeo ao fundo. Use quando a landing page precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Pegue a moldura em 1920x1412 e passos de espaçamento de 12px desta landing page antes de pegar qualquer outra coisa.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta landing page como o padrão que todas as outras páginas copiam.
- Profissionais de marketing de produto que precisam que landing page continue legível com 6,3s de vídeo em loop atrás do texto.
O que está incluído
- Topo com uma única ação. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Valores que dá para conferir. O layout trabalha com valores absolutos, não com proporções: passos de espaçamento de 12px. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- Um clipe faz todo o trabalho. O briefing especifica o vídeo em 1920x1412 com um loop de 6,3s, e cada elemento de texto é posicionado contra essa moldura. Um frame de poster em 1920x1412 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1920x1412 ou mais largo para o recorte continuar honesto.
- O formulário é a primeira tela inteira. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. A ação fica logo abaixo do último campo, então a decisão nunca está a mais de um olhar de distância.
Movimento e interação
O canvas é o visual
Um canvas WebGL faz o trabalho visual na moldura em 1920x1412, com a tipografia composta por cima ou ao lado. Como é uma renderização e não um frame estático, o elemento focal se sustenta em qualquer tamanho.
Estados de ponteiro, nada mais
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Hover e foco estão especificados juntos, então ponteiro e teclado recebem a mesma informação. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Ler Veyra Electric como especificação
A maioria das referências mostra o resultado e guarda os números. Esta inverte isso: passos de espaçamento de 12px são publicados ao lado da página, para o resultado ser reproduzido em vez de aproximado. Nada nesta landing page depende de um padrão.
A ordem por trás da landing page
Quando um leitor de indústria cai em uma tela única, ele escaneia antes de ler. O layout responde a isso: a navegação, a linha de estatísticas, o formulário, a contagem regressiva e o clipe de fundo são dimensionados para o escaneamento, com passos de espaçamento de 12px mantendo cada parada distinta. O leitor de indústria recebe a oferta antes das opções.
O que esta landing page acerta
Há uma única promessa nesta página, e passos de espaçamento de 12px a sustentam no lugar. Nada abaixo da dobra precisa carregar a oferta também. Dá ao leitor de indústria a rota honesta mais curta até a oferta.
Perguntas frequentes
O que o briefing por trás de Veyra Electric contém de fato?
O briefing capturado tem 12.080 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.
Como esta entrada de Veyra Electric está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 12.080 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Vite para reconstruir Veyra Electric?
A referência foi construída em React e Vite por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
