Landing

components/landing/

Componentes específicos de la página pública de Nidus. Incluye bloques de marketing, steppers animados y carruseles de demostración del producto.

Hero

Listo

Sección principal del landing con título, subtítulo y llamadas a la acción.

hero.tsx

Solution Card

Listo

Tarjeta de solución con dos estados visuales (default/active) para la sección de soluciones del landing.

solution-card.tsx

Solution Carousel

Listo

Carrusel animado de 4 soluciones con imagen central. Cicla automáticamente el estado active de cada tarjeta y realiza crossfade de imagen. Responsive: 3 columnas en desktop, apilado en mobile.

solution-carousel.tsx

Demo Step

Listo

Paso de demostración con icono, título y descripción. Cicla automáticamente el estado active de cada paso. Responsive: apilado en mobile.

demo-step.tsx

Demo Section

Listo

Sección completa "Así funciona Nidus". Incluye título, stepper animado (DemoStep), CTA de acceso anticipado, mockup de la plataforma con borde dorado y caption con ícono de verificación.

demo-section.tsx

Demo Step Carousel

Listo

Carrusel animado de 4 pasos de demostración con icono, título y descripción. Cicla automáticamente el estado active de cada paso. Responsive: apilado en mobile.

demo-step-carousel.tsx

Banner Section Option One

Listo

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).

banner-section-one.tsx

Banner Section Option Two

Listo

Sección de conversión final para la landing page. Fondo oscuro en quaternary-950, logo isologo en color secundario (crema), titular, bajada y CTA. Pensada para aparecer antes del footer.

banner-section-two.tsx

Problem Card

Listo

Tarjeta de problema con ícono y texto. Cuenta con dos estados visuales (default/active) para la sección de problemas del landing.

problem-card.tsx

Problem Cards Container

Listo

Contenedor que agrupa tarjetas de problema. Muestra las tarjetas en fila horizontal en desktop y en columna en mobile. Gestiona el estado activo de cada tarjeta al hacer hover.

problem-cards-container.tsx

Role Card

Listo

Tarjeta de rol con ícono, título y descripción. Abre un AlertDialog con la solución detallada.

role-card.tsx

Role Section

Listo

Sección completa de audiencias para la landing page. Compone el header de sección (eyebrow + título + bajada) con una grilla de RoleCard. Cada card abre un AlertDialog con la solución detallada. Los roles por defecto están predefinidos y son sobreescribibles via la prop roles.

role-section.tsx

Footer

Listo

Sección de cierre con título, subtítulo, CTA e isologo.

footer.tsx