Module List - Copy this React, Tailwind Component to your project

Genera esta interfaz ## **Lista de Módulos** ### **Ruta:** `/modules` ### **Propósito:** Presentar todos los módulos disponibles para el alumno. ### **Elementos:** 1. **Encabezado:** Título: "Módulos de Aprendizaje." Barra de búsqueda (para encontrar módulos específicos). 2. **Lista de Módulos:** Tarjetas con: **Título del Módulo.** **Descripción Breve.** **Estado:** En Progreso, Completado o No Iniciado. **Botón "Ver Módulo".** 3. **Filtros:** Selector para filtrar módulos por: Estado (Completado, En Progreso, No Iniciado). Categorías o temáticas. usa esta paleta ### **Colores Primarios (Uso Principal)** **Azul Claro (#4A90E2):** Representa confianza, estabilidad y calma. Ideal para encabezados, botones principales y elementos destacados. **Blanco (#FFFFFF):** Fondo principal para mantener un diseño limpio y espacioso. ### **Colores Secundarios (Soporte y Contraste)** **Gris Claro (#F5F5F5):** Para fondos secundarios (paneles, tarjetas) y separación visual. **Gris Medio (#9E9E9E):** Para textos secundarios o explicaciones. ### **Colores de Resaltado (Llamar la Atención)** **Verde (#4CAF50):** Indicadores de progreso o estados positivos (completado, éxito). **Amarillo (#FFC107):** Para advertencias o información importante. **Rojo (#F44336):** Para errores o estados críticos. ### **Colores para Acciones e Interactividad** **Naranja (#FF9800):** Botones de llamada a la acción secundaria o elementos interactivos destacados. **Cian (#00BCD4):** Para enlaces o detalles interactivos relacionados con actividades. ### **Colores para Dimensiones del Aprendizaje (Codificación Visual)** Cada dimensión puede tener un color asociado para facilitar la identificación rápida: **Procesamiento:** Azul (#4A90E2). **Percepción:** Verde (#4CAF50). **Entrada de Información:** Amarillo (#FFC107). **Comprensión:** Naranja (#FF9800). **Interacción Social:** Cian (#00BCD4). ### **Ejemplo de Aplicación en la Plataforma** **Fondo Principal:** Blanco (#FFFFFF) para no saturar al usuario. **Paneles o Tarjetas:** Gris Claro (#F5F5F5) con bordes sutiles. **Texto Principal:** Gris Oscuro (#333333) para buen contraste. **Botones Principales:** Azul Claro (#4A90E2) con texto blanco. **Indicadores de Estado:** Verde para progreso (barra de avance). Rojo para errores (mensaje de validación). Amarillo para advertencias (actividades pendientes). **Módulos de Aprendizaje:** Los colores de las dimensiones pueden usarse como etiquetas o barras laterales en los objetos de aprendizaje.