Waimia.

Timelines

maturity-pyramid

stable Sur waimia · 2 Contenu inline (instance)

Expliquer une méthode

Pyramide de maturité à quatre paliers avec timeline d'étapes, SVG progressif et grille de cartes asymétriques.

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

  • src/pages/en/index.astro
  • src/pages/index.astro

Aperçu

Comment l'utiliser

Rôle de page

Modèle de contenu

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3 · ink
variant Présentation enum Non · full · cards-only
roman Contenu text Oui · ·
label Contenu text Oui fr / en ·
heading Contenu text Oui fr / en ·
aside Contenu text Non fr / en ·
timeline_label Contenu text Non fr / en ·
tier_cta Contenu text Non fr / en ·
steps Contenu array Non · ·
tiers Contenu array Oui · ·

Déclinaisons · 13

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

  • maturity-pyramid · split

    générée
    maturity-pyramid--split
  • maturity-pyramid · centré

    générée
    maturity-pyramid--centered
  • maturity-pyramid · masthead

    générée
    maturity-pyramid--masthead
  • maturity-pyramid · entonnoir

    générée
    maturity-pyramid--funnel
  • maturity-pyramid · image pleine

    générée
    maturity-pyramid--full-bleed-image
  • maturity-pyramid · empilé

    générée
    maturity-pyramid--stacked
  • maturity-pyramid · minimal

    générée
    maturity-pyramid--minimal
  • maturity-pyramid · avec formulaire

    générée
    maturity-pyramid--with-form
  • maturity-pyramid · split inversé

    générée
    maturity-pyramid--split-reverse
  • maturity-pyramid · fond vidéo

    générée
    maturity-pyramid--video-bg
  • maturity-pyramid · centré étroit

    générée
    maturity-pyramid--centered-narrow
  • maturity-pyramid · avec bande de logos

    générée
    maturity-pyramid--with-logos-strip

Comparer les déclinaisons · 12

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.

  • maturity-pyramid · split

    générée
    maturity-pyramid--split
    layout:split
    Ouvrir dans le builder
  • maturity-pyramid · centré

    générée
    maturity-pyramid--centered
    layout:centered
    Ouvrir dans le builder
  • maturity-pyramid · masthead

    générée
    maturity-pyramid--masthead
    layout:masthead
    Ouvrir dans le builder
  • maturity-pyramid · entonnoir

    générée
    maturity-pyramid--funnel
    layout:funnel
    Ouvrir dans le builder
  • maturity-pyramid · image pleine

    générée
    maturity-pyramid--full-bleed-image
    layout:full-bleed-image
    Ouvrir dans le builder
  • maturity-pyramid · empilé

    générée
    maturity-pyramid--stacked
    layout:stacked
    Ouvrir dans le builder
  • maturity-pyramid · minimal

    générée
    maturity-pyramid--minimal
    layout:minimal
    Ouvrir dans le builder
  • maturity-pyramid · avec formulaire

    générée
    maturity-pyramid--with-form
    layout:with-form
    Ouvrir dans le builder
  • maturity-pyramid · split inversé

    générée
    maturity-pyramid--split-reverse
    layout:split-reverse
    Ouvrir dans le builder
  • maturity-pyramid · fond vidéo

    générée
    maturity-pyramid--video-bg
    layout:video-bg
    Ouvrir dans le builder
  • maturity-pyramid · centré étroit

    générée
    maturity-pyramid--centered-narrow
    layout:centered-narrow
    Ouvrir dans le builder
  • maturity-pyramid · avec bande de logos

    générée
    maturity-pyramid--with-logos-strip
    layout:with-logos-strip
    Ouvrir dans le builder

Sections liées

Même famille

tier-pyramid-svg stable

Pyramide SVG isocèle à trois niveaux pour visualiser la progression Découverte · Transformation · Partenariat.

pyramid Hero Header Sections Apparition au scrollDéfilement1 colonne 13 décl.

Même catégorie

curriculum-timeline stable

Bloc curriculum : entete + frise verticale (experience / formation / distinctions) sur fond paper-2. Compose l’atome Timeline.

list Timelines Apparition au scrollFrise chronologique1 colonne 15 décl.
editorial-timeline stable

Frise chronologique éditoriale composant l'atome Timeline : axe gauche, points, numéros, dates, titres et descriptions, vertical ou horizontal. Pour une méthode ou un parcours en N phases.

timeline Timelines Frise chronologique1 colonne 17 décl.
how-we-ship stable

Section "comment on livre", sticky pin scrub : N étapes avec numline et stage cards animées au scroll (graceful degradation mobile).

timeline Timelines Cartes empiléesDéfilementIllustration au trait +3 10 décl.
method-stepline stable

Timeline de méthode horizontale sur fond clair : ligne hairline traversée de nœuds accent, chaque nœud surmonté d'un numéro mono, d'un titre serif et d'un sous-label mono. En-tête kicker à gauche, durée à droite. Reveal-stagger, empilage en colonne en mobile.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.
method-timeline stable

Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +2 19 décl.
steps-horizontal stable

Etapes numerotees en ligne avec pastilles et connecteurs hairline. Passage vertical sous 760px.

timeline Timelines Liste4 colonnes 12 décl.

Similaires

tech-integration-flow stable

Position dans la stack en frise verticale numérotée (Timeline + Dingbat), un nœud par étape d intégration.

timeline Timelines Apparition au scrollDéfilementFrise chronologique +3 8 décl.
timeline-horizontal stable

Frise chronologique horizontale datée (roadmap) : événements à statut (done/active/upcoming), date, label et body, scroll-snap horizontal, empilement vertical sur mobile.

timeline Timelines Défilement horizontalGlisser pour faire défilerIllustration au trait +4 12 décl.
timeline-block stable

Bloc chronologique pour raconter une progression, un historique ou une séquence d'événements.

timeline Timelines ListeFrise chronologique2 colonnes +2 12 décl.
method-diagram-list stable

Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).

process-steps Process Sections Apparition au scrollIllustration au traitListe +1 10 décl.
diagnostic-stages stable

Auto-diagnostic « Où en êtes-vous ? » : 4 à 6 stades de maturité en cards horizontales cliquables, le stade courant relevé en accent (« vous êtes ici »). Situe le visiteur et l’oriente vers l’étape suivante (conversion + qualification). Déclinaison optionnelle `quizCta` : bande CTA (carte ink illustration + bouton) sous la piste, qui pousse au quiz d’auto-positionnement.

process-steps Process Sections Apparition au scrollDéfilementIcônes +2 19 décl.
journey-steps stable

Parcours en 3 temps : icône cercle avec badge numéro, titre, description et pill highlight par étape, connecteur accent entre étapes. Horizontal desktop, vertical mobile. Idéal funnel ou onboarding.

process-steps Process Sections Illustration au traitListeIcônes +3 14 décl.

Code

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

{
  "type": "maturity-pyramid",
  "roman": "II",
  "label_fr": "Acte II · La pyramide d'engagements",
  "label_en": "Act II · The engagement pyramid",
  "heading_fr": "<i>Cartographier.</i> Câbler.<br/>Orchestrer. <i>Industrialiser.</i>",
  "heading_en": "<i>Map.</i> Wire.<br/>Orchestrate. <i>Industrialize.</i>",
  "aside_fr": "Du diagnostic process à l'infrastructure souveraine, chaque palier prépare le suivant. Vous montez quand vous êtes prêt.",
  "aside_en": "From process diagnostic to sovereign infrastructure, each tier sets up the next. You climb when you're ready.",
  "timeline_label_fr": "Progression de maturité IA",
  "timeline_label_en": "AI maturity path",
  "tier_cta_fr": "Voir le palier →",
  "tier_cta_en": "Open tier →",
  "steps": [
    {
      "roman": "I",
      "verb_fr": "Cartographier",
      "verb_en": "Map",
      "stage_fr": "Audit",
      "stage_en": "Audit"
    },
    {
      "roman": "II",
      "verb_fr": "Câbler",
      "verb_en": "Wire",
      "stage_fr": "Workflow",
      "stage_en": "Workflow"
    },
    {
      "roman": "III",
      "verb_fr": "Orchestrer",
      "verb_en": "Orchestrate",
      "stage_fr": "Système",
      "stage_en": "System"
    },
    {
      "roman": "IV",
      "verb_fr": "Industrialiser",
      "verb_en": "Industrialize",
      "stage_fr": "Infrastructure",
      "stage_en": "Infrastructure"
    }
  ],
  "tiers": [
    {
      "n": "I",
      "tag_fr": "ACTIVATION",
      "tag_en": "ACTIVATION",
      "label_fr": "Activation rapide",
      "label_en": "Fast activation",
      "lead_fr": "Une semaine pour identifier le levier, former l'équipe et livrer un premier workflow en production.",
      "lead_en": "One week to identify the lever, train the team, and ship the first workflow in production.",
      "items_fr": [
        "Audit process · 5j",
        "Formation équipe · 1 sem",
        "Gain rapide Excel"
      ],
      "items_en": [
        "Process audit · 5d",
        "Team training · 1 wk",
        "Quick Excel win"
      ],
      "action_fr": "Cartographier",
      "action_en": "Map",
      "href": "/services"
    },
    {
      "n": "II",
      "tag_fr": "PRODUCTIVITÉ",
      "tag_en": "PRODUCTIVITY",
      "label_fr": "Productivité opérationnelle",
      "label_en": "Operational productivity",
      "lead_fr": "Supprimer les tâches récurrentes et fluidifier les workflows internes.",
      "lead_en": "Remove recurring tasks and make internal workflows run without daily chasing.",
      "items_fr": [
        "Workflows métiers",
        "Tâches répétitives",
        "Support client"
      ],
      "items_en": [
        "Business workflows",
        "Repetitive tasks",
        "Customer support"
      ],
      "action_fr": "Câbler",
      "action_en": "Wire",
      "href": "/services"
    },
    {
      "n": "III",
      "tag_fr": "ACQUISITION",
      "tag_en": "GROWTH",
      "label_fr": "Acquisition & pilotage",
      "label_en": "Acquisition & intelligence",
      "lead_fr": "Connecter site, CRM, relances, contenu et pilotage dans un même système.",
      "lead_en": "Connect site, CRM, follow-ups, content, and business visibility into one growth system.",
      "items_fr": [
        "Système d'acquisition",
        "Pipeline commercial",
        "Tableaux de pilotage",
        "Contenu SEO/GEO"
      ],
      "items_en": [
        "Acquisition system",
        "Sales pipeline",
        "Decision dashboards",
        "SEO/GEO content"
      ],
      "action_fr": "Orchestrer",
      "action_en": "Orchestrate",
      "href": "/services"
    },
    {
      "n": "IV",
      "tag_fr": "ETI",
      "tag_en": "ENTERPRISE",
      "label_fr": "Infrastructure ETI",
      "label_en": "Enterprise infrastructure",
      "lead_fr": "Systèmes connectés pour équipes élargies, gouvernance stricte et opérations multi-sites.",
      "lead_en": "Connected systems for larger teams, stricter governance, and multi-site operations.",
      "items_fr": [
        "Architecture connectée",
        "Sécurité & gouvernance",
        "Multi-équipes & multi-sites"
      ],
      "items_en": [
        "Connected architecture",
        "Security & governance",
        "Multi-team & multi-site"
      ],
      "action_fr": "Industrialiser",
      "action_en": "Industrialize",
      "href": "/services"
    }
  ]
}

Pour un agent / MCP

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

/library/section/maturity-pyramid.json

Chemin du détail machine

/library/section/maturity-pyramid.json