Mockups Reference - EGS Gallois Sisal¶

Maquettes Haute-Fidélité¶

Les maquettes finales représentent l'état visé pour le développement. Elles intègrent tous les éléments du Design System.

Liste des Écrans Clés¶

1. Homepage (Desktop)¶

• Hero : Vidéo d'ambiance en arrière-plan, Titre H1 blanc centré, CTA Pear.
• Storytelling : Layout asymétrique. Image à droite, Texte à gauche avec fond Floral White.
• Teaser Produits : 3 cartes alignées avec ombre portée légère.

2. Page Produits (Desktop)¶

• Quiz : Modal ou section dédiée avec fond Lemon Chiffon très clair. Boutons de choix larges et cliquables.
• Tableau : Lignes alternées (Zebra striping) : Blanc / Off-White. Typographie Overused Grotesk pour les données.

3. Page Transition (Mobile)¶

• Navigation : Menu burger ouvert prend 100% de la largeur.
• Contenu : Les 3 axes s'empilent verticalement (Stack). Les images prennent toute la largeur.

États d'Interface (UI States)¶

• Default : État repos.
• Hover : Survol souris (Desktop uniquement). Élévation des cartes, assombrissement des boutons.
• Active/Focus : Clic ou navigation clavier. Bordure de focus visible.
• Disabled : Bouton grisé (Opacité 0.5), curseur not-allowed.
• Loading : Skeleton screens pour le chargement des images lourdes.