Feature #1149
openFeature #1147: Tiers réels — 2 pools (maintenance/évolutions) + flux/SLA + page /offres + jauge à 2 indicateurs
Frontend — Page /offres (formules complètes), jauge profil à 2 indicateurs, TierCard, lien « Demander une mise à niveau »
0%
issue:1147 — spec dans l'épopée + description
Description
## Objectif
Exposer le vrai modèle de formules côté UI : une **page /offres** complète, une **jauge profil à 2 indicateurs** (maintenance + évolutions), une `TierCard` corrigée, et brancher « Demander une mise à niveau » → /offres. Dépend du backend 2 pools (#enfant backend de #1147).
## Dépendances
Dépend du nouveau contrat API 2 pools (enfant backend de #1147) : `CreditBalanceOut`/`TierOut` exposant maintenance_remaining/evolution_remaining (nullable=illimité), streams, ratios/is_low par pool.
## Portée (src/, App Router, Atomic Design, next-intl, TDD)
- **Page `/offres`** (route App Router, accessible connecté) : les 4 formules en colonnes/cartes avec, pour chacune : prix, maintenance & évolutions (« illimité » si NULL), flux, 1ʳᵉ livraison, SLA incident (P1/P2/P3), humain/CTO, et les bullets RUN/BUILD/PROTECT/ADVISE (contenu i18n, voir #1147). Bandeau « + tout ce que contient la formule en dessous ». **Formule actuelle** mise en évidence (badge). Légende « Comment lire les SLA ». CTA par formule (« Prendre rendez-vous »/contact) + CTA upgrade. Reprendre l'esthétique « OmDev — Nos offres · prix mensuel fixe ».
- **Jauge profil** : remplacer la jauge unique par **2 indicateurs** (maintenance + évolutions). Quand un pool est illimité (NULL) afficher « illimité » (pas de % ni de couleur « bas »). Conserver les seuils de couleur (vert >50 / orange / rouge <10) pour les pools finis. Réutiliser/adapter `CreditGauge`.
- **TierCard** : afficher les deux pools (maintenance/évolutions, « illimité » géré), flux, prix ; couleur distinctive par formule. Le bouton « Demander une mise à niveau » pointe vers **/offres** (plus de mailto).
- **Page admin** : afficher/ajuster les deux pools (le contrôle d'ajustement choisit le pool ; griser/masquer l'ajustement sur un pool illimité). Le tableau montre maintenance + évolutions.
- **i18n** : ajouter tout le contenu des formules (titres, taglines, bullets RUN/BUILD/PROTECT/ADVISE, SLA, légende) dans `en.ts` ET `fr.ts` (fr = vraie traduction ; en = miroir typé). Placeholders ICU identiques.
## Acceptance criteria
- [ ] /offres présente les 4 formules avec tous les détails (#1147), formule actuelle mise en évidence, légende SLA.
- [ ] « Demander une mise à niveau » ouvre /offres.
- [ ] La jauge profil montre 2 indicateurs ; « illimité » géré sans faux « bas » ni % ; seuils couleur conservés pour pools finis.
- [ ] TierCard montre les deux pools + flux ; couleur par formule.
- [ ] La page admin gère les deux pools (ajustement par pool, illimité non ajustable).
- [ ] Clés i18n en.ts ET fr.ts cohérentes (tsc vert).
- [ ] `npx vitest run && npx tsc --noEmit && npx eslint . && npm run build` verts.
Files
| offres-after.png (669 KB) offres-after.png | |||
| jauge-2-indicateurs.png (289 KB) jauge-2-indicateurs.png | |||
| before-reconstruction.png (114 KB) before-reconstruction.png | |||
| offres-mockup.html (15.6 KB) offres-mockup.html | |||
| jauge-mockup.html (8.32 KB) jauge-mockup.html |
