Introduction
Ce design system documente l'ensemble des composants, styles et patterns développés pour Drunkopoly, landing page e-commerce de jeu de société à boire imprimable.
Couleurs
Palette ambrée inspirée de la bière, avec thème sombre/clair pour une ambiance festive adaptable
Typographie
Police Jost pour une identité moderne, élégante et hautement lisible
Composants
Bibliothèque des composants UI développés pour le projet
Menu Pinte Animé avec Clip-Path SVG
Menu latéral mobile en forme de pinte de bière avec clip-path SVG, mousse animée, bulles flottantes CSS et gradient ambre. Backdrop-filter blur sur l'overlay. Navigation full-height unique et mémorable.
Theme Toggle Light/Dark
Bouton de basculement thème clair/sombre avec transition fluide des CSS variables (couleurs, backgrounds, shadows). Icône soleil animée et état persistant en localStorage.
Cards Glass avec Small Grid
Cards avec effet glassmorphism, small-grid interne 2×2 pour afficher les specs (Joueurs, Durée, Niveau, Format). Background beige doux et shadow élégante.
Mockup ZIP Papier
Illustration stylisée d'un fichier ZIP avec coin "ZIP" doré, papier avec lignes gradient et shadow profonde. Design minimaliste représentant le produit digital.
Feature Cards avec Emojis
Grid 4 colonnes de feature cards avec icônes emoji, titre et description. Hover translateY et responsive en 2 colonnes tablette, 1 colonne mobile.
Headroom Header Sticky
Header sticky avec Headroom.js : transparent en haut de page, devient opaque avec backdrop-filter au scroll, se cache au scroll down et réapparaît au scroll up. UX optimale.
Fonctionnalités
Fonctionnalités clés développées pour une expérience e-commerce optimale
E-commerce avec Payhip
Intégration complète de Payhip pour la vente de produits digitaux. Bouton d'achat avec modal de paiement sécurisé (CB/PayPal), téléchargement instantané du fichier ZIP après transaction. Tracking des ventes et gestion automatisée sans backend personnalisé.
Thème Sombre/Clair Dynamique
Système de thème complet avec basculement clair/sombre via bouton toggle. Utilisation de CSS custom properties pour transitions fluides de toutes les couleurs, backgrounds et shadows. Préférence sauvegardée en localStorage pour persistance entre sessions.
Landing Page One-Page Optimisée
Architecture one-page avec sections anchor-linkées (#concept, #contenu, etc.), smooth scroll natif et scroll-margin-top pour compensation du header sticky. Structure de conversion optimale : Hero → Concept → Contenu → Features → Prix → Témoignages → CTA Final. SEO on-page complet.
Écrans
Aperçus des interfaces desktop et mobile
Performance
Métriques de performance et optimisations techniques
