Refonte de la section hero: passage d'un layout centré single-col
à un grid 2 colonnes (texte gauche + mockup app à droite) sur lg+,
avec préservation du centrage actuel sur mobile/tablette.
- Mockup ~560×500px reproduit l'interface DictIA réelle:
- Window chrome (3 dots traffic light + tab "DictIA — Enquêter")
- Sidebar: 6 enregistrements groupés (Semaine dernière 2 + Mois
dernier 4) avec chips colorés (En cours, Barreau Confidentiel,
CPA Corporatif, Urgent Client) + bouton + recording rounded-none
- Center: header card avec 4 metas (avatars/calendar/clock/file),
audio player avec progress bar animée 50%-75% (15s loop),
transcript 5 lignes speaker (Allison/SPEAKER_02) où la ligne
active cycle toutes les 2.8s via Alpine x-data idx
- Right: tabs Résumé/Notes/Discuter (Résumé actif), résumé
exemple + 4 points clés
- Tilt subtil rotate-1 → straighten + scale au hover (lg only)
- 2 glow orbs flottants décoratifs derrière (bg-brand-b1/15 +
bg-brand-b3/10) avec tc-float-y reverse
- role="img" + aria-label descriptif sur le mockup complet
- prefers-reduced-motion désactive toutes animations + freeze
progress bar à 60% + retire transform tilt
- Tous les éléments interactifs ont tabindex="-1" + aria-hidden
car purement décoratifs (pas de duplication d'app réelle)
- Aucun emoji (SVG inline stroke="currentColor" partout)
- Système border-radius respecté: rounded-none (boutons/inputs/
tuiles), rounded (4px wrapper card), rounded-full (chips/avatar)
Tests: 6/6 hero tests pass (eyebrow, h1+grad-text, dual CTA,
cosmic orbs, social proof, animations staggered). Les 3 fails
restants (test_landing_has_main_nav, test_footer_links_complete,
test_trust_bar_has_eyebrow_factual_phrasing) sont préexistants
et sans rapport avec la refonte hero.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
aad37f8566