Feature #53
closedFeature #20: Intégrer un widget Trustpilot sur la landing page pour renforcer la crédibilité
Composant carrousel de preuve sociale (réutilisable, responsive, charte)
0%
Description
Construire le composant React réutilisable d'affichage de la preuve sociale, conformément à l'approche figée par la sous-tâche de décision.
Périmètre : GetYourJob (Next.js 16 / React 19), Atomic Design dans GetYourJob/src/components. Composant alimenté par les props/données définies dans la sous-tâche de configuration.
Travail :
- Afficher : note moyenne (ex. ★ 4,9/5), nombre total d'avis (ex. « 120 avis vérifiés »), 2-3 extraits de témoignages, lien « Voir tous les avis » (target=_blank, rel=noopener, nouvel onglet).
- Carrousel : défilement automatique toutes les 5 s ET navigation manuelle par flèches ; pause au survol ; accessible au clavier.
- Style charte : fond #FFFFFF ou #F9F9F9, texte #333333, étoiles #00B67A ou #1A73E8, bordure #E5E5E5 ; via Tailwind CSS 4.
- Responsive mobile + desktop.
- Tests unitaires/composant (rendu des données, rotation auto, navigation flèches, lien sortant).
Dépendances : dépend de la sous-tâche « Décision d'intégration & configuration des données Trustpilot ».
Estimation : M
## Acceptance criteria
- [ ] Le composant affiche note moyenne, nombre d'avis, 2-3 extraits de témoignages et le lien « Voir tous les avis » (nouvel onglet, rel=noopener).
- [ ] Le carrousel défile automatiquement (5 s) ET se pilote manuellement via des flèches ; pause au survol ; navigable au clavier.
- [ ] Le style respecte la charte : fond #FFFFFF/#F9F9F9, texte #333333, étoiles #00B67A/#1A73E8, bordure #E5E5E5.
- [ ] Le composant est responsive (mobile et desktop) et placé dans GetYourJob/src/components (Atomic Design).
- [ ] Des tests couvrent le rendu, la rotation automatique, la navigation manuelle et le lien sortant.