Barbearia do Hulk — Riacho Fundo II, Brasília

Cliente

Barbearia do Hulk

Serviços

institutional

Ano

2026

Papel

Design e desenvolvimento

Stack

Next.js · React · Tailwind CSS · PWA · Vercel

Uma barbearia de bairro que vende corte, barba, combos, planos e produtos. O site precisava mostrar tudo isso com preço e levar o cliente a reservar o horário sem precisar ligar.

O que fizemos

Desenhamos e desenvolvemos o site em Next.js 16 com App Router e Turbopack, pré-renderizado com revalidação e servido pela Vercel. É um PWA: tem manifesto, service worker e um botão Instalar, e uma seção explica como pôr a barbearia na tela do celular. Contas e reservas ficam atrás do login, com Entrar e Criar conta no topo da página. A página pública organiza 23 serviços e combos numa tabela com duração e preço, quatro planos de assinatura mensal e uma loja cujos pedidos saem como mensagem pronta no WhatsApp. A interface usa Tailwind CSS v4 com Anton, Oswald e Barlow, tema claro e escuro e um letreiro dourado contínuo. Dados estruturados de barbearia, com catálogo de serviços, horários e ação de reserva, descrevem o negócio para a busca local.

Uma barbearia de bairro com app: preços à vista, planos, loja pelo WhatsApp e reserva com conta, instalável no celular.

LetreiroBARBEARIA sobe, DO se desenha em contorno e HULK sobe em dourado, com o mesmo mecanismo de entrada do site — derivado do site.

Identidade

A marca já existia: um letreiro em três linhas. Nós o medimos e o desenhamos como sistema.

Logotipo
LogotipoO letreiro em três linhas, a área de proteção e o tamanho mínimo — derivado do site.
Versão clara
Versão claraPreto sobre creme, com DO e HULK em dourado: a mesma construção sobre o fundo do tema claro — derivado do site.

Sistema

Cor, letra e peças lidas do código do site: oito variáveis, três famílias e os componentes que se repetem.

PaletaOito cores, todas variáveis CSS do site, com HEX, RGB e HSL; o verde do WhatsApp fica à parte, como cor funcional — derivado do site.
Tipografia
TipografiaAnton nos títulos e preços, Oswald na interface, Barlow no texto, com a parcela de cada uma nos caracteres da home — derivado do site.
PesosOswald nos quatro pesos que o site usa, de 400 a 700, e o espaçamento do sobretítulo até 0,46 em — derivado do site.
Componentes
ComponentesPlanos, produto, horários, linha de preço, botões e logotipo, recortados da página com os estilos medidos — derivado do site.

Produto

Tudo o que a barbearia vende, com preço: serviços, combos, planos e loja, e o caminho mais curto até o horário.

  • Hero — No celular.
  • Serviços — No celular.
  • Combos — No celular.
  • Planos — No celular.
  • Loja — No celular.
  • Horários — No celular.
  • Contato — No celular.
Hero · Serviços · Combos · Planos · Loja · Horários · Contato
Serviços e combosA tabela rolando na home, do título até a linha 21.
Agende pelo celular
Agende pelo celularO convite para instalar o app, com o botão Instalar e a ajuda “Como instalar?”.
Planos, loja e horáriosDe Planos a Horários, passando pela loja.

Detalhes

Nos detalhes: um tema escuro a um toque, o menu do celular e o logotipo dourado que fecha a página.

Rodapé
RodapéO logotipo dourado da barbearia fecha a página, com o bairro, o telefone e os termos.
O letreiro em casa
O letreiro em casa“Barbearia do Hulk” em três linhas, onde a página começa: o bairro acima e Agendar horário abaixo.

Resultados

  • No ar em produção, pré-renderizado e servido pela Vercel

  • Aplicativo instalável (PWA), com manifesto, service worker e botão Instalar

  • 23 serviços e combos com duração e preço, e quatro planos de assinatura

  • Pedidos da loja e assinaturas viram mensagem pronta no WhatsApp

Créditos

Design
Ressolv
Desenvolvimento
Ressolv
Sistema de marca
Ressolv, derivado do letreiro do site

Próximo projeto

Chádrez — Loja de Chás Especiais