Sobre este template
Leia AI Workflow Hero como especificação de hero: os valores foram escritos antes de a página ser construída. O esquema de cores é verde profundo #1F2A1D por baixo, e a página é composta em Inter. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento cabe todo em transições de 400ms e cubic-bezier(0.22,1,0.36,1). Deixe aberto enquanto escreve: o briefing de 16.580 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de growth que redesenham um produto de IA ou SaaS hero e querem a moldura em 640x470 mantida enquanto o texto da oferta muda.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da AI Workflow Hero.
- Fundadores que lançam um produto de IA ou SaaS hero e precisam da decisão de Inter e da escala tipográfica antes de um desenvolvedor começar.
O que está incluído
- A navegação é fina de propósito. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Inter, para a barra pertencer à página abaixo e não a um sistema separado. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- Uma fileira de estatísticas em vez de uma afirmação. A fileira fica no alto da hero como prova, não como decoração. Os números são compostos em um peso só, então a fileira não hierarquiza as próprias estatísticas. A referência tem captura em 640x470.
- Navegação em uma só linha. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 10px e transições de 400ms, para ler como faixa e não como bloco.
- Números, não impressões. O layout trabalha com valores absolutos, não com proporções: passos de espaçamento de 10px, transições de 400ms e curva de aceleração cubic-bezier(0.22,1,0.36,1). Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
Movimento e interação
Durações curtas e nomeadas
O orçamento de animação é pequeno e explícito: 400ms usando cubic-bezier(0.22,1,0.36,1), aplicado a mudanças de estado, não a entradas. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca.
Interação mantida local
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar. Mantenha a camada interativa pequena.
O que se move em AI Workflow Hero
Manter o movimento tão pequeno faz a página se apoiar na tipografia e na moldura. Se transições de 400ms, estados de hover e de clique e um canvas ao vivo fosse removido por completo, a composição continuaria de pé. Nada anima por si nesta hero.
A ordem por trás da hero
Dá para embaralhar esses blocos e a página continuaria carregando. Mas deixaria de ler como argumento: a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e o clipe de fundo são uma sequência, e passos de espaçamento de 10px e transições de 400ms só funcionam nessa ordem. O leitor de SaaS recebe a oferta antes das opções.
O que esta hero acerta
Quando você briefa uma hero de SaaS, a parte difícil é decidir o que a primeira tela se recusa a dizer. AI Workflow Hero responde isso de antemão: uma linha de display e a navegação, o selo de anúncio, a linha de estatísticas, a lista de recursos e o clipe de fundo atrás dela. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
O prompt de AI Workflow Hero é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 16.580 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.
Por que a entrada cita React e Tailwind CSS?
AI Workflow Hero 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 manter as transições de AI Workflow Hero e mudar os tempos?
As entradas e as mudanças de estado ficam na faixa de 400ms usando cubic-bezier(0.22,1,0.36,1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
