Moreps Official Website

Moreps Landing Page — Site Promotionnel de l'Application Workout Tracker

Contexte & Objectif

Moreps Landing Page est un site promotionnel que j'ai construit pour présenter l'application Moreps — un tracker d'entraînement basé sur Flutter et Supabase. Cette page d'atterrissage n'est pas conçue comme une simple page d'information, mais comme un média de marque capable de transmettre l'expérience de l'application avant même que les utilisateurs ne la téléchargent.

L'objectif principal du développement réside dans la combinaison d'un design moderne, de hautes performances et d'interactions qui semblent vivantes. Des animations fluides aux effets de parallaxe 3D en passant par les transitions d'éléments — tout est conçu pour offrir une expérience engageante sans sacrifier la vitesse de chargement.

Ce site est également optimisé pour les présentations, l'utilisation en portfolio et la promotion de produits numériques avec le support du SEO, d'Open Graph, d'un sitemap et d'une structure de code facilement extensible.

Fonctionnalités Clés

Section Héros Interactive. Titre avec effet shimmer comme point focal, CTA vers le Repository GitHub et la Vidéo Démo, maquette de l'application avec effet 3D parallaxe suivant le mouvement du curseur, et cartes UI flottantes présentant les fonctionnalités principales.

Présentation des Fonctionnalités. La page d'atterrissage présente visuellement trois fonctionnalités principales de Moreps — Workout Builder (créer des programmes d'entraînement, enregistrer les répétitions et le poids en temps réel, Smart Rest Timer, conversion KG ↔ LBS), Analytics & Progress (détection automatique des PR, graphiques de progression, suivi du poids, visualisation interactive des progrès), et Workout History (calendrier des entraînements, journaux détaillés des séances, récapitulatif des activités, historique à défilement infini).

Expérience Utilisateur. Défilement fluide avec Lenis, animations avec Framer Motion, système de design glassmorphisme et néon, curseur personnalisé interactif, et design responsive pour desktop, tablette et mobile.

Branding & Marketing. CTA pour visiter le repository, sections mettant en avant les avantages de l'application, footer avec navigation rapide, et modale de profil développeur contenant les informations de l'équipe.

SEO & Optimisation. Métadonnées Open Graph, Twitter Card, sitemap automatique, robots.txt, et optimisation des performances avec App Router Next.js.

Défis de Développement

L'un des plus grands défis de ce projet était de créer une page d'atterrissage moderne et interactive sans sacrifier les performances. Diverses animations — parallaxe, cartes flottantes, effets lumineux, curseur personnalisé et transitions de page — devaient fonctionner parfaitement sur toutes les tailles d'écran.

De plus, je me suis assuré que la structure des composants reste modulaire afin que chaque section puisse être développée davantage ou réutilisée plus facilement dans d'autres projets.

Stack Technique

Résultat

À travers ce projet, je n'ai pas seulement construit une page d'atterrissage — j'ai construit un média de présentation de produit capable d'expliquer la valeur de l'application Moreps visuellement et de manière compréhensible. L'ensemble du design, de la structure des composants, des animations et de l'optimisation SEO sont conçus pour donner une impression professionnelle tout en augmentant l'attrait de l'application auprès des utilisateurs potentiels et des recruteurs qui consultent ce portfolio.

🔗 Live website: https://moreps.vercel.app