Sobre este template
Growth Decisions foi capturada em 1468x1080 e guardada como especificação, não como imagem de galeria. A paleta é #FFFFFF por baixo, #0A0A0A para a tipografia e azul #006CD2 carregando os destaques, com tipografia Inter. A entrega é um único componente, capturada em 1468x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 0.16s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 11.164 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Escreva o seu próprio título e depois reconstrua esta landing page em um único componente com as medidas intactas.
- Feito para agências que apresentam trabalho de SaaS e precisam de um breakpoint de 821px na primeira resposta ao cliente.
- Esta landing page serve designers que precisam entregar uma construção em um único componente a um engenheiro e querem o movimento escrito.
O que está incluído
- A barra segue a grade. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #006CD2, tudo isso no topo de landing page e sem fundo próprio. Abaixo de 821px os links colapsam em vez de quebrar para uma segunda linha. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- O frame de poster importa. Um único clipe mudo em loop preenche a moldura em 1468x1080 e 7,1s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. O loop é curto o bastante (7,1s) para o olho ler como textura e não como linha do tempo.
- Uma família, usada com disciplina. 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 pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir. Não acrescente um tamanho sem função.
- A escala é clampada, não escalonada. O topo da escala é fluido (um clamp entre 28px e 18px) e o resto é fixo, então a moldura continua composta conforme a viewport estreita. O menu mobile faz parte do mesmo briefing, então o estado colapsado também foi desenhado.
Movimento e interação
O tempo definido no briefing
O movimento nos controles é curto e repetível: 0.16s a cada mudança de estado. A curva de aceleração é especificada junto com a duração (0.16s), então uma reconstrução não pode trocar a sensação sem aviso.
Movimento só no texto
O título não aparece como um bloco em fade: cada linha sobe de uma janela com overflow oculto. É isso que separa a página de uma imagem estática, porque a ordem em que as palavras surgem é que conta a história. São algumas transições, não uma biblioteca de animação, então portar custa pouco. A referência tem captura em 1468x1080.
O que um produto de IA ou SaaS ganha aqui
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A landing page lê como uma decisão única: a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo em uma sequência só. Growth Decisions enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A ordem por trás da landing page
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta landing page coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo na frente do leitor e segura o resto. O leitor de SaaS recebe a oferta antes das opções.
Como a landing page se reorganiza
A maior parte do trabalho responsivo para em esconder elementos. Aqui o layout muda de forma: a escala é fluida, não em degraus, o layout muda em 821px e a seção fica presa a 100vh, e nada importante é descartado para a dobra caber. A ordem é a última coisa a mudar.
Perguntas frequentes
Quanto de Growth Decisions depende de um único componente?
Growth Decisions foi construído em um único componente, 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 o briefing por trás de Growth Decisions contém de fato?
O briefing capturado tem 11.164 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.
O que comanda o movimento em Growth Decisions?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 0.16s usando cubic-bezier(0.16, 1, 0.3, 1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
