Candidate Card - Copy this React, Tailwind Component to your project
Diseño totalmente responsivo: Asegúrate de que el diseño funcione correctamente en todos los dispositivos: Pantallas grandes: Muestra todas las columnas en una sola fila horizontal. Pantallas medianas: Organiza las columnas en dos filas, con un máximo de tres columnas por fila. Pantallas pequeñas (móviles): Apila las columnas verticalmente, haciendo que las casillas ocupen el ancho completo de la pantalla. Casillas compactas y reorganizadas: Encabezado: Incluye la foto/avatar, nombre, rol e ícono de WhatsApp en la parte superior. Datos principales: Combina los datos en una fila horizontal: Interacciones: "📩 Interacciones: [número]". Satisfacción: "✅ Satisfacción: [porcentaje]". Última actividad: "📅 Última actividad: [fecha]". Personalidades más usadas: Cambia las barras de progreso a círculos de progreso para cada personalidad (por ejemplo, Familiar, Amigable, Profesional, etc.). Cada círculo debe mostrar: Un color distintivo: Familiar: Rosa (#FF4081). Amigable: Azul (#4A90E2). Profesional: Verde (#4CAF50). Casual: Amarillo (#FFC107). Formal: Morado (#8E44AD). El porcentaje de cada categoría en el centro del círculo (por ejemplo, "35%"). Organiza los círculos en una cuadrícula compacta de dos columnas para ahorrar espacio. Mensajes recibidos del bot: Incluye los datos como: "📩 Total mensajes: [número]". "Último mensaje: [vista previa]" (máximo 50 caracteres). "⏱ Promedio de respuesta: [número] segundos". Agregar dos columnas adicionales: "On Hold" (En espera): Para leads pausados o pendientes. Color de barra de progreso: Gris claro (#BDBDBD). "Closed" (Cerrados): Para leads finalizados o cerrados. Color de barra de progreso: Rojo claro (#E57373). Haz estas columnas funcionales y visualmente consistentes con las existentes. Estilo visual: Mantén un diseño limpio, con divisores finos y márgenes pequeños para optimizar el uso del espacio. Asegúrate de que los círculos de progreso se adapten dinámicamente a diferentes tamaños de pantalla. Ejemplo de disposición en una casilla: