Feature Sections
services-grid
stable Sur waimia · 2 Contenu inline (instance)Présenter les capacités
Grille éditoriale de services 3×2 avec figure, métrique, body et ligne de connecteurs en pied de cellule.
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 |
fig_num | Contenu | text | Oui | · | · |
fig_title | Contenu | text | Oui | fr / en | · |
spec | Contenu | text | Oui | fr / en | · |
h2 | Contenu | text | Oui | fr / en | · |
connectors_label | Contenu | text | Non | fr / en | · |
services | Contenu | array | Oui | · | 3..6 |
foot_links | Contenu | array | Non | · | 0..3 |
illustration | Contenu | object | Non | · | · |
Déclinaisons · 17
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 3 curées, 14 générées. Échantillon des 12 premières générées (sur 14) ; toutes accessibles en rendu isolé.
-
Grille de services · papier 2
curéeservices-grid--paper-2 -
Grille de services · papier 3
curéeservices-grid--paper-3 -
Grille de services · encre
curéeservices-grid--ink -
services-grid · grille uniforme
généréeservices-grid--grid-uniform -
services-grid · grille auto
généréeservices-grid--grid-auto -
services-grid · grille asymétrique
généréeservices-grid--grid-asym -
services-grid · liste
généréeservices-grid--list -
services-grid · lignes séparées
généréeservices-grid--rows-divided -
services-grid · bento vedette
généréeservices-grid--bento-feature -
services-grid · vedette + split
généréeservices-grid--featured-split -
services-grid · deux colonnes
généréeservices-grid--two-col -
services-grid · alternance
généréeservices-grid--alternating -
services-grid · jeu de cartes
généréeservices-grid--cards-deck -
services-grid · liste média à gauche
généréeservices-grid--list-media-left -
services-grid · grille 3 + vedette
généréeservices-grid--grid-3-featured
Comparer les déclinaisons · 15
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.
-
Grille de services · papier 2
curéeservices-grid--paper-2background:paper-2Ouvrir dans le builder -
Grille de services · papier 3
curéeservices-grid--paper-3background:paper-3Ouvrir dans le builder -
Grille de services · encre
curéeservices-grid--inkbackground:inkOuvrir dans le builder -
services-grid · grille uniforme
généréeservices-grid--grid-uniformlayout:grid-uniformOuvrir dans le builder -
services-grid · grille auto
généréeservices-grid--grid-autolayout:grid-autoOuvrir dans le builder -
services-grid · grille asymétrique
généréeservices-grid--grid-asymlayout:grid-asymOuvrir dans le builder -
services-grid · liste
généréeservices-grid--listlayout:listOuvrir dans le builder -
services-grid · lignes séparées
généréeservices-grid--rows-dividedlayout:rows-dividedOuvrir dans le builder -
services-grid · bento vedette
généréeservices-grid--bento-featurelayout:bento-featureOuvrir dans le builder -
services-grid · vedette + split
généréeservices-grid--featured-splitlayout:featured-splitOuvrir dans le builder -
services-grid · deux colonnes
généréeservices-grid--two-collayout:two-colOuvrir dans le builder -
services-grid · alternance
généréeservices-grid--alternatinglayout:alternatingOuvrir dans le builder -
services-grid · jeu de cartes
généréeservices-grid--cards-decklayout:cards-deckOuvrir dans le builder -
services-grid · liste média à gauche
généréeservices-grid--list-media-leftlayout:list-media-leftOuvrir dans le builder -
services-grid · grille 3 + vedette
généréeservices-grid--grid-3-featuredlayout:grid-3-featuredOuvrir dans le builder
Sections liées
Même famille
article-grid stable Grille de cartes d’articles/blog : image optionnelle, tag, titre, date, temps de lecture, extrait, auteur et lien, en 2 ou 3 colonnes. Le classique éditorial B2B.
SurvolImageIcônes +3 18 décl.case-card-grid stable Table éditoriale de cas clients en six colonnes (index, client, secteur, stack, impact, flèche) façon compte rendu d'audit.
Apparition au scrollSurvolDéfilement +3 31 décl.case-featured-grid stable Grille de cas clients « featured » : un cas mis en avant (colonne large, cover optionnelle) plus des cas secondaires en lignes numérotées, avec chip de provenance.
Apparition au scrollSurvolDéfilement +6 17 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.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.deliverables-grid stable Grille de livrables tangibles avec cards numérotées et tag format/durée, extraite des pages offre et détail.
Apparition au scrollSurvolDéfilement +4 29 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
related-cards-band stable Bande de trois cards connexes pour relier cas, offres ou ressources en fin de page.
Apparition au scrollSurvolDéfilement +2 17 décl.offer-tier-grid stable Section de palier d’offres avec eyebrow, H2, lede, grille de cartes et variante hero sombre optionnelle.
Apparition au scrollSurvolDéfilement +4 21 décl.pain-points stable Points de friction métier : en-tête eyebrow et titre display, aside Callout, frise Timeline numérotée des frictions.
Apparition au scrollDéfilementIllustration au trait +5 17 décl.editorial-split-grid stable Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.
Apparition au scrollSurvolDéfilement +4 17 décl.editorial-preview stable Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.
Apparition au scrollSurvolDéfilement +3 17 décl.feature-comparison-grid stable Différenciation légère « nous vs eux » en grille de cartes : 2 ou 3 colonnes, lignes cochées ou barrées, colonne mise en avant. Plus léger que la table comparative.
ListeCartes3 colonnes 18 décl.Code
Données de la section (à placer dans sections[])
{
"type": "services-grid",
"fig_num": "FIG II · 2.0",
"fig_title_fr": "Acte II · La méthode",
"fig_title_en": "Act II · The method",
"spec_fr": "6 SERVICES · UNE COUCHE CONTINUE",
"spec_en": "6 SERVICES · ONE CONTINUOUS LAYER",
"h2_fr": "Six services, appris en <i>livrant</i>, pas en PowerPoint.",
"h2_en": "Six services, taught by <i>doing</i>, not by slides.",
"connectors_label_fr": "Connecteurs",
"connectors_label_en": "Connectors",
"services": [
{
"fig": "2.01",
"metric_fr": "45 min",
"metric_en": "45 min",
"label_fr": "Diagnostic 45 min",
"label_en": "45-min diagnostic",
"body_fr": "On identifie le levier métier avant la techno.",
"body_en": "We identify the business lever before the technology.",
"connectors_fr": "Audit · Cartographie · Stack mapping",
"connectors_en": "Audit · Cartography · Stack mapping"
},
{
"fig": "2.02",
"metric_fr": "+840 K€ pipe",
"metric_en": "+€840K pipe",
"label_fr": "Système d'acquisition",
"label_en": "Acquisition system",
"body_fr": "Pipeline reconnecté, qualification automatisée.",
"body_en": "Pipeline reconnected, qualification automated.",
"connectors_fr": "Google Ads · Meta · LinkedIn · GA4 · Landing",
"connectors_en": "Google Ads · Meta · LinkedIn · GA4 · Landing"
},
{
"fig": "2.03",
"metric_fr": "−35% manuel",
"metric_en": "−35% manual",
"label_fr": "CRM augmenté",
"label_en": "Augmented CRM",
"body_fr": "Le CRM qui relance, qualifie et alerte, sans que vous touchiez rien.",
"body_en": "The CRM that follows up, qualifies and alerts, without you touching it.",
"connectors_fr": "HubSpot · Salesforce · Pipedrive · Outlook",
"connectors_en": "HubSpot · Salesforce · Pipedrive · Outlook"
},
{
"fig": "2.04",
"metric_fr": "Décide en 2 min",
"metric_en": "2 min decision",
"label_fr": "Lisibilité des données",
"label_en": "Data clarity",
"body_fr": "Tableaux de bord temps réel : décidez en 2 minutes, pas en réunion.",
"body_en": "Real-time dashboards: decide in 2 minutes, not a meeting.",
"connectors_fr": "GA4 · Search Console · SEO tools · Dashboards",
"connectors_en": "GA4 · Search Console · SEO tools · Dashboards"
},
{
"fig": "2.05",
"metric_fr": "+12h / sem",
"metric_en": "+12h / week",
"label_fr": "Tâches répétitives éliminées",
"label_en": "Repetitive tasks removed",
"body_fr": "Workflows qui tournent sans vous.",
"body_en": "Workflows that run without you.",
"connectors_fr": "Workflows · Agents IA · Excel · Office",
"connectors_en": "Workflows · AI agents · Excel · Office"
},
{
"fig": "2.06",
"metric_fr": "Souverain",
"metric_en": "Sovereign",
"label_fr": "Sur-mesure ETI",
"label_en": "Enterprise custom build",
"body_fr": "Architecture souveraine, quand les outils du marché butent sur votre périmètre.",
"body_en": "Sovereign architecture, when the market stack hits your perimeter limits.",
"connectors_fr": "Trust Center · Design System · Governance · VirtuoseOS",
"connectors_en": "Trust Center · Design System · Governance · VirtuoseOS"
}
],
"illustration": {
"src": "services-layer.svg",
"alt_fr": "Six services reliés par une même couche continue : une dorsale traverse et connecte chaque service.",
"alt_en": "Six services linked by one continuous layer: a backbone runs through and connects each service.",
"caption_fr": "La couche continue qui relie les six services",
"caption_en": "The continuous layer connecting the six services"
}
}/library/section/services-grid.json
Chemin du détail machine
/library/section/services-grid.json