Waimia.

Pricing Sections

pricing-tabs-showcase

stable Bibliothèque Contenu inline (instance)

Présenter les tarifs, Comparer les options

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

Instances sur le site

Global 0 instance en page composable

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

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 · ink
kicker Contenu text Non fr / en ·
h1 Contenu text Non fr / en ·
h2 Contenu text Non fr / en ·
lede Contenu text Non fr / en ·
tabs Contenu array Oui · 2..4
highlight Contenu object Non · ·

Déclinaisons · 11

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

  • Tarifs onglets · papier

    curée
    pricing-tabs-showcase--paper
  • Tarifs onglets · papier 2

    curée
    pricing-tabs-showcase--paper-2
  • Tarifs onglets · papier 3

    curée
    pricing-tabs-showcase--paper-3
  • Tarifs onglets · encre

    curée
    pricing-tabs-showcase--ink
  • pricing-tabs-showcase · onglets horizontaux

    générée
    pricing-tabs-showcase--horizontal-tabs
  • pricing-tabs-showcase · onglets verticaux

    générée
    pricing-tabs-showcase--vertical-tabs
  • pricing-tabs-showcase · segmenté

    générée
    pricing-tabs-showcase--segmented
  • pricing-tabs-showcase · pilules

    générée
    pricing-tabs-showcase--pills
  • pricing-tabs-showcase · onglets soulignés

    générée
    pricing-tabs-showcase--underline-tabs
  • pricing-tabs-showcase · onglets encadrés

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

    générée
    pricing-tabs-showcase--vertical-rail

Comparer les déclinaisons · 11

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.

  • Tarifs onglets · papier

    curée
    pricing-tabs-showcase--paper

    Identique à la démo par défaut (aucun axe surchargé).

    Ouvrir dans le builder
  • Tarifs onglets · papier 2

    curée
    pricing-tabs-showcase--paper-2
    background:paper-2
    Ouvrir dans le builder
  • Tarifs onglets · papier 3

    curée
    pricing-tabs-showcase--paper-3
    background:paper-3
    Ouvrir dans le builder
  • Tarifs onglets · encre

    curée
    pricing-tabs-showcase--ink
    background:ink
    Ouvrir dans le builder
  • pricing-tabs-showcase · onglets horizontaux

    générée
    pricing-tabs-showcase--horizontal-tabs
    layout:horizontal-tabs
    Ouvrir dans le builder
  • pricing-tabs-showcase · onglets verticaux

    générée
    pricing-tabs-showcase--vertical-tabs
    layout:vertical-tabs
    Ouvrir dans le builder
  • pricing-tabs-showcase · segmenté

    générée
    pricing-tabs-showcase--segmented
    layout:segmented
    Ouvrir dans le builder
  • pricing-tabs-showcase · pilules

    générée
    pricing-tabs-showcase--pills
    layout:pills
    Ouvrir dans le builder
  • pricing-tabs-showcase · onglets soulignés

    générée
    pricing-tabs-showcase--underline-tabs
    layout:underline-tabs
    Ouvrir dans le builder
  • pricing-tabs-showcase · onglets encadrés

    générée
    pricing-tabs-showcase--boxed-tabs
    layout:boxed-tabs
    Ouvrir dans le builder
  • pricing-tabs-showcase · rail vertical

    générée
    pricing-tabs-showcase--vertical-rail
    layout:vertical-rail
    Ouvrir dans le builder

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.
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.

Même catégorie

pricing-cards stable

Grille de 2 à 4 cartes de prix côte à côte avec une carte « Recommandé » mise en avant, prix, période, features et CTA par carte. Ancrage par contraste.

card-grid Pricing Sections SurvolCartesBadge +3 30 décl.
pricing-comparison-matrix stable

Matrice comparative tarifaire pour mettre en regard les fonctionnalites de 3 plans avec mise en avant de la colonne recommandee.

table Pricing Sections Défilement horizontalSurvolGlisser pour faire défiler +3 13 décl.
pricing-single-highlight stable

Offre mono-produit en grand format : une carte large centrée avec prix d'ancrage, liste de bénéfices, garantie et CTA fort. Idéal landing mono-offre.

card-grid Pricing Sections Liste2 colonnesMédia à droite +1 18 décl.
pricing-table stable

Table de prix pour présenter clairement les formules, paliers et options commerciales.

table Pricing Sections BoutonsListe3 colonnes 14 décl.
pricing-toggle stable

Grille de cartes de prix avec bascule mensuel/annuel (CSS-only, sans JS) qui change les prix affichés et signale l'économie annuelle.

card-grid Pricing Sections SurvolClic (bascule)Illustration au trait +4 18 décl.

Similaires

footer-cta-band stable

Bande CTA finale pleine largeur (titre, sous-titre, un à deux boutons), pensée comme le climax juste avant le footer. Sombre par défaut pour trancher avec la page.

band CTA Sections Boutons2 colonnesScindé 27 décl.
cta-final stable

CTA final pour conclure une page et orienter vers l'action de conversion principale.

band CTA Sections Apparition au scrollSurvolDéfilement +3 18 décl.
closing-cta-band stable

Bande CTA de cloture sur fond ink : kicker + titre display-lg (accent italique) + bouton primaire. Titre rendu en HTML (accent <em>).

band CTA Sections Apparition au scrollSurvolBoutons +1 17 décl.
comparison-pricing-callout stable

Bloc « pourquoi nous » en trois colonnes de propositions de valeur, terminé par un CTA et une mention. Sert de pont entre les features et la page tarifaire.

band Comparison Sections Illustration au traitListe3 colonnes 18 décl.
department-cta stable

Clôture CTA sur fond ink : Dingbat, titre display italique, body et deux boutons (rendez-vous + lien secondaire).

band CTA Sections Apparition au scrollSurvolDéfilement +3 14 décl.
booking-embed stable

Section de prise de rendez-vous intégrant le widget Cal.com (CalEmbed) avec une copy de réassurance, pour réserver un audit ou un appel.

form-panel Contact Sections DéfilementIllustration au traitListe +3 9 décl.

Code

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

{
  "type": "pricing-tabs-showcase",
  "background": "paper",
  "kicker_fr": "§ Nos formules",
  "kicker_en": "§ Plans",
  "h2_fr": "Des formules adaptées à vos <i>besoins</i>.",
  "h2_en": "Plans adapted to your <i>needs</i>.",
  "lede_fr": "Choisissez une base claire, puis ajustez le périmètre au diagnostic.",
  "lede_en": "Choose a clear base, then adjust the scope through diagnosis.",
  "tabs": [
    {
      "label_fr": "Un projet",
      "label_en": "One project",
      "cards": [
        {
          "title_fr": "Lancement",
          "title_en": "Launch",
          "body_fr": "Pour partir de zéro avec une présence claire.",
          "body_en": "To start from zero with a clear presence.",
          "features_fr": [
            "Landing page",
            "Copywriting",
            "SEO de base"
          ],
          "features_en": [
            "Landing page",
            "Copywriting",
            "Base SEO"
          ],
          "cta": {
            "label_fr": "Choisir lancement",
            "label_en": "Choose launch",
            "href": "/contact?offer=lancement",
            "variant": "ghost"
          }
        },
        {
          "title_fr": "Refonte",
          "title_en": "Rebuild",
          "body_fr": "Pour remettre un site existant au niveau.",
          "body_en": "To bring an existing site up to standard.",
          "features_fr": [
            "Audit",
            "Direction artistique",
            "Tracking"
          ],
          "features_en": [
            "Audit",
            "Art direction",
            "Tracking"
          ],
          "cta": {
            "label_fr": "Choisir refonte",
            "label_en": "Choose rebuild",
            "href": "/contact?offer=refonte",
            "variant": "primary"
          },
          "featured": true
        },
        {
          "title_fr": "Migration",
          "title_en": "Migration",
          "body_fr": "Pour changer de socle sans perdre l’acquis.",
          "body_en": "To change foundation without losing what works.",
          "features_fr": [
            "Redirections",
            "Performance",
            "Formation"
          ],
          "features_en": [
            "Redirects",
            "Performance",
            "Training"
          ],
          "cta": {
            "label_fr": "Choisir migration",
            "label_en": "Choose migration",
            "href": "/contact?offer=migration",
            "variant": "ghost"
          }
        }
      ]
    },
    {
      "label_fr": "Équipe dédiée",
      "label_en": "Dedicated team",
      "cards": [
        {
          "title_fr": "Kick start",
          "title_en": "Kick start",
          "body_fr": "Un rythme léger pour tenir le cap.",
          "body_en": "A light rhythm to keep momentum.",
          "features_fr": [
            "Priorités",
            "Correctifs",
            "Reporting"
          ],
          "features_en": [
            "Priorities",
            "Fixes",
            "Reporting"
          ],
          "cta": {
            "label_fr": "Démarrer",
            "label_en": "Start",
            "href": "/contact?plan=kick-start",
            "variant": "ghost"
          }
        },
        {
          "title_fr": "Boost",
          "title_en": "Boost",
          "body_fr": "Des itérations régulières sur acquisition et site.",
          "body_en": "Regular iterations on acquisition and site.",
          "features_fr": [
            "SEO/GEO",
            "Landing pages",
            "Dashboard"
          ],
          "features_en": [
            "SEO/GEO",
            "Landing pages",
            "Dashboard"
          ],
          "cta": {
            "label_fr": "Accélérer",
            "label_en": "Accelerate",
            "href": "/contact?plan=boost",
            "variant": "ghost"
          }
        },
        {
          "title_fr": "Growth",
          "title_en": "Growth",
          "body_fr": "La formule de pilotage recommandée.",
          "body_en": "The recommended steering plan.",
          "features_fr": [
            "Roadmap",
            "CRM",
            "Pilotage"
          ],
          "features_en": [
            "Roadmap",
            "CRM",
            "Steering"
          ],
          "cta": {
            "label_fr": "Choisir Growth",
            "label_en": "Choose Growth",
            "href": "/contact?plan=growth",
            "variant": "primary"
          },
          "featured": true
        }
      ]
    }
  ]
}

Pour un agent / MCP

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

/library/section/pricing-tabs-showcase.json

Chemin du détail machine

/library/section/pricing-tabs-showcase.json