Blocos de página prontos para copiar

Uma página web é feita de pedaços que se repetem entre projetos: um hero no topo, uma faixa de preços, uma lista de perguntas frequentes, um rodapé. Você já montou cada um deles dezenas de vezes, e provavelmente do zero em cada vez. Um bloco é uma dessas seções, pronta e responsiva, para você colar e adaptar em vez de reconstruir.

O ganho não é só de tempo. A parte que costuma sair errada quando se monta às pressas — o comportamento no celular, o estado de foco do botão, o contraste do texto sobre o fundo colorido — já vem resolvida aqui. Cada peça desta galeria foi escrita com foco visível no teclado, respeito à preferência de menos animação e alvo de toque confortável. É o tipo de detalhe que ninguém nota quando está certo e todo mundo sente quando está errado.

Se você já viu a galeria de templates, a diferença é de escala. Um template é uma página inteira, com começo, meio e fim. Um bloco é uma seção isolada — uma peça de Lego, não a casa montada.

Isso muda como você usa: um template você adota inteiro e ajusta o conteúdo; blocos você combina. Pega o hero de um, a faixa de preços de outro, o rodapé de um terceiro, e monta a página do jeito que o seu projeto pede. Como cada bloco é independente e tem nomes de classe próprios, eles não brigam entre si quando colocados na mesma página.

Colar blocos bonitos em ordem aleatória produz uma página que parece certa e converte mal. Uma landing page que funciona costuma seguir uma progressão de convencimento:

1. Hero — a promessa em uma frase e o primeiro convite à ação. Quem chega decide em segundos se continua.
2. Prova social ou números — logo depois da promessa, mostre que não é só conversa: quem usa, que resultado teve.
3. Recursos — agora que a pessoa está interessada, explique o como. Um recurso por vez, com o benefício claro.
4. Preços — quando o desejo já existe, apresente o custo. Antes disso, o preço assusta; depois, ele contextualiza.
5. FAQ — o último empurrão, respondendo a objeção que ainda segura a pessoa.
6. CTA final e rodapé — repita a ação principal para quem rolou até o fim já convencido.

Não é regra fixa, mas é um bom padrão para começar. O erro clássico é abrir com preço ou enterrar a ação principal no meio da página.

Cada bloco vem com a paleta e o espaçamento da nossa redação. Ao trazer para o seu projeto, cinco minutos de ajuste evitam que a página fique com cara de retalho:

• Troque as cores por variáveis. Onde o CSS tem #5b3df5, use o tom da sua marca. Se todos os blocos usarem a mesma variável, a página inteira muda de cor de uma vez.
• Unifique o raio de canto e o espaçamento. Peças diferentes podem ter valores ligeiramente distintos; escolha um para a página toda.
• Ajuste a largura máxima. Os blocos vêm com um max-width confortável para leitura. Se o seu layout é mais largo ou mais estreito, esse é o número a mexer.
• Reescreva o texto de exemplo. O conteúdo aqui é ilustrativo. Título genérico converte mal — troque por aquilo que só o seu produto faz.

Um bloco resolve a estrutura e o visual. Duas coisas continuam sendo responsabilidade de quem monta a página:

• Ligar os botões e formulários. Os links apontam para # e os formulários não enviam nada — são demonstração. Conecte à sua rota, ao seu backend ou ao seu serviço de e-mail.
• Revisar o contraste depois de trocar as cores. Enquanto você usa a paleta original, o contraste está garantido. Ao trocar por cores da sua marca, confira de novo: texto claro sobre fundo claro é o erro que mais passa.

Nenhum bloco depende de JavaScript para o visual — o acordeão de FAQ, por exemplo, usa o elemento nativo <details>, que abre e fecha sozinho. Isso mantém as peças leves e coláveis em qualquer projeto, de React a uma página HTML solta.