Yellow Metric - Arranjos e Transformações
Website de empresa de arranjos de roupa e limpeza a seco com 12 lojas em Portugal e Espanha. Inclui um sistema multilingue completo (PT/EN/ES/FR), contadores de estatísticas animados que destacam mais de 8 milhões de arranjos, páginas de serviços interativas e um localizador de lojas completo com Google Maps incorporado para cada localização.
Construído com React 19, TypeScript e Tailwind CSS 4, com navegação em React Router DOM 7, React Hook Form com validação Yup, contadores acionados pelo scroll com a API Intersection Observer, animações CSS personalizadas com keyframes e modo estrito com hooks de i18n personalizados.
Visão Geral
Setor
Retalho e Serviços ao Consumidor (Arranjos de Roupa e Limpeza a Seco)
Âmbito
Design e desenvolvimento completo do website com gestão de conteúdo multilingue, apresentação interativa de serviços, localizador de lojas com integração Google Maps, formulário de contacto com validação e design responsivo otimizado para todos os dispositivos
Prazo
3-4 semanas da configuração inicial à conclusão
Desafio
A Yellow Metric, uma empresa portuguesa de referência em arranjos de roupa e limpeza a seco, com 12 lojas em Portugal e Espanha, precisava de uma presença digital moderna, à altura do posicionamento premium da sua marca. O website existente não tinha suporte multilingue, apesar de servir os mercados de Portugal, Espanha e turistas internacionais, e não conseguia mostrar a impressionante dimensão da sua operação (mais de 8 milhões de arranjos, mais de 331 mil serviços de lavandaria e mais de 138 mil clientes satisfeitos). A empresa precisava de uma solução que funcionasse na perfeição em todos os dispositivos, carregasse rapidamente e oferecesse uma forma intuitiva de os clientes encontrarem a loja mais próxima e compreenderem a sua oferta de serviços.
Solução
Construímos um website totalmente personalizado em React com TypeScript para garantir segurança de tipos e manutenibilidade, implementando um sistema de internacionalização completo com suporte para quatro idiomas (português, inglês, espanhol e francês). O site inclui contadores animados acionados pelo scroll, através da API Intersection Observer, para destacar as suas estatísticas impressionantes, criando envolvimento visual sem sacrificar o desempenho. Para o localizador de lojas, implementámos uma integração interativa com o Google Maps com 12 cartões de localização, cada um com mapa incorporado, número de telefone e horário de funcionamento. Todo o design segue uma abordagem mobile-first com Tailwind CSS 4, garantindo tempos de carregamento rápidos e uma renderização perfeita em todos os dispositivos. A validação de formulários foi implementada com React Hook Form e esquemas Yup, dando aos utilizadores feedback em tempo real e evitando erros de submissão.
Funcionalidades Principais
Resultados
Stack Tecnológica
Pronto para Iniciar o Seu Projeto?
Vamos falar sobre como podemos criar um website incrível à medida do seu negócio.