Añade onboarding guiado del panel (tour con driver.js)
Tour por pestañas que explica los puntos clave: en Leads recorre la navegación (las pestañas secundarias de pasada) + filtros y tabla; en la ficha del lead el presupuesto/baremo, estado, render y desglose; en Precios el baremo, la mano de obra y el catálogo. Auto-arranca la primera vez por pestaña (flag en localStorage) y deja un botón flotante "❓ Tour" para repetir. Pasos sin elemento visible se descartan (degrada en móvil). - Dependencia: driver.js (librería estándar de tours, ~5kb, sin más deps; evita reinventar overlay/posicionamiento/foco/accesibilidad). - src/lib/onboarding/panel-tour.ts: pasos por ruta. PanelTour.tsx: cliente que lanza driver.js. data-tour en nav, leads, ficha y precios. - Copy en COPY-GUIDE.md (sección "Onboarding del panel"). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -714,6 +714,40 @@ del espacio. `[url]` apunta a su formulario personal del funnel. Tono: una sola
|
||||
|
||||
---
|
||||
|
||||
## Onboarding del panel (tour guiado)
|
||||
|
||||
> Tooltips del tour del panel (driver.js). Tono cercano y útil, una idea por paso, frases cortas. Las pestañas secundarias se explican "de pasada" (una línea). Copy usado en `src/lib/onboarding/panel-tour.ts`.
|
||||
|
||||
### Pestaña Leads (`/panel`)
|
||||
|
||||
- **Intro** — *Tu panel de Reformix* · "Te enseño en 30 segundos qué hay en cada sitio. Puedes saltártelo cuando quieras con la X."
|
||||
- **Leads** — "Aquí caen tus clientes con su presupuesto y su render ya preparados. Es tu día a día."
|
||||
- **Precios y baremo** — "Tu tabla de precios, la mano de obra y el baremo de rentabilidad. De aquí salen los presupuestos."
|
||||
- **Galería** — "Tus fotos de trabajos para enseñar en la web."
|
||||
- **Opiniones** — "Reseñas de tus clientes; las apruebas tú antes de publicarlas."
|
||||
- **Empresa** — "Tu marca, logo y datos de contacto."
|
||||
- **Filtra por estado** — "Nuevos, contactados, presupuestados… para centrarte en lo que toca ahora."
|
||||
- **Tus leads** — "Cada cliente con su estado y su presupuesto. Ábrelo para ver el detalle completo."
|
||||
|
||||
### Ficha del lead (`/panel/{id}`)
|
||||
|
||||
- **Presupuesto estimado** — "Lo que costaría la reforma según tu catálogo. Si no llega a tu baremo, lo verás en rojo."
|
||||
- **Estado del lead** — "Avanza el lead por el funnel: contactado, presupuestado, ganado…"
|
||||
- **Render de la reforma** — "La imagen del «después» que ve tu cliente, generada a partir de su foto y sus gustos."
|
||||
- **Presupuesto desglosado** — "Edita las partidas, recalcula desde el catálogo y envíaselo al cliente por WhatsApp."
|
||||
|
||||
### Precios y baremo (`/panel/precios`)
|
||||
|
||||
- **Baremo de rentabilidad** — "El trabajo mínimo que te compensa. Solo te avisa a ti: marca en rojo los leads por debajo."
|
||||
- **Mano de obra** — "Tus precios de mano de obra por m². El motor los usa para calcular cada presupuesto."
|
||||
- **Tu catálogo** — "Materiales y precios por calidad. Puedes importarlos en bloque por CSV."
|
||||
|
||||
### Botón para repetir
|
||||
|
||||
- **Botón flotante** — "❓ Tour" (relanza el tour de la pestaña actual).
|
||||
|
||||
---
|
||||
|
||||
## Principios aplicados en todo el documento
|
||||
|
||||
1. **Beneficios > Features** — "Tus clientes verán su reforma" > "Render IA con SDXL"
|
||||
|
||||
Reference in New Issue
Block a user