Sobre este template
Power AI é a referência de hero para um produto de IA ou SaaS, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. O título da própria página é “The most powerful AI ever deployed in talent acquisition”, e a composição é construída em volta exatamente dessas palavras. A paleta se reduz a preto #000000 por baixo, amarelo #FCD34D para a tipografia e índigo #A855F7 carregando os destaques, e a tipografia é Geist. A entrega é um único componente, capturada em 800x604 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 100ms. Deixe aberto enquanto escreve: o briefing de 3.838 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta hero serve designers que precisam entregar uma construção em um único componente a um engenheiro e querem o movimento escrito.
- A página serve desenvolvedores front-end que reconstroem um produto de IA ou SaaS hero em um único componente e procuram os números por trás da aparência.
- Se o seu time de front-end parte de um único componente, levante um tamanho de display fixo de 220px e passos de espaçamento de 82px primeiro e deixe a paleta em paz até a grade se firmar.
O que está incluído
- Linha de cima: marca, links, uma ação. A barra carrega a marca, os links de seção e um botão #A855F7, tudo medido em um tamanho de display fixo de 220px e passos de espaçamento de 82px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #A855F7 é o único elemento da barra com peso.
- Faixa de logos na linha de base. Os logos ficam na linha de base em uma única fileira em Geist, sem rótulo, o que mantém a afirmação implícita e a composição intacta. As marcas são compostas em baixo contraste para lerem como textura e não como afirmação. Baixo contraste, tamanho pequeno, sem título.
- Links colapsam em uma largura. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #A855F7, tudo no menor passo tipográfico do briefing.
- Passos de espaçamento citados. O briefing declara os tamanhos na captura (um tamanho de display fixo de 220px, passos de espaçamento de 82px e transições de 100ms), então dá para conferir uma reconstrução em vez de estimá-la. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
Movimento e interação
A faixa que nunca para
A faixa horizontal é o elemento mais chamativo depois do título: movimento contínuo, #A855F7 no item ativo, e nunca pede interação ao leitor. O item ativo é marcado com #A855F7, não com uma mudança de tamanho.
Todo o orçamento de animação
O orçamento de animação é pequeno e explícito: 100ms, aplicado a mudanças de estado, não a entradas. As durações são curtas o bastante para o feedback parecer resposta, e não animação.
O argumento que esta hero faz
Quando você briefa uma hero de SaaS, a parte difícil é decidir o que a primeira tela se recusa a dizer. Power AI responde isso de antemão: uma linha de display e a navegação, o título, a linha de estatísticas, a faixa de clientes e o clipe de fundo atrás dela. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
O tempo por trás da hero
Enquanto um template anima cada seção na entrada, esta anima transições de 100ms, estados de hover e de clique e um marquee em loop e depois para. Nada anima por si nesta hero.
A hero com a sua cara
A parte reaproveitável é a composição; o assunto é seu. Troque o título, mantenha a escala tipográfica (um tamanho de display fixo de 220px) e teste de novo o destaque #A855F7 sobre a sua própria mídia. Se um elemento novo não ajuda a explicar a oferta ou o próximo passo, ele pertence abaixo da dobra. Reescreva o texto e a mídia antes de repintar qualquer coisa.
Perguntas frequentes
Quanto de Power AI depende de um único componente?
Power AI foi construído em um único componente, 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.
O que o briefing por trás de Power AI contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x604, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Como devo tratar a mídia de Power AI 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 800x604.
