Hero Header Sections
hero-hub-stats
stable Sur waimia · 2 Contenu inline (instance)Énoncer la proposition de valeur
Hero hub avec stats : meta kicker double + numéro § accent + h1 maximal, lede, grille KeyMetric 4-col en pied avec accent.
Instances sur le site
Global 0 instance en page composable
-
src/pages/agence/index.astro -
src/pages/expertise-claude.astro
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
meta_kicker | Contenu | text | Oui | fr / en | · |
hub_num | Contenu | text | Oui | · | · |
h1 | Contenu | text | Oui | fr / en | · |
lede | Contenu | text | Oui | fr / en | · |
stats | Contenu | array | Non | · | 2..4 |
Déclinaisons · 16
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 3 curées, 13 générées. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.
-
Hero hub stats · papier 2
curéehero-hub-stats--paper-2 -
Hero hub stats · papier 3
curéehero-hub-stats--paper-3 -
Hero hub stats · encre
curéehero-hub-stats--ink -
hero-hub-stats · split
généréehero-hub-stats--split -
hero-hub-stats · centré
généréehero-hub-stats--centered -
hero-hub-stats · masthead
généréehero-hub-stats--masthead -
hero-hub-stats · entonnoir
généréehero-hub-stats--funnel -
hero-hub-stats · image pleine
généréehero-hub-stats--full-bleed-image -
hero-hub-stats · empilé
généréehero-hub-stats--stacked -
hero-hub-stats · minimal
généréehero-hub-stats--minimal -
hero-hub-stats · avec formulaire
généréehero-hub-stats--with-form -
hero-hub-stats · split inversé
généréehero-hub-stats--split-reverse -
hero-hub-stats · fond vidéo
généréehero-hub-stats--video-bg -
hero-hub-stats · centré étroit
généréehero-hub-stats--centered-narrow -
hero-hub-stats · avec bande de logos
généréehero-hub-stats--with-logos-strip
Comparer les déclinaisons · 15
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.
-
Hero hub stats · papier 2
curéehero-hub-stats--paper-2background:paper-2Ouvrir dans le builder -
Hero hub stats · papier 3
curéehero-hub-stats--paper-3background:paper-3Ouvrir dans le builder -
Hero hub stats · encre
curéehero-hub-stats--inkbackground:inkOuvrir dans le builder -
hero-hub-stats · split
généréehero-hub-stats--splitlayout:splitOuvrir dans le builder -
hero-hub-stats · centré
généréehero-hub-stats--centeredlayout:centeredOuvrir dans le builder -
hero-hub-stats · masthead
généréehero-hub-stats--mastheadlayout:mastheadOuvrir dans le builder -
hero-hub-stats · entonnoir
généréehero-hub-stats--funnellayout:funnelOuvrir dans le builder -
hero-hub-stats · image pleine
généréehero-hub-stats--full-bleed-imagelayout:full-bleed-imageOuvrir dans le builder -
hero-hub-stats · empilé
généréehero-hub-stats--stackedlayout:stackedOuvrir dans le builder -
hero-hub-stats · minimal
généréehero-hub-stats--minimallayout:minimalOuvrir dans le builder -
hero-hub-stats · avec formulaire
généréehero-hub-stats--with-formlayout:with-formOuvrir dans le builder -
hero-hub-stats · split inversé
généréehero-hub-stats--split-reverselayout:split-reverseOuvrir dans le builder -
hero-hub-stats · fond vidéo
généréehero-hub-stats--video-bglayout:video-bgOuvrir dans le builder -
hero-hub-stats · centré étroit
généréehero-hub-stats--centered-narrowlayout:centered-narrowOuvrir dans le builder -
hero-hub-stats · avec bande de logos
généréehero-hub-stats--with-logos-striplayout:with-logos-stripOuvrir dans le builder
Sections liées
Même famille
hero-academy-hub stable Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).
Apparition au scrollSurvolDéfilement +8 16 décl.hero-asymmetric-grid stable Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.hero-atlas stable Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.
Apparition au scrollDéfilementImage de fond +4 16 décl.hero-author stable Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-baseline-stats stable Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).
BoutonsListeChiffres clés +1 14 décl.hero-capability-band stable Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.Même catégorie
hero-academy-hub stable Hero hub académie : kicker mono, h1 display, lede et bande de stats mono (cours, parcours, alumni).
Apparition au scrollSurvolDéfilement +8 16 décl.hero-asymmetric-grid stable Héro plein écran en grille multi-lignes asymétrique : titre serif pleine largeur, rangée 2 colonnes (label + lede + 2 CTA à gauche, label + puces fléchées à droite), puis bande de 4 KPI dont la dernière cellule est inversée en ink. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.hero-atlas stable Hero Atlas en deux colonnes avec signature grid, copy éditoriale, CTAs et mini-map des quatre piliers.
Apparition au scrollDéfilementImage de fond +4 16 décl.hero-author stable Hero de page auteur : 2-col copy/portrait, breadcrumb équipe, role eyebrow, h1 split prénom+nom italic accent, lede display.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-baseline-stats stable Héro plein écran à impact typographique : kicker, titre serif géant et lede court en tête, rangée de 4 KPI poussée en baseline (séparée par une hairline forte). CTA optionnel, pas de média. Variante paper et ink, responsive (KPI 2 colonnes sur mobile).
BoutonsListeChiffres clés +1 14 décl.hero-capability-band stable Héro plein écran : titre serif accent et lede alignés à gauche (~70 % de large), puis une bande de capacités asymétrique pleine largeur de 5 cellules dont la 3e (large, accent) porte un KPI serif, les 4 autres des capacités mono. Variante paper et ink, responsive.
BoutonsListeChiffres clés +1 14 décl.Similaires
hero-pillar-hub stable Hero de page pilier avec titre maximal et grille de statistiques quatre colonnes optionnelle.
Apparition au scrollDéfilementPlusieurs images +8 16 décl.hero-conversion-funnel stable Hero magnétique flagship : kicker num + h1 monumental, lede, meta pills, benefits checklist, ligne preuve mono, double CTA et grille stats 4-col.
Apparition au scrollDéfilementPlusieurs images +8 15 décl.hero-social-proof stable Hero centré avec preuve sociale above-the-fold : titre, CTA, note clients optionnelle et bande de chiffres clés (StatRow) sous le pli haut.
Apparition au scrollDéfilementBoutons +2 16 décl.hero-hub-listing deprecated (déprécié → hero-hub-masthead variant=listing) Hero éditorial de hub avec titre monumental et lede courte, sans appel à l'action, pour pages de listing.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-problem-index stable Hero d'index par problème : décor SVG rectangle rotated 12°, h1 monumental, lede italique et phrase canonique.
Apparition au scrollSurvolDéfilement +8 16 décl.hero-stack-rhythm stable Héro plein écran en une seule colonne resserrée, au rythme vertical généreux : fil d'Ariane, kicker, titre serif, lede, badges inline séparés par hairlines, 2 CTA, bande de 4 KPI. Variante paper et ink, responsive.
SurvolIllustration au traitBoutons +4 14 décl.Code
Données de la section (à placer dans sections[])
{
"type": "hero-hub-stats",
"meta_kicker_fr": "Hub · Pilier Entreprise",
"meta_kicker_en": "Hub · Enterprise pillar",
"hub_num": "02",
"h1_fr": "Refondre le <i>delivery</i>.<br/>Pas l'organigramme.",
"h1_en": "Rebuild <i>delivery</i>.<br/>Not the org chart.",
"lede_fr": "Câbler l'IA dans vos workflows existants, sans déplacer un poste, sans changer un outil.",
"lede_en": "Wire AI into your existing workflows, no role moved, no tool replaced.",
"stats": [
{
"value": "5 j",
"label_fr": "pour cibler le levier",
"label_en": "to pinpoint the lever",
"emphasis": false
},
{
"value": "4 sem.",
"label_fr": "au premier workflow",
"label_en": "to first workflow",
"emphasis": true
},
{
"value": "0",
"label_fr": "ateliers vendus",
"label_en": "workshops sold",
"emphasis": false
},
{
"value": "1",
"label_fr": "interlocuteur unique",
"label_en": "single point of contact",
"emphasis": false
}
]
}/library/section/hero-hub-stats.json
Chemin du détail machine
/library/section/hero-hub-stats.json