Modules du site
Catalogue complet des composants
15 modules
Palette de couleurs
Couleurs principales du design system OSOM
#33FF7DCouleur primaire utilisée pour les CTA principaux, les badges d'accent et les interactions clés du parcours utilisateur.
#000000Noir de référence pour la typographie, les contours forts et les composants premium comme les overlays et les headers.
#FFFFFFBase neutre pour les sections lumineuses, les cartes de contenu et les fonds destinés à valoriser les autres couleurs.
#737373Palette d'appui pour les textes secondaires, les bordures discrètes et les états de surface (hover, disabled).
#3B82F6Accent utilisé pour les informations contextuelles, les liens secondaires et les composants liés aux données.
#FCD34DAccent chaleureux réservé aux alertes positives, aux surlignages de statistiques et aux contenus pédagogiques.
Exemples d'utilisation
Boutons
Boutons avec effet Glow
Badges
Cards & Containers
Inputs & Forms
Icônes & Indicators
Typographie
Titre H1 - 4xl Bold
Titre H2 - 3xl Bold
Titre H3 - 2xl Bold
Titre H4 - xl Bold
Paragraphe standard - Base Regular
Paragraphe petit - Small Regular
Label uppercase - XS Tracking
Code inline - Mono XSÉtats & Feedback
Layout & Navigation
3 modules
Navigation
Barre de navigation principale avec menu burger responsive, liens de navigation et CTA d'éligibilité
components/Navigation.tsxVoirNavigationHero
Navigation spéciale pour les pages avec hero en plein écran, overlay transparent
components/NavigationHero.tsxVoirFooter
Pied de page avec informations entreprise, liens légaux, réseaux sociaux et bouton WhatsApp
components/Footer.tsxVoirPage d'accueil
4 modules
HeroSection
Section hero avec slider d'images, titre animé, CTA et badges de confiance
components/HeroSection.tsxVoirStatsSection
Section statistiques avec chiffres clés animés et icônes
components/StatsSection.tsxVoirHowItWorksSection
Section "Comment ça marche" avec étapes numérotées et icônes colorées
components/HowItWorksSection.tsxVoirCTASection
Section call-to-action avec titre animé et bouton d'éligibilité
components/CTASection.tsxVoirComposants UI
3 modules
Card
Carte réutilisable avec animations Framer Motion, icône, titre et description
components/Card.tsxVoirFAQ
Composant FAQ accordéon avec animations et CTA intégré
components/FAQ.tsxVoirImagePlaceholder
Placeholder pour images avec icône et texte de chargement
components/ImagePlaceholder.tsxVoirModals & Interactions
2 modules
ReusableEligibilityModal
Modal multi-étapes pour vérifier l'éligibilité CEE avec recherche d'entreprise
components/ReusableEligibilityModal.tsxVoirLiveChat
Widget de chat en direct avec popup animé et intégration WhatsApp
components/LiveChat.tsxVoirPages DOM-TOM
3 modules
TerritoryHero
Hero spécifique pour les pages territoires avec image de fond et informations locales
components/TerritoryHero.tsxVoirTerritoryContact
Section contact avec informations spécifiques au territoire
components/TerritoryContact.tsxVoirTerritoryRegulation
Section réglementation et spécificités locales du territoire
components/TerritoryRegulation.tsxVoir