[CONSEJO — Doc 06] Contrarian: El error más común en landing pages de SaaS es diseñar para el fundador, no para el cliente. El fundador quiere mostrar todas las features. El cliente en 8 segundos quiere saber: "¿Esto resuelve mi problema específico?" Cada landing page de módulo debe empezar con el pain del cliente, no con el nombre del producto. Executor: El MVP del frontend no necesita ser hermoso — necesita convertir. Un formulario de registro que funciona + checkout que no falla + onboarding de 5 pasos que lleva al "momento aha" es suficiente para el mes 1. El diseño se pule con datos de usuarios reales.
1. Stack frontend
- Framework: Next.js 15 + React 19 (App Router)
- Styling: Tailwind CSS + shadcn/ui
- Animaciones: Framer Motion (solo para landing pages, no en portal)
- Analytics: Plausible (privacy-first, self-hosted)
- A/B testing: PostHog feature flags (self-hosted)
- Forms: React Hook Form + Zod validation
- Pagos UI: ONVO Pay hosted checkout (redirect) + Tilopay fallback
2. Mapa de rutas
MindStack.app/
├── / ← Landing principal (suite overview)
├── /stockmind ← Landing StockMind (módulo #1)
├── /salesmind ← Landing SalesMind (módulo #2)
├── /bookmind ← Landing BookMind (módulo #3)
├── /paymind ← Landing PayMind (módulo #4)
├── /precios ← Pricing page con comparador de planes
├── /blog/ ← Blog de contenido (MDX)
│ └── /[slug]
├── /calculadoras/
│ ├── /roi-inventario
│ └── /costo-quiebre-stock
├── /casos-de-exito ← Case studies con ROI
├── /partners/contadores ← Landing del programa CPA
│
├── /registro ← Step 1: email + empresa
├── /onboarding/[modulo] ← Wizard de onboarding por módulo
├── /checkout/[plan] ← Checkout con ONVO Pay
│
├── /dashboard ← Portal del cliente (auth required)
│ ├── / ← Overview de módulos activos
│ ├── /billing ← Facturas, plan, cambio de tier
│ ├── /modules ← Activar/desactivar módulos
│ └── /referidos ← Dashboard de referidos y comisiones
│
└── /app/[modulo] ← Redirección al módulo SaaS específico
3. Landing principal — estructura de conversión
┌────────────────────────────────────────────────────────────┐
│ [NAVBAR] MINDSTACK SUITE [Módulos ▾] [Precios] [Login] │
│ [Empieza Gratis →] │
├────────────────────────────────────────────────────────────┤
│ HERO │
│ H1: "El sistema operativo de tu PyME. │
│ Todo en uno. Sin complicaciones." │
│ │
│ Subtítulo: "Inventario · Ventas · Contabilidad · RRHH │
│ Cuatro módulos. Una sola plataforma. Sin ERP." │
│ │
│ [Empieza gratis 14 días] [Ver demo →] │
│ │
│ [Logos: StockMind · SalesMind · BookMind · PayMind] │
├────────────────────────────────────────────────────────────┤
│ SOCIAL PROOF (por encima del fold) │
│ "Más de X empresas en Costa Rica confían en MindStack" │
│ ⭐⭐⭐⭐⭐ [Testimonial corto de cliente real] │
├────────────────────────────────────────────────────────────┤
│ PROBLEMA (antes de mostrar el producto) │
│ "¿Tu inventario se acaba cuando más lo necesitas?" │
│ "¿Tu planilla te quita 2 días cada quincena?" │
│ "¿No sabes si tu empresa tiene liquidez para el mes?" │
│ → Cada pain tiene su módulo como solución │
├────────────────────────────────────────────────────────────┤
│ MÓDULOS (4 cards con color de marca) │
│ [StockMind Teal] [SalesMind Orange] │
│ [BookMind Green] [PayMind Violet] │
│ Cada card: ícono + benefit principal + CTA │
├────────────────────────────────────────────────────────────┤
│ COMO FUNCIONA (3 pasos) │
│ 1. Elige tu módulo → 2. Importa tus datos → 3. Actúa │
├────────────────────────────────────────────────────────────┤
│ ROI CALCULATOR │
│ "¿Cuánto te cuesta NO tener StockMind?" │
│ [Input: ventas anuales] [Input: % quiebres stock] │
│ → Calcula costo de oportunidad vs precio del plan │
├────────────────────────────────────────────────────────────┤
│ CASO DE ÉXITO │
│ "Ferretería González redujo quiebres de stock 67% │
│ y recuperó $18,000/año en ventas perdidas" │
├────────────────────────────────────────────────────────────┤
│ PRECIOS RESUMEN → ver /precios │
│ Desde $199/mes · Sin contratos · Cancela cuando quieras │
├────────────────────────────────────────────────────────────┤
│ CTA FINAL │
│ "Empieza gratis. 14 días. Sin tarjeta de crédito." │
│ [Email] → [Empieza →] │
└────────────────────────────────────────────────────────────┘
4. Flujo de registro y onboarding
/registro
Step 1: Email + nombre + empresa + país
Step 2: "¿Qué quieres resolver primero?" → Elige módulo
Step 3: Confirmación email
↓
/onboarding/stockmind (ejemplo)
Step 1: "¿Cuántos productos manejas?" → Contexto
Step 2: Importar CSV o conectar ERP → Plantilla descargable
Step 3: Ver clasificación ABC de sus SKUs (el "momento aha")
Step 4: "Tu primera recomendación de orden de compra está lista"
Step 5: "¿Quieres activar el plan? Tu trial vence en 14 días."
↓
/checkout/growth (si elige plan)
Resumen del plan + precio
→ ONVO Pay hosted checkout (redirect)
→ Confirmación → /dashboard
Regla de onboarding: máximo 5 pasos. Si requiere más de 5 acciones para llegar al valor, simplificar el producto, no el wizard.
5. Portal del cliente — dashboard
/dashboard
┌─────────────────────────────────────────────────────────┐
│ Bienvenido, [Nombre]. Tu plan: StockMind Growth │
│ Próxima factura: $349 el 15 de julio │
├──────────┬──────────────────────────────────────────────┤
│ MÓDULOS │ ACTIVIDAD RECIENTE │
│ │ │
│ ✅ StockMind Growth │
│ [Ir al módulo →] │
│ │
│ ⬜ SalesMind │
│ "Agrega SalesMind y ve qué │
│ pedidos de bodega podrías evitar" │
│ [Activar 14 días gratis →] │
│ │
│ ⬜ BookMind ⬜ PayMind │
├─────────────────────────────────────────────────────────┤
│ REFERIDOS: 2 amigos usando MindStack │
│ Crédito ganado: $698 disponible │
│ [Compartir tu link →] │
└─────────────────────────────────────────────────────────┘
Regla de cross-sell en dashboard: mostrar solo el siguiente módulo lógico, nunca los 3 pendientes al mismo tiempo. El orden: StockMind → SalesMind → BookMind → PayMind.
6. Página de precios — best practices de SaaS
- Mostrar plan recomendado resaltado (Growth) — anchoring hacia el plan medio
- Toggle Mensual / Anual con badge "2 meses gratis" bien visible en anual
- Incluir comparador de features con checkmarks — el cliente necesita justificar la decisión
- FAQ debajo de los precios: "¿Puedo cancelar en cualquier momento?", "¿Hay descuento para empresas con varios módulos?", "¿Qué pasa al terminar el trial?"
- Garantía de 30 días explícita — reduce la fricción de la primera compra
Ver también: Doc 07 (SRD Backend — API de suscripciones) · Doc 09 (Motor Core — checkout y billing) · Doc 13 (KPIs — conversion rate por página)