GetYourJob

## Spec (epic) — Widget de preuve sociale Trustpilot sur la landing page

### Problème
La landing page de lancement manque de preuve sociale pour rassurer les candidats IT et lever les objections de confiance avant la conversion (groupe fondateur à 4,90 €/mois à vie).

### Approche
Insérer une nouvelle section **« Preuves sociales »** dans le flux de la landing page, **après « Comment ça marche »** et **avant le CTA « Rejoignez le groupe fondateur »**.

Point d'arbitrage clé (résolu en sous-tâche #1) : le **widget officiel Trustpilot (TrustBox)** est une iframe au style figé par Trustpilot — il ne peut **pas** respecter la charte de couleurs/bordures demandée ni un carrousel custom de 2-3 extraits, et GetYourJob est en pré-lancement avec ~0 avis réels. L'approche retenue est donc un **composant React custom stylé** (Atomic Design, `GetYourJob/src/components`), alimenté par des données configurables (note moyenne, nombre d'avis, témoignages curés) avec un lien sortant vers la page Trustpilot. Le TrustBox officiel reste une option de remplacement ultérieure une fois les avis réels disponibles.

### Critères d'acceptation (epic)
- [ ] Une section « Preuves sociales » est intégrée entre « Comment ça marche » et le CTA « Rejoignez le groupe fondateur ».
- [ ] La section affiche : note moyenne (★ x,x/5), nombre total d'avis, 2-3 extraits de témoignages en carrousel, et un lien « Voir tous les avis » (nouvel onglet) vers la page Trustpilot.
- [ ] Style conforme : fond #FFFFFF ou #F9F9F9, texte #333333, étoiles #00B67A ou #1A73E8, bordure #E5E5E5.
- [ ] Responsive mobile + desktop ; carrousel auto (5 s) **et** flèches manuelles.
- [ ] Chargement asynchrone / sans régression de performance (vérifié Lighthouse).
- [ ] Aucune régression visuelle/fonctionnelle ; testé Chrome, Firefox, Safari, Edge.
- [ ] Déployé en production avant le **23 mars** (jalon de lancement).

### Décomposition (split par responsabilité)
1. **Décision d'intégration & configuration des données Trustpilot** (S) — arbitrage TrustBox officiel vs composant custom + source de données.
2. **Composant carrousel de preuve sociale (réutilisable)** (M) — UI, état carrousel, style charte, responsive, a11y.
3. **Intégration dans la landing page + validation perf/cross-browser/non-régression** (S) — placement, chargement asynchrone, Lighthouse, navigateurs.

Le jalon « déployé avant le 23 mars » reste un critère epic (pas une sous-tâche de dev). spec_ref renseigné sur cet epic.

## Design brief — Section « Preuves sociales » (epic #20 → enfants #52 / #53 / #56)

**Décision produit (actée, non rouverte)** : composant React **maison, stylé et réutilisable**, alimenté par des **données configurables** (`config/social-proof.ts`) + lien sortant vers la page Trustpilot publique. **PAS** l'iframe TrustBox officielle (style figé hors charte, ~0 avis réel au pré-lancement).

Section appendée au design system (`DESIGN_SYSTEM.md`, section **SO — Preuves sociales / Social proof**) et mockup attaché (`preuves-sociales-mockup.svg`, vues desktop + mobile).

### Placement
Dans `src/components/templates/LandingPage.tsx`, **entre `<LandingHowItWorks />` et `<LandingCTA />`** (avant le CTA « Rejoignez le groupe fondateur »).

### Anatomie (Atomic Design)
- **Atom `RatingStars`** — 5 étoiles (pleine/demi/vide) à partir d'une note `number`, vert `#00B67A`.
- **Molecule `TestimonialCard`** — citation courte (`#333`) + attribution (avatar-initiale + nom + rôle) + étoiles.
- **Organism `LandingSocialProof`** — header (note moyenne `4,9/5` + « 120 avis vérifiés ») + carrousel de cartes + flèches + dots + lien « Voir tous les avis ».

Données via `src/config/social-proof.ts` : `averageRating`, `reviewCount`, `trustpilotUrl`, `testimonials[]`. **Aucun fetch réseau, aucune iframe tierce.**

### Layout / responsive
- Fond section `#F9F9F9`, padding `py-16 md:py-24` (cohérent avec `LandingHowItWorks`).
- Header centré : `h2` + ligne d'étoiles + note moyenne en gras + nombre d'avis.
- Carrousel : **3 cartes** côte à côte en `lg`, **1 carte** en mobile (swipe). Carte centrale (desktop) emphasée par bordure `secondary #50a7af`.
- Flèches en cercles blancs bordés `#E5E5E5` (≥ 44×44px) + dots (actif = barre `#50a7af`).
- Lien « Voir tous les avis ↗ » → `trustpilotUrl` dans un **nouvel onglet** (`target="_blank" rel="noopener noreferrer"`).

### Comportement
- **Auto-scroll toutes les 5 s** (`setInterval`), en pause au hover/focus et si `document.hidden` ; respecte `prefers-reduced-motion`.
- **Manuel** : flèches + swipe tactile (réutiliser le pattern drag framer-motion de `organisms/MobileJobCarousel.tsx`) + dots + clavier `ArrowLeft`/`ArrowRight`.
- **Lazy / async (critère perf)** : monter en `dynamic(…, { ssr:false })` ou démarrer l'`setInterval` à l'entrée viewport (`IntersectionObserver`) → pas d'impact LCP/Lighthouse, données statiques.

### États
- **Renseigné** : header + 1..N cartes (nominal).
- **1 seul avis** : carte unique centrée, flèches/dots/auto-scroll masqués.
- **Vide (0 témoignage)** : la section **ne se rend pas** (`return null`) — pas de bloc vide au pré-lancement.
- **Chargement** : sans objet (statique) ; si `dynamic`, réserver la hauteur (anti-CLS).
- **Erreur** : sans objet (pas de fetch).

### Tokens & couleurs (charte ticket → DS)
- Fond section `#F9F9F9` → `surface-muted`. Carte `#FFFFFF` → `surface`. Bordure `#E5E5E5` → `border`. Texte `#333333` → `text-secondary`.
- **Étoiles `#00B67A` (vert Trustpilot)** = seule couleur hors palette retenue, justifiée (code visuel des avis), **uniquement pour les étoiles**, figée en constante `STAR_COLOR` dans `config/social-proof.ts` (pas de token Tailwind global).
- Accent lien / dots / bordure carte active : le `#1A73E8` proposé est **écarté** au profit de **`secondary #50a7af`** (Pacific Blue, déjà charte GYJ). Conforme à la règle 75/15/10 — aucune autre couleur introduite.

### i18n (convention propre à ce dépôt)
Dans GetYourJob, `fr.ts` n'est **pas** un re-export : ce sont **deux objets réels** (`translations/en.ts` ET `translations/fr.ts`). Ajouter dans **les deux** sous `landing.socialProof` :
`heading`, `reviewCount` ({count}), `ratingSuffix` ("/5"), `seeAllReviews`, `prevAria`, `nextAria` (copie FR rédigée dans `fr.ts`). Les témoignages = contenu éditorial → `config/social-proof.ts`, pas i18n.

### Charts
Aucun — ne pas importer recharts.

---
Livrables : brief ci-dessus · section **SO** appendée à `DESIGN_SYSTEM.md` · mockup `preuves-sociales-mockup.svg` attaché. Transition **Spec → Design**.

**QA manuelle — VERDICT : PASS** ✅ (le ticket reste en *QA*)

Branche `feat/redmine-20-social-proof` / PR #231 — commit `a14122b`. Smoke testé depuis le worktree dédié sur `http://localhost:3010`.

### Critères d'acceptation
| # | Critère | Résultat |
|---|---------|----------|
| 1 | Section « Preuves sociales » entre « Comment ça marche » et le CTA « Rejoignez le groupe fondateur » | **OK** — `LandingSocialProof` inséré juste avant `LandingCTA`, après `LandingHowItWorks` (templates/LandingPage.tsx) |
| 2a | Note moyenne (★ 4,9/5) | **OK** — affiche « 4,9/5 » + étoiles |
| 2b | Nombre total d'avis | **OK** — « 120 avis vérifiés » |
| 2c | 2–3 témoignages en carrousel | **OK** — 3 cartes (Marie D., Karim B., Sofia L.) |
| 2d | Lien « Voir tous les avis » → Trustpilot, nouvel onglet | **OK** — `target=_blank rel="noopener noreferrer"`, href `https://www.trustpilot.com/review/getyourjob.pro` |
| 3 | Style charte (fond #F9F9F9, texte #333, étoiles #00B67A, bordure #E5E5E5) | **OK** — fond mesuré `rgb(249,249,249)`, étoiles pleines `#00B67A`, vides `#E5E5E5` |
| 4 | Carrousel auto-défilant (5 s) + flèches/dots manuels | **OK** — `AUTO_ADVANCE_MS=5000` (démarre à l'entrée en viewport, pause hover/focus/onglet caché/reduced-motion) ; flèches prev/next + 3 dots ; clic « suivant » change le dot actif |
| 5 | Responsive 3 cartes desktop / 1 + swipe mobile | **OK** — desktop 1440px : grille 3 cartes ; mobile 390px : single-card + swipe (grille desktop masquée) |
| 6 | Aucune régression sur le reste de la landing | **OK** — build prod complet vert, reste de la page rendu normalement |

### Gates exécutées
- **vitest** (suites touchées) : **4 fichiers / 20 tests OK**
- **tsc --noEmit** : aucune erreur sur les fichiers de la feature (seules les erreurs pré-existantes repo-wide subsistent)
- **npm run build** (prod) : **exit 0**, « Compiled successfully », route `/` = `ƒ` (dynamic). Pas de fuite client/Prisma (import `next/dynamic ssr:false` + `'use client'`).
- **Console navigateur** : aucune erreur émise par la section ; les erreurs présentes (CSP badge ProductHunt, CORS Tawk.to, warnings next/image footer) sont pré-existantes et hors périmètre.

ℹ️ Conformément à la décision de spec (`spec_ref`), l'implémentation est un **composant React custom stylé** alimenté par `src/config/social-proof.ts` + lien Trustpilot, et non l'iframe TrustBox officielle (style figé, ~0 avis en pré-lancement). Le critère « widget Trustpilot » est satisfait au sens « section preuve sociale + lien Trustpilot ».

### Preuves attachées
- `qa20-technical-proof.txt` — log technique (commandes, ports, gates, vérifs DOM/CSS, console — secrets filtrés)
- `qa20-social-proof-desktop.png` — rendu desktop (1440px)
- `qa20-social-proof-mobile.png` — rendu mobile (390px)

Le ticket reste en **QA** (promotion preprod = autre agent).

**QA manuelle — Re-test après refonte produit (gating runtime ENABLE_TRUSTPILOT)**

Branche `feat/redmine-20-social-proof` @ commit `34e3015`, smoke des deux états sur `npm run dev -p 3010`.

**VERDICT : PASS** — la section reste en `QA`.

**Exigence produit critique (drapeau OFF/absent = aucun contenu factice)**
- `src/app/page.tsx` : `force-dynamic` + `const socialProofEnabled = process.env.ENABLE_TRUSTPILOT === 'true'` (défaut `false` si la variable est absente), threadé en prop `enabled` jusqu'à `<LandingSocialProof>`.
- `LandingSocialProof.tsx` : `if (!enabled || count === 0) return null;` → aucun DOM.

**Critères d'acceptation → résultat**
- [OK] Section placée entre « Comment ça marche » et le CTA (`LandingHowItWorks → LandingSocialProof → LandingCTA` dans `LandingPage.tsx`).
- [OK] **État OFF (défaut, variable non définie)** : HTML rendu scanné → 0× « 4,9 », 0× « avis vérifiés », 0× « Trustpilot », 0× « Voir tous les avis », 0× carrousel, 0× étoile. Payload RSC = `"socialProofEnabled":false`. **Aucun contenu factice rendu.** Reste de la landing intact et contigu. (preuve : `off-state-section-absente.png`)
- [OK] **État ON (`ENABLE_TRUSTPILOT=true`)** : carrousel complet rendu — note « 4,9/5 · 120 avis vérifiés », étoiles, 3 témoignages (Marie D. / Karim B. / Sofia L.), flèches préc./suiv. + 3 puces, lien « Voir tous les avis ». (preuve : `on-state-carrousel.png`)
- [OK] Note moyenne + nombre d'avis + 2-3 témoignages en carrousel + lien Trustpilot affichés en ON.
- [OK] Lien « Voir tous les avis » → `https://www.trustpilot.com/review/getyourjob.pro`, `target="_blank"`, `rel="noopener noreferrer"` (source + test unitaire).
- [OK] Style charte : fond #F9F9F9, étoiles vert Trustpilot #00B67A, bordures #E5E5E5.
- [OK] Défilement auto 5 s + flèches/puces manuelles (test « auto-advances every 5s », « next arrow », « pause on hover »).
- [OK] Chargement async : composant en `next/dynamic` (rendu client après hydratation, hors first paint).
- [OK] Responsive : layout 3 cartes desktop / carte unique + swipe mobile (`lg:grid-cols-3` / `lg:hidden`).
- [OK] Non-régression : aucun fichier de la feature en erreur tsc ; l'unique erreur dans un fichier touché (`page.tsx:69 session?.user`) est **préexistante** (refactor SSR commit `c8f1e61`), non introduite par ce ticket (`34e3015` n'ajoute que les lignes `socialProofEnabled`).

**Tests unitaires** : `npx vitest run src/components/organisms/landing/__tests__/LandingSocialProof.test.tsx` → **9/9 OK** (dont les 3 cas `return null` quand OFF / sans témoignages, et les cas de rendu/navigation quand ON).

**Pièces jointes** : `qa-redmine-20-social-proof.txt` (log technique, secrets filtrés), `off-state-section-absente.png` (état OFF), `on-state-carrousel.png` (état ON).

preprod→master mergé → livré en production. Preprod → Shipped. (Section preuve sociale en prod derrière `ENABLE_TRUSTPILOT`=false ; à activer quand de vrais avis existeront.)