Solution Carousel
Carrusel animado de 4 soluciones con imagen central. Cada tarjeta cicla automáticamente entre el estado default y active, mientras la imagen central realiza un crossfade hacia la imagen correspondiente al ítem activo.
Demo animado
La tarjeta activa cambia automáticamente cada 3 segundos. La imagen central realiza crossfade con cada transición.
Documentación digital
Cada obra tiene su documentación 100% digital y accesible.
Registro de notificaciones
Cada aviso o alerta queda registrado de forma auditable.
Ingresos autorizados
Solo ingresan personas autorizadas a la obra.
Responsabilidades claras
Se sabe exactamente quién realizó cada acción.
Documentación digital
Cada obra tiene su documentación 100% digital y accesible.
Registro de notificaciones
Cada aviso o alerta queda registrado de forma auditable.
Ingresos autorizados
Solo ingresan personas autorizadas a la obra.
Responsabilidades claras
Se sabe exactamente quién realizó cada acción.
Intervalo personalizado
Usar la prop interval (en ms) para controlar la velocidad del ciclo. Aquí 1500 ms.
Documentación digital
Cada obra tiene su documentación 100% digital y accesible.
Registro de notificaciones
Cada aviso o alerta queda registrado de forma auditable.
Ingresos autorizados
Solo ingresan personas autorizadas a la obra.
Responsabilidades claras
Se sabe exactamente quién realizó cada acción.
Documentación digital
Cada obra tiene su documentación 100% digital y accesible.
Registro de notificaciones
Cada aviso o alerta queda registrado de forma auditable.
Ingresos autorizados
Solo ingresan personas autorizadas a la obra.
Responsabilidades claras
Se sabe exactamente quién realizó cada acción.
Props — SolutionCarousel
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| items | [SolutionCarouselItem × 4] | — | Exactamente 4 ítems. Índices 0-1 → columna izquierda/fila superior. Índices 2-3 → columna derecha/fila inferior. |
| interval | number | 3000 | Milisegundos entre cada avance del carrusel. |
| className | string | — | Clases adicionales sobre el contenedor raíz. |
Props — SolutionCarouselItem
| Prop | Tipo | Descripción |
|---|---|---|
| icon | LucideIcon | SVGComponent | Ícono en estado default. |
| activeIcon | LucideIcon | SVGComponent | Ícono alternativo cuando la tarjeta está activa. Si no se provee, usa icon. |
| title | string | Título de la tarjeta. |
| description | string | Descripción de la tarjeta. |
| image | string | StaticImageData | Imagen central que aparece cuando este ítem está activo. |
| imageAlt | string | Texto alternativo de la imagen (accesibilidad). |