Sobre este template
Leia Zyphor como especificação de hero: os valores foram escritos antes de a página ser construída. O título da própria página é “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive”, e a composição é construída em volta exatamente dessas palavras. A paleta é azul profundo #0B0C10 por baixo, com tipografia Inter. A stack é React e Tailwind CSS, então dá para levar hero para um projeto sem handoff de design. O movimento fica restrito a um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 3.562 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 1930x1400 como teste de aceite da primeira rodada.
- Se três pessoas vão editar esta hero, dê a quem cuida do conteúdo passos de espaçamento de 20px em vez de uma captura de tela.
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 7,2s de vídeo em loop.
O que está incluído
- Uma barra sem excesso. 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. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra. Desenhe o estado colapsado antes de acrescentar um sexto link.
- Os tamanhos estão no briefing, não em uma escala. O layout é resolvido sobre valores fixos (passos de espaçamento de 20px), e é isso que mantém a primeira tela composta em qualquer largura. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- O frame de poster importa. O clipe roda 7,2s em 1930x1400 e faz loop sem corte visível, então lê como superfície e não como filmagem. O loop é curto o bastante (7,2s) para o olho ler como textura e não como linha do tempo.
- A barra segue a grade. A marca é tratada como tipografia, não como um logo fechado, o que mantém a linha de cima em uma só linha de base. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Feedback nos controles
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Cada estado muda uma única propriedade, o que mantém o feedback legível.
O loop faz o trabalho ambiente
Um único clipe de 7,2s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Os números por trás da hero
A tipografia é o primeiro número: passos de espaçamento de 20px. O espaçamento decorre dele, e todo o resto da página é posicionado contra esses dois valores. Nada nesta hero depende de um padrão.
Como a hero se reorganiza
Responsivo aqui significa que a escala muda e a sequência não. a navegação vira um menu compacto no celular, e a ordem de leitura fica onde o briefing a colocou. Nada importante é descartado em larguras estreitas.
Como Zyphor ordena a primeira leitura
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação e o clipe de fundo em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Zyphor?
O briefing capturado tem 3.562 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.
Posso reconstruir hero do Zyphor em outra stack?
Zyphor 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.
De onde veio o design de Zyphor?
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 1930x1400.
