Yellow Metric - Arranjos e Transformações
Site web d'une entreprise de retouches de vêtements et de pressing, présente dans 12 boutiques au Portugal et en Espagne. Il propose un système multilingue complet (PT/EN/ES/FR), des compteurs de statistiques animés mettant en avant plus de 8 millions de retouches, des pages de services interactives et un localisateur de boutiques complet, avec une carte Google Maps intégrée pour chaque point de vente.
Développé avec React 19, TypeScript et Tailwind CSS 4, il s'appuie sur la navigation React Router DOM 7, React Hook Form associé à la validation Yup, des compteurs déclenchés au défilement via l'API Intersection Observer, des animations CSS sur mesure et le mode strict, avec des hooks d'internationalisation personnalisés.
Vue d'ensemble
Secteur
Commerce et services aux particuliers (retouches de vêtements et pressing)
Périmètre
Conception et développement complets du site, avec gestion de contenu multilingue, présentation interactive des services, localisateur de boutiques intégré à Google Maps, formulaire de contact avec validation et design responsive optimisé pour tous les appareils
Durée
3 à 4 semaines, de la mise en place initiale à la finalisation
Le défi
Yellow Metric, acteur de référence de la retouche de vêtements et du pressing au Portugal, avec 12 boutiques au Portugal et en Espagne, avait besoin d'une présence digitale moderne à la hauteur de son positionnement premium. Son site existant ne proposait aucune version multilingue alors qu'il s'adressait aux marchés portugais et espagnol ainsi qu'aux touristes internationaux, et ne mettait pas en valeur son ampleur opérationnelle (plus de 8 millions de retouches, plus de 331 000 prestations de pressing, plus de 138 000 clients satisfaits). L'entreprise recherchait une solution fonctionnant parfaitement sur tous les appareils, se chargeant rapidement et permettant à ses clients de trouver intuitivement la boutique la plus proche et de comprendre l'étendue de son offre.
La solution
Nous avons développé un site entièrement sur mesure en React, avec TypeScript pour la sûreté du typage et la maintenabilité, en mettant en place un système d'internationalisation complet couvrant quatre langues (portugais, anglais, espagnol, français). Le site propose des compteurs animés déclenchés au défilement, via l'API Intersection Observer, qui mettent en valeur des statistiques impressionnantes et créent de l'engagement visuel sans sacrifier les performances. Pour le localisateur de boutiques, nous avons intégré Google Maps de façon interactive, avec 12 fiches de points de vente comprenant chacune une carte intégrée, un numéro de téléphone et les horaires d'ouverture. L'ensemble du design suit une approche mobile-first avec Tailwind CSS 4, garantissant des temps de chargement rapides et un rendu parfait sur tous les appareils. La validation des formulaires repose sur React Hook Form et les schémas Yup, offrant aux utilisateurs un retour en temps réel et évitant les erreurs de saisie.
Fonctionnalités clés
Résultats
Technologies utilisées
Prêt à lancer votre projet ?
Voyons ensemble comment créer un site remarquable, adapté aux besoins de votre entreprise.