📊 Calculadora de Leads Costa Rica

Una calculadora interactiva de leads optimizada para el mercado digital costarricense. Permite calcular métricas de marketing digital, ROI y leads potenciales basándose en datos específicos del mercado de Costa Rica.

✨ Características

• 🇨🇷 Optimizada para Costa Rica: Datos y benchmarks específicos del mercado local
• 📈 Visualización Interactiva: Gráficos animados y métricas en tiempo real
• 🎨 Diseño Moderno: Interfaz glassmorphism con tema Costa Rica
• ⚡ Tiempo Real: Cálculos instantáneos con debouncing
• 💡 Recomendaciones IA: Tips inteligentes basados en performance
• 📱 Responsive: Optimizado para desktop y móvil

🚀 Demo

La aplicación permite calcular:

• Leads Totales: Basado en inversión y métricas
• Costo por Lead: Optimización de presupuesto
• ROI: Retorno sobre inversión proyectado
• Métricas de Conversión: CTR, tasa de conversión, etc.

🛠️ Tecnologías

• React 19: Framework principal con hooks modernos
• Vite: Build tool optimizado
• Tailwind CSS: Styling con tema personalizado CR
• Chart.js: Visualizaciones interactivas
• Framer Motion: Animaciones fluidas

📦 Instalación

# Clonar repositorio
git clone [repository-url]
cd leads-calculator

# Instalar dependencias
npm install

# Ejecutar en desarrollo
npm run dev

# Build para producción
npm run build

💰 Datos del Mercado Costa Rica

La calculadora utiliza benchmarks reales del mercado costarricense:

• CPC Promedio: ₡600-900
• CTR Típico: 2-3%
• Conversión B2B: 3.5-5%
• Valor Lead: ₡30-60K

🎯 Métricas Calculadas

Funnel de Conversión

1. Impresiones → Alcance potencial
2. Clics → Tráfico generado
3. Leads → Conversiones efectivas
4. ROI → Retorno de inversión

Performance Benchmarks

• Excelente: ROI +200%
• Bueno: ROI +100%
• Promedio: ROI +50%

🚨 Características Técnicas

• ✅ React 19 Compatible: Hooks rules compliance
• ✅ ESLint Clean: Código sin warnings
• ✅ Type Safe: Validación de datos
• ✅ Error Boundaries: Manejo robusto de errores
• ✅ Performance: Bundle optimizado (132KB gzip)

📊 Estructura del Proyecto

src/
├── components/          # Componentes React
│   ├── InputPanel.jsx   # Sliders interactivos
│   ├── ResultsDisplay.jsx # Métricas animadas
│   ├── FunnelChart.jsx  # Visualización funnel
│   └── TipsDisplay.jsx  # Recomendaciones IA
├── hooks/               # Custom hooks
│   └── useLeadsCalculator.js # Lógica principal
├── utils/               # Utilidades
│   └── calculations.js  # Business logic CR
└── styles/              # Estilos globales
    └── index.css        # Tailwind + tema CR

🇨🇷 Optimizaciones Costa Rica

• Moneda Local: Colones costarricenses (₡)
• Benchmarks Locales: Datos 2024 mercado CR
• Consejos Localizados: WhatsApp Business, estrategias locales
• Performance: Métricas adaptadas al mercado tico

🎨 Diseño

• Glassmorphism: Efectos modernos backdrop-blur
• Gradientes: Tema azul/verde bandera CR
• Animaciones: Transiciones suaves hover
• Typography: Inter font, jerarquía clara

📈 Uso

1. Ajustar Sliders: Inversión, CPC, CTR, Conversión
2. Ver Resultados: Métricas calculadas en tiempo real
3. Analizar ROI: Gauge visual de performance
4. Revisar Tips: Recomendaciones personalizadas

👨‍💻 Desarrollo

# Desarrollo
npm run dev

# Linting
npm run lint

# Build
npm run build

# Preview
npm run preview

📝 Licencia

MIT License - Desarrollado para el mercado costarricense

---

🚀 Ready for Production | 🇨🇷 Hecho en Costa Rica