Web Design & Development

Yellow Metric - Arranjos e Transformações

Clothing alterations and dry-cleaning company website with 12 stores across Portugal and Spain. Features complete multilingual system (PT/EN/ES/FR), animated statistics counters showcasing 8+ million alterations, interactive service pages, and comprehensive store locator with embedded Google Maps for each location.

Built with React 19, TypeScript, and Tailwind CSS 4 featuring React Router DOM 7 navigation, React Hook Form with Yup validation, Intersection Observer API scroll-triggered counters, custom CSS keyframe animations, and Strict mode with custom i18n hooks.

Completed Date: May 2026
Visit Live Site
Project Details

Overview

Industry

Retail & Consumer Services (Clothing Alterations & Dry Cleaning)

Scope

Complete website design and development featuring multilingual content management, interactive service showcases, store locator with Google Maps integration, contact form with validation, and responsive design optimized for all devices

Timeline

3-4 weeks from initial setup to completion

The Problem

Challenge

Yellow Metric, a leading Portuguese clothing alterations and dry-cleaning service with 12 stores across Portugal and Spain, needed a modern digital presence to match their premium brand positioning. Their existing website lacked multilingual support despite serving markets in Portugal, Spain, and international tourists, and failed to showcase their impressive operational scale (8+ million alterations, 331K+ laundry services, 138K+ satisfied clients). The company needed a solution that would work seamlessly across all devices, load quickly, and provide an intuitive way for customers to find their nearest location and understand their comprehensive service offerings.

Our Approach

Solution

We built a fully custom React-based website with TypeScript for type safety and maintainability, implementing a comprehensive internationalization system supporting four languages (Portuguese, English, Spanish, French). The site features scroll-triggered animated counters using the Intersection Observer API to showcase their impressive statistics, creating visual engagement without sacrificing performance. For the store locator, we implemented an interactive Google Maps integration with 12 location cards, each with embedded maps, phone numbers, and operating hours. The entire design follows a mobile-first approach with Tailwind CSS 4, ensuring fast load times and perfect rendering across all devices. Form validation was implemented using React Hook Form and Yup schema validation, providing users with real-time feedback and preventing submission errors.

What's Included

Key Features

Multilingual Support (PT/EN/ES/FR)
Animated Statistics Counters
Interactive Store Locator
Responsive Mobile-First Design
Form Validation & Error Handling
Smooth Page Transitions
Custom CSS Animations
SEO-Optimized Routing
Performance

Results

95+/100
Performance Score
Lighthouse Performance - Fast Vite builds with optimized React 19, minimal JavaScript bundle
<1.2s
First Contentful Paint
Core Web Vitals (FCP) - Optimized assets, lazy-loaded images, efficient CSS
98/100
Accessibility Score
Lighthouse Accessibility - Semantic HTML, ARIA labels, keyboard navigation, proper contrast ratios
A+
Code Quality
Strict mode compliance - 100% TypeScript coverage, no implicit any, proper type safety
Technology

Tech Stack

React 19
TypeScript 5.6
Vite 6
Tailwind CSS 4.0
React Router DOM 7
React Hook Form
Yup
Lucide React
Firebase
Get Started

Ready to Start Your Project?

Let's discuss how we can create a stunning website tailored to your business needs.

Yellow Metric - Arranjos e Transformações | Portfolio | low-key solutions