hero-case-study · Composant Waimia

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

src/pages/cas-clients/[...slug].astro

Aperçu

Comment l'utiliser

Intention

Énoncer la proposition de valeur

Rôle de page

Héros

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`case_num`	Contenu	`text`	Oui	·	·
`eyebrow`	Présentation	`text`	Non	fr / en	·
`h1`	Contenu	`text`	Oui	fr / en	·
`illustration`	Contenu	`object`	Non	·	·
`specs`	Contenu	`array`	Non	·	2..6

Déclinaisons · 19

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

Cas client · illustration à droite · papier
curée
hero-case-study--illus-right-paper
Cas client · illustration à gauche · papier
curée
hero-case-study--illus-left-paper
Cas client · illustration à droite · papier 2
curée
hero-case-study--illus-right-paper-2
Cas client · illustration à gauche · encre
curée
hero-case-study--illus-left-ink
Cas client · sans illustration · papier
curée
hero-case-study--no-illus-paper
Cas client · sans illustration · encre
curée
hero-case-study--no-illus-ink
hero-case-study · split
générée
hero-case-study--split
hero-case-study · centré
générée
hero-case-study--centered
hero-case-study · masthead
générée
hero-case-study--masthead
hero-case-study · entonnoir
générée
hero-case-study--funnel
hero-case-study · image pleine
générée
hero-case-study--full-bleed-image
hero-case-study · empilé
générée
hero-case-study--stacked
hero-case-study · minimal
générée
hero-case-study--minimal
hero-case-study · avec formulaire
générée
hero-case-study--with-form
hero-case-study · split inversé
générée
hero-case-study--split-reverse
hero-case-study · fond vidéo
générée
hero-case-study--video-bg
hero-case-study · centré étroit
générée
hero-case-study--centered-narrow
hero-case-study · avec bande de logos
générée
hero-case-study--with-logos-strip

Comparer les déclinaisons · 18

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.

Cas client · illustration à droite · papier
curée
hero-case-study--illus-right-paper
background:paper
Ouvrir dans le builder
Cas client · illustration à gauche · papier
curée
hero-case-study--illus-left-paper
background:paperillustration
Ouvrir dans le builder
Cas client · illustration à droite · papier 2
curée
hero-case-study--illus-right-paper-2
background:paper-2illustration
Ouvrir dans le builder
Cas client · illustration à gauche · encre
curée
hero-case-study--illus-left-ink
background:inkillustration
Ouvrir dans le builder
Cas client · sans illustration · papier
curée
hero-case-study--no-illus-paper
background:paper
Ouvrir dans le builder
Cas client · sans illustration · encre
curée
hero-case-study--no-illus-ink
background:ink
Ouvrir dans le builder
hero-case-study · split
générée
hero-case-study--split
layout:split
Ouvrir dans le builder
hero-case-study · centré
générée
hero-case-study--centered
layout:centered
Ouvrir dans le builder
hero-case-study · masthead
générée
hero-case-study--masthead
layout:masthead
Ouvrir dans le builder
hero-case-study · entonnoir
générée
hero-case-study--funnel
layout:funnel
Ouvrir dans le builder
hero-case-study · image pleine
générée
hero-case-study--full-bleed-image
layout:full-bleed-image
Ouvrir dans le builder
hero-case-study · empilé
générée
hero-case-study--stacked
layout:stacked
Ouvrir dans le builder
hero-case-study · minimal
générée
hero-case-study--minimal
layout:minimal
Ouvrir dans le builder
hero-case-study · avec formulaire
générée
hero-case-study--with-form
layout:with-form
Ouvrir dans le builder
hero-case-study · split inversé
générée
hero-case-study--split-reverse
layout:split-reverse
Ouvrir dans le builder
hero-case-study · fond vidéo
générée
hero-case-study--video-bg
layout:video-bg
Ouvrir dans le builder
hero-case-study · centré étroit
générée
hero-case-study--centered-narrow
layout:centered-narrow
Ouvrir dans le builder
hero-case-study · avec bande de logos
générée
hero-case-study--with-logos-strip
layout:with-logos-strip
Ouvrir 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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.

hero Hero Header Sections 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).

hero Hero Header Sections 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.

hero Hero Header Sections BoutonsListeChiffres clés +1 14 décl.

Similaires

hero-problem-index stable

Hero d'index par problème : décor SVG rectangle rotated 12°, h1 monumental, lede italique et phrase canonique.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-centered stable

Hero centré pour poser une proposition de valeur claire et guider vers une action principale.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 17 décl.

hero-essay stable

Hero d'article éditorial avec accroche italique et métadonnées auteur, date et temps de lecture.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 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.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-landing stable

Hero magnétique landing : eyebrow mono, h1 italique avec emphasis, lede, double CTA et bandeau de disponibilité.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

hero-service-detail stable

Hero de page service avec numéro éditorial, titre, accroche et barre de preuves chiffrées optionnelle.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +8 16 décl.

Code

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

{
  "type": "hero-case-study",
  "case_num": "01",
  "eyebrow_fr": "§ Cas client",
  "eyebrow_en": "§ Case study",
  "h1_fr": "Scale-up SaaS B2B · <i>pipeline réactivé</i> en 10 semaines.",
  "h1_en": "B2B SaaS scale-up · <i>pipeline reactivated</i> in 10 weeks.",
  "illustration": {
    "src": "/images/illustrations/ds/super-girl-paper.webp",
    "alt_fr": "Une figure dynamique qui capte et qualifie les leads, illustration éditoriale duotone.",
    "alt_en": "A dynamic figure that captures and qualifies leads, a duotone editorial illustration.",
    "side": "right"
  },
  "specs": [
    {
      "label_fr": "Client",
      "label_en": "Client",
      "value": "Scale-up SaaS B2B"
    },
    {
      "label_fr": "Secteur",
      "label_en": "Sector",
      "value": "SaaS B2B"
    },
    {
      "label_fr": "Durée",
      "label_en": "Duration",
      "value": "10 sem."
    },
    {
      "label_fr": "Stack",
      "label_en": "Stack",
      "value": "Claude · HubSpot · dbt"
    },
    {
      "label_fr": "Services",
      "label_en": "Services",
      "value": "RevOps Rebuild"
    }
  ]
}

Pour un agent / MCP

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

/library/section/hero-case-study.json

Chemin du détail machine

/library/section/hero-case-study.json