Waimia.

Feature Sections

horizontal-showcase

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations

Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

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
kicker Contenu text Non fr / en ·
h2 Contenu text Oui fr / en ·
lede Contenu text Non fr / en ·
panels Contenu array Oui · 2..6

Déclinaisons · 16

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 4 curées, 12 générées.

  • Vitrine horizontale · papier

    curée
    horizontal-showcase--paper
  • Vitrine horizontale · papier 2

    curée
    horizontal-showcase--paper-2
  • Vitrine horizontale · papier 3

    curée
    horizontal-showcase--paper-3
  • Vitrine horizontale · encre

    curée
    horizontal-showcase--ink
  • horizontal-showcase · grille auto

    générée
    horizontal-showcase--grid-auto
  • horizontal-showcase · mosaïque

    générée
    horizontal-showcase--mosaic
  • horizontal-showcase · masonry

    générée
    horizontal-showcase--masonry
  • horizontal-showcase · matrice 3x3

    générée
    horizontal-showcase--matrix-3x3
  • horizontal-showcase · matrice 4x4

    générée
    horizontal-showcase--matrix-4x4
  • horizontal-showcase · grille uniforme

    générée
    horizontal-showcase--grid-uniform
  • horizontal-showcase · vedette + split

    générée
    horizontal-showcase--featured-split
  • horizontal-showcase · défilement aperçu

    générée
    horizontal-showcase--peek-scroll
  • horizontal-showcase · masonry 3 colonnes

    générée
    horizontal-showcase--masonry-3
  • horizontal-showcase · paire pleine largeur

    générée
    horizontal-showcase--fullbleed-pair
  • horizontal-showcase · pellicule

    générée
    horizontal-showcase--filmstrip
  • horizontal-showcase · chevauchement

    générée
    horizontal-showcase--overlap

Comparer les déclinaisons · 16

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.

  • Vitrine horizontale · papier

    curée
    horizontal-showcase--paper
    background:paper
    Ouvrir dans le builder
  • Vitrine horizontale · papier 2

    curée
    horizontal-showcase--paper-2
    background:paper-2
    Ouvrir dans le builder
  • Vitrine horizontale · papier 3

    curée
    horizontal-showcase--paper-3
    background:paper-3
    Ouvrir dans le builder
  • Vitrine horizontale · encre

    curée
    horizontal-showcase--ink
    background:ink
    Ouvrir dans le builder
  • horizontal-showcase · grille auto

    générée
    horizontal-showcase--grid-auto
    layout:grid-auto
    Ouvrir dans le builder
  • horizontal-showcase · mosaïque

    générée
    horizontal-showcase--mosaic
    layout:mosaic
    Ouvrir dans le builder
  • horizontal-showcase · masonry

    générée
    horizontal-showcase--masonry
    layout:masonry
    Ouvrir dans le builder
  • horizontal-showcase · matrice 3x3

    générée
    horizontal-showcase--matrix-3x3
    layout:matrix-3x3
    Ouvrir dans le builder
  • horizontal-showcase · matrice 4x4

    générée
    horizontal-showcase--matrix-4x4
    layout:matrix-4x4
    Ouvrir dans le builder
  • horizontal-showcase · grille uniforme

    générée
    horizontal-showcase--grid-uniform
    layout:grid-uniform
    Ouvrir dans le builder
  • horizontal-showcase · vedette + split

    générée
    horizontal-showcase--featured-split
    layout:featured-split
    Ouvrir dans le builder
  • horizontal-showcase · défilement aperçu

    générée
    horizontal-showcase--peek-scroll
    layout:peek-scroll
    Ouvrir dans le builder
  • horizontal-showcase · masonry 3 colonnes

    générée
    horizontal-showcase--masonry-3
    layout:masonry-3
    Ouvrir dans le builder
  • horizontal-showcase · paire pleine largeur

    générée
    horizontal-showcase--fullbleed-pair
    layout:fullbleed-pair
    Ouvrir dans le builder
  • horizontal-showcase · pellicule

    générée
    horizontal-showcase--filmstrip
    layout:filmstrip
    Ouvrir dans le builder
  • horizontal-showcase · chevauchement

    générée
    horizontal-showcase--overlap
    layout:overlap
    Ouvrir dans le builder

Sections liées

Même famille

hover-reveal-list stable

Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).

scroll-interactive Feature Sections Révélation au survolApparition au scrollSurvol +5 17 décl.
media-bento stable

Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).

scroll-interactive Feature Sections Zoom au survolApparition au scrollSurvol +4 24 décl.
media-swap-band stable

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

scroll-interactive Feature Sections Fondu enchaînéRotation automatiqueApparition au scroll +7 17 décl.
photo-cluster stable

Composition editoriale : photo lead + grappe de photos decalees (layouts lead-cluster, scatter, duo).

scroll-interactive Feature Sections Apparition au scrollDéfilementPlusieurs images +1 17 décl.
scroll-gallery stable

Liste sticky a gauche, cadre media a droite dont l'image change en fondu au scroll. Ideal pour presenter des domaines d'expertise avec un visuel par item.

scroll-interactive Feature Sections Média collantFondu enchaînéApparition au scroll +6 17 décl.
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.

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

media-block stable

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

gallery Gallery Sections Plusieurs imagesVidéo1 colonne 16 décl.
gallery-masonry stable

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

gallery Gallery Sections Zoom au survolApparition au scrollSurvol +3 16 décl.
sticky-scroll-storytelling stable

Storytelling au scroll : rail de texte sticky dont l'etape active passe en accent, colonne media sticky dont l'image change en fondu. Mobile = stepper empile.

scroll-interactive Feature Sections Média collantApparition au scrollFondu enchaîné +7 12 décl.
site-showcase stable

Vitrine du site livre : captures reelles dans des cadres navigateur, capture pleine page qui defile au survol, lien nofollow vers le site en production.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 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.
offer-rail stable

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.

tabs Feature Sections Apparition au scrollSurvolClic (bascule) +7 7 décl.

Code

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

{
  "type": "horizontal-showcase",
  "kicker_fr": "Expertises · parcours",
  "kicker_en": "Expertise · journey",
  "h2_fr": "Quatre <i>terrains</i> de jeu",
  "h2_en": "Four <i>playing fields</i>",
  "lede_fr": "Faites défiler horizontalement. Chaque expertise est un levier que l'on câble sur mesure.",
  "lede_en": "Scroll horizontally. Each expertise is a lever we wire to your context.",
  "panels": [
    {
      "index_fr": "01",
      "index_en": "01",
      "tone": "paper-2",
      "title_fr": "Site web intelligent",
      "title_en": "Intelligent website",
      "body_fr": "Un site qui capte, qualifie et convertit, instrumenté pour mesurer ce qui compte.",
      "body_en": "A site that captures, qualifies and converts, instrumented to measure what matters.",
      "points": [
        {
          "label_fr": "Acquisition mesurée",
          "label_en": "Measured acquisition"
        },
        {
          "label_fr": "Contenu qui se classe",
          "label_en": "Content that ranks"
        }
      ],
      "media_src": "/images/themes/theme-acquisition.webp",
      "media_alt_fr": "Acquisition",
      "media_alt_en": "Acquisition",
      "link_label_fr": "Voir",
      "link_label_en": "View",
      "link_href": "/services/site-web-ia"
    },
    {
      "index_fr": "02",
      "index_en": "02",
      "tone": "ink",
      "title_fr": "Intégration Claude",
      "title_en": "Claude integration",
      "body_fr": "Des workflows IA câblés dans vos outils, transférés à votre équipe.",
      "body_en": "AI workflows wired into your tools, handed over to your team.",
      "points": [
        {
          "label_fr": "Connecteurs MCP",
          "label_en": "MCP connectors"
        },
        {
          "label_fr": "Gouvernance claire",
          "label_en": "Clear governance"
        }
      ],
      "media_src": "/images/themes/theme-productivite.webp",
      "media_alt_fr": "Productivité",
      "media_alt_en": "Productivity",
      "link_label_fr": "Voir",
      "link_label_en": "View",
      "link_href": "/services/integration-claude"
    },
    {
      "index_fr": "03",
      "index_en": "03",
      "tone": "paper-3",
      "title_fr": "Contenu & SEO",
      "title_en": "Content & SEO",
      "body_fr": "Du contenu qui se classe sur Google et se fait citer par les IA génératives.",
      "body_en": "Content that ranks on Google and gets cited by generative AI.",
      "points": [
        {
          "label_fr": "SEO technique",
          "label_en": "Technical SEO"
        },
        {
          "label_fr": "GEO (IA génératives)",
          "label_en": "GEO (generative AI)"
        }
      ],
      "media_src": "/images/themes/theme-contenu-seo.webp",
      "media_alt_fr": "Contenu et SEO",
      "media_alt_en": "Content and SEO",
      "link_label_fr": "Voir",
      "link_label_en": "View",
      "link_href": "/services/seo-geo-contenu"
    },
    {
      "index_fr": "04",
      "index_en": "04",
      "tone": "paper-2",
      "title_fr": "Pilotage & finance",
      "title_en": "Steering & finance",
      "body_fr": "Voir clair dans les chiffres et décider sur des données fraîches.",
      "body_en": "See clearly in the numbers and decide on fresh data.",
      "points": [
        {
          "label_fr": "Tableaux de bord",
          "label_en": "Dashboards"
        },
        {
          "label_fr": "Données fraîches",
          "label_en": "Fresh data"
        }
      ],
      "media_src": "/images/themes/theme-finance.webp",
      "media_alt_fr": "Pilotage et finance",
      "media_alt_en": "Steering and finance",
      "link_label_fr": "Voir",
      "link_label_en": "View",
      "link_href": "/services/maintenance-growth"
    }
  ]
}

Pour un agent / MCP

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

/library/section/horizontal-showcase.json

Chemin du détail machine

/library/section/horizontal-showcase.json