Allison
5edaddd788
polish(marketing): refonte HYPER PRO 'Comment ça marche' — bezel iPhone, status bar, sound waves, modes enrichis (REC, waveform, typing, ripple, breadcrumb), IA card 40px brain + metrics, connecting line
10 améliorations cinématiques sur la section interactive :
PHONE FRAME RÉALISTE
- Bezel double border + glow ring externe pulsant
- Notch (Dynamic Island stylisé) + speaker grille + camera dot
- Status bar mobile (9:41, signal/wifi/batterie SVG)
- Drop shadow dramatique + inner shadow encastrée
MIC + SOUND WAVES
- 3 ripples concentriques émanant du mic (sound-ring keyframes)
MODE 1 TRANSCRIPTION
- Header REC indicator pulsant (rouge) + nom fichier
- Waveform animée (12 bars hauteurs randomisées)
- Barre progress double avec gradient + glow
MODE 2 DIARISATION
- Header conversation : 3 avatars empilés overlapping
- Bubbles avec timestamps (09:0X) + box-shadow
- Typing indicator (3 dots) entre messages
MODE 3 LANGUES
- Header DÉTECTION AUTOMATIQUE avec dot pulsant
- Ripple wave depuis le centre (rippleDelay calculé par distance)
- 5 langues highlight aléatoire glow brièvement
- Counter live FR · EN · ES · ... + 99+ détectées
MODE 4 EXPORTS
- Grid 4×2 organisé (au lieu de wrap aléatoire)
- Files détaillés avec mini-pages (3 lignes texte)
- Subtitle '7 FORMATS PRÊTS' + checkmark vert
MODE 5 USERS
- Counter centré 01 → 20 (font-mono black)
- 5 USER_COLORS variations (purple/cyan/green/blue/amber)
- Connecting lines SVG pointillés vers centre
MODE 6 SHARE
- Breadcrumb 'Mes dossiers › Réunions'
- Toolbar mini (search, filter, sort)
- Rows structurées avec 3-dots action
BOTTOM ZONE
- 6 boutons agrandis (30+px) avec labels + tab indicator border 2px
- AUTO pill (badge dot pulse) / Manuel countdown bar 4.5s
CARD INFO
- Icon container 32×32 + badge top-right + hover lift
RIGHT PANEL IA
- Brain dans cercle 40×40 gradient + glow
- Metrics row : 0ms latence · 100% privé · 24/7
- Sovereignty bullets : icon dans rounded box
GLOBAL
- Section background : grid pattern + 2 floating orbs blur
- Connecting line SVG cyan→violet phone↔IA panel
- Header section : eyebrow gradient pill + stats row (6/99+/0) + CTA démo
- Crossfade transitions modes (scale 0.96 → 1)
ACCESSIBILITÉ
- prefers-reduced-motion désactive toutes animations
- @media (max-width: 767px) désactive éléments décoratifs CPU-intensive
- aria-pressed, aria-live polite, focus-visible préservés
- 30 nouveaux keyframes CSS scopés
Tests : 1 existant + 1 enrichi (53 lignes, 22 nouvelles assertions)
Tests pass : 30/30 sur how-it-works (les 2 fails conformite sont pré-existants).
2026-04-29 10:04:04 -04:00
..
2026-04-28 21:28:46 -04:00
2026-04-28 15:54:17 -04:00
2026-04-28 15:54:17 -04:00
2026-04-28 15:39:09 -04:00
2026-04-28 21:06:12 -04:00
2026-04-29 10:04:04 -04:00
2026-04-28 21:06:12 -04:00
2026-04-28 21:28:46 -04:00