Waimia.
Réserver un audit →

Hero Header Sections

hero-offer-detail

stable Bibliothèque Contenu inline (instance)

Énoncer la proposition de valeur

Hero de page offre détail : SVG cercles concentriques signature, breadcrumb, tier kicker, h1 + lead italique, CTA et meta.

hero offer detail concentric-svg tier
Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Intention

Énoncer la proposition de valeur

Rôle de page

Héros

Modèle de contenu

Contenu inline (instance)

Effets

Apparition au scroll

Interactions

Survol Défilement

Éléments

Illustration au trait Boutons Badge Cartes

Mise en page

2 colonnes Média à droite Scindé

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
hero_variant Contenu enum Non · equilibre · showcase · encadre
breadcrumb_label Contenu text Non fr / en ·
breadcrumb_href Contenu url Non · ·
tier Contenu text Oui fr / en ·
h1 Contenu text Oui fr / en ·
lead Contenu text Oui fr / en ·
cta Contenu object Oui · ·
meta Contenu text Non fr / en ·
tags Contenu array Non · 0..8

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 offre détail · papier 2

    curée
    hero-offer-detail--paper-2

  • Hero offre détail · papier 3

    curée
    hero-offer-detail--paper-3

  • Hero offre détail · encre

    curée
    hero-offer-detail--ink

  • hero-offer-detail · split

    générée
    hero-offer-detail--split

  • hero-offer-detail · centré

    générée
    hero-offer-detail--centered

  • hero-offer-detail · masthead

    générée
    hero-offer-detail--masthead

  • hero-offer-detail · entonnoir

    générée
    hero-offer-detail--funnel

  • hero-offer-detail · image pleine

    générée
    hero-offer-detail--full-bleed-image

  • hero-offer-detail · empilé

    générée
    hero-offer-detail--stacked

  • hero-offer-detail · minimal

    générée
    hero-offer-detail--minimal

  • hero-offer-detail · avec formulaire

    générée
    hero-offer-detail--with-form

  • hero-offer-detail · split inversé

    générée
    hero-offer-detail--split-reverse

  • hero-offer-detail · fond vidéo

    générée
    hero-offer-detail--video-bg

  • hero-offer-detail · centré étroit

    générée
    hero-offer-detail--centered-narrow

  • hero-offer-detail · avec bande de logos

    générée
    hero-offer-detail--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 offre détail · papier 2

    curée
    hero-offer-detail--paper-2
    background:paper-2
    Ouvrir dans le builder

  • Hero offre détail · papier 3

    curée
    hero-offer-detail--paper-3
    background:paper-3
    Ouvrir dans le builder

  • Hero offre détail · encre

    curée
    hero-offer-detail--ink
    background:ink
    Ouvrir dans le builder

  • hero-offer-detail · split

    générée
    hero-offer-detail--split
    layout:split
    Ouvrir dans le builder

  • hero-offer-detail · centré

    générée
    hero-offer-detail--centered
    layout:centered
    Ouvrir dans le builder

  • hero-offer-detail · masthead

    générée
    hero-offer-detail--masthead
    layout:masthead
    Ouvrir dans le builder

  • hero-offer-detail · entonnoir

    générée
    hero-offer-detail--funnel
    layout:funnel
    Ouvrir dans le builder

  • hero-offer-detail · image pleine

    générée
    hero-offer-detail--full-bleed-image
    layout:full-bleed-image
    Ouvrir dans le builder

  • hero-offer-detail · empilé

    générée
    hero-offer-detail--stacked
    layout:stacked
    Ouvrir dans le builder

  • hero-offer-detail · minimal

    générée
    hero-offer-detail--minimal
    layout:minimal
    Ouvrir dans le builder

  • hero-offer-detail · avec formulaire

    générée
    hero-offer-detail--with-form
    layout:with-form
    Ouvrir dans le builder

  • hero-offer-detail · split inversé

    générée
    hero-offer-detail--split-reverse
    layout:split-reverse
    Ouvrir dans le builder

  • hero-offer-detail · fond vidéo

    générée
    hero-offer-detail--video-bg
    layout:video-bg
    Ouvrir dans le builder

  • hero-offer-detail · centré étroit

    générée
    hero-offer-detail--centered-narrow
    layout:centered-narrow
    Ouvrir dans le builder

  • hero-offer-detail · avec bande de logos

    générée
    hero-offer-detail--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-sector stable

Hero de page secteur ou département : SVG rotated 15° accent, dept kicker, h1 + lead italique, CTA et meta, tags secteurs.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +7 16 décl.
hero-tech-layer stable

Hero de couche technologique : triangles SVG signature, layer badge (claude/os/orch), h1 + lead italique, CTA et meta.

hero Hero Header Sections Apparition au scrollSurvolDéfilement +7 16 décl.
hero-card-cover stable

Héro plein écran en deux colonnes : discours éditorial (kicker, titre serif, lede, badges pills, 2 CTA) à gauche, carte ink sombre (média line-art + mini-KPI) à droite. La carte reste sombre en mode paper. Variante paper et ink, responsive (1 colonne sur mobile).

hero Hero Header Sections SurvolImageIllustration au trait +8 14 décl.
hero-masthead-card stable

Héro plein écran asymétrique (~64/36) : colonne principale (kicker, titre serif accent, lede, badges pills mono, 2 CTA, sous-CTA), rail droit avec une carte média line-art ink réduite + 2 micro-KPI mono. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitImageBoutons +5 17 décl.
hero-thin-media stable

Héro plein écran très asymétrique (~72/28) : colonne dominante (kicker, titre serif accent, lede, badges pills mono, 2 CTA), rail droit avec une bande média line-art verticale mince (currentColor, lisible paper et ink). Variante paper et ink, responsive.

hero Hero Header Sections ImageIllustration au traitBoutons +5 14 décl.
hero-form-inline stable

Hero de capture lead above-the-fold : promesse à gauche, formulaire email/CTA à droite postant sur /api/newsletter, points de réassurance optionnels.

hero Hero Header Sections Apparition au scrollDéfilementListe +3 16 décl.

Code

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

{
  "type": "hero-offer-detail",
  "breadcrumb_label_fr": "Offres",
  "breadcrumb_label_en": "Services",
  "breadcrumb_href": "/services",
  "tier_fr": "TIER II · TRANSFORMATION",
  "tier_en": "TIER II · TRANSFORMATION",
  "h1_fr": "Growth System IA. <i class=\"acc\">Câbler</i> l'IA dans votre delivery.",
  "h1_en": "AI Growth System. <i class=\"acc\">Wire</i> AI into your delivery.",
  "lead_fr": "8 à 12 semaines pour livrer un système opérationnel mesuré. <span>Pas de POC. Pas de slide. Un livrable.</span>",
  "lead_en": "8–12 weeks to ship an operational, measured system. <span>No POC. No slide. A deliverable.</span>",
  "cta": {
    "label_fr": "Réserver un audit →",
    "label_en": "Book an audit →",
    "href": "/contact?offer=growth-system",
    "variant": "primary"
  },
  "meta_fr": "Booking · T3 2026",
  "meta_en": "Booking · Q3 2026"
}

Pour un agent / MCP

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

/library/section/hero-offer-detail.json

Chemin du détail machine

/library/section/hero-offer-detail.json