Sobre este template
Portal resolve o problema de hero para um produto de IA ou SaaS com um único briefing capturado. A cor se limita a neutro #F2F2EE por baixo, tom escuro #192837 para a tipografia e tom escuro #7342E2 carregando os destaques, composta em Helvetica Now Display. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. A página mantém o movimento em transições de 0.3s. Deixe aberto enquanto escreve: o briefing de 5.718 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta hero é feita para agências que precisam da moldura em 640x474 sobrevivendo a três rodadas de edições do cliente.
- Feito para agências que cobram por rodada e querem seções de 100vh e passos de espaçamento de 24px acordado antes da primeira.
- Desenvolvedores front-end que herdam um arquivo do Figma vão usar #F2F2EE e #7342E2 para conferir se a paleta sobreviveu à entrega.
O que está incluído
- Links antes da ação. A barra carrega a marca, os links de seção e um botão #7342E2, tudo medido em seções de 100vh e passos de espaçamento de 24px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #7342E2 é o único elemento da barra com peso. Desenhe o estado colapsado antes de acrescentar um sexto link.
- A tipografia carrega o tom. Com Helvetica Now Display 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. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados. Não acrescente um tamanho sem função.
- Estrutura em uma tela. A composição está completa em 640x474: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x474, e é por isso que ela se sustenta quando o texto muda.
- Navegação em uma só linha. Marca, links e a ação #7342E2 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental.
Movimento e interação
Durações vindas do briefing
Os controles resolvem em 0.3s, rápido o bastante para a página responder ao toque, e não depois dele. A curva de aceleração é especificada junto com a duração (0.3s), então uma reconstrução não pode trocar a sensação sem aviso. Os tempos fazem parte do design, não são um acabamento final.
Interação mantida local
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Os estados interativos não mexem no layout, então nada salta sob o ponteiro.
A ordem por trás da hero
Leia a primeira tela de uma vez e a oferta já está clara. a navegação, o selo de anúncio, a lista de recursos e o clipe de fundo chegam em sequência, separados por seções de 100vh e passos de espaçamento de 24px em vez de divisores decorativos. O leitor de SaaS recebe a oferta antes das opções.
Ler Portal como especificação
Toda relação nesta página é um valor que dá para conferir: seções de 100vh, passos de espaçamento de 24px e transições de 0.3s. É isso que torna Portal reconstruível, e não apenas reproduzível. Nada nesta hero depende de um padrão.
O que esta hero acerta
Conte as decisões desta hero e todas voltam a um único documento: 5.718 caracteres que nomeiam a moldura em 640x474, a tipografia e o ritmo. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Portal?
O briefing capturado tem 5.718 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 Portal é animado?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.3s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
Como esta entrada de Portal está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 5.718 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
