Bartmann — barbearia contemporânea

O ponto de partida

Barbearias são um segmento em que a decisão de compra é rápida e, na maioria das vezes, acontece pelo celular. Quem acessa uma página desse tipo precisa responder a três perguntas em poucos segundos: que tipo de lugar é esse, o que ele oferece e como posso agendar um horário. Se a página exige que a pessoa role muito antes de encontrar essas respostas, a chance de ela desistir aumenta.

Estabeleci então uma restrição para o projeto: uma página só, com um objetivo só. Tudo que não ajudasse a marcar um horário ficaria de fora.

Estrutura e hierarquia

Organizei o conteúdo em seções ancoradas, na ordem em que as dúvidas aparecem:

• Início — hero com a proposta da barbearia e a chamada principal para agendar, visível sem rolagem.
• Serviços — o que é oferecido, em blocos curtos e escaneáveis em vez de parágrafos corridos.
• Sobre — a identidade do lugar, que é o que diferencia uma barbearia da outra quando os serviços são parecidos.
• Depoimentos — prova social, aqui em forma fictícia por ser um projeto conceitual.
• Agendar e Contato — o destino para onde toda a página empurra, repetido no fim para quem leu tudo antes de decidir.

A navegação do topo aponta para essas âncoras, então a página inteira funciona sem nenhum carregamento adicional.

Direção visual

Trabalhei com uma paleta escura de verde-petróleo e marfim, que dá o tom de barbearia contemporânea sem cair no clichê de madeira e tesoura. O contraste alto entre fundo escuro e texto claro resolve dois problemas ao mesmo tempo: a leitura ao sol, que é onde muita gente abre o link, e o destaque dos botões de ação.

Tipografia em duas famílias — uma de display para os títulos, uma de texto para o corpo — para criar hierarquia sem precisar de muitos tamanhos diferentes.

Decisões técnicas

• Sem framework de interface. A página é HTML, JavaScript e Tailwind CSS. Para um documento de página única, um framework acrescentaria peso e uma etapa de hidratação sem trazer nada em troca.
• Build com Vite. A página é uma das entradas de um build multipágina que descobre automaticamente cada index.html do repositório, então publicar um projeto novo não exige mexer em configuração.
• Contato por variável de ambiente. O destino do WhatsApp vem de configuração, não do HTML. Quando não há um número autorizado, o botão explica que é uma demonstração em vez de virar um link quebrado.
• Imagens em WebP com dimensões declaradas no HTML, para o navegador reservar o espaço antes do download e não empurrar o conteúdo ao carregar.

Acessibilidade e desempenho

• Link de pular para o conteúdo, regiões semânticas e hierarquia de títulos consistente.
• Foco visível em todos os controles interativos, para quem navega por teclado.
• Animações reduzidas quando o sistema sinaliza prefers-reduced-motion.
• Elementos decorativos marcados como ocultos para tecnologias assistivas, evitando que leitores de tela anunciem ruído.

O que eu levo deste projeto

A parte mais difícil não foi construir a página, foi cortar. Cada seção que eu considerava acrescentar competia com o agendamento, e manter uma página única realmente única exigiu dizer não a várias ideias razoáveis. É a decisão que eu repetiria em qualquer landing page com objetivo bem definido.