Sobre este template
Antes de reconstruir uma hero para um produto de IA ou SaaS, leia Alertix: a composição e a especificação por trás dela estão as duas aqui. O título diz “Stay Ahead With *Cutting-Edge*”, e o resto da hero se organiza em volta disso. A página inteira é construída sobre azul profundo #0A0F14 por baixo, verde-água suave #C3DFE8 para a tipografia e azul #1D1D6D carregando os destaques. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento cabe todo em um loop de vídeo ao fundo. Parta do briefing capturado e depois edite a hero em vez de reconstruí-la do zero.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da hero e deixe o prompt segurar uma moldura em 1932x1400.
- Times que constroem hero para um produto de IA ou SaaS e querem o detalhe medido (passos de espaçamento de 120px) em vez de uma captura de tela para copiar.
- Profissionais de marketing de produto que precisam que hero continue legível com 7,9s de vídeo em loop atrás do texto.
O que está incluído
- Uma barra de navegação que sai do caminho. A barra carrega a marca, os links de seção e um botão #1D1D6D, tudo medido em passos de espaçamento de 120px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #1D1D6D é o único elemento da barra com peso.
- Um clipe, não uma ilustração. O vídeo fica na camada de baixo da composição em 1932x1400, com a tipografia organizada acima e nada entre os dois. Um frame de poster em 1932x1400 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa. Exporte em 1932x1400 ou mais largo para o recorte continuar honesto.
- A navegação é fina de propósito. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Nada aqui é herdado. A lista é curta (passos de espaçamento de 120px), e é por isso que o sistema inteiro pode ser conferido à mão. A lista é curta o bastante para um revisor conferir elemento por elemento.
Movimento e interação
Um loop, não uma linha do tempo
O movimento ambiente é um clipe de 7,9s em 1932x1400, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Estático por decisão
Esta é entregue como composição estática em 1932x1400, então a hierarquia precisa funcionar sem movimento, e funciona. Só se movem os elementos que respondem ao ponteiro. Mantenha o movimento nos controles.
A hero com a sua cara
Você não precisa reconstruir a hero para deixá-la com a sua cara. Substitua o título e a mídia, mantenha a escala (passos de espaçamento de 120px), e o layout continua lendo como foi desenhado. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
Como a hero se reorganiza
Quando o texto é longo, o layout estreito é o primeiro a quebrar. Aqui um clamp entre 48px e 120px absorve a mudança, e a navegação vira um menu compacto no celular. A reorganização mantém a ação alcançável em qualquer largura.
A ordem por trás da hero
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta hero coloca a navegação e o clipe de fundo na frente do leitor e segura o resto. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
Por que o prompt do Alertix não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 3.245 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Alertix?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1932x1400, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Alertix?
Alertix 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.
