Sobre este template
Cybersecurity Hero é 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. A paleta é #0A0A0F por baixo e tom claro #B04090 carregando os destaques, com tipografia 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 se resume a transições de 300ms e cubic-bezier(0.4, 0, 0.2, 1), mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 11.920 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para agências que apresentam trabalho de SaaS e precisam de um breakpoint de 440px na primeira resposta ao cliente.
- Esta hero é feita para agências que precisam da moldura em 640x472 sobrevivendo a três rodadas de edições do cliente.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Cybersecurity Hero.
O que está incluído
- A navegação é fina de propósito. A barra carrega a marca, os links de seção e um botão #B04090, tudo medido em passos de espaçamento de 12px e transições de 300ms para nunca virar um segundo cabeçalho. Abaixo de 440px os links colapsam em vez de quebrar para uma segunda linha.
- O tamanho de display fala. Os passos de tamanho e o tracking do briefing são o que dá o tom: Inter em um tamanho de display apertado, depois uma queda clara para o texto de apoio. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
- Prova social na borda inferior. As marcas de clientes correm pela borda inferior em baixo contraste e no menor passo do briefing, para a prova social ler como textura de hero e nunca disputar com o título. Os logos aparecem em um só tamanho, o que impede a faixa de disputar com o título. Uma fileira, uma linha de base. A referência tem captura em 640x472.
- Navegação sem fundo próprio. Os rótulos são curtos o bastante para caber em uma linha a 440px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Uma duração para os controles
O briefing fixa o valor da transição em 300ms, então uma reconstrução não pode cair em um padrão mais lento. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado. Mantenha as durações quando você trocar a pele da página.
Hover onde faz sentido
O feedback se limita a estados de hover nos botões e links, não em todos os cards, e é isso que impede uma primeira tela densa de parecer carregada. Os estados saem da paleta da própria página, não do padrão de um componente. Não anime o layout no hover.
O que se sustenta para IA e SaaS
A contenção custa espaço para prova acima da dobra. Este briefing aceita esse custo e gasta a primeira tela com a oferta, com cantos de 20px e passos de espaçamento de 12px fixadas para que uma seção de prova seja acrescentada abaixo sem retrabalho. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
A ordem por trás da hero
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a navegação, o selo de anúncio, a linha de estatísticas, a faixa de clientes e a grade de cards no lugar e gasta cantos de 20px e passos de espaçamento de 12px para tornar a rota óbvia. O leitor de SaaS recebe a oferta antes das opções.
O tempo por trás da hero
O tempo é explícito: transições de 300ms e estados de hover e de clique, tudo escrito no briefing em vez de ajustado no olho. Nada anima por si nesta hero.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Cybersecurity Hero?
O briefing capturado tem 11.920 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.
Quanto de Cybersecurity Hero depende de React e Tailwind CSS?
Cybersecurity 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.
O que comanda o movimento em Cybersecurity Hero?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 300ms usando cubic-bezier(0.4, 0, 0.2, 1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
