Sobre este template
Esta é a hero da Alumica, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “Automation & Fintech” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. O esquema de cores é índigo profundo #080210 por baixo e laranja vivo #FF8A00 carregando os destaques, e a página é composta em Inter. A stack é um único componente; cada medida está registrada, e é isso que a torna reaproveitável. Tudo o que se move cabe em transições de 0.3s e um loop de vídeo ao fundo. É a referência certa para hero para um produto fintech que precisa parecer intencional já na primeira tela.
Feito para
- Times terceirizados que assumem esta hero e precisam de um único componente fixado no repositório antes do primeiro commit.
- Times que constroem um produto fintech hero e precisam de uma moldura em 2056x1396 registrado antes de o orçamento sair.
- Times que reconstroem a hero de fintech de um concorrente e querem um único componente nomeada antes de escolher um framework.
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 #FF8A00, tudo medido em passos de espaçamento de 10px e transições de 0.3s para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #FF8A00 é o único elemento da barra com peso.
- Um clipe faz todo o trabalho. O vídeo em 2056x1396 roda 5,8s em loop atrás do texto, mudo e inline, sem camada de tingimento entre os dois. Exporte em 2056x1396 ou mais largo e o recorte cover continua funcionando.
- A tipografia define a hierarquia. Com Inter fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. Substituir a família é possível, mas as proporções precisam sobreviver à troca.
- Links colapsam em uma largura. Cada link traz estados de foco e de hover próprios, não os do navegador. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
Movimento e interação
Mudanças de estado, cronometradas
Hover, clique e foco resolvem todos em 0.3s, e é isso que faz a interface parecer imediata. A curva de aceleração é especificada junto com a duração (0.3s), então uma reconstrução não pode trocar a sensação sem aviso.
Hover onde faz sentido
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards, aplicado aos elementos que já parecem interativos. Os estados interativos não mexem no layout, então nada salta sob o ponteiro. Menos estados, todos especificados.
Ler Alumica como especificação
Quase toda decisão aqui é um valor que dá para conferir: passos de espaçamento de 10px e transições de 0.3s. A mídia é um loop de 5,8s em 2056x1396. A tipografia segue em Inter, então qualquer substituição precisa manter as mesmas proporções. Nada nesta hero depende de um padrão.
A hero com a sua cara
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe passos de espaçamento de 10px e transições de 0.3s em paz, e você tem uma página que parece intencional. Reescreva a linha de display antes de tocar na cor.
Como Alumica ordena a primeira leitura
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta hero coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo na frente do leitor e segura o resto. O leitor de fintech recebe a oferta antes das opções.
Perguntas frequentes
Quanto de Alumica depende de um único componente?
Alumica 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.
Por que o prompt do Alumica não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 2.424 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Alumica contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2056x1396, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
