coral-application

En tant qu'utilisateur (Guest, Student, Parent, Teacher), je veux accéder à une page Landing qui présente l'application Coral, avec la mise en page complète basée sur le design JSX v2 existant (NavBar sticky frosted-glass, Hero plein viewport avec fond animé underwater, InteractiveReefShowcase, HowItWorks, SubjectCoverage, EducationalLevels, Testimonials, TrustAndStats, Pricing, FAQ, CallToAction, Footer). La page doit être le point d'entrée pour tous les flux utilisateurs (vers Login, Signup, Home en guest). Implémenter fidèlement le design v2 déjà conçu.

En tant qu'utilisateur (Student, Parent, Teacher), je veux pouvoir me connecter via la page Login basée sur le design JSX v2. La page doit inclure : formulaire email/mot de passe avec validation, bouton de connexion coral, lien vers Signup, gestion des erreurs d'authentification, et redirection vers Dashboard ou Home après connexion réussie. Design fidèle au mockup v2 avec fond underwater animé et card glassmorphism.

En tant qu'utilisateur (Student, Parent, Teacher), je veux pouvoir créer un compte via la page Signup basée sur le design JSX v2. La page doit inclure : formulaire de création de compte (nom, email, mot de passe, sélection de rôle/persona), validation des champs, sélection du niveau éducatif, et redirection vers Login après inscription. Design fidèle au mockup v2 avec esthétique underwater coral.

En tant qu'utilisateur connecté ou invité, je veux accéder à la page Home qui me permet de parcourir les matières (reef interactif), sélectionner une matière et choisir un niveau éducatif (primaire, secondaire, université). Implémenter fidèlement le design JSX v2 : NavBar, reef interactif avec coraux par matière, sélecteur de niveau, grille de sujets. La page sert de hub central vers la page Solve. Intégrer la logique de navigation vers Solve avec la matière et le niveau sélectionnés.

En tant qu'utilisateur, je veux pouvoir scanner un exercice avec ma caméra et que l'image soit analysée automatiquement. Implémenter un endpoint POST /api/scan qui accepte une image, utilise Google Nano Banana (ou équivalent) pour l'OCR et l'extraction du texte de l'exercice, puis retourne le texte extrait prêt à être soumis à l'API de résolution.

En tant qu'utilisateur connecté, je veux que mes solutions consultées soient sauvegardées et accessibles depuis le Dashboard. Implémenter les endpoints GET /api/solutions/history et DELETE /api/solutions/{id} pour lister et gérer l'historique des solutions par utilisateur. Les solutions sont conservées 30 jours. Inclure filtrage par matière et niveau.

En tant qu'utilisateur, je veux accéder à la page Solve pour saisir ou scanner un exercice. Implémenter le design JSX v2 : interface de saisie manuelle (zone de texte riche), option de scan caméra (upload ou capture), sélection de la matière et du niveau si non définis, bouton de résolution coral, et transition vers la page Solution. Gérer les états de chargement (animation underwater pendant l'analyse IA). La page Solve reçoit les paramètres de la page Home (matière, niveau).

En tant que Parent ou Teacher, je veux accéder à un Dashboard pour surveiller la progression des élèves et consulter les ressources. Implémenter le design JSX v2 : NavBar, stats de progression, historique des solutions consultées, raccourcis vers les matières, ressources pédagogiques pour les enseignants. La page est le point d'entrée post-login pour Parent et Teacher, avec navigation vers Home pour sélectionner une matière.

En tant qu'utilisateur, je veux voir la solution détaillée d'un exercice sur la page Solution. Implémenter le design JSX v2 : SolutionNavBar avec breadcrumb, SolutionHero avec l'exercice original, SolutionSidebar (navigateur d'étapes, formules utilisées, niveau de difficulté), SolutionStepDisplay (étapes expandables avec badges coral), FormulaBreakdown (grille de formules expliquées), ConceptExplainer (concept clé + erreurs communes), RelatedExercises (carousel), SolutionActions (PDF, copier, partager, bookmark), UpgradeNudge pour guest, SolutionFooter. Gérer les états guest (preview limité) vs connecté.

En tant qu'utilisateur, je veux que la page Solve envoie l'exercice saisi ou scanné à l'API backend et affiche un état de chargement animé (underwater) pendant le traitement, puis redirige vers la page Solution avec les données de réponse. Gérer les erreurs réseau, timeouts, et cas d'exercices non reconnus. Implémenter le streaming progressif de la solution si disponible.

En tant qu'utilisateur connecté (Student, Parent, Teacher), je veux voir l'historique de mes solutions et statistiques de progression sur le Dashboard. Connecter le composant Dashboard à l'API /api/solutions/history, afficher les dernières solutions avec matière, niveau et date, et calculer les métriques de progression (sujets couverts, fréquence d'utilisation).

En tant qu'utilisateur francophone ou anglophone, je veux pouvoir utiliser l'application dans ma langue préférée. Mettre en place i18n (react-i18next ou équivalent) avec les fichiers de traduction FR et EN pour toutes les pages. Implémenter le toggle FR|EN dans la NavBar et le footer. Persister le choix de langue dans localStorage. Les réponses de l'IA doivent aussi respecter la langue sélectionnée (passer la langue comme paramètre à l'API).

En tant qu'enseignant, je veux pouvoir partager une solution avec mes élèves depuis la page Solution. Implémenter le bouton 'Share with Teacher' / 'Partager avec la classe' sur la page Solution : génération d'un lien partageable unique (endpoint POST /api/solutions/{id}/share), copie dans le presse-papier, et optionnellement envoi par email. La solution partagée doit être accessible sans compte pendant 7 jours.

En tant qu'utilisateur, je veux pouvoir télécharger la solution complète en PDF depuis la page Solution. Implémenter un endpoint GET /api/solutions/{id}/pdf qui génère un PDF structuré avec l'exercice, les étapes de résolution, les formules utilisées et les explications, en respectant le branding Coral. Connecter le bouton 'Download PDF' de SolutionActions à cet endpoint.