Synap Interface - Copy this React, Tailwind Component to your project
Quiero-crear-una-interfaz-de-usuario-para-mi-programa-llamado-Synap,-un-software-omnicanal-que-integra-inteligencia-artificial-local.-La-interfaz-debe-ser-minimalista,-moderna,-y-con-un-enfoque-en-usabilidad.-A-continuación,-describo-las-páginas-y-funcionalidades-principales-que-deben-ser-maquetadas:-1.-Pantalla-de-Bienvenida-Título:-"Bienvenido-a-Synap.-¡Empecemos!"-Subtítulo:-"Personalicemos-tu-experiencia..."-Un-botón-grande-centrado-que-diga:-"¡Vamos!".-Estilo:-limpio,-con-colores-amigables-(pueden-ser-tonos-azules-y-blancos).-2.-Página-de-Configuración-Inicial-Sección-1:-Perfil-del-Negocio-Un-formulario-para-que-el-usuario-ingrese:-Nombre-del-negocio.-Correo-electrónico-de-contacto.-Número-de-teléfono.-Campo-para-establecer-un-PIN-de-seguridad-(usado-para-proteger-el-dashboard-y-chats).-Sección-2:-Conexión-de-Canales-Los-usuarios-deben-conectar-al-menos-uno-de-tres-canales-disponibles:-WhatsApp.-Messenger.-Telegram.-Diseño-con-botones-grandes/iconos-para-cada-canal.-Mostrar-una-notificación:-"Conecta-al-menos-un-canal-para-continuar".-3.-Dashboard-Principal-Encabezado:-Bienvenida-personalizada-con-el-nombre-del-negocio-ingresado.-Secciones-principales:-Chats-sin-contestar:-Lista-de-chats-pendientes-(estilo-tarjetas).-Notas-rápidas:-Área-donde-los-usuarios-pueden-escribir-y-guardar-notas-internas.-Estado-del-Bot:-Un-botón-toggle-para-"Encender/Apagar-Synap"-que-activa/desactiva-las-respuestas-automáticas.-Tarjeta-de-acceso-rápido:-Link-destacado-que-lleva-a-la-interfaz-de-chats-(similar-a-Telegram).-Estadísticas-visibles:-Total-de-mensajes-contestados.-Análisis-de-sentimiento-en-tiempo-real-(indicador-visual-como-un-gráfico-de-barras-o-semáforo).-4.-Interfaz-de-Chats-Un-diseño-similar-a-Telegram:-Barra-lateral-con-lista-de-contactos/conversaciones.-Panel-principal-con-la-conversación-activa.-Botones-para:-Responder-manualmente.-Activar/desactivar-respuestas-automáticas-por-chat.-Espacio-para-notas-rápidas-en-cada-conversación.-Estilo-General-Minimalista,-amigable-y-enfocado-en-productividad.-Colores-principales:-dark-theme.-Naranja-para-selecciones.-Fuentes-modernas-y-legibles,-como-Inter.-El-framework-a-usar-es-Electron-js,-genera-la-estructura-HTML-y-estilos-CSS-necesarios-para-estas-pantallas.
