Uma barbearia, cinco direções de design completas — Classic, Dark, Street, Minimal e Swiss. Troca ao vivo, num clique ou pela seta do teclado, e a marca inteira muda de cara sem perder o caminho da conversão. Demo autoral pra mostrar range de direção de arte numa página só.
01 / O PROBLEMA
"Mostra um exemplo" é a pergunta que trava o projeto.
Quando um negócio local pede uma landing, a conversa empaca no gosto. O dono não sabe descrever o estilo que quer, e mostrar três referências do Pinterest não resolve — cada um imagina uma coisa. O resultado é round de revisão que poderia ser evitado se desse pra ver a mesma página em estilos diferentes, lado a lado.
Peguei uma barbearia fictícia, a Navalha, e construí cinco direções de arte completas da mesma landing pra resolver exatamente isso: alinhar gosto antes de produzir.
02 / A ABORDAGEM
Mesma estrutura, cinco peles.
A regra que me dei: o caminho de conversão não muda. Hero, serviços com preço, galeria, equipe, depoimentos e contato com CTA de WhatsApp aparecem nos cinco estilos, na mesma ordem. O que muda é a direção de arte — tipografia, paleta, ritmo, decoração.
Classic é sépia e serif vintage. Dark é preto e dourado, premium. Street é laranja neon, alto contraste, tipografia gigante. Minimal é preto no branco, muito respiro. Swiss é grid e hairlines vermelhas, numeração nos serviços. Cinco marcas, uma anatomia de conversão.
03 / A CONSTRUÇÃO
Troca instantânea, sem framework, numa página.
Switcher ao vivo. Um seletor fixo embaixo troca o estilo na hora — clique ou seta do teclado. Cada direção é uma função que devolve o HTML inteiro da página; trocar é re-renderizar e voltar o scroll pro topo. Sem recarregar, sem flash.
Cinco tipografias com personalidade. Fraunces no Classic, Bebas Neue no Dark e no Street, sans no Minimal, bold no Swiss. A fonte carrega metade da identidade — escolhi cada uma pra puxar o estilo pra um lugar diferente.
Conversão preservada em todas. Preço em cada serviço, CTA de agendar no WhatsApp e contato com endereço e horário aparecem nos cinco — porque mudar de estilo nunca pode custar a conversão.
É um único HTML com Tailwind e um pouco de JS puro. Nada de build, nada de backend — abre e funciona.
04 / RESULTADO
Cinco propostas numa tela, gosto alinhado num clique.
O demo vira ferramenta de venda: em vez de mandar mockups soltos, eu abro a Navalha com o cliente e troco de estilo na frente dele. Em segundos ele aponta o que gosta, e o projeto começa com a direção de arte já decidida.
Cinco direções completas, seis seções e seis serviços com preço — numa página só, que troca de cara sem perder o caminho da conversão. É range de design provado ao vivo, não prometido.
Estilos
5
Seções
6
Serviços
6
Arquivo
1 HTML
