Barbearia Projeto de demonstração
Navalha — barbearia de bairro com marcação de cadeira
Um one-pager vintage-moderno para uma barbearia em Massamá: creme, verde-garrafa e cobre, um quadro de preços clássico com linhas pontilhadas, três barbeiros com retratos-monograma, um fluxo de marcação barbeiro-serviço-hora a funcionar e um cartão de fidelidade carimbado — sem fotografia, tudo CSS e SVG inline.
feitura.pt/demo/navalha — Ao vivo
Uma barbearia de três cadeiras em Massamá quer deixar de receber marcações por telefone. O site tem de ter a alma da loja — ofício à antiga, toalha quente, conversa boa — apresentar o preçário completo, dar a conhecer os três barbeiros, deixar o cliente escolher barbeiro, serviço e hora a partir do telemóvel, e continuar a gritar que os walk-ins são bem-vindos. Os clientes da casa têm cartão de fidelidade carimbado: nove cortes, o décimo é grátis.
O que está lá dentro
- Sistema de design creme, verde-garrafa e cobre feito só em CSS scoped — zero fotografia
- Títulos serifados de display com etiquetas de preço em mono, para uma voz vintage-moderna
- Preçário em quadro de barbeiro clássico com linhas pontilhadas, quatro categorias e durações
- Marcação de cadeira em três passos: barbeiro, serviço e depois dia e hora com horários ocupados
- Lógica de encerramento (domingos e segundas) integrada no seletor de dias
- Secção de equipa com retratos-monograma em cobre que pré-selecionam o barbeiro na marcação
- Cartão de fidelidade carimbado e interativo em SVG inline — nove cortes, o décimo grátis
- Faixa walk-ins bem-vindos em marquee com horário e morada, parada com movimento reduzido
- Totalmente bilingue PT/EN com toggle nativo, contraste AA e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta creme/verde/cobre, escala serifada de display, estudos SVG da navalha e dos monogramas, composição do hero
- Quadro de preços com linhas pontilhadas e copy PT-PT completo dos serviços, secção de equipa, faixa marquee de walk-ins
- Máquina de estados da marcação — barbeiro, serviço, dias e horários com disponibilidade e dias encerrados, formulário de confirmação
- SVG do cartão de fidelidade com carimbos interativos, passagem do locale EN, auditoria de contraste e alvos de toque, recomposição para tablet e desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
96
Accessibility
100
Best practices
100
SEO