BannerSectionOptionOne
Banner de conversión de ancho completo para la landing page. Imagen de fondo con overlay negro configurable, titular, bajada y CTA principal. Diseñado para destacar verticales o segmentos del producto (ej. barrios privados, countries, edificios).
Props
| Prop | Tipo | Default |
|---|---|---|
| headline | string | "Gestión eficaz de obras en barrios privados." |
| subheadline | string | "Nidus conecta propietarios, administración, arquitectos y seguridad en una misma plataforma." |
| ctaLabel | string | "Unirme al acceso anticipado" |
| ctaHref | string | "/comunidades" |
| overlayOpacity | number (0-1) | 0.72 |
| onCtaClick | () => void | undefined |
| className | string | undefined |
Variante por defecto
Contenido predeterminado con imagen de barrio privado y overlay al 72%.
Gestión eficaz de obras en barrios privados.
Nidus conecta propietarios, administración, arquitectos y seguridad en una misma plataforma.
Overlay personalizado
La prop overlayOpacity controla la intensidad del negro sobre la imagen (0–1).
Gestión eficaz de obras en barrios privados.
Nidus conecta propietarios, administración, arquitectos y seguridad en una misma plataforma.
Copy personalizado
Todos los textos son sobreescribibles para adaptar el banner a distintos segmentos del producto.
Gestión eficaz de obras en barrios privados.
Nidus conecta propietarios, administración, arquitectos y seguridad en una misma plataforma.
Uso básico
import { BannerSectionOptionOne } from '@repo/ui';
// Con defaults
<BannerSectionOptionOne />
// Con overlay personalizado
<BannerSectionOptionOne overlayOpacity={0.88} />
// Con callback de CTA (recomendado — scroll + tracking)
// Ver hook useCtaClick en apps/landing/hooks/use-cta-click.tsx
<BannerSectionOptionOne
ctaLabel="Unirme al acceso anticipado"
onCtaClick={bannerSectionOneCtaClick}
/>