BricksLab Catalog

@brickslab/ui-web

Section combinant un carrousel d'images avec du contenu texte. Permet de présenter des produits, collections ou packs avec une mise en page flexible (image à gauche ou à droite).

Aperçu

Disposition standard (carrousel à droite)

📸 Carrousel (placeholder)

Produit Premium

Découvrez notre collection exclusive avec des images haute résolution et une présentation moderne.

Disposition inversée (carrousel à gauche)

📸 Carrousel (placeholder)

Nouvelle Collection

Parcourez nos dernières créations avec un carrousel interactif.

Sans description ni actions

📸 Carrousel (placeholder)

Simple et épuré

Variante overlay (carrousel en fond, texte par-dessus)

📸 Carrousel en arrière-plan

Titre Overlay

Le texte se superpose au carrousel avec un gradient sombre pour améliorer la lisibilité.

Variante overlay (texte à droite)

📸 Carrousel en arrière-plan

Collection Exclusive

Découvrez nos produits avec un texte positionné à droite.

Props

Prop	Type	Défaut	Requis	Description
`title`	`string`	—	✓	Titre de la section.
`description`	`string`	—	—	Description ou texte accompagnant le titre (optionnel).
`carousel`	`React.ReactNode`	—	✓	Contenu du carrousel (généralement MediaCarousel ou autre galerie).
`actions`	`React.ReactNode`	—	—	Boutons ou actions additionnelles à afficher sous la description.
`imageLeft`	`boolean`	`false`	—	Si true, place le carrousel à gauche et le texte à droite. Par défaut, carrousel à droite.
`variant`	`"default" \| "overlay"`	`"default"`	—	Variante de layout. "default" : disposition côte à côte. "overlay" : texte superposé sur le carrousel.

Utilisation

tsx

import { CarouselWithTextSection } from "@brickslab/ui-web";

// Variante par défaut (côte à côte)
export function DefaultVariant() {
  return (
    <CarouselWithTextSection
      title="Découvrez nos produits"
      description="Disposition côte à côte avec carrousel et texte."
      carousel={<div>/* Votre carrousel ici */</div>}
      imageLeft={false}
    />
  );
}

// Variante overlay (texte superposé)
export function OverlayVariant() {
  return (
    <CarouselWithTextSection
      title="Collection Exclusive"
      description="Texte superposé sur le carrousel avec gradient."
      carousel={<div>/* Votre carrousel ici */</div>}
      variant="overlay"
      imageLeft={false}
    />
  );
}

Notes

💡 Deux variantes disponibles :

variant="default" : Disposition côte à côte (carrousel et texte côte à côte)
variant="overlay" : Texte superposé sur le carrousel avec gradient pour la lisibilité