Waimia.
Réserver un audit →

Feature Sections

feature-zigzag

stable Bibliothèque Contenu inline (instance)

Présenter les capacités, Expliquer une méthode

Lignes alternées visuel/texte (gauche-droite, droite-gauche) pour presenter les fonctionnalites cles d'une offre avec un rythme editorial fort.

feature zigzag alternating rows
Ouvrir dans le builder

Instances sur le site

Global 33 instances sur 30 pages

Page Position Contenu Variante
/audit-site-web-intelligent section 3 Les quatre angles qu'on passe en revue paper
/cas-usages/centraliser-donnees section 2 Là où la donnée se perd paper-2
/cas-usages/centraliser-donnees section 3 Connecter, pas tout remplacer paper
/cas-usages/generer-plus-de-leads section 2 Là où les leads fuient paper-2
/cas-usages/generer-plus-de-leads section 3 Une chaîne de conversion sans fuite paper
/cas-usages/reduire-reporting section 2 Là où le reporting coûte paper-2
/cas-usages/reduire-temps-cms section 2 Là où le temps part paper-2
/cas-usages/standardiser-processus section 2 Là où le savoir-faire se fragilise paper-2
/demonstrations/avant-apres section 3 Là où l'écart se creuse paper
/demonstrations/integration-claude section 3 Le même process, deux mondes paper
/demonstrations/site-web-intelligent section 3 Quatre choses qu'un site classique ne fait pas paper
/implantations/bordeaux section 3 Deux leviers, un seul partenaire paper
/implantations/montpellier section 3 Ce que change un partenaire à Montpellier paper
/ressources/comparatifs/claude-code-vs-cursor section 4 Quatre lignes de fracture paper-2
/ressources/comparatifs/claude-vs-chatgpt-pme section 4 Ce que chacun fait vraiment bien paper-2
/ressources/comparatifs/geo-vs-seo section 4 Trois bascules entre trouver et citer paper-2
/ressources/comparatifs/site-web-intelligent-vs-wordpress section 4 Là où le Site Web Intelligent creuse l'écart paper-2
/ressources/diagnostics/claude-pme section 5 Ce qui détermine votre préparation paper-2
/ressources/diagnostics/maturite-ia section 6 Ce qui détermine votre niveau réel paper-2
/ressources/diagnostics/referent-ia section 5 Ce que fait concrètement un référent paper-2
/ressources/guides/claude-pme section 4 Là où Claude paie le plus vite paper-2
/ressources/guides/claude-pme section 7 Les 6 prérequis à poser avant le premier compte paper-2
/services/agent-support-client section 14 L'agent de support continue de rendre du temps après son déploiement paper-2
/services/automatisation-n8n section 14 n8n par défaut, Zapier quand il suffit paper-2
/services/cold-email-b2b section 12 Les campagnes continuent de s'affiner après le lancement paper-2
/services/crm-scoring-routing section 11 Le CRM continue de s'affiner après le branchement paper-2
/services/integration-crm section 11 Le CRM reste propre après le branchement paper-2
/services/prospection-automatisee section 12 La séquence continue de s'affiner après le lancement paper-2
/services/relance-devis section 11 La relance continue de s'affiner après le lancement paper-2
/services/sequences-de-suivi section 11 Les séquences continuent de s'affiner après le lancement paper-2
/services/systeme-acquisition section 10 Comment l'acquisition alimente le système commercial paper-2
/services/systeme-commercial section 11 Le système commercial continue d'apprendre après le lancement paper-2
/services/systemes-operationnels-ia section 5 Comment les modules se nourrissent paper-2

Aperçu

Comment l'utiliser

Intention

Présenter les capacités Expliquer une méthode

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Effets

Apparition au scroll

Interactions

Défilement

Éléments

Illustration au trait Image Liste

Mise en page

2 colonnes Média à gauche 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
alternate_blocks Présentation bool Non · ·
layout Présentation enum Non · alternate · stacked · inline-left · inline-right
proportion Présentation enum Non · 1-1 · 1-2 · 2-1 · 2-3 · 3-2
mediaSide Présentation enum Non · left · right
density Présentation enum Non · compact · base · ample
contentAlign Présentation enum Non · start · center · end
placement Présentation object Non · ·
kicker Contenu text Non fr / en ·
h2 Contenu text Oui fr / en ·
lede Contenu text Non fr / en ·
rows Contenu array Oui · 2..6

Déclinaisons · 25

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

  • Zigzag features · papier

    curée
    feature-zigzag--paper

  • Zigzag features · papier 2

    curée
    feature-zigzag--paper-2

  • Zigzag features · encre

    curée
    feature-zigzag--ink

  • Zigzag features · papier · damier paper/encre

    curée
    feature-zigzag--paper-damier

  • Zigzag features · papier 2 · damier paper/encre

    curée
    feature-zigzag--paper-2-damier

  • Zigzag · alterné · média à droite au départ

    curée
    feature-zigzag--alternate-media-right

  • Zigzag · média gauche fixe · texte dominant 2/3

    curée
    feature-zigzag--inline-left-2-3

  • Zigzag · média droite fixe · média dominant 3/2

    curée
    feature-zigzag--inline-right-3-2

  • Zigzag · empilé · média au-dessus · ample

    curée
    feature-zigzag--stacked-ample

  • Zigzag · alterné · texte dominant 1/2 · compact

    curée
    feature-zigzag--alternate-1-2-compact

  • Zigzag · en-tête centré

    curée
    feature-zigzag--center-header

  • Zigzag · atomique · liens centrés

    curée
    feature-zigzag--atomic-actions-center

  • feature-zigzag · équilibré

    générée
    feature-zigzag--1-1

  • feature-zigzag · média dominant · média à gauche

    générée
    feature-zigzag--1-2-left

  • feature-zigzag · média dominant · média à droite

    générée
    feature-zigzag--1-2-right

  • feature-zigzag · texte dominant · média à gauche

    générée
    feature-zigzag--2-1-left

  • feature-zigzag · texte dominant · média à droite

    générée
    feature-zigzag--2-1-right

  • feature-zigzag · média large · média à gauche

    générée
    feature-zigzag--2-3-left

  • feature-zigzag · média large · média à droite

    générée
    feature-zigzag--2-3-right

  • feature-zigzag · texte large · média à gauche

    générée
    feature-zigzag--3-2-left

  • feature-zigzag · texte large · média à droite

    générée
    feature-zigzag--3-2-right

  • feature-zigzag · média très large · média à gauche

    générée
    feature-zigzag--1-3-left

  • feature-zigzag · média très large · média à droite

    générée
    feature-zigzag--1-3-right

  • feature-zigzag · texte très large · média à gauche

    générée
    feature-zigzag--3-1-left

Comparer les déclinaisons · 24

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.

  • Zigzag features · papier

    curée
    feature-zigzag--paper
    background:paper
    Ouvrir dans le builder

  • Zigzag features · papier 2

    curée
    feature-zigzag--paper-2
    background:paper-2
    Ouvrir dans le builder

  • Zigzag features · encre

    curée
    feature-zigzag--ink
    background:ink
    Ouvrir dans le builder

  • Zigzag features · papier · damier paper/encre

    curée
    feature-zigzag--paper-damier
    background:paper
    Ouvrir dans le builder

  • Zigzag features · papier 2 · damier paper/encre

    curée
    feature-zigzag--paper-2-damier
    background:paper-2
    Ouvrir dans le builder

  • Zigzag · alterné · média à droite au départ

    curée
    feature-zigzag--alternate-media-right
    layout:alternatemediaSide:rightalternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · média gauche fixe · texte dominant 2/3

    curée
    feature-zigzag--inline-left-2-3
    layout:inline-leftproportion:2-3alternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · média droite fixe · média dominant 3/2

    curée
    feature-zigzag--inline-right-3-2
    layout:inline-rightproportion:3-2alternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · empilé · média au-dessus · ample

    curée
    feature-zigzag--stacked-ample
    layout:stackeddensity:amplealternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · alterné · texte dominant 1/2 · compact

    curée
    feature-zigzag--alternate-1-2-compact
    layout:alternateproportion:1-2density:compactalternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · en-tête centré

    curée
    feature-zigzag--center-header
    contentAlign:centeralternate_blocks:false
    Ouvrir dans le builder

  • Zigzag · atomique · liens centrés

    curée
    feature-zigzag--atomic-actions-center
    alternate_blocks:falseplacement
    Ouvrir dans le builder

  • feature-zigzag · équilibré

    générée
    feature-zigzag--1-1
    proportion:1-1
    Ouvrir dans le builder

  • feature-zigzag · média dominant · média à gauche

    générée
    feature-zigzag--1-2-left
    proportion:1-2mediaSide:left
    Ouvrir dans le builder

  • feature-zigzag · média dominant · média à droite

    générée
    feature-zigzag--1-2-right
    proportion:1-2mediaSide:right
    Ouvrir dans le builder

  • feature-zigzag · texte dominant · média à gauche

    générée
    feature-zigzag--2-1-left
    proportion:2-1mediaSide:left
    Ouvrir dans le builder

  • feature-zigzag · texte dominant · média à droite

    générée
    feature-zigzag--2-1-right
    proportion:2-1mediaSide:right
    Ouvrir dans le builder

  • feature-zigzag · média large · média à gauche

    générée
    feature-zigzag--2-3-left
    proportion:2-3mediaSide:left
    Ouvrir dans le builder

  • feature-zigzag · média large · média à droite

    générée
    feature-zigzag--2-3-right
    proportion:2-3mediaSide:right
    Ouvrir dans le builder

  • feature-zigzag · texte large · média à gauche

    générée
    feature-zigzag--3-2-left
    proportion:3-2mediaSide:left
    Ouvrir dans le builder

  • feature-zigzag · texte large · média à droite

    générée
    feature-zigzag--3-2-right
    proportion:3-2mediaSide:right
    Ouvrir dans le builder

  • feature-zigzag · média très large · média à gauche

    générée
    feature-zigzag--1-3-left
    proportion:1-3mediaSide:left
    Ouvrir dans le builder

  • feature-zigzag · média très large · média à droite

    générée
    feature-zigzag--1-3-right
    proportion:1-3mediaSide:right
    Ouvrir dans le builder

  • feature-zigzag · texte très large · média à gauche

    générée
    feature-zigzag--3-1-left
    proportion:3-1mediaSide:left
    Ouvrir dans le builder

Sections liées

Même famille

about-story-split stable

Récit fondateur en deux colonnes : texte narratif de mission à gauche, timeline de jalons datés à droite. Raconte l’histoire de la marque sans verbiage.

split-media About Sections Illustration au traitListeFrise chronologique +3 17 décl.
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.
asymmetric-services stable

Services en rangées asymétriques (AsymmetricServiceRow) qui alternent gauche/droite : numéro display, nom, body et flèche, signature de /manifesto Acte II.

split-media Manifesto Sections Apparition au scrollDéfilement1 colonne 15 décl.
case-split stable

Cas client en split dark/light 50/50 : récit du cas à gauche (titre, body, CTA) et résultats chiffrés à droite.

split-media Testimonial Sections Apparition au scrollSurvolDéfilement +4 13 décl.
cta-split-visual stable

Bandeau CTA asymetrique 2 colonnes : texte kicker/titre/body/boutons a gauche, visuel SVG decoratif a droite. Distinct des CTA centres.

split-media CTA Sections Apparition au scrollDéfilementIllustration au trait +4 17 décl.
feature-split-media stable

Une feature majeure exposée en deux colonnes : texte et points clés d’un côté, mockup ou capture de l’autre. Le champ reversed permet d’alterner les côtés au fil de la page.

split-media Feature Sections Apparition au scrollDéfilementImage +6 25 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

stack-cards stable

Cartes numerotees qui se superposent en s'empilant au scroll (effet stack sticky, CSS pur). Ideal pour une methode en plusieurs temps.

scroll-interactive Feature Sections Cartes empiléesApparition au scrollDéfilement +6 16 décl.
tech-positioning-split stable

Prise de position technologique en split 50/50 : kicker, titre display, aside, statement manifesto et facts mono clé/valeur.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +2 15 décl.
icon-trio stable

Trois colonnes iconographiques avec titre et description, séparées par des hairlines verticaux. Idéal pour présenter 3 piliers ou bénéfices distincts.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.
editorial-split-grid stable

Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 17 décl.
feature-grid stable

Grille de fonctionnalités pour structurer les bénéfices ou capacités principales d'une offre.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 22 décl.
problems-grid stable

Grille de problèmes/frictions auto-fit (3 cards min) : num + kicker + h3 + body, séparateurs hairline 1px.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.

Code

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

{
  "type": "feature-zigzag",
  "kicker_fr": "Fonctionnalités · aperçu",
  "kicker_en": "Features · overview",
  "h2_fr": "Trois <i>dimensions</i> du système Waimia",
  "h2_en": "Three <i>dimensions</i> of the Waimia system",
  "lede_fr": "Chaque couche du système est conçue pour fonctionner seule ou en composition avec les autres.",
  "lede_en": "Each layer of the system is designed to work alone or in composition with the others.",
  "alternate_blocks": true,
  "rows": [
    {
      "kicker_fr": "Diagnostic",
      "kicker_en": "Diagnostic",
      "h3_fr": "Audit complet en 5 jours",
      "h3_en": "Full audit in 5 days",
      "body_fr": "On cartographie vos flux, vos outils et vos angles morts. Le résultat : un plan d'action priorisé avec des gains rapides et des chantiers structurants.",
      "body_en": "We map your flows, tools, and blind spots. The result: a prioritised action plan with quick wins and structural projects.",
      "link_label_fr": "Voir le processus",
      "link_label_en": "See the process",
      "link_href": "/services",
      "points": [
        {
          "label_fr": "Cartographie des flux et des outils",
          "label_en": "Flow and tooling mapping"
        },
        {
          "label_fr": "Identification des angles morts",
          "label_en": "Blind-spot identification"
        },
        {
          "label_fr": "Plan d'action priorisé",
          "label_en": "Prioritised action plan"
        }
      ],
      "media_src": "/images/line-art/livrable-tableau-mesure.svg",
      "media_alt_fr": "Schema line-art : tableau de mesure",
      "media_alt_en": "Line-art diagram: measurement dashboard"
    },
    {
      "kicker_fr": "Execution",
      "kicker_en": "Execution",
      "h3_fr": "Workflows IA câblés et transférés",
      "h3_en": "AI workflows built and handed over",
      "body_fr": "On conçoit, déploie et documente chaque workflow avec votre équipe. Pas de boîte noire : tout reste lisible, modifiable, extensible.",
      "body_en": "We design, deploy, and document every workflow with your team. No black box: everything stays readable, editable, extensible.",
      "link_label_fr": "Explorer les cas clients",
      "link_label_en": "Explore client cases",
      "link_href": "/cas-clients",
      "points": [
        {
          "label_fr": "Conception et déploiement",
          "label_en": "Design and deployment"
        },
        {
          "label_fr": "Documentation lisible et modifiable",
          "label_en": "Readable, editable documentation"
        }
      ],
      "media_src": "/images/illustrations/ds/chess-ink.webp",
      "media_alt_fr": "Illustration : pièces d'échecs",
      "media_alt_en": "Illustration: chess pieces"
    },
    {
      "kicker_fr": "Transfert",
      "kicker_en": "Transfer",
      "h3_fr": "Montée en compétences de votre équipe",
      "h3_en": "Building your team capabilities",
      "body_fr": "Formations courtes, guides opérationnels, revues hebdomadaires. Votre équipe gagne en autonomie à chaque itération.",
      "body_en": "Short training sessions, operational guides, weekly reviews. Your team gains autonomy with every iteration.",
      "link_label_fr": "Decouvrir la formation",
      "link_label_en": "Discover the training",
      "link_href": "/formations",
      "media_src": "/images/illustrations/ds/men-on-hand-paper.webp",
      "media_alt_fr": "Illustration : transmission de savoir",
      "media_alt_en": "Illustration: knowledge handover"
    },
    {
      "kicker_fr": "Mesure",
      "kicker_en": "Measure",
      "h3_fr": "Pilotage en temps réel, sans relance",
      "h3_en": "Real-time steering, without chasing",
      "body_fr": "Tableaux de bord vivants et alertes automatiques. Vous voyez ce qui marche, ce qui décroche et où agir, sans attendre la réunion mensuelle.",
      "body_en": "Live dashboards and automatic alerts. You see what works, what slips, and where to act, without waiting for the monthly meeting.",
      "link_label_fr": "Voir un tableau de bord",
      "link_label_en": "See a dashboard",
      "link_href": "/services",
      "points": [
        {
          "label_fr": "Tableaux de bord temps réel",
          "label_en": "Real-time dashboards"
        },
        {
          "label_fr": "Alertes automatiques sur dérive",
          "label_en": "Automatic drift alerts"
        }
      ],
      "media_src": "/images/line-art/dispositif-flow.svg",
      "media_alt_fr": "Schema line-art : flux de pilotage",
      "media_alt_en": "Line-art diagram: steering flow"
    }
  ]
}

Pour un agent / MCP

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

/library/section/feature-zigzag.json

Chemin du détail machine

/library/section/feature-zigzag.json