Catalogue des Sections Dispr

Référence exhaustive de toutes les sections disponibles sur le site. Utiliser les classes et IDs existants avant d'en créer de nouveaux.

Heroes

SEC-01
Hero Principal (Tomorro-style)
Accroche principale : titre Recoleta, sous-titre, 2 CTAs, preuve sociale, logos clients, animation de carte démo + réponses bancaires.
index.html dispr-sections.css
.hero .has-grid #hero .hero-content .hero-title .hero-subtitle .hero-ctas .hero-proof .hero-logos .hero-visual .hero-animation .demo-card .response-cards .orb
SEC-02
Feature Hero (Carte produit chevauchante)
Hero de page fonctionnalité : breadcrumb, titre massif, description, CTAs, carte produit flottante avec animation, logos en bas.
feature-template.html feature-page.css
.fhero #feature-hero .fhero__bg .fhero__orb .fhero__breadcrumb .fhero__layout .fhero__content .fhero__visual .fhero-card .fhero__logos
SEC-03
IA Hero (Centré avec Orb)
Hero IA Nao : orb animée centrale, titre + sous-titre centrés, CTAs, logos partenaires.
ia.html feature-page.css
.ia-hero #ia-hero .ia-hero__bg .ia-hero__orb-wrapper .ia-hero__content .ia-hero__title .fhero__logos
SEC-04
About Hero (Statement + Stats)
Hero "À propos" centré : badge, titre, texte, ligne de stats (flux, demandes, clients).
about.html about-page.css
.about-hero .about-hero__orb .about-stats .about-stat .about-stat__value .about-stat__label
SEC-05
Pricing Hero (Formulaire de contact)
Hero tarifs : badge, titre, formulaire de devis (prénom, nom, email, téléphone, entreprise, volume, message).
pricing.html pricing-page.css
.pricing-hero #pricing-hero .pricing-hero__badge .pricing-form .pricing-form__row .form-group
SEC-06
Sector Hero
Hero de page secteur : badge "Secteur d'activité", titre du secteur, sous-titre descriptif.
secteurs/*.html sector-page.css
.sector-hero .sector-badge .sector-badge-dot

Contenu / Positionnement

SEC-07
Big Statement (Plein écran)
Grande déclaration plein écran avec orb décorative. Titre Recoleta uppercase + texte lead. Transition blur-in au scroll.
index.html dispr-sections.css
.statement .has-grid #statement .statement__bg .statement__inner .statement__orb .statement__title .statement__lead
SEC-08
Positionnement (Mockup + Texte)
Layout 2 colonnes : mockup fenêtre OS avec sidebar et 4 écrans interactifs (fiche client, demandes, contrats, performances) + colonne texte avec CTAs.
index.html dispr-sections.css
.positioning .positioning--light #positioning .positioning__visual .positioning__content .mockup-window .mockup-screen .mockup-sidebar .positioning__cta
SEC-09
Lettre Ouverte (Carte dark dramatique)
Carte dark avec image atmosphérique et orb. Texte de vision sur fond sombre profond, lien call-to-action. Utilisé sur plusieurs pages.
ia.html feature-template.html pricing.html feature-page.css
.fp-letter #fp-letter #ia-vision .fp-letter__card .fp-letter__content .fp-letter__title .fp-letter__visual .fp-letter__orb
SEC-10
Vision / Notre Vision
Section vision : badge, titre, deux paragraphes de texte. Fond neutre.
index.html dispr-sections.css
.vision-section #vision .vision-header .vision-title .vision-content
SEC-11
About Vision (Carte 2 colonnes)
Carte glassmorphism avec grille 2 colonnes : texte + visuel (orb + image). Explique le positionnement "partenaire".
about.html about-page.css
.about-vision .about-vision__card .about-vision__content .about-vision__visual .about-vision__orb .about-vision__image
SEC-12
Contenu Sectoriel (Sidebar + Main)
Layout avec sidebar et contenu principal : texte sectoriel, image, cartes avantages (clients/distributeurs), bannière CTA, FAQ sectorielle.
secteurs/*.html sector-page.css
.sector-content .content-wrapper .content-main .benefits-grid .benefit-card .cta-banner .sidebar .sidebar-section

Feature Blocks

SEC-13
Feature Card (Accordion + Image)
Carte avec pannneau blanc : accordéon (3 items) à gauche + screenshot produit à droite. Variante inversée disponible (.fc--reversed).
index.html dispr-sections.css
.feature-card #feature-1 #feature-2 .fc .fc--reversed .fc__head .fc__panel .fc__left .fc__right .accordion .accordion-item .product-image .btn-learn-more
SEC-14
FP Block (Texte + Visuel alterné)
Bloc de feature page : layout 2 colonnes (texte + image) avec variante inversée. Inclut badge, titre, description, liste d'avantages. 3 blocs par page typiquement.
feature-template.html ia.html feature-page.css
.fp-block .fp-block--dark .fp-block__container .fp-block__wrapper .fp-block__wrapper--reversed .fp-block__text .fp-block__visual .fp-block__image
SEC-15
Fonctionnalités + Chiffres (Cloud de pills)
Layout 2 colonnes : features + stats à gauche (grille de features, stats 53%/92%) + nuage de pills (fonctionnalités) à droite. CTAs centrés en bas.
index.html dispr-sections.css
.features-stats #features-stats .features-stats__left .features-stats__right .features-block .stats-block .pills-cloud .pill .features-stats__ctas
SEC-16
Fonctionnalités Incluses (Grille d'icônes)
Grille de 8 cartes fonctionnalités avec icône + texte : utilisateurs illimités, banques, contrats, signature, tableaux, rachats, support, IA.
pricing.html pricing-page.css
.pricing-features #pricing-features .pricing-features__grid .pricing-feature-card .pricing-feature-card__icon .pricing-feature-card__content

Tabs / Interactif

SEC-17
Targets / Cibles (Onglets animés)
3 onglets (Commerciaux, Backoffice, Direction). Chaque panneau : animation de cartes (demande, réponses bancaires) + colonne texte avec liste d'avantages.
index.html dispr-sections.css
.targets-section #targets .targets-header .targets-tabs .target-tab .target-panel .target-grid .target-animation .target-anim-container .target-card .target-responses .target-text .target-benefits
SEC-18
Chat IA Demo (Conversation interactive)
Démo conversationnelle avec l'IA Nao : bulles de chat animées, scénarios prédéfinis, indicateur "thinking".
ia.html ai-chat-only.css feature-page.css
.fp-block--dark #ia-demo .ai-chat-demo .card-glass .ai-messages-container .chat-bubble .thinking-indicator

Statistiques

SEC-19
Stats Section (Compteurs animés)
Grille de 3 chiffres clés animés au scroll (140M€, 22k demandes, +15 clients). Compteur jQuery.
index.html ia.html dispr-sections.css
.stats-section #stats .stats-grid .stat-item .stat-number .stat-unit .stat-label .timer
SEC-20
Awards / Distinctions
Grille de distinctions : Best SaaS Fintech, Innovation Leasing, ISO 27001, RGPD, +15 clients.
pricing.html pricing-page.css
.awards-section #awards .awards-grid .award-item .award-item__icon .award-item__label

Case Study / Banner

SEC-21
Case Study (Banner pleine largeur)
Bannière dramatique pleine largeur avec image de fond, overlay sombre, carte texte flottante avec témoignage ou question.
feature-template.html ia.html feature-page.css
.fp-casestudy #fp-casestudy #ia-preview .fp-casestudy__banner .fp-casestudy__bg .fp-casestudy__overlay .fp-casestudy__card .fp-casestudy__question
SEC-22
Bannière IA (Nao)
Carte promotionnelle pour l'IA Nao : badge, titre, description, CTA, orb décorative.
index.html dispr-sections.css
.ai-banner #ai-banner .ai-banner__card .ai-banner__content .ai-banner__title .ai-banner__visual .ai-orb

Equipes / Cards Grid

SEC-23
Teams / Avantages (Grille de cards)
Grille de 3 ou 6 cartes (équipes / avantages) avec icône, titre et description. Variante 6 colonnes pour IA.
feature-template.html ia.html feature-page.css
.fp-teams #fp-teams #ia-benefits .fp-teams__header .fp-teams__grid .fp-teams__grid--6 .fp-team-card
SEC-24
Valeurs (3 cards animées)
Grille de 3 cartes avec icône, titre et description. Animation hover (translateY + barre accent top).
about.html about-page.css
.about-values .about-values__header .about-values__grid .value-card .value-card__icon .value-card__title .value-card__desc
SEC-25
Équipe (Photos + LinkedIn)
Grille 4 colonnes de cartes membre : photo, overlay LinkedIn hover, nom, poste. Carte spéciale "Nous recrutons".
about.html about-page.css
.about-team .about-team__grid .team-card .team-card__image .team-card__overlay .team-card__social .team-card__info .team-card--hiring

Confiance / Sécurité

SEC-26
Trust / Sécurité (3 cards certifications)
3 cartes confiance : RGPD, ISO 27001, hébergement France/eIDAS. Badge, titre, description, lien.
feature-template.html ia.html feature-page.css
.fp-trust #fp-trust #ia-trust .fp-trust__header .fp-trust__grid .fp-trust-card

Témoignages

SEC-27
Témoignages FP (Track horizontal)
3 cartes témoignage : quote, avatar, nom, rôle. Disposition en track horizontal. Utilisé sur feature-page, ia, index.
feature-template.html ia.html index.html feature-page.css
.fp-testimonials #fp-testimonials #ia-testimonials .fp-testimonials__header .fp-testimonials__track .fp-testimonial-card .fp-testimonial-card__quote .fp-testimonial-card__author .fp-testimonial-card__avatar
SEC-28
Témoignages Pricing (Grille + étoiles)
3 cartes avec étoiles ★★★★★, citation, avatar initiales, nom, rôle. Titre accrocheur avec emojis.
pricing.html pricing-page.css
.pricing-testimonials #testimonials .testimonials-grid .testimonial-card .testimonial-card__stars .testimonial-card__author .testimonial-card__avatar
SEC-29
Citation CEO (Images + Quote)
Grille 2 colonnes : galerie photos (3 images) + citation du CEO avec avatar et fonction.
about.html about-page.css
.about-quote .about-quote__wrapper .about-quote__images .about-quote__img .about-quote__content .about-quote__text .about-quote__author .about-quote__avatar

FAQ

SEC-30
FAQ Accordéon (Feature Page style)
Accordéon avec 5+ questions. Chevron animé, expansion/contraction. Utilisé sur feature-page, ia, pricing (variante pricing-faq).
feature-template.html ia.html feature-page.css
.fp-faq #fp-faq #ia-faq .fp-faq__header .fp-faq__list .fp-faq__item .fp-faq__question .fp-faq__answer
SEC-31
FAQ Pricing (Carte conteneur)
Accordéon dans une carte dark. 6 questions tarification. Style légèrement différent du fp-faq.
pricing.html pricing-page.css
.pricing-faq #faq .pricing-faq__card .pricing-faq__item .pricing-faq__question .pricing-faq__answer

Partenaires / Grilles

SEC-32
Partenaires Bancaires (Grille logos)
Grille de 8 logos banques : Franfinance, BNP, Leasecom, Mutualease, DLL, Lixxbail, Locam, Grenke.
index.html about.html dispr-sections.css
.partners-section #partners .partners-header .partners-title .partners-grid .partner-logo
SEC-33
Secteurs d'Activité (Cards avec image)
Grille de 5 cartes secteurs : Bureautique, Santé, Industrie, Logiciel, Professionnel. Image + tag + titre.
index.html secteurs/*.html dispr-sections.css
.sectors-section #sectors .sectors-header .sectors-grid .sector-card .sector-card__image .sector-card__content .sector-card__tag .sector-card__title

Call-to-Action

SEC-34
CTA Final (Carte centrée)
Carte CTA avec titre jeu thin/bold, sous-titre, bouton large, note rassurante. Grid overlay décoratif.
index.html about.html feature-template.html ia.html dispr-sections.css
.cta-section .has-grid #cta-final .cta-card .cta-title .cta-subtitle .cta-actions .cta-note .btn-primary--large
SEC-35
CTA Pricing (Variante tarifs)
CTA spécifique pricing avec titre, description, bouton pour planifier une démo personnalisée.
pricing.html pricing-page.css
.pricing-cta #cta-final .pricing-cta__card .pricing-cta__title .pricing-cta__actions

Navigation / Footer

SEC-36
Header / Menu Principal
Navigation sticky : logo, liens (Accueil, Fonctionnalités, IA, Tarifs, À propos, Contact), dropdown Services, sélecteur langue, bouton "Démarrer". Menu burger sur mobile.
Toutes les pages dispr-base.css dispr-sections.css mobile.css
.theme-main-menu .sticky-menu .theme-menu-six .bg-none .navbar .navbar-toggler .navbar-collapse .menu-backdrop .signup-btn
SEC-37
Footer
Pied de page : logo, 3 colonnes de liens, réseaux sociaux, copyright. Identique sur toutes les pages.
Toutes les pages style.css (legacy)
.theme-footer-eight .top-footer .bottom-footer .footer-about-widget .footer-list .footer-title .social-icon

Dispr Design System — 37 sections cataloguées — Mars 2026