Sport Passion Organisation
Technos
En bref
Cadrage produit et développement front (React, Tailwind, Framer Motion).
Site vitrine pour l’organisateur de courses au pied du bois de Vincennes : identité sobre, contenus lisibles et animations fluides avec React, Tailwind et Framer Motion.
Sport Passion Organisation (SPO) présente au public ses courses à pied autour du bois de Vincennes : prochaines épreuves, inscriptions et informations pratiques dans une expérience unique. Le front repose sur React et Tailwind pour la mise en page et les composants, et Framer Motion pour les micro-interactions et le rythme de lecture. La charte associe des verts profonds et des fonds clairs pour rester lisible sur tous les écrans.
Stack et choix techniques
React pour la composition d’interface et la réutilisation des blocs, Tailwind pour accélérer la cohérence visuelle et le responsive, Framer Motion pour les transitions et l’emphase. Ce trio permet d’aligner rapidement un design system léger (couleurs, radius 12px) et des comportements dynamiques adaptés à un site sportif.
Impact et résultats
- Identité et lisibilité. Hiérarchie typographique et couleurs de marque appliquées de façon homogène sur les blocs et les états interactifs.
- Animations pertinentes. Framer Motion utilisé pour le ressenti sans compromettre la structure des pages ni la compréhension immédiate des appels à l’action.
- Socle technique maintenable. React et Tailwind comme base pour itérer sur les sections et ajuster le site au fil des besoins de communication.
Un site running doit à la fois inspirer et informer : transmettre l’énergie du terrain sans sacrifier la clarté des contenus ni la performance perçue. Le cadrage a posé les priorités — hiérarchie visuelle, mobile d’abord, animations au service du message — avant d’implémenter une couche front moderne.
Le défi
Rassembler identité de marque, storytelling et parcours utilisateur : contrastes maîtrisés, blocs de contenu identifiables, et transitions qui accompagnent la lecture sans alourdir l’expérience ni l’accessibilité.
La réponse
Développement front avec React et Tailwind pour structurer les sections et garantir une cohérence responsive ; Framer Motion pour ancrer le côté dynamique du running. La palette (#2B3830, #41614C, #F9F9FF, blanc) et un radius de 12px donnent le cadre visuel commun aux cartes et boutons.
Ce que ça change
Une vitrine alignée avec l’univers SPO, prête à accueillir de nouveaux contenus événementiels, avec une stack front lisible pour les évolutions à venir.
Plus Jakarta Sans, Inter, Work Sans
Aa
Heading 1
Heading 2
Heading 3
Main Body
Link