Sobre este template
Leia Infrastructure como especificação de hero: os valores foram escritos antes de a página ser construída. O título diz “Ready to elevate your digital infrastructure?”, e o resto da hero se organiza em volta disso. A página inteira é construída sobre índigo profundo #010002 por baixo, branco #DAD6DB para a tipografia e azul #0F2F65 carregando os destaques. A entrega é React e Tailwind CSS, capturada em 2076x1498 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 4s e um loop de vídeo ao fundo. Use como referência quando estiver construindo hero para um produto de IA ou SaaS e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 8s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Infrastructure.
- Quem briefa um modelo para uma hero vai usar o prompt de 2.467 caracteres como ponto de partida.
O que está incluído
- Navegação em uma só linha. A fileira gasta o contraste em um lugar só: a ação #0F2F65, com a marca e os links recuados na cor do texto. Os links são compostos abaixo da marca em tamanho, e a ação #0F2F65 é o único elemento da barra com peso.
- Números levados para a construção. Toda medida do briefing é um número que dá para medir de volta: passos de espaçamento de 10px e transições de 4s. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
- Um clipe em sangria total atrás da tipografia. A primeira tela é um único clipe em 2076x1498, e todo o resto se organiza por cima dele. O loop é curto o bastante (8s) para o olho ler como textura e não como linha do tempo.
- Links antes da ação. Cada link traz estados de foco e de hover próprios, não os do navegador. Se a sua página tiver mais seções, agrupe em vez de alargar a barra.
Movimento e interação
Rápido o bastante para parecer intencional
O movimento aqui é medido em milissegundos: 4s. Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. A curva de aceleração é especificada junto com a duração (4s), então uma reconstrução não pode trocar a sensação sem aviso.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente vem do loop de 8s em 2076x1498, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Como a hero se reorganiza
A composição de desktop é resolvida contra 2076x1498, e o layout estreito é projetado, não herdado: a escala é fluida, não em degraus. O movimento tem um ramo de movimento reduzido, e a mídia traz um frame de poster para a página continuar comunicando quando a reprodução automática não está disponível. A largura muda as medidas, não a rota de leitura.
O que mudar primeiro em Infrastructure
Repintar a paleta primeiro é o erro de sempre. Isso muda o clima sem tocar na composição, e passos de espaçamento de 10px e transições de 4s continuam sustentando o layout; faça o texto e a mídia primeiro e a paleta por último. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Os números por trás da hero
Uma captura de tela mostra como a página é; o briefing mostra por quê. passos de espaçamento de 10px e transições de 4s fecham a distância entre os dois. Nada nesta hero depende de um padrão.
Perguntas frequentes
O prompt de Infrastructure é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2076x1498, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Infrastructure 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.
Posso usar Infrastructure em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 2076x1498.
