Waimia.

Feature Sections

offer-rail

stable Sur waimia · 1 Contenu inline (instance)

Présenter les capacités, Énoncer la proposition de valeur

Offres en onglets (familles) : diptyque ou trio de cartes relie a une rangee de services par une dorsale line-art dessinee au scroll. Une branche peut etre teintee (token --complementary). Vanilla JS aria, 0 dependance.

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

  • src/pages/index.astro

Aperçu

Comment l'utiliser

Contrat de slots

Champ Nature Type Requis Bilingue Bornes / valeurs
background Présentation enum Non · paper · paper-2 · paper-3
kicker Contenu text Oui fr / en ·
h2 Contenu text Oui fr / en ·
lede Contenu text Oui fr / en ·
tablist_label Contenu text Oui fr / en ·
families Contenu array Oui · 1..6

Déclinaisons · 7

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.

  • offer-rail · onglets horizontaux

    générée
    offer-rail--horizontal-tabs
  • offer-rail · onglets verticaux

    générée
    offer-rail--vertical-tabs
  • offer-rail · segmenté

    générée
    offer-rail--segmented
  • offer-rail · pilules

    générée
    offer-rail--pills
  • offer-rail · onglets soulignés

    générée
    offer-rail--underline-tabs
  • offer-rail · onglets encadrés

    générée
    offer-rail--boxed-tabs
  • offer-rail · rail vertical

    générée
    offer-rail--vertical-rail

Comparer les déclinaisons · 7

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.

Sections liées

Même famille

feature-tabs stable

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

tabs Feature Sections Défilement horizontalSurvolClic (bascule) +9 7 décl.
pricing-tabs-showcase stable

Showcase de formules avec onglets, cartes illustrées, listes de livrables et bande sur mesure.

tabs Pricing Sections revealtabsSurvol +7 11 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

editorial-preview stable

Index éditorial de publications en lignes numérotées (num · date · tag · titre italique · flèche), extrait de FieldNotes.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +3 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.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 29 décl.
use-case-index stable

Index éditorial de cas d'usage en lignes numérotées avec libellé italique, tag mono et lien d'ancrage solution.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +2 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.
offer-tier-grid stable

Section de palier d’offres avec eyebrow, H2, lede, grille de cartes et variante hero sombre optionnelle.

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

Grille éditoriale de services 3×2 avec figure, métrique, body et ligne de connecteurs en pied de cellule.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +2 17 décl.

Code

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

{
  "type": "offer-rail",
  "background": "paper",
  "kicker_fr": "§ Nos offres",
  "kicker_en": "§ Our offers",
  "h2_fr": "On <i>conçoit le système</i>, pas juste l’outil.",
  "h2_en": "We <i>design the system</i>, not just the tool.",
  "lede_fr": "Des offres cohérentes, reliées entre elles : chaque brique alimente la suivante plutôt que de vivre en silo.",
  "lede_en": "Coherent offers, wired together: each block feeds the next instead of living in a silo.",
  "tablist_label_fr": "Familles d’offres",
  "tablist_label_en": "Offer families",
  "families": [
    {
      "id": "famille-a",
      "tab_label_fr": "Famille A",
      "tab_label_en": "Family A",
      "intro_eyebrow_fr": "§ Famille A · pour vos équipes",
      "intro_eyebrow_en": "§ Family A · for your teams",
      "intro_lede_fr": "Deux briques d’un même système, à activer ensemble ou séparément.",
      "intro_lede_en": "Two blocks of one system, activated together or apart.",
      "layout": "diptych",
      "offers": [
        {
          "tag_fr": "Offre 01",
          "tag_en": "Offer 01",
          "title_fr": "Première offre",
          "title_en": "First offer",
          "body_fr": "La brique d’entrée du système : elle capte, qualifie et alimente le reste en continu.",
          "body_en": "The system’s entry block: it captures, qualifies and feeds the rest continuously.",
          "points_fr": [
            "Un premier bénéfice concret",
            "Un deuxième bénéfice mesurable",
            "Un troisième, relié à vos outils"
          ],
          "points_en": [
            "A first concrete benefit",
            "A second measurable benefit",
            "A third, wired to your tools"
          ],
          "link_label_fr": "Voir l’offre →",
          "link_label_en": "See the offer →",
          "link_href": "#"
        },
        {
          "tag_fr": "Offre 02",
          "tag_en": "Offer 02",
          "title_fr": "Deuxième offre",
          "title_en": "Second offer",
          "body_fr": "La brique complémentaire, teintée pour la distinguer : elle prolonge la première jusqu’à l’action.",
          "body_en": "The complementary block, tinted to stand apart: it extends the first through to action.",
          "accent": "complement",
          "points_fr": [
            "Un bénéfice propre à cette branche",
            "Un deuxième, orienté production",
            "Un troisième, mesuré"
          ],
          "points_en": [
            "A benefit specific to this branch",
            "A second, production-oriented",
            "A third, measured"
          ],
          "link_label_fr": "Voir l’offre →",
          "link_label_en": "See the offer →",
          "link_href": "#"
        }
      ],
      "rail": true,
      "services_intro_fr": "§ Six services, une seule équipe. On active celui qui sert d’abord.",
      "services_intro_en": "§ Six services, one team. We turn on the one that serves first.",
      "services": [
        {
          "metric_fr": "Service 1",
          "metric_en": "Service 1",
          "label_fr": "Libellé du service 1",
          "label_en": "Service 1 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        },
        {
          "metric_fr": "Service 2",
          "metric_en": "Service 2",
          "label_fr": "Libellé du service 2",
          "label_en": "Service 2 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        },
        {
          "metric_fr": "Service 3",
          "metric_en": "Service 3",
          "label_fr": "Libellé du service 3",
          "label_en": "Service 3 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        },
        {
          "metric_fr": "Service 4",
          "metric_en": "Service 4",
          "label_fr": "Libellé du service 4",
          "label_en": "Service 4 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        },
        {
          "metric_fr": "Service 5",
          "metric_en": "Service 5",
          "label_fr": "Libellé du service 5",
          "label_en": "Service 5 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        },
        {
          "metric_fr": "Service 6",
          "metric_en": "Service 6",
          "label_fr": "Libellé du service 6",
          "label_en": "Service 6 label",
          "sub_fr": "Connecteur · Connecteur · Connecteur",
          "sub_en": "Connector · Connector · Connector",
          "href": "#"
        }
      ]
    },
    {
      "id": "famille-b",
      "tab_label_fr": "Famille B",
      "tab_label_en": "Family B",
      "intro_eyebrow_fr": "§ Famille B · pour un autre besoin",
      "intro_eyebrow_en": "§ Family B · for another need",
      "intro_lede_fr": "Trois leviers sur une seule base, pour couvrir un besoin de bout en bout.",
      "intro_lede_en": "Three levers on one base, covering a need end to end.",
      "layout": "trio",
      "offers": [
        {
          "tag_fr": "Levier 01",
          "tag_en": "Lever 01",
          "title_fr": "Premier levier",
          "title_en": "First lever",
          "body_fr": "Le levier qui alimente : il va chercher ce que le reste n’a pas capté.",
          "body_en": "The lever that feeds: it goes after what the rest missed.",
          "link_label_fr": "Voir le levier →",
          "link_label_en": "See the lever →",
          "link_href": "#"
        },
        {
          "tag_fr": "Levier 02",
          "tag_en": "Lever 02",
          "title_fr": "Deuxième levier",
          "title_en": "Second lever",
          "body_fr": "Le levier qui qualifie et priorise : rien ne refroidit dans une file.",
          "body_en": "The lever that qualifies and prioritises: nothing goes cold in a queue.",
          "link_label_fr": "Voir le levier →",
          "link_label_en": "See the lever →",
          "link_href": "#"
        },
        {
          "tag_fr": "Levier 03",
          "tag_en": "Lever 03",
          "title_fr": "Troisième levier",
          "title_en": "Third lever",
          "body_fr": "Le levier qui relance : des suivis déclenchés par le comportement.",
          "body_en": "The lever that follows up: touches triggered by behaviour.",
          "link_label_fr": "Voir le levier →",
          "link_label_en": "See the lever →",
          "link_href": "#"
        }
      ],
      "services_intro_fr": "§ Trois leviers, un seul système. On active celui qui bouche la fuite qui coûte d’abord.",
      "services_intro_en": "§ Three levers, one system. We turn on the one that plugs the costliest leak first.",
      "panel_cta_label_fr": "Voir le système complet →",
      "panel_cta_label_en": "See the full system →",
      "panel_cta_href": "#"
    }
  ]
}

Pour un agent / MCP

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

/library/section/offer-rail.json

Chemin du détail machine

/library/section/offer-rail.json