@brickslab./ui-web

Section hero avec titre, sous-titre et boutons d'action. Trois variants de fond disponibles : simple (défaut), image plein-cadre, ou vidéo en boucle. Un overlay configurable garantit la lisibilité du texte sur les variants media.

Aperçu

bg="simple" (défaut) — align="center" avec CTA et action secondaire

Build faster. Ship smarter.

BricksLab vous fournit les briques pour construire des interfaces modernes et performantes en un temps record.

bg="simple" — align="left"

Des composants prêts pour la production

Intégrez rapidement des composants testés, accessibles et personnalisables via des tokens CSS.

bg="simple" — sans actions secondaires

Bienvenue sur BricksLab

La bibliothèque UI pour les équipes qui construisent vite.

bg="image" — image plein-cadre avec overlay (overlayOpacity=0.5)

Découvrez notre univers

Une expérience visuelle immersive pour vos utilisateurs.

bg="video" — vidéo en boucle avec overlay (overlayColor="#0b1220", overlayOpacity=0.6)

Le futur commence ici

Plateforme nouvelle génération pour les équipes ambitieuses.

Props

Prop	Type	Défaut	Requis	Description
`bg`	`"simple" \| "video" \| "image"`	`"simple"`	—	Variant de fond. "simple" = pas de media. "image" = image plein-cadre avec overlay. "video" = vidéo en boucle avec overlay.
`src`	`string`	—	—	URL de la ressource media. Requis si bg="image" ou bg="video".
`alt`	`string`	—	—	Texte alternatif de l'image de fond (accessibilité). Utilisé si bg="image".
`videoPoster`	`string`	—	—	Image affichée avant le chargement de la vidéo (attribut poster du tag video).
`overlayOpacity`	`number`	`0.45`	—	Opacité de l'overlay sombre appliqué sur le media (0 à 1). Permet de garantir la lisibilité du texte.
`overlayColor`	`string`	`"#000000"`	—	Couleur de l'overlay appliqué sur le media.
`title`	`string`	—	✓	Titre principal de la section hero.
`subtitle`	`string`	—	—	Sous-titre ou description courte affichée sous le titre.
`ctaLabel`	`string`	—	—	Libellé du bouton d'action principal (CTA).
`onCtaClick`	`() => void`	—	—	Callback déclenché lors du clic sur le bouton CTA principal.
`secondaryLabel`	`string`	—	—	Libellé de l'action secondaire optionnelle.
`onSecondaryClick`	`() => void`	—	—	Callback déclenché lors du clic sur l'action secondaire.
`align`	`"left" \| "center"`	`"center"`	—	Alignement horizontal du contenu de la section hero.
`hoverEffect`	`boolean`	`false`	—	Active un effet visuel au survol des boutons (brillance sur le CTA, opacity sur le secondaire).

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  bg="simple"
  src="..."
  alt="..."
  videoPoster="..."
  overlayOpacity={0.45}
  overlayColor="#000000"
  title="..."
  subtitle="..."
  // +6 autres props disponibles
/>

bgsrcaltvideoPosteroverlayOpacityoverlayColortitlesubtitlectaLabelonCtaClicksecondaryLabelonSecondaryClickalignhoverEffect

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    subtitle="Votre sous-titre"
    align="left"
  />
</div>

Utilisation

tsx

"use client";
import { HeroCtaSection } from "@brickslab./ui-web";

// bg="simple" — défaut, fond neutre
<HeroCtaSection
  title="Build faster. Ship smarter."
  subtitle="BricksLab vous fournit les briques pour construire des interfaces modernes."
  ctaLabel="Démarrer gratuitement"
  onCtaClick={() => router.push("/signup")}
  secondaryLabel="Voir la documentation"
  onSecondaryClick={() => router.push("/docs")}
  hoverEffect
/>

// bg="image" — image plein-cadre avec overlay
<HeroCtaSection
  bg="image"
  src="/assets/hero-bg.jpg"
  alt="Vue panoramique de montagne"
  overlayOpacity={0.5}
  title="Découvrez notre univers"
  subtitle="Une expérience visuelle immersive."
  ctaLabel="Explorer"
  onCtaClick={() => router.push("/explore")}
  hoverEffect
/>

// bg="video" — vidéo en boucle avec overlay
<HeroCtaSection
  bg="video"
  src="/assets/hero-loop.mp4"
  videoPoster="/assets/hero-poster.jpg"
  overlayOpacity={0.4}
  overlayColor="#0b1220"
  title="Le futur commence ici"
  subtitle="Plateforme nouvelle génération."
  ctaLabel="Démarrer"
  onCtaClick={() => router.push("/start")}
  secondaryLabel="En savoir plus"
  onSecondaryClick={() => router.push("/about")}
  hoverEffect
/>