Web Design e Desenvolvimento

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.

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

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

O Problema

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.

A Nossa Abordagem

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.

O Que Está Incluído

Funcionalidades Principais

Suporte Multilingue (PT/EN/ES/FR)
Contadores de Estatísticas Animados
Localizador de Lojas Interativo
Design Responsivo Mobile-First
Validação de Formulários e Gestão de Erros
Transições de Página Fluidas
Animações CSS Personalizadas
Rotas Otimizadas para SEO
Desempenho

Resultados

95+/100
Pontuação de Desempenho
Desempenho Lighthouse - builds Vite rápidos com React 19 otimizado e bundle de JavaScript reduzido
<1.2s
First Contentful Paint
Core Web Vitals (FCP) - recursos otimizados, imagens com carregamento diferido e CSS eficiente
98/100
Pontuação de Acessibilidade
Acessibilidade Lighthouse - HTML semântico, etiquetas ARIA, navegação por teclado e rácios de contraste adequados
A+
Qualidade do Código
Conformidade com o modo estrito - 100% de cobertura TypeScript, sem any implícito e segurança de tipos adequada
Tecnologia

Stack Tecnológica

React 19
TypeScript 5.6
Vite 6
Tailwind CSS 4.0
React Router DOM 7
React Hook Form
Yup
Lucide React
Firebase
Começar

Pronto para Iniciar o Seu Projeto?

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

Yellow Metric - Arranjos e Transformações | Portfólio | low-key solutions