Konnexa AI — Plataforma Inteligente de Ventas & Landings de Alta Conversión

Konnexa AI es una plataforma SaaS diseñada para sellers de e-commerce, dropshipping, tiendas con pago contraentrega (Cash On Delivery - COD) y agencias de marketing en Latinoamérica y España.

---

🚀 Módulos Principales de la Plataforma

1. Generador de Landing Pages con IA & Editor Visual Ultra-Impactante

• Asistente Inteligente Paso a Paso (LandingWizardModal): Convierte una fotografía o URL de producto en una landing page completa en 30 segundos.

• Renderizador de Ultra Alto Impacto (HighImpactLandingRenderer):

  • Banner sticky superior de urgencia con cuenta regresiva en vivo y contador de stock.
  • Galería visual interactiva con zoom y selector de miniaturas.
  • Selector dinámico de combos (1 unidad básica, 2 unidades con 40% OFF "MÁS VENDIDO / RECOMENDADO", 3 unidades pack familiar).
  • Testimonios con avatares reales, puntuación 4.9/5 estrellas y ciudades verificadas (Bogotá, Medellín, Cali, etc.).
  • Formulario de Pedido 1-Click Contraentrega (COD): Selector de departamentos y municipios de Colombia, cálculo de envío gratis y botón pulsante "PEDIR AHORA Y PAGAR AL RECIBIR".
  • Efecto de celebración con confeti y modal de confirmación con enlace directo a WhatsApp.
  • Notificaciones flotantes de prueba social en vivo ("Andrés de Medellín acaba de pedir hace 3 minutos").
  • Barra sticky de compra inferior en versión móvil y botón flotante de WhatsApp.

• Editor Visual en Tiempo Real (LandingEditor):

  • Vista adaptable: Desktop, Tablet y Móvil (marco simulado de smartphone).
  • Edición en tiempo real de titulares, textos, precios y variantes de combo.
  • Copilot de IA: Modifica el copy, estilo o urgencia mediante instrucciones en lenguaje natural.

• Publicación Real Fuera del Editor: Rutas públicas directas /p/[slug] con metadatos OpenGraph, SEO y captura funcional de pedidos.

• Oferta seleccionada por defecto: en el editor (pestaña Ofertas), marca Seleccionada al abrir en la oferta que quieres que aparezca elegida. Es independiente de Destacada (la etiqueta resaltada); si no marcas ninguna, se selecciona la destacada.

• Contador de oferta: en Ofertas → Contador de oferta, con dos modos: termina cada día a medianoche (hora del país de la landing) o dura unas horas por visitante (se guarda en su navegador; recargar no lo reinicia y al terminar empieza otra vez). Texto editable; aparece junto a las ofertas y en el formulario de pedido.

• Formulario de pedido guiado: celular con el número exacto de cifras del país (10 en Colombia, empezando por 3), con contador y formato automático; dirección por partes en Colombia (tipo de vía —calle, carrera, avenida, transversal, diagonal…—, número, # y placa, más apto/torre y barrio), con opción Rural para veredas y fincas. Nombre y apellido, celular, departamento, ciudad, dirección y barrio son obligatorios; el servidor también lo comprueba.

2. Llamadas IA (Vapi)

• Un agente de voz con IA llama a cada cliente, confirma producto, total y dirección, y marca el pedido como Confirmado, Cancelado, Volver a llamar o Revisar. Si el cliente corrige la dirección, se guarda la nueva.
• Horario de llamadas, espera tras el pedido, reintentos si no contesta, llamada de prueba a tu propio teléfono, e historial con resumen, transcripción y grabación.
• Se activa al configurar Vapi (ver sección Llamadas IA (Vapi)).

3. Mensajes (WhatsApp)

• Confirmación automática de cada pedido por WhatsApp con una plantilla aprobada y dos botones: Confirmar pedido y Cancelar. La respuesta del cliente cambia el estado del pedido a Confirmado o Cancelado.
• Bandeja real guardada en Supabase: conversaciones, mensajes con su estado (enviado, entregado, leído, fallido) y el pedido vinculado. Respuestas de texto libre dentro de la ventana de 24 h de WhatsApp.
• Se activa solo cuando configuras las variables de WhatsApp (ver sección WhatsApp).
• Confirmación por WhatsApp al terminar el pedido: si la landing tiene un número de WhatsApp, la pantalla final avisa que el pedido no está confirmado hasta que el cliente envíe el mensaje, explica los dos pasos (tocar el botón verde y luego Enviar en WhatsApp) y muestra un resumen de sus datos (producto, total, nombre, celular, dirección, ciudad, indicaciones) y abre WhatsApp tras una cuenta atrás de 7 s con el mensaje ya escrito (número de pedido, producto, total y sus datos). WhatsApp no permite que una página envíe el mensaje sola: el cliente siempre debe tocar Enviar. Se puede apagar en el editor de la landing. No necesita la API de WhatsApp.
• Excel de pedidos: en Pedidos, el botón Descargar Excel baja los pedidos que ves en la tabla (con los filtros aplicados) con todos sus datos.

4. Automatizaciones & Analíticas

• Constructor de Flujos (AutomationBuilder): Nodos de disparadores (Nuevo Pedido, Llamada Confirmada, No Contesta), condiciones y acciones (Disparar llamada IA, Enviar WhatsApp oficial, Crear tarea humana, Webhook logístico).
• Dashboard de Analíticas (AnalyticsDashboard): Embudo de conversión, tasa de confirmación por IA (84.6%), métricas de call center, mapa de calor y tabla de atribución por campañas UTM (Facebook Ads, TikTok Ads, Google).
• Píxeles y CAPI: Monitor de eventos para Meta Conversions API con deduplicación y respuesta Graph API 200 OK.

---

🛠️ Tecnologías Utilizadas

• Framework: Next.js 14 (App Router)
• Lenguaje: TypeScript
• Estilos: Tailwind CSS con paleta oficial Konnexa (#0A6CF0, #10C569, #172C8A, #0D1B54)
• Iconos: Lucide React
• Micro-interacciones: Canvas Confetti & animaciones CSS Keyframes
• Persistencia: LocalStorage reactivo (lib/store.ts) con sincronización en tiempo real

---

💻 Instrucciones para Ejecución Local

1. Instalar dependencias:

   npm install
   

This is the beginning of the README. Read the rest at the original. Read the full README ↗