Gallery Sections

site-showcase

stable Sur waimia · 1 Contenu inline (instance)

Montrer les réalisations

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

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

src/pages/cas-clients/[...slug].astro

Aperçu

Comment l'utiliser

Intention

Montrer les réalisations

Rôle de page

Preuve Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`placement`	Présentation	`object`	Non	·	·
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Non	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`url`	Contenu	`url`	Non	·	·
`url_label`	Contenu	`text`	Non	fr / en	·
`screens`	Contenu	`array`	Oui	·	1..4

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 site · papier
curée
site-showcase--paper
Vitrine site · papier 2
curée
site-showcase--paper-2
Vitrine site · papier 3
curée
site-showcase--paper-3
Vitrine site · encre
curée
site-showcase--ink
site-showcase · grille auto
générée
site-showcase--grid-auto
site-showcase · mosaïque
générée
site-showcase--mosaic
site-showcase · masonry
générée
site-showcase--masonry
site-showcase · matrice 3x3
générée
site-showcase--matrix-3x3
site-showcase · matrice 4x4
générée
site-showcase--matrix-4x4
site-showcase · grille uniforme
générée
site-showcase--grid-uniform
site-showcase · vedette + split
générée
site-showcase--featured-split
site-showcase · défilement aperçu
générée
site-showcase--peek-scroll
site-showcase · masonry 3 colonnes
générée
site-showcase--masonry-3
site-showcase · paire pleine largeur
générée
site-showcase--fullbleed-pair
site-showcase · pellicule
générée
site-showcase--filmstrip
site-showcase · chevauchement
générée
site-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 site · papier
curée
site-showcase--paper
background:paper
Ouvrir dans le builder
Vitrine site · papier 2
curée
site-showcase--paper-2
background:paper-2
Ouvrir dans le builder
Vitrine site · papier 3
curée
site-showcase--paper-3
background:paper-3
Ouvrir dans le builder
Vitrine site · encre
curée
site-showcase--ink
background:ink
Ouvrir dans le builder
site-showcase · grille auto
générée
site-showcase--grid-auto
layout:grid-auto
Ouvrir dans le builder
site-showcase · mosaïque
générée
site-showcase--mosaic
layout:mosaic
Ouvrir dans le builder
site-showcase · masonry
générée
site-showcase--masonry
layout:masonry
Ouvrir dans le builder
site-showcase · matrice 3x3
générée
site-showcase--matrix-3x3
layout:matrix-3x3
Ouvrir dans le builder
site-showcase · matrice 4x4
générée
site-showcase--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
site-showcase · grille uniforme
générée
site-showcase--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
site-showcase · vedette + split
générée
site-showcase--featured-split
layout:featured-split
Ouvrir dans le builder
site-showcase · défilement aperçu
générée
site-showcase--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
site-showcase · masonry 3 colonnes
générée
site-showcase--masonry-3
layout:masonry-3
Ouvrir dans le builder
site-showcase · paire pleine largeur
générée
site-showcase--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
site-showcase · pellicule
générée
site-showcase--filmstrip
layout:filmstrip
Ouvrir dans le builder
site-showcase · chevauchement
générée
site-showcase--overlap
layout:overlap
Ouvrir dans le builder

Sections liées

Même famille

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.

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.

Même catégorie

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.

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.

Similaires

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.

horizontal-showcase stable

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

scroll-interactive Feature Sections Défilement horizontalApparition au scrollDéfilement +6 16 décl.

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.

case-split stable

Cas client en split dark/light 50/50 : récit du cas à gauche (titre, body, CTA) et résultats chiffrés à droite.

split-media Testimonial Sections Apparition au scrollSurvolDéfilement +4 13 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.

card-grid Testimonial Sections Apparition au scrollSurvolDéfilement +6 17 décl.

case-spotlight stable

Vitrine de cas concret insérable partout : carte INK avec visuel habillé + titre serti d’un relevé accent, citation à barre accent, métriques massives latérales, tags méta et CTA. Levier de conversion à fort impact.

quote Testimonial Sections Apparition au scrollDéfilementPlusieurs images +8 12 décl.

Code

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

{
  "type": "site-showcase",
  "kicker_fr": "Le résultat, en ligne",
  "kicker_en": "The result, live",
  "h2_fr": "Le site <i>livré</i>",
  "h2_en": "The <i>delivered</i> site",
  "lede_fr": "Captures réelles du site en production, pas une maquette.",
  "lede_en": "Real screenshots of the site in production, not a mockup.",
  "url": "https://lescarnetsdemontpellier.fr",
  "url_label_fr": "Visiter le site",
  "url_label_en": "Visit the site",
  "screens": [
    {
      "src": "/images/cases/les-carnets-de-montpellier/home.webp",
      "alt_fr": "Page d'accueil des Carnets de Montpellier.",
      "alt_en": "Home page of Les Carnets de Montpellier.",
      "kind": "frame",
      "caption_fr": "Une entrée en matière claire : sujet, ton et abonnement dès le premier écran.",
      "caption_en": "A clear opening: topic, tone and subscription from the very first screen."
    },
    {
      "src": "/images/cases/les-carnets-de-montpellier/menu.webp",
      "alt_fr": "Menu plein écran, navigation par thèmes.",
      "alt_en": "Full-screen menu, navigation by themes.",
      "kind": "frame",
      "caption_fr": "Navigation par thèmes : le lecteur trouve son sujet sans se perdre.",
      "caption_en": "Theme-based navigation: readers find their topic without getting lost."
    },
    {
      "src": "/images/cases/les-carnets-de-montpellier/slider-dark.webp",
      "alt_fr": "Liste des articles en mode sombre.",
      "alt_en": "Article list in dark mode.",
      "kind": "frame",
      "caption_fr": "Mode sombre pour les longues lectures, confort du soir compris.",
      "caption_en": "Dark mode for long reads, evening comfort included."
    }
  ]
}

Pour un agent / MCP

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

/library/section/site-showcase.json

Chemin du détail machine

/library/section/site-showcase.json