Waimia.
Réserver un audit →

Hero Header Sections

hero-masthead-card

stable Bibliothèque Contenu inline (instance)

Énoncer la proposition de valeur

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 masthead media kpi
Ouvrir dans le builder

Instances sur le site

Global 29 instances sur 29 pages

Page Position Contenu Variante
/services/agent-support-client section 1 Un agent de support client. paper
/services/agents-ia section 1 Des agents IA qui exécutent vos tâches. Sous votre contrôle. paper
/services/applications-internes section 1 Une application métier sur mesure. paper
/services/automatisation-n8n section 1 Automatisation n8n pour PME. paper
/services/automatisations section 1 Automatisez vos processus métier. Fini la ressaisie entre six outils. paper
/services/cold-email-b2b section 1 Cold email B2B pour PME. paper
/services/consultant-ia-claude section 1 Consultant IA pour PME. paper
/services/crm-scoring-routing section 1 Un CRM avec lead scoring qui ne perd plus un lead. paper
/services/donnees-reporting section 1 Un tableau de bord à jour, sans reporting refait à la main. paper
/services/integration-claude section 1 Intégration Claude en entreprise. paper
/services/integration-crm section 1 Intégration CRM pour PME. paper
/services/landing-page-google-ads section 1 Une landing page Google Ads qui transforme le clic payé en lead. paper
/services/landing-pages-tunnels section 1 Des landing pages qui convertissent, un tunnel qui trie vos leads. paper
/services/maintenance-growth section 1 La maintenance qui fait vivre votre site web. paper
/services/mvp-saas section 1 Développement de MVP SaaS. paper
/services/prospection-automatisee section 1 Prospection automatisée pour PME B2B. paper
/services/publicite-en-ligne section 1 Votre budget publicitaire, dépensé sur les intentions qui rapportent. paper
/services/referencement-ia section 1 Référencement IA et agence GEO pour PME. paper
/services/relance-devis section 1 Relance de devis automatique. paper
/services/seo-geo-contenu section 1 Visible sur Google, cité par les IA : le référencement double couche. paper
/services/seo-local section 1 Référencement local pour PME et artisans. paper
/services/sequences-de-suivi section 1 Le lead nurturing qui réveille vos prospects dormants. paper
/services/site-web-ia section 1 Un site internet qui vend, pas une vitrine qui dort. paper
/services/sur-mesure-headless section 1 Site sur mesure & CMS headless. paper
/services/systeme-acquisition section 1 Générer des leads B2B qualifiés, sans racheter un flux chaque mois. paper
/services/systeme-commercial section 1 Un développement commercial B2B qui ne s'arrête jamais. paper
/services/systemes-operationnels-ia section 1 Automatisez votre entreprise avec l'IA, sans perdre le contrôle. paper
/services/webflow section 1 Votre site Webflow, rendu intelligent. paper
/services/wordpress section 1 Création et refonte de site WordPress. paper

Aperçu

Comment l'utiliser

Intention

Énoncer la proposition de valeur

Rôle de page

Héros

Modèle de contenu

Contenu inline (instance)

Éléments

Illustration au trait Image Boutons Badge Liste

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
layout Présentation text Non · ·
density Présentation enum Non · compact · base · ample
contentAlign Présentation enum Non · start · center · end
actionsAlign Présentation enum Non · start · center · end · spread
placement Présentation object Non · ·
columns Présentation enum Non · 1 · 2 · 3 · 4 · 5 · 6 · auto
colRatio Présentation enum Non · equal · 1-2 · 2-1 · 1-1-2 · 2-3 · golden
itemHeight Présentation enum Non · auto · even · square · video
proportion Présentation enum Non · 1-1 · 1-2 · 2-1 · 2-3 · 3-2
mediaSide Présentation enum Non · left · right
surface Présentation enum Non · flat · outlined · filled · elevated · ghost
divider Présentation enum Non · none · hairline · rule
radius Présentation enum Non · none · sm · md · lg
accentEdge Présentation enum Non · none · top · left
colsMobile Présentation enum Non · 1 · 2 · 3 · 4 · auto
colsTablet Présentation enum Non · 1 · 2 · 3 · 4 · auto
layoutMobile Présentation text Non · ·
titleScale Présentation enum Non · sm · base · lg · xl
eyebrow Présentation enum Non · none · kicker · badge
justifyContent Présentation enum Non · start · center · end · between · around · evenly
alignItems Présentation enum Non · start · center · end · stretch · baseline
justifyItems Présentation enum Non · start · center · end · stretch
alignContent Présentation enum Non · start · center · end · between · stretch
cellAlignX Présentation enum Non · start · center · end
cellAlignY Présentation enum Non · top · middle · bottom · between
cellPad Présentation enum Non · none · sm · base · lg
mediaFit Présentation enum Non · cover · contain
mediaRatio Présentation enum Non · auto · 1-1 · 4-3 · 3-2 · 16-9
reveal Présentation enum Non · none · fade · slide-up · slide-down · slide-left · slide-right · scale-in · blur-in · mask-up
hover Présentation enum Non · none · lift · zoom · glow · border · tint · underline · reveal-cta · media-zoom
pressFeedback Présentation enum Non · none · press
focusRing Présentation enum Non · auto · ring · inset · none
transitionSpeed Présentation enum Non · instant · fast · base · slow
transitionEase Présentation enum Non · standard · out · spring
selectedState Présentation enum Non · none · outline · fill · accent-edge
openState Présentation enum Non · auto
revealStagger Présentation bool Non · ·
revealDelay Présentation enum Non · none · sm · md
loop Présentation enum Non · none · marquee · pulse · float
scrollMotion Présentation enum Non · none · parallax · pin · progress
textMotion Présentation enum Non · none · word-stagger · count-up · type-on
motionSpeed Présentation enum Non · fast · base · slow
motionEase Présentation enum Non · standard · out · spring
pageTransition Présentation enum Non · none · fade · slide
cellBg Présentation enum Non · paper · paper-2 · paper-3 · ink · ink-2 · ink-3 · accent · none
cellTone Présentation enum Non · ink · muted · accent · accent-text · paper
tone Présentation enum Non · ink · muted · accent · accent-text · paper
borderTone Présentation enum Non · hairline · hairline-strong · accent · none
textFlow Présentation enum Non · horizontal · vertical-rl · vertical-lr · sideways
textTransform Présentation enum Non · none · uppercase · lowercase · capitalize
rotate Présentation enum Non · 90 · 180 · none · -90
objectPosition Présentation enum Non · center · top · bottom · left · right
overflow Présentation enum Non · visible · clip · auto
scrollSnap Présentation enum Non · none · proximity · mandatory
measure Présentation enum Non · prose · read · tight · wide · full
balance Présentation bool Non · ·
clamp Présentation enum Non · 1 · 2 · 3 · 4 · none
minHeight Présentation enum Non · auto · half · screen
width Présentation enum Non · full · contained · narrow · prose
headingLevel Présentation enum Non · h2 · h3
ariaLabel Présentation text Non · ·
headerAlign Présentation enum Non · left · center · right
headerKind Présentation enum Non · none · title · eyebrow-title · eyebrow-title-lede · eyebrow-title-lede-cta
introRow Présentation enum Non · none · lede-aside · desc-media-split · lede-centered
dividers Présentation enum Non · none · column-rules · row-rules · grid-lines
cardContent Présentation enum Non · title · title-desc · icon-title-desc · title-desc-meta · media-title-desc
cardMedia Présentation enum Non · none · icon · image · image-bg
cardAlign Présentation enum Non · left · center
colorDistribution Présentation enum Non · uniform · featured-first · one-accent · alternating
bgSource Présentation enum Non · color · image · gradient
bgImage Présentation text Non · ·
kicker Contenu text Non fr / en ·
h1 Contenu text Oui fr / en ·
lede Contenu text Oui fr / en ·
badges Contenu array Non · 0..4
cta_sub Contenu text Non fr / en ·
cta_primary Contenu object Oui · ·
cta_secondary Contenu object Non · ·
media_src Contenu image Oui · ·
media_alt Contenu text Non fr / en ·
kpis Contenu array Non · 0..2

Déclinaisons · 17

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

  • Masthead carte · papier

    curée
    hero-masthead-card--paper

  • Masthead carte · papier 2

    curée
    hero-masthead-card--paper-2

  • Masthead carte · papier 3

    curée
    hero-masthead-card--paper-3

  • Masthead carte · encre

    curée
    hero-masthead-card--ink

  • hero-masthead-card · split

    générée
    hero-masthead-card--split

  • hero-masthead-card · centré

    générée
    hero-masthead-card--centered

  • hero-masthead-card · masthead

    générée
    hero-masthead-card--masthead

  • hero-masthead-card · entonnoir

    générée
    hero-masthead-card--funnel

  • hero-masthead-card · image pleine

    générée
    hero-masthead-card--full-bleed-image

  • hero-masthead-card · empilé

    générée
    hero-masthead-card--stacked

  • hero-masthead-card · minimal

    générée
    hero-masthead-card--minimal

  • hero-masthead-card · avec formulaire

    générée
    hero-masthead-card--with-form

  • hero-masthead-card · split inversé

    générée
    hero-masthead-card--split-reverse

  • hero-masthead-card · fond vidéo

    générée
    hero-masthead-card--video-bg

  • hero-masthead-card · centré étroit

    générée
    hero-masthead-card--centered-narrow

  • hero-masthead-card · avec bande de logos

    générée
    hero-masthead-card--with-logos-strip

Comparer les déclinaisons · 16

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.

  • Masthead carte · papier

    curée
    hero-masthead-card--paper
    background:paper
    Ouvrir dans le builder

  • Masthead carte · papier 2

    curée
    hero-masthead-card--paper-2
    background:paper-2
    Ouvrir dans le builder

  • Masthead carte · papier 3

    curée
    hero-masthead-card--paper-3
    background:paper-3
    Ouvrir dans le builder

  • Masthead carte · encre

    curée
    hero-masthead-card--ink
    background:ink
    Ouvrir dans le builder

  • hero-masthead-card · split

    générée
    hero-masthead-card--split
    layout:split
    Ouvrir dans le builder

  • hero-masthead-card · centré

    générée
    hero-masthead-card--centered
    layout:centered
    Ouvrir dans le builder

  • hero-masthead-card · masthead

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

  • hero-masthead-card · entonnoir

    générée
    hero-masthead-card--funnel
    layout:funnel
    Ouvrir dans le builder

  • hero-masthead-card · image pleine

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

  • hero-masthead-card · empilé

    générée
    hero-masthead-card--stacked
    layout:stacked
    Ouvrir dans le builder

  • hero-masthead-card · minimal

    générée
    hero-masthead-card--minimal
    layout:minimal
    Ouvrir dans le builder

  • hero-masthead-card · avec formulaire

    générée
    hero-masthead-card--with-form
    layout:with-form
    Ouvrir dans le builder

  • hero-masthead-card · split inversé

    générée
    hero-masthead-card--split-reverse
    layout:split-reverse
    Ouvrir dans le builder

  • hero-masthead-card · fond vidéo

    générée
    hero-masthead-card--video-bg
    layout:video-bg
    Ouvrir dans le builder

  • hero-masthead-card · centré étroit

    générée
    hero-masthead-card--centered-narrow
    layout:centered-narrow
    Ouvrir dans le builder

  • hero-masthead-card · avec bande de logos

    générée
    hero-masthead-card--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-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-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-split-media stable

Héro plein écran en deux colonnes : texte (kicker, titre serif, lede, badges pills, 2 CTA) à gauche, carte média line-art à droite. Variante paper et ink, responsive (1 colonne sur mobile).

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

Héro plein écran éditorial asymétrique (~65/35) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail léger à droite avec 3 KPI serif verticaux séparés par hairlines. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +4 14 décl.
hero-tech-signature stable

Héro plein écran asymétrique (~68/32) à signature dominante (trame éditoriale + sigil) : colonne principale (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec 2 grands numéraux serif. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +4 14 décl.
hero-scope-minimap stable

Héro plein écran asymétrique (~60/40) : colonne dominante (kicker, titre serif accent, lede, 2 CTA, sous-CTA), rail droit avec une mini-map de 6 capacités en 2 colonnes (label mono accent + items), hairlines. Montre le périmètre, pas un média. Variante paper et ink, responsive.

hero Hero Header Sections Illustration au traitBoutonsListe +3 14 décl.

Code

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

{
  "type": "hero-masthead-card",
  "kicker_fr": "§ 01 · Service",
  "kicker_en": "§ 01 · Service",
  "h1_fr": "L'IA <i class=\"acc\">intégrée</i> à vos<br />opérations, <i>sans friction</i>.",
  "h1_en": "AI <i class=\"acc\">woven into</i> your<br />operations, <i>frictionless</i>.",
  "lede_fr": "On installe Claude Code dans vos outils, vos données et vos flux. Vos équipes gardent la main, <i>l'IA fait le reste</i>.",
  "lede_en": "We embed Claude Code into your tools, your data and your flows. Your teams stay in control, <i>AI handles the rest</i>.",
  "badges": [
    {
      "label_fr": "Claude Code",
      "label_en": "Claude Code"
    },
    {
      "label_fr": "MCP",
      "label_en": "MCP"
    },
    {
      "label_fr": "RAG",
      "label_en": "RAG"
    },
    {
      "label_fr": "Automations",
      "label_en": "Automations"
    }
  ],
  "cta_sub_fr": "Réponse sous 48 h. <i>Sans engagement.</i>",
  "cta_sub_en": "Reply within 48 h. <i>No commitment.</i>",
  "cta_primary": {
    "label_fr": "Démarrer un diagnostic",
    "label_en": "Start a diagnostic",
    "href": "/contact",
    "variant": "primary"
  },
  "cta_secondary": {
    "label_fr": "Voir la méthode",
    "label_en": "See the method",
    "href": "#methode",
    "variant": "ghost"
  },
  "media_src": "/images/line-art/dispositif-flow.svg",
  "media_alt_fr": "Schéma du dispositif d'intégration",
  "media_alt_en": "Diagram of the integration setup",
  "kpis": [
    {
      "num": "5 j",
      "cap_fr": "premier flux en prod",
      "cap_en": "first flow in production"
    },
    {
      "num": "100 %",
      "cap_fr": "données chez vous",
      "cap_en": "data stays with you"
    }
  ]
}

Pour un agent / MCP

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

/library/section/hero-masthead-card.json

Chemin du détail machine

/library/section/hero-masthead-card.json