Hero Header Sections
hero-split-media
stable Bibliothèque Contenu inline (instance)Énoncer la proposition de valeur
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).
Instances sur le site
Global 21 instances sur 21 pages
| Page | Position | Contenu | Variante |
|---|---|---|---|
| /audit-ia-pme | section 1 | Audit IA gratuit pour PME. | paper |
| /audit-site-web-intelligent | section 1 | Audit gratuit de votre site web. | paper |
| /cas-usages/centraliser-donnees | section 1 | Centraliser ses données. | paper |
| /cas-usages/generer-plus-de-leads | section 1 | Générer plus de leads. | paper |
| /cas-usages/reduire-reporting | section 1 | Réduire le temps de reporting. | paper |
| /cas-usages/reduire-temps-cms | section 1 | Réduire le temps passé sur le CMS. | paper |
| /cas-usages/standardiser-processus | section 1 | Standardiser ses processus. | paper |
| /demonstrations/avant-apres | section 1 | Site d'agence classique vs Site Web Intelligent. | paper |
| /demonstrations/integration-claude | section 1 | Une intégration Claude, avant/après. | paper |
| /demonstrations/site-web-intelligent | section 1 | Un site qui se fait trouver. | paper |
| /implantations/bordeaux | section 1 | Agence IA à Bordeaux. | paper |
| /implantations/montpellier | section 1 | Votre studio IA à Montpellier. | paper |
| /ressources/comparatifs/claude-code-vs-cursor | section 1 | Claude Code vs Cursor. | paper |
| /ressources/comparatifs/claude-vs-chatgpt-pme | section 1 | Claude vs ChatGPT pour une PME. | paper |
| /ressources/comparatifs/geo-vs-seo | section 1 | GEO vs SEO. | paper |
| /ressources/comparatifs/site-web-intelligent-vs-wordpress | section 1 | Site Web Intelligent vs WordPress. | paper |
| /ressources/diagnostics/claude-pme | section 1 | Votre PME est-elle prête à déployer Claude ? | paper |
| /ressources/diagnostics/maturite-ia | section 1 | Diagnostic de maturité IA. | paper |
| /ressources/diagnostics/referent-ia | section 1 | Diagnostic référent IA. | paper |
| /ressources/diagnostics/site-web-intelligent | section 1 | Diagnostic du site intelligent. | paper |
| /ressources/guides/claude-pme | section 1 | Déployer Claude dans votre PME. | paper |
Aperçu
Comment l'utiliser
| 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 | · |
subtitle | Contenu | text | Non | fr / en | · |
definition_kicker | Contenu | text | Non | fr / en | · |
lede | Contenu | text | Oui | fr / en | · |
badges | Contenu | array | Non | · | 0..4 |
cta_primary | Contenu | object | Oui | · | · |
cta_secondary | Contenu | object | Non | · | · |
media_src | Contenu | image | Non | · | · |
media_alt | Contenu | text | Non | fr / en | · |
illustration | Contenu | object | Non | · | · |
Déclinaisons · 14
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 1 curée, 13 générées. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.
-
Hero split média · encre
curéehero-split-media--ink -
hero-split-media · split
généréehero-split-media--split -
hero-split-media · centré
généréehero-split-media--centered -
hero-split-media · masthead
généréehero-split-media--masthead -
hero-split-media · entonnoir
généréehero-split-media--funnel -
hero-split-media · image pleine
généréehero-split-media--full-bleed-image -
hero-split-media · empilé
généréehero-split-media--stacked -
hero-split-media · minimal
généréehero-split-media--minimal -
hero-split-media · avec formulaire
généréehero-split-media--with-form -
hero-split-media · split inversé
généréehero-split-media--split-reverse -
hero-split-media · fond vidéo
généréehero-split-media--video-bg -
hero-split-media · centré étroit
généréehero-split-media--centered-narrow -
hero-split-media · avec bande de logos
généréehero-split-media--with-logos-strip
Comparer les déclinaisons · 13
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 split média · encre
curéehero-split-media--inkbackground:inkOuvrir dans le builder -
hero-split-media · split
généréehero-split-media--splitlayout:splitOuvrir dans le builder -
hero-split-media · centré
généréehero-split-media--centeredlayout:centeredOuvrir dans le builder -
hero-split-media · masthead
généréehero-split-media--mastheadlayout:mastheadOuvrir dans le builder -
hero-split-media · entonnoir
généréehero-split-media--funnellayout:funnelOuvrir dans le builder -
hero-split-media · image pleine
généréehero-split-media--full-bleed-imagelayout:full-bleed-imageOuvrir dans le builder -
hero-split-media · empilé
généréehero-split-media--stackedlayout:stackedOuvrir dans le builder -
hero-split-media · minimal
généréehero-split-media--minimallayout:minimalOuvrir dans le builder -
hero-split-media · avec formulaire
généréehero-split-media--with-formlayout:with-formOuvrir dans le builder -
hero-split-media · split inversé
généréehero-split-media--split-reverselayout:split-reverseOuvrir dans le builder -
hero-split-media · fond vidéo
généréehero-split-media--video-bglayout:video-bgOuvrir dans le builder -
hero-split-media · centré étroit
généréehero-split-media--centered-narrowlayout:centered-narrowOuvrir dans le builder -
hero-split-media · avec bande de logos
généréehero-split-media--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-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.
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.
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).
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.
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.
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.
Illustration au traitBoutonsListe +3 14 décl.Code
Données de la section (à placer dans sections[])
{
"type": "hero-split-media",
"kicker_fr": "§ Site web intelligent",
"kicker_en": "§ Intelligent website",
"h1_fr": "Un site web <i class=\"acc\">intelligent</i> pour PME.",
"h1_en": "An intelligent <i class=\"acc\">website</i> for SMEs.",
"subtitle_fr": "Waimia conçoit des sites web connectés au CRM, au contenu, aux données et aux parcours de conversion pour générer plus de leads qualifiés.",
"subtitle_en": "Waimia builds websites wired to your CRM, content, data and conversion journeys to generate more qualified leads.",
"definition_kicker_fr": "Qu'est-ce qu'un site web intelligent ?",
"definition_kicker_en": "What is an intelligent website?",
"lede_fr": "Un site web intelligent est une application web pilotée par l'IA (Claude, GPT), branchée à votre Search Console et à votre Analytics. Elle lit ses propres KPI, optimise son SEO et son contenu en continu, et qualifie chaque visiteur via un quiz de routing relié au CRM. À la différence d'une vitrine statique, il mesure son acquisition de bout en bout et alimente votre stack sans saisie manuelle.",
"lede_en": "An intelligent website is a web application driven by AI (Claude, GPT), wired to your Search Console and your Analytics. It reads its own KPIs, optimises its SEO and content continuously, and qualifies every visitor through a routing quiz connected to the CRM. Unlike a static brochure, it measures its acquisition end to end and feeds your stack without manual entry.",
"badges": [
{
"label_fr": "Connectée à l'IA (Claude, GPT)",
"label_en": "Connected to AI (Claude, GPT)"
},
{
"label_fr": "Branchée à vos données",
"label_en": "Wired to your data"
},
{
"label_fr": "Alertes temps réel",
"label_en": "Real-time alerts"
},
{
"label_fr": "Quiz qui route vers ce qui convertit",
"label_en": "A quiz that routes to what converts"
}
],
"cta_primary": {
"label_fr": "Réserver un diagnostic (45 min) →",
"label_en": "Book a diagnostic (45 min) →",
"href": "#",
"variant": "primary"
},
"cta_secondary": {
"label_fr": "Voir la méthode",
"label_en": "See the method",
"href": "#",
"variant": "ghost"
},
"media_src": "/images/line-art/dispositif-flow.svg",
"media_alt_fr": "Schéma du dispositif : outils dispersés reliés par un nœud d'orchestration IA vers un résultat mesuré.",
"media_alt_en": "Diagram of the setup: scattered tools linked by an AI orchestration node toward a measured outcome."
}/library/section/hero-split-media.json
Chemin du détail machine
/library/section/hero-split-media.json