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
-
src/pages/en/index.astro -
src/pages/index.astro
Aperçu
Comment l'utiliser
| 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éematurity-pyramid--split -
maturity-pyramid · centré
généréematurity-pyramid--centered -
maturity-pyramid · masthead
généréematurity-pyramid--masthead -
maturity-pyramid · entonnoir
généréematurity-pyramid--funnel -
maturity-pyramid · image pleine
généréematurity-pyramid--full-bleed-image -
maturity-pyramid · empilé
généréematurity-pyramid--stacked -
maturity-pyramid · minimal
généréematurity-pyramid--minimal -
maturity-pyramid · avec formulaire
généréematurity-pyramid--with-form -
maturity-pyramid · split inversé
généréematurity-pyramid--split-reverse -
maturity-pyramid · fond vidéo
généréematurity-pyramid--video-bg -
maturity-pyramid · centré étroit
généréematurity-pyramid--centered-narrow -
maturity-pyramid · avec bande de logos
généréematurity-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éematurity-pyramid--splitlayout:splitOuvrir dans le builder -
maturity-pyramid · centré
généréematurity-pyramid--centeredlayout:centeredOuvrir dans le builder -
maturity-pyramid · masthead
généréematurity-pyramid--mastheadlayout:mastheadOuvrir dans le builder -
maturity-pyramid · entonnoir
généréematurity-pyramid--funnellayout:funnelOuvrir dans le builder -
maturity-pyramid · image pleine
généréematurity-pyramid--full-bleed-imagelayout:full-bleed-imageOuvrir dans le builder -
maturity-pyramid · empilé
généréematurity-pyramid--stackedlayout:stackedOuvrir dans le builder -
maturity-pyramid · minimal
généréematurity-pyramid--minimallayout:minimalOuvrir dans le builder -
maturity-pyramid · avec formulaire
généréematurity-pyramid--with-formlayout:with-formOuvrir dans le builder -
maturity-pyramid · split inversé
généréematurity-pyramid--split-reverselayout:split-reverseOuvrir dans le builder -
maturity-pyramid · fond vidéo
généréematurity-pyramid--video-bglayout:video-bgOuvrir dans le builder -
maturity-pyramid · centré étroit
généréematurity-pyramid--centered-narrowlayout:centered-narrowOuvrir dans le builder -
maturity-pyramid · avec bande de logos
généréematurity-pyramid--with-logos-striplayout:with-logos-stripOuvrir 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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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).
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.
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.
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"
}
]
}/library/section/maturity-pyramid.json
Chemin du détail machine
/library/section/maturity-pyramid.json