@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.
`hoverEffect`	`boolean`	—	—	Si vrai, applique un petit effet visuel au survol des boutons (brillance/opacity).

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
  title="..."
  subtitle="..."
  ctaLabel="..."
  onCtaClick={...}
  secondaryLabel="..."
  onSecondaryClick={...}
  align="center"
  hoverEffect={true}
/>

titlesubtitlectaLabelonCtaClicksecondaryLabelonSecondaryClickalignhoverEffect

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";

// 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")}
  hoverEffect={true}
/>

// 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"
/>