Waimia.

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

Rôle de page

Modèle de contenu

Interactions

Éléments

Mise en page

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 · 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ée
    pain-severity-list--ink
  • Liste sévérité · list · papier

    curée
    pain-severity-list--paper
  • Liste sévérité · list · papier 2

    curée
    pain-severity-list--paper-2
  • Liste sévérité · rows à filets

    curée
    pain-severity-list--rows-divided
  • Liste sévérité · deux colonnes

    curée
    pain-severity-list--two-col
  • Liste sévérité · deux colonnes · papier

    curée
    pain-severity-list--two-col-paper
  • Liste sévérité · grille adaptative

    curée
    pain-severity-list--grid-auto
  • Liste sévérité · grille 3 colonnes

    curée
    pain-severity-list--grid-3
  • Liste sévérité · list · compact

    curée
    pain-severity-list--list-compact
  • Liste sévérité · list · ample

    curée
    pain-severity-list--list-ample
  • Liste sévérité · titre centré + grille

    curée
    pain-severity-list--atomic-head-center
  • pain-severity-list · prose

    générée
    pain-severity-list--prose
  • pain-severity-list · liste

    générée
    pain-severity-list--list
  • pain-severity-list · chapeau + aparté

    générée
    pain-severity-list--lead-aside
  • pain-severity-list · lettrine

    générée
    pain-severity-list--drop-cap
  • pain-severity-list · citation détachée

    générée
    pain-severity-list--pull-quote
  • pain-severity-list · énoncé centré

    générée
    pain-severity-list--centered-statement
  • pain-severity-list · note de marge

    générée
    pain-severity-list--sidenote
  • pain-severity-list · prose numérotée

    générée
    pain-severity-list--numbered-prose
  • pain-severity-list · chapeau 2 colonnes

    générée
    pain-severity-list--two-col-lead
  • pain-severity-list · grand énoncé

    générée
    pain-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ée
    pain-severity-list--ink

    Identique à la démo par défaut (aucun axe surchargé).

    Ouvrir dans le builder
  • Liste sévérité · list · papier

    curée
    pain-severity-list--paper
    background:paper
    Ouvrir dans le builder
  • Liste sévérité · list · papier 2

    curée
    pain-severity-list--paper-2
    background:paper-2
    Ouvrir dans le builder
  • Liste sévérité · rows à filets

    curée
    pain-severity-list--rows-divided
    layout:rows-divided
    Ouvrir dans le builder
  • Liste sévérité · deux colonnes

    curée
    pain-severity-list--two-col
    layout:two-col
    Ouvrir dans le builder
  • Liste sévérité · deux colonnes · papier

    curée
    pain-severity-list--two-col-paper
    layout:two-colbackground:paper
    Ouvrir dans le builder
  • Liste sévérité · grille adaptative

    curée
    pain-severity-list--grid-auto
    layout:gridcolumns:auto
    Ouvrir dans le builder
  • Liste sévérité · grille 3 colonnes

    curée
    pain-severity-list--grid-3
    layout:gridcolumns:3
    Ouvrir dans le builder
  • Liste sévérité · list · compact

    curée
    pain-severity-list--list-compact
    density:compact
    Ouvrir dans le builder
  • Liste sévérité · list · ample

    curée
    pain-severity-list--list-ample
    density:ample
    Ouvrir dans le builder
  • Liste sévérité · titre centré + grille

    curée
    pain-severity-list--atomic-head-center
    layout:gridcolumns:2placement
    Ouvrir dans le builder
  • pain-severity-list · prose

    générée
    pain-severity-list--prose
    layout:prose
    Ouvrir dans le builder
  • pain-severity-list · liste

    générée
    pain-severity-list--list
    layout:list
    Ouvrir dans le builder
  • pain-severity-list · chapeau + aparté

    générée
    pain-severity-list--lead-aside
    layout:lead-aside
    Ouvrir dans le builder
  • pain-severity-list · lettrine

    générée
    pain-severity-list--drop-cap
    layout:drop-cap
    Ouvrir dans le builder
  • pain-severity-list · citation détachée

    générée
    pain-severity-list--pull-quote
    layout:pull-quote
    Ouvrir dans le builder
  • pain-severity-list · énoncé centré

    générée
    pain-severity-list--centered-statement
    layout:centered-statement
    Ouvrir dans le builder
  • pain-severity-list · note de marge

    générée
    pain-severity-list--sidenote
    layout:sidenote
    Ouvrir dans le builder
  • pain-severity-list · prose numérotée

    générée
    pain-severity-list--numbered-prose
    layout:numbered-prose
    Ouvrir dans le builder
  • pain-severity-list · chapeau 2 colonnes

    générée
    pain-severity-list--two-col-lead
    layout:two-col-lead
    Ouvrir dans le builder
  • pain-severity-list · grand énoncé

    générée
    pain-severity-list--statement-big
    layout:statement-big
    Ouvrir 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.

prose Team Sections 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.

prose Editorial Sections 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é.

prose Editorial Sections 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.

prose Editorial Sections 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.

prose Editorial Sections 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.

prose Editorial Sections 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.

split-media Feature Sections 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.

bento Feature Sections 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.

card-grid Feature Sections 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.

list Feature Sections 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.

card-grid Feature Sections 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.

list Feature Sections 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.

prose Editorial Sections 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.

prose Editorial Sections 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.

table Comparison Sections 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.

list Editorial Sections 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).

process-steps Feature Sections 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.

prose Table Sections 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."
    }
  ]
}

Pour un agent / MCP

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

/library/section/pain-severity-list.json

Chemin du détail machine

/library/section/pain-severity-list.json