Candidate Card - Copy this React, Tailwind Component to your project
Diseño adaptado de los leads: Modifica el diseño de las tarjetas de los leads para incluir la siguiente información, basada en el diseño proporcionado: Nombre del usuario: Texto en negrita (tamaño 16px). Rol o título: Debajo del nombre, en texto regular (tamaño 14px, color gris oscuro). Interacciones: Un contador numérico que indica el número de interacciones con el lead. Satisfacción: Un porcentaje en color verde, con un pequeño ícono visual (como un círculo de progreso o una carita sonriente). Última actividad: Una fecha que muestra la última interacción o cambio de estado. Etiquetas adicionales: Muestra las habilidades o tecnologías relacionadas con el lead, en pequeños contenedores de colores claros. Nuevas columnas: Agrega dos columnas adicionales al tablero: "Contacted": Para los leads que ya han sido contactados. "Negotiation": Para los leads en fase de negociación. Diseño de las columnas: Igual que las columnas existentes ("New", "Shortlisted", "Interviewed"), pero con barras de progreso independientes que reflejen la cantidad de leads en cada estado. Interactividad y animación: Las tarjetas de leads deben ser completamente arrastrables entre las cinco columnas. Las barras de progreso de cada columna deben actualizarse automáticamente con una animación líquida cuando se mueve un lead entre columnas. Estilo visual para las nuevas columnas: "Contacted": Color de la barra de progreso: Azul oscuro (#4A90E2). "Negotiation": Color de la barra de progreso: Naranja (#FFA45B). Usa el mismo diseño visual para los encabezados y tarjetas, asegurando consistencia. Estructura del diseño: Primera fila: Incluye las columnas "New", "Shortlisted", "Interviewed". Segunda fila (nuevas columnas): Agrega "Contacted" y "Negotiation" en la misma línea. Ajusta el espaciado para asegurar que el diseño sea uniforme y no quede saturado. Responsividad: En pantallas más pequeñas, organiza las columnas en filas horizontales, manteniendo tres columnas por fila. Asegúrate de que las tarjetas de leads sean legibles y accesibles en dispositivos móviles.
