Sobre este template
Antes de reconstruir uma bloco de CTA para um produto de IA ou SaaS, leia Rocket CTA: a composição e a especificação por trás dela estão as duas aqui. A cor se limita a azul profundo #14191E por baixo, composta em Inter. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. O orçamento de movimento é transições de 300ms. Trate como o briefing de uma bloco de CTA para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Tome a estrutura da bloco de CTA inteira e substitua o texto linha por linha contra uma moldura em 640x468.
- Times de produto que escrevem o texto da Bloco de CTA e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
- Feito para um fundador solo lançando uma bloco de CTA para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- Topo com uma única ação. A navegação é uma fileira só, sem um segundo nível embaixo dela. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte. Desenhe o estado colapsado antes de acrescentar um sexto link.
- Valores que dá para conferir. O briefing nomeia os números: passos de espaçamento de 10px e transições de 300ms. É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Nada estiliza além da escala. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema. Mantenha os passos, troque a família.
- Estrutura em uma tela. A composição de bloco de CTA é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 640x468 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 640x468, e é por isso que ela se sustenta quando o texto muda. Nada decorativo pertence à região acima da dobra.
Movimento e interação
O scroll conduz a composição
A posição de scroll, não um timer, conduz a composição: as camadas de fundo se movem em ritmo diferente do primeiro plano. A página muda no ritmo do leitor, não em um horário fixo. Teste com o movimento reduzido ativo. A referência tem captura em 640x468.
Todo o orçamento de animação
Os controles resolvem em 300ms, rápido o bastante para a página responder ao toque, e não depois dele. Como os valores são curtos, uma reconstrução que os deixe mais lentos fica visível na hora.
Ler Rocket CTA como especificação
Quando uma reconstrução desanda, o espaçamento é o primeiro a ir. Rocket CTA evita isso publicando passos de espaçamento de 10px e transições de 300ms junto com a composição. Nada nesta bloco de CTA depende de um padrão.
O argumento que esta bloco de CTA faz
Um hero de estoque e esta bloco de CTA usam as mesmas peças. Aqui elas são ordenadas por a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo e medidas com passos de espaçamento de 10px e transições de 300ms, então a tela lê como sequência, não como contêiner. Rocket CTA enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
O tempo por trás da bloco de CTA
Movimento ambicioso costuma custar a legibilidade da primeira tela. Este briefing mantém transições de 300ms, camadas em parallax e estados de hover e de clique curto o bastante para a tipografia nunca precisar esperar. Nada anima por si nesta bloco de CTA.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Rocket CTA?
O briefing capturado tem 11.622 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.
Como esta entrada de Rocket CTA está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 11.622 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
Rocket CTA 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.
