Plataforma web de captación de clientes para una empresa ecuatoriana de créditos vehiculares y asesoría financiera. El sitio reemplaza un proceso de contacto manual por un flujo conversacional que pre-califica al usuario y lo deriva directamente a WhatsApp con contexto listo para el asesor.
Los asesores financieros recibían consultas por WhatsApp sin ningún contexto: el cliente llegaba escribiendo "hola", y el asesor tenía que preguntar desde cero qué servicio buscaba, cuál era su presupuesto y en qué situación estaba.
Esto generaba demoras, conversaciones repetidas y clientes que se perdían en el proceso.
Cosmopolitan Group ahora recibe cada consulta con el servicio, el presupuesto y el perfil del cliente ya definidos — el asesor abre WhatsApp y puede responder de forma directa y personalizada desde el primer mensaje.
| Funcionalidad | Beneficio real |
|---|---|
| Hero section con CTA directo | El visitante entiende en segundos qué hace la empresa y puede contactar de inmediato |
| Chat widget flotante con flujo guiado | Pre-califica al cliente por servicio, presupuesto y necesidad antes de derivarlo a WhatsApp |
| Mensaje pre-armado para WhatsApp | El asesor recibe el contexto completo — sin preguntas repetidas, sin fricción |
| Página de servicios con 6 categorías | Cliente informa en detalle sobre cada producto con imagen, características y CTA propio |
| Mapa embebido + botón "Cómo llegar" | Reduce la fricción para visitas presenciales |
| Diseño responsive | Funciona en celular (donde el 80%+ del tráfico llega desde WhatsApp) |
Guardar en
docs/screenshots/con las dimensiones indicadas.
| Vista | Archivo | Descripción |
|---|---|---|
| Hero (desktop) | hero-desktop.png |
Sección principal con imagen de fondo, headline y botón WhatsApp |
| Hero (mobile) | hero-mobile.png |
Misma sección en 390px — verifica que el CTA sea visible sin scroll |
| Chat widget | chat-widget.png |
Widget flotante abierto mostrando el flujo de selección de servicio |
| Página de servicios | servicios-desktop.png |
Grid alternado de servicios con imagen, ícono y CTA |
| Página de contacto | contacto-desktop.png |
Mapa embebido + datos de contacto + botón WhatsApp |
| Footer | footer-desktop.png |
Pie de página con logo, navegación y datos de contacto |
Cómo tomar las capturas:
- Abrir el proyecto en Chrome (
npm run dev→http://localhost:8080) - Abrir DevTools →
Ctrl+Shift+P→ escribirCapture screenshot - Para mobile: activar Device Toolbar (
Ctrl+Shift+M) → seleccionar iPhone 14 Pro (390×844) - Dimensión recomendada desktop: 1280×800px
- Página de inicio (Hero + Proceso + Preview de servicios)
- Página de servicios completa (6 categorías con imagen y CTA)
- Página de contacto con mapa embebido y direcciones
- Chat widget flotante con flujo conversacional por servicio
- Integración WhatsApp con mensaje pre-armado por contexto
- Diseño responsive (mobile-first)
- Navbar y Footer corporativos
- SEO básico (meta tags, Open Graph, Twitter Card)
Ver instrucciones de instalación y desarrollo
- Node.js 18+
- npm 9+
# Clonar el repositorio
git clone https://github.com/FelipeQuirola/cosmopolitan-group-web.git
cd cosmopolitan-group-web
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run devEl servidor corre en http://localhost:8080.
npm run dev # Servidor de desarrollo con hot reload
npm run build # Build de producción (output en /dist)
npm run preview # Previsualizar el build de producción
npm run lint # Análisis estático con ESLint
npm run test # Ejecutar tests con Vitestsrc/
├── components/ # Navbar, Footer, HeroSection, etc.
│ └── ui/ # ChatWidget y componentes de interfaz
├── pages/ # Index, Servicios, Contactos, NotFound
├── lib/ # chatFlow.ts (lógica del chat), whatsapp.ts, utils.ts
└── hooks/ # use-mobile, use-toast
Copyright © 2026. Todos los derechos reservados.