Feature Sections
pain-severity-list
stable Bibliothèque Contenu inline (instance)Expliquer un concept
Liste éditoriale de pain-points sur fond ink, classés par sévérité : chaque item porte un label severity vertical (mono) et un glyphe (◆▲●○), un titre serif, une description, et une ligne mono « → correctif ». Séparateurs hairline, reveal-stagger.
Instances sur le site
Global 31 instances sur 31 pages
| Page | Position | Contenu | Variante |
|---|---|---|---|
| /lp/systeme-acquisition | section 3 | Pourquoi vos prospects vous échappent | ink |
| /lp/systeme-ia-marketing | section 3 | Pourquoi votre équipe passe sa semaine à déplacer de l'information. | ink |
| /lp/visibilite-google-ia | section 3 | Pourquoi vous n'êtes ni classé, ni cité. | ink |
| /services/agent-support-client | section 5 | Le support qu'un agent soulage. | ink |
| /services/agents-ia | section 5 | Pourquoi le répétitif vous coûte cher | ink |
| /services/applications-internes | section 4 | Pourquoi vos outils maison vous freinent | ink |
| /services/automatisation-n8n | section 5 | Le moment où on passe à n8n. | ink |
| /services/automatisations | section 5 | Pourquoi vos équipes perdent leurs journées | ink |
| /services/cold-email-b2b | section 5 | Pourquoi vos mails finissent en spam | ink |
| /services/consultant-ia-claude | section 4 | Là où une décision IA se grippe. | ink |
| /services/crm-scoring-routing | section 4 | Pourquoi votre CRM sans scoring laisse filer des ventes | ink |
| /services/donnees-reporting | section 5 | Pourquoi vous décidez sans y voir clair | ink |
| /services/integration-claude | section 4 | Pourquoi votre IA ne produit rien | ink |
| /services/integration-crm | section 4 | Pourquoi votre CRM non branché reste un cimetière | ink |
| /services/landing-page-google-ads | section 4 | Pourquoi votre trafic payant ne convertit pas | ink |
| /services/landing-pages-tunnels | section 4 | Pourquoi votre trafic ne devient pas du business | ink |
| /services/maintenance-growth | section 4 | Là où un site meurt après la livraison. | ink |
| /services/mvp-saas | section 4 | Le lancement qu'un MVP corrige. | ink |
| /services/prospection-automatisee | section 5 | Pourquoi votre prospection outbound ne remplit pas le pipeline | ink |
| /services/publicite-en-ligne | section 4 | Pourquoi votre budget pub ne devient pas du business | ink |
| /services/referencement-ia | section 4 | Pourquoi les IA ne vous citent pas | ink |
| /services/relance-devis | section 4 | Pourquoi vos devis restent sans réponse | ink |
| /services/seo-geo-contenu | section 4 | Pourquoi votre contenu ne rapporte rien | ink |
| /services/seo-local | section 4 | Pourquoi vos clients de proximité ne vous trouvent pas | ink |
| /services/sequences-de-suivi | section 4 | Pourquoi vos leads chauds refroidissent faute de nurturing | ink |
| /services/site-web-ia | section 4 | Votre site est joli, et il ne vend rien ? | ink |
| /services/sur-mesure-headless | section 4 | Quand le clé-en-main ne suffit plus. | ink |
| /services/systeme-acquisition | section 4 | Pourquoi vos prospects vous échappent | ink |
| /services/systeme-commercial | section 4 | Vos mois creux en rendez-vous ont une cause | ink |
| /services/webflow | section 4 | Là où Webflow seul plafonne. | ink |
| /services/wordpress | section 4 | Le WordPress qu'on refond. | ink |
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 | · | 2 · 3 · 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 | · |
h2 | Contenu | text | Oui | fr / en | · |
items | Contenu | array | Oui | · | 2..6 |
Déclinaisons · 21
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 11 curées, 10 générées.
-
Liste sévérité · list · encre
curéepain-severity-list--ink -
Liste sévérité · list · papier
curéepain-severity-list--paper -
Liste sévérité · list · papier 2
curéepain-severity-list--paper-2 -
Liste sévérité · rows à filets
curéepain-severity-list--rows-divided -
Liste sévérité · deux colonnes
curéepain-severity-list--two-col -
Liste sévérité · deux colonnes · papier
curéepain-severity-list--two-col-paper -
Liste sévérité · grille adaptative
curéepain-severity-list--grid-auto -
Liste sévérité · grille 3 colonnes
curéepain-severity-list--grid-3 -
Liste sévérité · list · compact
curéepain-severity-list--list-compact -
Liste sévérité · list · ample
curéepain-severity-list--list-ample -
Liste sévérité · titre centré + grille
curéepain-severity-list--atomic-head-center -
pain-severity-list · prose
généréepain-severity-list--prose -
pain-severity-list · liste
généréepain-severity-list--list -
pain-severity-list · chapeau + aparté
généréepain-severity-list--lead-aside -
pain-severity-list · lettrine
généréepain-severity-list--drop-cap -
pain-severity-list · citation détachée
généréepain-severity-list--pull-quote -
pain-severity-list · énoncé centré
généréepain-severity-list--centered-statement -
pain-severity-list · note de marge
généréepain-severity-list--sidenote -
pain-severity-list · prose numérotée
généréepain-severity-list--numbered-prose -
pain-severity-list · chapeau 2 colonnes
généréepain-severity-list--two-col-lead -
pain-severity-list · grand énoncé
généréepain-severity-list--statement-big
Comparer les déclinaisons · 21
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.
-
Liste sévérité · list · encre
curéepain-severity-list--inkOuvrir dans le builder -
Liste sévérité · list · papier
curéepain-severity-list--paperbackground:paperOuvrir dans le builder -
Liste sévérité · list · papier 2
curéepain-severity-list--paper-2background:paper-2Ouvrir dans le builder -
Liste sévérité · rows à filets
curéepain-severity-list--rows-dividedlayout:rows-dividedOuvrir dans le builder -
Liste sévérité · deux colonnes
curéepain-severity-list--two-collayout:two-colOuvrir dans le builder -
Liste sévérité · deux colonnes · papier
curéepain-severity-list--two-col-paperlayout:two-colbackground:paperOuvrir dans le builder -
Liste sévérité · grille adaptative
curéepain-severity-list--grid-autolayout:gridcolumns:autoOuvrir dans le builder -
Liste sévérité · grille 3 colonnes
curéepain-severity-list--grid-3layout:gridcolumns:3Ouvrir dans le builder -
Liste sévérité · list · compact
curéepain-severity-list--list-compactdensity:compactOuvrir dans le builder -
Liste sévérité · list · ample
curéepain-severity-list--list-ampledensity:ampleOuvrir dans le builder -
Liste sévérité · titre centré + grille
curéepain-severity-list--atomic-head-centerlayout:gridcolumns:2placementOuvrir dans le builder -
pain-severity-list · prose
généréepain-severity-list--proselayout:proseOuvrir dans le builder -
pain-severity-list · liste
généréepain-severity-list--listlayout:listOuvrir dans le builder -
pain-severity-list · chapeau + aparté
généréepain-severity-list--lead-asidelayout:lead-asideOuvrir dans le builder -
pain-severity-list · lettrine
généréepain-severity-list--drop-caplayout:drop-capOuvrir dans le builder -
pain-severity-list · citation détachée
généréepain-severity-list--pull-quotelayout:pull-quoteOuvrir dans le builder -
pain-severity-list · énoncé centré
généréepain-severity-list--centered-statementlayout:centered-statementOuvrir dans le builder -
pain-severity-list · note de marge
généréepain-severity-list--sidenotelayout:sidenoteOuvrir dans le builder -
pain-severity-list · prose numérotée
généréepain-severity-list--numbered-proselayout:numbered-proseOuvrir dans le builder -
pain-severity-list · chapeau 2 colonnes
généréepain-severity-list--two-col-leadlayout:two-col-leadOuvrir dans le builder -
pain-severity-list · grand énoncé
généréepain-severity-list--statement-biglayout:statement-bigOuvrir dans le builder
Sections liées
Même famille
author-byline stable Ligne auteur compacte E-E-A-T sous un h1 d'article : avatar optionnel, nom, rôle, dates de publication et mise à jour, lien vers la page profil. Beaucoup plus léger qu'un hero auteur.
Apparition au scrollDéfilementImage +2 15 décl.definition-extract stable Bloc GEO « format extractible » : kicker mono, gros statement serif avec le terme défini en accent, rangée de pills, puis un bandeau de specs mono. Sobre, fond paper, pensé pour la citation par les moteurs génératifs.
Apparition au scrollDéfilementBadge +3 21 décl.direct-answer stable Bloc GEO « réponse directe » en tête de page : reformule une question implicite, définit éventuellement une entité, puis délivre une réponse directe de 2 à 4 phrases en colonne de lecture. Sobre, éditorial, fond alterné.
Badge1 colonne 15 décl.editorial-callout stable Encadré éditorial composant l'atome Callout (info, citation, note, avertissement, manifeste) : hairline accent, citation source optionnelle, tailles et alignements. Pour ponctuer une prose.
Citation1 colonne 20 décl.editorial-dingbat-rule stable Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.
Centré 19 décl.editorial-dropcap-prose stable Ouverture d'article éditoriale composant l'atome DropCap : initiale magnifiée (serif, mono ou accent) sur un paragraphe d'accroche, suivie de paragraphes de prose. Pour entrer dans un long-form.
1 colonne 16 décl.Même catégorie
architecture-diagram stable Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.
Apparition au scrollDéfilementIllustration au trait +1 23 décl.bento-grid stable Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.
IcônesCartesListe +1 26 décl.challenges-grid stable Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.
SurvolIllustration au traitIcônes +4 16 décl.coming-soon-pills stable Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.
ListeBadge1 colonne 16 décl.commitments-grid stable Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.
Zoom au survolApparition au scrollSurvol +8 17 décl.decision-list stable Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.
Apparition au scrollDéfilementListe +1 17 décl.Similaires
rich-text stable Section de corps riche : un corps Markdown bilingue rendu en HTML au build avec les styles prose du design system. Edition de corps editorial in-context sans backend (le Markdown vit dans le document de page, versionne avec le code). Titres, listes, liens, gras/italique ; mesure de ligne bornee ; variante ink lisible.
Apparition au scrollSurvolListe +1 15 décl.editorial-prose stable Wrapper de prose éditoriale tokenisé : colonne de lecture (largeur prose ou wide), fond alterné, héberge un contenu long via slot (corps MDX). Préserve la typographie du DS sans réécrire le texte.
1 colonne 16 décl.department-stack stable Stack outils en table éditoriale : en-tête eyebrow et titre display, aside Callout, EditorialTable catégorie/outil/rôle.
Apparition au scrollDéfilementTableau +3 13 décl.numbered-layer-list stable Liste de couches numerotees : rang serif accent + titre + intro + sous-puces « → ». Ideale pour presenter une stack, des livrables ou des rangs par couche.
Apparition au scrollDéfilementListe +2 18 décl.system-flow stable Rangée horizontale de cartes d'étapes sur fond ink, reliées par des flèches accent, qui raconte le flux du système (site → lead → scoring → CRM → apprentissage). En-tête « Fig. N » + méta mono, grand titre serif avec dernier mot en accent, lede courte, puis une ligne « ↺ boucle d'amélioration continue ». Reveal-stagger, responsive (scroll horizontal / colonne empilée en mobile).
Apparition au scrollDéfilementIllustration au trait +3 16 décl.editorial-write-feed stable Feed éditorial en lignes cliquables (EditorialWriteRow) : date, tag, texte et flèche par ligne, tone paper ou ink, lien meta type /feed.xml.
Apparition au scrollDéfilement1 colonne 14 décl.Code
Données de la section (à placer dans sections[])
{
"type": "pain-severity-list",
"background": "ink",
"kicker_fr": "Pain points · par sévérité",
"kicker_en": "Pain points · by severity",
"h2_fr": "Là où le site <i class=\"acc\">fuit</i>.",
"h2_en": "Where the site <i class=\"acc\">leaks</i>.",
"items": [
{
"severity": "critical",
"title_fr": "Aucune présence à convertir",
"title_en": "No presence to convert",
"desc_fr": "Vous existez en ligne, mais rien n'amène le visiteur vers une conversation commerciale.",
"desc_en": "You exist online, but nothing leads the visitor toward a sales conversation.",
"fix_fr": "Tunnel repensé, orienté preuve.",
"fix_en": "Redesigned funnel, proof-first."
},
{
"severity": "high",
"title_fr": "Une vitrine qui ne capte rien",
"title_en": "A brochure that captures nothing",
"desc_fr": "De jolies pages, mais aucun mécanisme de capture : ni quiz, ni scoring, ni routage.",
"desc_en": "Nice pages, but no capture mechanism : no quiz, no scoring, no routing.",
"fix_fr": "Capture + scoring + routage CRM.",
"fix_en": "Capture + scoring + CRM routing."
},
{
"severity": "medium",
"title_fr": "Un site qui ne lit pas ses données",
"title_en": "A site that doesn't read its data",
"desc_fr": "Aucune lecture du comportement : vous ne savez ni qui vient, ni pourquoi il repart.",
"desc_en": "No behavioural reading : you know neither who comes nor why they leave.",
"fix_fr": "Tracking first-party + reporting.",
"fix_en": "First-party tracking + reporting."
},
{
"severity": "medium",
"title_fr": "Des contenus qui ne ressortent jamais",
"title_en": "Content that never surfaces",
"desc_fr": "Vos pages existent mais restent invisibles : ni les moteurs classiques ni les moteurs génératifs ne les citent.",
"desc_en": "Your pages exist but stay invisible : neither classic engines nor generative engines cite them.",
"fix_fr": "Structure SEO + GEO, données structurées.",
"fix_en": "SEO + GEO structure, structured data."
},
{
"severity": "low",
"title_fr": "Une stack qui se grippe au moindre ajout",
"title_en": "A stack that seizes on every change",
"desc_fr": "Chaque évolution coûte cher et casse autre chose : le site freine vos opérations au lieu de les servir.",
"desc_en": "Every change is costly and breaks something else : the site slows your operations instead of serving them.",
"fix_fr": "Socle composable, déploiements sûrs.",
"fix_en": "Composable foundation, safe deploys."
}
]
}/library/section/pain-severity-list.json
Chemin du détail machine
/library/section/pain-severity-list.json