Waimia.
Réserver un audit →

Stats Sections

proof-bar

stable Sur waimia · 37 Contenu inline (instance)

Preuve sociale

Barre de preuve compacte pour afficher des métriques clés et renforcer la crédibilité.

proof metrics bar
Ouvrir dans le builder

Instances sur le site

Global 35 instances sur 35 pages

Page Position Contenu Variante
/lp/hub section 3 En bref paper-2
/lp/site-web-intelligent section 2 En bref paper
/lp/systeme-acquisition section 2 En bref paper
/lp/systeme-ia-marketing section 2 En bref paper
/lp/visibilite-google-ia section 2 En bref paper
/services/agent-support-client section 2 En bref paper
/services/agents-ia section 2 En bref paper
/services/applications-internes section 2 En bref paper
/services/automatisation-n8n section 2 En bref paper
/services/automatisations section 2 En bref paper
/services/cold-email-b2b section 2 En bref paper
/services/consultant-ia-claude section 2 En bref paper
/services/crm-scoring-routing section 2 En bref paper
/services/donnees-reporting section 2 En bref paper
/services/integration-claude section 2 En bref paper
/services/integration-crm section 2 En bref paper
/services/landing-page-google-ads section 2 En bref paper
/services/landing-pages-tunnels section 2 En bref paper
/services/maintenance-growth section 2 En bref paper
/services/mvp-saas section 2 En bref paper
/services/prospection-automatisee section 2 En bref paper
/services/publicite-en-ligne section 2 En bref paper
/services/referencement-ia section 2 En bref paper
/services/relance-devis section 2 En bref paper
/services/seo-geo-contenu section 2 En bref paper
/services/seo-local section 2 En bref paper
/services/sequences-de-suivi section 2 En bref paper
/services/site-web-ia section 2 En bref paper
/services/sur-mesure-headless section 2 En bref paper
/services/systeme-acquisition section 2 En bref paper
/services/systeme-commercial section 2 En bref paper
/services/systemes-operationnels-ia section 2 En bref paper
/services/template-service-ref section 2 En bref paper
/services/webflow section 2 En bref paper
/services/wordpress section 2 En bref paper

Composé inline inline · non éditable ici

  • src/pages/en/index.astro
  • src/pages/index.astro

Aperçu

Comment l'utiliser

Intention

Preuve sociale

Rôle de page

Preuve

Modèle de contenu

Contenu inline (instance)

Effets

Apparition au scroll

Interactions

Défilement

Éléments

Chiffres clés Citation

Mise en page

Multi-colonnes

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
kicker Contenu text Non fr / en ·
metrics Contenu array Oui · 2..6
layout Présentation enum Non · horizontal · vertical-stack
link_label Contenu text Non fr / en ·
link_href Contenu url Non · ·

Déclinaisons · 19

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 5 curées, 14 générées. Échantillon des 12 premières générées (sur 14) ; toutes accessibles en rendu isolé.

  • Barre de preuves · fond papier 2

    curée
    proof-bar--paper-2

  • Barre de preuves · fond papier 3

    curée
    proof-bar--paper-3

  • Barre de preuves · fond encre

    curée
    proof-bar--ink

  • Barre de preuves · empilée verticale

    curée
    proof-bar--vertical-stack

  • Barre de preuves · empilée · encre

    curée
    proof-bar--vertical-stack-ink

  • proof-bar · en ligne · aligné début

    générée
    proof-bar--inline-start

  • proof-bar · en ligne · centré

    générée
    proof-bar--inline-center

  • proof-bar · empilé · aligné début

    générée
    proof-bar--stacked-start

  • proof-bar · empilé · centré

    générée
    proof-bar--stacked-center

  • proof-bar · centré · aligné début

    générée
    proof-bar--centered-start

  • proof-bar · centré · centré

    générée
    proof-bar--centered-center

  • proof-bar · pleine largeur · aligné début

    générée
    proof-bar--full-bleed-start

  • proof-bar · pleine largeur · centré

    générée
    proof-bar--full-bleed-center

  • proof-bar · split image · aligné début

    générée
    proof-bar--split-image-start

  • proof-bar · split image · centré

    générée
    proof-bar--split-image-center

  • proof-bar · encadré · aligné début

    générée
    proof-bar--boxed-start

  • proof-bar · encadré · centré

    générée
    proof-bar--boxed-center

Comparer les déclinaisons · 17

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

  • Barre de preuves · fond papier 2

    curée
    proof-bar--paper-2
    background:paper-2
    Ouvrir dans le builder

  • Barre de preuves · fond papier 3

    curée
    proof-bar--paper-3
    background:paper-3
    Ouvrir dans le builder

  • Barre de preuves · fond encre

    curée
    proof-bar--ink
    background:ink
    Ouvrir dans le builder

  • Barre de preuves · empilée verticale

    curée
    proof-bar--vertical-stack
    layout:vertical-stack
    Ouvrir dans le builder

  • Barre de preuves · empilée · encre

    curée
    proof-bar--vertical-stack-ink
    layout:vertical-stackbackground:ink
    Ouvrir dans le builder

  • proof-bar · en ligne · aligné début

    générée
    proof-bar--inline-start
    layout:inlinealign:start
    Ouvrir dans le builder

  • proof-bar · en ligne · centré

    générée
    proof-bar--inline-center
    layout:inlinealign:center
    Ouvrir dans le builder

  • proof-bar · empilé · aligné début

    générée
    proof-bar--stacked-start
    layout:stackedalign:start
    Ouvrir dans le builder

  • proof-bar · empilé · centré

    générée
    proof-bar--stacked-center
    layout:stackedalign:center
    Ouvrir dans le builder

  • proof-bar · centré · aligné début

    générée
    proof-bar--centered-start
    layout:centeredalign:start
    Ouvrir dans le builder

  • proof-bar · centré · centré

    générée
    proof-bar--centered-center
    layout:centeredalign:center
    Ouvrir dans le builder

  • proof-bar · pleine largeur · aligné début

    générée
    proof-bar--full-bleed-start
    layout:full-bleedalign:start
    Ouvrir dans le builder

  • proof-bar · pleine largeur · centré

    générée
    proof-bar--full-bleed-center
    layout:full-bleedalign:center
    Ouvrir dans le builder

  • proof-bar · split image · aligné début

    générée
    proof-bar--split-image-start
    layout:split-imagealign:start
    Ouvrir dans le builder

  • proof-bar · split image · centré

    générée
    proof-bar--split-image-center
    layout:split-imagealign:center
    Ouvrir dans le builder

  • proof-bar · encadré · aligné début

    générée
    proof-bar--boxed-start
    layout:boxedalign:start
    Ouvrir dans le builder

  • proof-bar · encadré · centré

    générée
    proof-bar--boxed-center
    layout:boxedalign:center
    Ouvrir dans le builder

Sections liées

Même famille

announcement-banner stable

Bandeau d’annonce/promo fin : badge optionnel, texte court et lien, bouton de fermeture optionnel (dismissible), variantes accent, encre ou paper-2.

band Banner Sections SurvolBoutonsIcônes +2 17 décl.
branded-callout stable

Callout de marque fond paper-2 avec kicker §, titre display italique et corps de deux paragraphes, CTA optionnel.

band CTA Sections Apparition au scrollDéfilementBoutons +1 20 décl.
closing-cta-band stable

Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).

band CTA Sections Apparition au scrollSurvolBoutons +1 17 décl.
comparison-pricing-callout stable

Bloc « pourquoi nous » en trois colonnes de propositions de valeur, terminé par un CTA et une mention. Sert de pont entre les features et la page tarifaire.

band Comparison Sections Illustration au traitListe3 colonnes 18 décl.
cta-band stable

Bandeau CTA horizontal pour relancer une action au milieu ou en fin de parcours.

band CTA Sections BoutonsPleine largeur 17 décl.
cta-final stable

CTA final pour conclure une page et orienter vers l'action de conversion principale.

band CTA Sections Apparition au scrollSurvolDéfilement +3 18 décl.

Même catégorie

key-metric-grid stable

Grille de métriques chiffrées magnifiées (style FT/Bloomberg) composant l'atome KeyMetric : chiffre dominant, label mono, delta optionnel. Axes size/align/variant et 2 à 4 colonnes, fond alterné.

stat-grid Stats Sections 4 colonnes 19 décl.
metric-callout-band stable

Bande d’une à trois métriques héro surdimensionnées accompagnées d’une phrase de contexte. Frappe fort sur un résultat chiffré, sombre par défaut pour la mise en avant.

band Stats Sections Compteurs animésListe3 colonnes 17 décl.
metric-shift stable

Comparaison avant → après : valeur initiale et finale magnifiées, delta.

stat-grid Stats Sections Apparition au scrollDéfilementIllustration au trait +1 13 décl.
roi-band stable

Bande ROI sur fond ink : en-tête eyebrow et titre display, chiffres KeyMetric placés en asymétrie 6/5.

band Stats Sections Apparition au scrollDéfilementIllustration au trait +2 17 décl.
spec-bar stable

Barre de spécifications projet N colonnes (label mono + valeur) avec grille CSS var, extrait de CaseStudyTemplate.

band Stats Sections Apparition au scrollDéfilement3 colonnes 16 décl.
stat-block stable

Bloc de statistiques en grille pour mettre en avant des chiffres de performance ou d'impact.

stat-grid Stats Sections Apparition au scrollSurvolDéfilement +5 17 décl.

Similaires

social-proof stable

Section de logos clients ou partenaires pour installer une preuve sociale immédiate.

band Logo Sections Défilement continuLogosListe +1 19 décl.
stat-counter stable

Compteur animé count-up déclenché à l’entrée dans le viewport (île React client:visible), grille de 2 à 4 stats. Respecte prefers-reduced-motion et reste lisible sans JS.

stat-grid Stats Sections Compteurs animésApparition au scrollDéfilement +2 13 décl.
logo-wall stable

Grille statique de logos partenaires ou clients, avec effet grayscale vers couleur au hover. Distinct du bandeau animé marquee-band.

marquee Logo Sections Défilement continuZoom au survolApparition au scroll +6 13 décl.
case-card-grid stable

Table éditoriale de cas clients en six colonnes (index, client, secteur, stack, impact, flèche) façon compte rendu d'audit.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +3 31 décl.
ecosystem-partners stable

Logos partenaires technologiques unifiés (masque alpha + currentColor), groupés par catégorie, grille / mur / marquee, variante dark.

card-grid Logo Sections Défilement continuSurvolIllustration au trait +4 20 décl.
integrations-grid stable

Grille de logos d’intégrations groupés par catégorie (CRM, communication, données). Répond à l’objection « est-ce que ça se branche à nos outils ? » d’un coup d’œil.

card-grid Logo Sections SurvolPlusieurs imagesLogos +2 8 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "proof-bar",
  "kicker_fr": "Preuves · démo design system",
  "kicker_en": "Proof · design system demo",
  "metrics": [
    {
      "value": "118",
      "label_fr": "tokens canoniques",
      "label_en": "canonical tokens",
      "emphasis": true
    },
    {
      "value": "19",
      "label_fr": "sections W6",
      "label_en": "W6 sections",
      "emphasis": false
    },
    {
      "value": "114",
      "label_fr": "composants atomic",
      "label_en": "atomic components",
      "emphasis": false
    },
    {
      "value": "0",
      "label_fr": "hallucinations",
      "label_en": "hallucinations",
      "emphasis": false
    }
  ],
  "layout": "horizontal"
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/proof-bar.json

Chemin du détail machine

/library/section/proof-bar.json