Web Design e Desenvolvimento

Ricardu's Barbershop

Website de barbearia (fundada em 2010) que apresenta serviços premium através de uma elegante tabela de preços com 10 serviços, uma equipa experiente de três barbeiros, galeria de fotografias interativa, testemunhos de clientes com classificação de 5 estrelas e integração com Google Maps para facilitar a localização.

Construído com React 19, TypeScript e Framer Motion, com uma paleta monocromática sofisticada (preto, branco e tons de zinco), fonte Rumble Brave personalizada para uma identidade distintiva, animações acionadas pelo scroll e um layout mobile-first totalmente responsivo.

Data de Conclusão: maio de 2026
Visitar Site
Detalhes do Projeto

Visão Geral

Setor

Cuidados Pessoais e Estética Masculina

Âmbito

Design e desenvolvimento completo do website com identidade personalizada, componentes interativos, integração com Google Maps e alojamento em Firebase

Prazo

3 semanas do design à implementação em produção

O Problema

Desafio

A Ricardu's Barbershop, um negócio bem estabelecido com mais de 15 anos de experiência e mais de 5.000 clientes em Lisboa, não tinha uma presença online moderna à altura da qualidade premium do seu serviço. Precisavam de um website que mostrasse a experiência da equipa, comunicasse a sua vasta oferta de serviços com preços transparentes e facilitasse aos novos clientes encontrá-los. O desafio era criar uma experiência digital sofisticada que refletisse a sua combinação de saber-fazer tradicional e estilo contemporâneo, garantindo ao mesmo tempo acessibilidade em todos os dispositivos e para todas as faixas etárias.

A Nossa Abordagem

Solução

Desenhámos e desenvolvemos um website elegante de página única que coloca os seus pontos fortes em destaque através de secções de conteúdo estratégicas: um hero envolvente com prova social (4,9 estrelas no Google e mais de 5.000 clientes), uma apresentação interativa da equipa que destaca a experiência de cada barbeiro, e uma tabela de preços completa com os 10 serviços claramente detalhados. O site tira partido do Framer Motion para animações de scroll fluidas que criam interesse visual sem sacrificar o desempenho, enquanto a tipografia personalizada Rumble Brave e a paleta monocromática estabelecem uma identidade de marca distintiva e premium. A integração com o Google Maps, com um botão de direções de um só clique, elimina atritos para quem visita pela primeira vez, e o design responsivo mobile-first garante uma experiência igualmente cuidada nos telemóveis — onde a maioria dos potenciais clientes descobre o negócio.

O Que Está Incluído

Funcionalidades Principais

Design Totalmente Responsivo
Animações de Scroll Fluidas
Tipografia e Identidade Personalizadas
Galeria de Fotografias Interativa
Integração com Google Maps
Tabela de Preços de Serviços
Apresentação dos Perfis da Equipa
Design Mobile-First
Desempenho

Resultados

95/100
Pontuação de Desempenho
Desempenho Google Lighthouse com recursos otimizados
100/100
Responsividade Mobile
Compatibilidade mobile perfeita em todos os dispositivos
< 1.2s
First Contentful Paint
Carregamento inicial rápido com fontes otimizadas
98/100
Pontuação SEO
Excelente SEO com HTML semântico e meta tags adequadas
Tecnologia

Stack Tecnológica

React 19
TypeScript 5.x
Vite 7.x
Tailwind CSS 3.x
Framer Motion 12.x
Lucide React
Firebase Hosting
Google Maps API
Começar

Pronto para Iniciar o Seu Projeto?

Vamos falar sobre como podemos criar um website incrível à medida do seu negócio.

Ricardu's Barbershop | Portfólio | low-key solutions