Sobre este template
Contact Cybernetic é uma hero de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. O título diz “). Inside, display an acknowledgment banner reading”, e o resto da hero se organiza em volta disso. A cor se limita a branco #F1F3F1 por baixo e verde profundo #1C2E1E para a tipografia, composta em Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento se resume a transições de 1s, mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 6.423 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 640x458 como teste de aceite da primeira rodada.
- Profissionais de marketing que herdam esta hero vão usar tipografia de 21px a 76px e passos de espaçamento de 23px para conferir se uma reescrita manteve a escala.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Contact Cybernetic.
O que está incluído
- A navegação é fina de propósito. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só. Mantenha de quatro a cinco links; a linha foi dimensionada para isso. A referência tem captura em 640x458.
- Medido contra a viewport. O briefing fixa tipografia de 21px a 76px, passos de espaçamento de 23px e transições de 1s e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Selo acima da dobra. Um selo, uma mensagem: a pílula fica acima do título em Inter no menor passo da escala, e nada mais disputa esse lugar. Existe um único anúncio, e é isso que faz o selo parecer notícia. Remova quando a novidade envelhecer.
- Topo com uma única ação. A navegação é uma fileira só, sem um segundo nível embaixo dela. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
Movimento e interação
Estados de ponteiro, nada mais
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Os estados estão nomeados no briefing, então a página não depende de uma biblioteca de efeitos de hover. Mantenha a camada interativa pequena.
Rápido o bastante para parecer intencional
As mudanças de estado estão especificadas em 1s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (1s), então uma reconstrução não pode trocar a sensação sem aviso.
Como a hero se reorganiza
Um layout estreito desenhado exige mais decisões que um espremer. O briefing paga por elas: a navegação vira um menu compacto no celular, declarado em vez de descoberto na hora de construir. A largura muda as medidas, não a rota de leitura.
A ordem por trás da hero
Se a sua página hoje abre com recursos, esta é a ordem a copiar: a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo na frente, o detalhe de apoio depois, e tipografia de 21px a 76px e passos de espaçamento de 23px marcando a distância. O leitor de SaaS recebe a oferta antes das opções.
Os números por trás da hero
Desmonte a hero e os valores ainda a descrevem: tipografia de 21px a 76px e passos de espaçamento de 23px para a moldura e o ritmo abaixo. Nada nesta hero depende de um padrão.
Perguntas frequentes
O prompt de Contact Cybernetic é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.423 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?
Contact Cybernetic 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 se comportam as transições de 1s em Contact Cybernetic?
As entradas e as mudanças de estado ficam na faixa de 1s. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
