Introduction
Ce design system documente l'ensemble des composants, styles et patterns développés pour InfoRencontre, plateforme de comparaison de sites de rencontre et blog relationnel.
Couleurs
Palette vibrante rose-violet évoquant l'amour et la passion, sur fond doux et chaleureux
Typographie
Police Poppins pour une apparence moderne, accessible et friendly
Composants
Bibliothèque des composants UI développés pour le projet
Hero Dynamique avec Tabs
Hero full-screen avec background dynamique qui change selon l'onglet sélectionné (5 catégories : gratuite, sérieuse, coquine, cougar, spécialisée). Transitions crossfade fluides entre les images.
Top 5 Card Gradient
Card avec gradient rose-violet affichant le classement des 5 meilleurs sites du mois avec notes sur 5. Design élégant avec numéros dorés et étoiles.
Featured Article + Mini Grid
Layout asymétrique avec 1 featured article pleine largeur + grille 2×3 de mini-articles. Images en background avec overlay gradient et titres en surimpression.
Test Cards avec Badges
Cards de test avec image, badge catégorie coloré (5 couleurs selon le type), titre, extrait et bouton CTA. Design moderne avec hover élévation et shadow.
Section Contact Parallax
Section full-width avec effet parallax au scroll, background image fixe, overlay gradient et CTA centré. Design immersif pour inciter au contact.
Fonctionnalités
Fonctionnalités clés développées pour une expérience comparative optimale
Système de Comparaison par Catégories
Organisation des sites de rencontre en 5 catégories distinctes (gratuite, sérieuse, coquine, cougar, spécialisée). Chaque catégorie dispose de son propre design visuel et de tests détaillés. Le hero dynamique permet de basculer entre les catégories avec changement d'ambiance visuelle.
Top 5 Mensuel Auto-Généré
Système de classement automatique des 5 meilleurs sites du mois basé sur les notes attribuées. Mise à jour manuelle mensuelle via l'administration WordPress. Affichage prominent en homepage avec notes sur 5 et design gradient attractif pour maximiser les conversions.
Blog Relationnel Intégré
Section blog complète avec articles de conseils sur les relations, le bien-être et la séduction. Layout featured article + mini-grid pour maximiser l'engagement. Catégories exclues des comparatifs pour séparer contenus éditoriaux et tests. SEO optimisé avec meta descriptions et schema markup.
Écrans
Aperçus des interfaces desktop et mobile
Performance
Métriques de performance et optimisations techniques
