Sobre este template
Antes de reconstruir uma hero para um produto de IA ou SaaS, leia Sentinel AI: a composição e a especificação por trás dela estão as duas aqui. O título diz “We implement security correctly”, e o resto da hero se organiza em volta disso. A paleta é preto #000000 por baixo e verde suave #8EB992 carregando os destaques, com tipografia Sora. A entrega é React e Tailwind CSS, capturada em 800x594 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 0.7s e cubic-bezier(0.16, 1, 0.3, 1). Deixe aberto enquanto escreve: o briefing de 5.940 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Sentinel AI.
- Repinte #8EB992 primeiro e reconfira contra #000000, depois mexa no layout por baixo.
- Se o seu time de design só tem uma tarde, repinte esta hero em torno de #8EB992 e deixe 800x594 e a grade onde estão.
O que está incluído
- Uma barra sem excesso. A fileira gasta o contraste em um lugar só: a ação #8EB992, com a marca e os links recuados na cor do texto. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #8EB992 é o único elemento da barra com peso.
- Os tamanhos estão no briefing, não em uma escala. Os valores são a especificação: passos de espaçamento de 20px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1), capturados em 800x594 em vez de inferidos de um print. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo. Meça antes de ajustar.
- Nada estiliza além da escala. Com Sora 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. O texto de interface fica em uma família só, então a página nunca mistura duas vozes no mesmo tamanho.
- Links colapsam em uma largura. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #8EB992, dimensionada para ficar discreta diante do resto da página.
Movimento e interação
Uma duração para os controles
Os tempos são curtos e consistentes (0.7s com cubic-bezier(0.16, 1, 0.3, 1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. A curva de aceleração é especificada junto com a duração (0.7s), então uma reconstrução não pode trocar a sensação sem aviso.
Ponteiro só onde ajuda
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 alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Ler Sentinel AI como especificação
O briefing é uma especificação, não um moodboard. Ele fixa passos de espaçamento de 20px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) e diz qual é a mídia: 800x594. Esse nível de detalhe é o que faz o design sobreviver a uma reconstrução: mude o texto e as relações continuam de pé. Nada nesta hero depende de um padrão.
A ordem por trás da hero
Uma ordem rígida custa flexibilidade depois. Acrescente uma seção acima da dobra e passos de espaçamento de 20px e transições de 0.7s precisam ser recortadas de novo, porque a sequência é estrutural, não decorativa. O leitor de SaaS recebe a oferta antes das opções.
Por que o briefing de SaaS se sustenta
Um hero de estoque e esta hero usam as mesmas peças. Aqui elas são ordenadas por a navegação, a linha de estatísticas e a lista de recursos e medidas com passos de espaçamento de 20px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1), então a tela lê como sequência, não como contêiner. Sentinel AI enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Sentinel AI?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x594, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Sentinel AI depende de React e Tailwind CSS?
Sentinel AI 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.
Como devo tratar a mídia de Sentinel 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 800x594.
