@brickslab/ui-web

Section hero avec titre, sous-titre et boutons d'action. Disponible en variante centrée ou alignée à gauche. Les callbacks onCtaClick et onSecondaryClick permettent une gestion flexible des actions.

Aperçu

align="center" (défaut) — 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.

align="left"

Des composants prêts pour la production

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

sans actions secondaires

Bienvenue sur BricksLab

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

Props

Prop	Type	Défaut	Requis	Description
`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.

Utilisation

tsx

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

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

// Aligné à gauche
<HeroCtaSection
  title="Des composants prêts pour la production"
  subtitle="Intégrez rapidement des composants testés et accessibles."
  ctaLabel="Explorer les composants"
  onCtaClick={() => router.push("/components")}
  align="left"
/>