Sobre este template
FAQ CTA entrega a um produto de saúde ou bem-estar uma primeira tela pronta e os números que a produziram. “Send Money Worldwide at the Best Rates” é a linha que o layout foi construído para sustentar. A paleta é branco #F0F0F0 por baixo e vermelho vivo #FF4B2B carregando os destaques, com tipografia Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento cabe todo em transições de 6.5s. Use quando a bloco de CTA precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Times de growth que redesenham um produto de saúde ou bem-estar bloco de CTA e querem a moldura em 640x468 mantida enquanto o texto da oferta muda.
- Feito para um fundador solo lançando uma bloco de CTA para um produto de saúde ou bem-estar, sem nenhum design system atrás.
- Quem briefa um modelo para uma bloco de CTA vai usar o prompt de 9.456 caracteres como ponto de partida.
O que está incluído
- Topo com uma única ação. Marca, links e a ação #FF4B2B compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #FF4B2B é o único elemento da barra com peso.
- Números levados para a construção. O briefing fixa passos de espaçamento de 10px e transições de 6.5s e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. Os valores são citados do prompt capturado em vez de inferidos, então sobrevivem a uma nova renderização.
- A escala cai com força. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. A altura de linha segue os passos de tamanho, não um valor global único.
- Os cards fazem a estrutura. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a bloco de CTA fácil de varrer. A altura dos painéis é ditada pelo texto, então uma linha mais longa não quebra o alinhamento da fileira. A referência tem captura em 640x468.
Movimento e interação
Profundidade vinda da renderização
Um canvas WebGL é o único espetáculo da página, e a interface em volta foi organizada para não competir. A cena é desenhada no tamanho do contêiner, então não depende de uma resolução de renderização fixa.
Hover onde faz sentido
O feedback se limita a estados de hover nos botões e links, não em todos os cards e abas ou um acordeão que troca o conteúdo no lugar, então o resto do layout é uma composição fixa. Os alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles. Não anime o layout no hover.
O que mudar primeiro em FAQ CTA
Comece pela promessa, não pela decoração. Reescreva “Send Money Worldwide at the Best Rates” como uma frase que diga o que você faz, depois componha essa frase em Inter no tamanho de display que o briefing usa. Troque vermelho vivo #FF4B2B pelo seu próprio destaque e confira o contraste contra branco #F0F0F0 antes de mexer em qualquer outra coisa. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
Como a bloco de CTA se reorganiza
O briefing descreve o que muda em cada largura (o movimento tem um ramo de movimento reduzido), ou seja, a versão de celular é uma decisão, não um espremer. O contraste se mantém no destaque #FF4B2B sobre a mídia, e o vídeo é mudo e roda inline. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
O que um produto de saúde ou bem-estar ganha aqui
A razão de isso funcionar para um produto de saúde ou bem-estar é que a página nunca pede ao leitor que monte a mensagem. A página diz isso em voz alta: “Send Money Worldwide at the Best Rates”. Layout, tipografia e cor estão decididos (branco #F0F0F0 e vermelho vivo #FF4B2B, em Inter), então a primeira tela lê como um argumento pronto, não como uma pilha de peças. Dá ao leitor de saúde a rota honesta mais curta até a oferta.
Perguntas frequentes
O prompt de FAQ CTA é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 9.456 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 bloco de CTA do FAQ CTA em outra stack?
FAQ 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.
O que comanda o movimento em FAQ CTA?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 6.5s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
