EJEMPLO DE ARQUITECTURA DUAL • WEB + WEBAPP SEPARADAS QUE SE INTEGRAN

GIOPRANA: Página Web Editorial + WebApp Privada de Práctica

Este proyecto demuestra cómo Innocentia Tech diseña dos ecosistemas separados pero unidos por el mismo núcleo: por un lado, una Página Web Informativa Pública de alto impacto visual para contar la historia de la marca, mostrar los 5 pilares, publicar artículos en el blog y presentar programas; y por otro lado, una WebApp Privada independiente a la que ingresan las alumnas y la coach Giovanna Monterrubio para transmitir clases en vivo, ver repeticiones en la videoteca, reservar horarios, procesar pagos y llevar el expediente individual de seguimiento.

IDENTIDAD OFICIAL & ECOSISTEMA DIGITAL5 Pilares

PARTE 1 · FRONT-STAGESitio Web Editorial PúblicoEsencia, Símbolo SVG, 5 Pilares, Programas, Eventos, Blog y Tienda.

PARTE 2 · BACK-STAGEWebApp Privada (Alumna / Coach)Expedientes, Clases En Vivo, Videoteca, Reservas, Pagos y Respiración.

SEPARACIÓN E INTEGRACIÓN DE ENTORNOS

¿Cómo se dividen y cómo se conectan la Web y la WebApp?

Haz clic en cualquier puente de integración para simular el flujo

🌐 1. PÁGINA WEB PÚBLICA (#publicSiteView)Acceso Abierto SEO

Sitio Editorial, Storytelling & Captación Comercial

Diseñado con 4 atmósferas editoriales (Carbón, Marfil #F4F0E7, Oscuro Intermedio y Amanecer) para presentar la filosofía de Giovanna Monterrubio y convertir visitantes en alumnas.

Hero 'Fuerza con Consciencia' con retrato y halo dorado.

Sección Marfil 'Volver a Empezar' + Explorador Interactivo del Símbolo en SVG (6 partes clicables).

Bento de Los 5 Pilares (Movimiento, Nutrición, Meditación, Música y Comunidad).

Experiencias, Programas Híbridos ($1,850 / $3,900 / $980 MXN) y Calendario de Eventos.

Blog Editorial con filtro por pilar y comentarios interactivos en tiempo real.

Catálogo de Equipamiento Oficial y Kit Visual de Marca desplegable.

🔗 PUENTES WEB ↔ APP

📱 2. WEBAPP PRIVADA (#webAppView)● Doble Rol: Alumna & Coach

Plataforma Privada de Seguimiento, Clases En Vivo, Videoteca & Pagos

Al iniciar sesión o reservar desde la Web, se abre la WebApp privada con barra lateral, estadísticas en vivo y cambio instantáneo entre la vista de Alumna y la vista de Coach Giovanna.

⚡ RESPUESTA AUTOMÁTICA EN LA WEBAPP:

La WebApp abre automáticamente el Módulo 03 · Reservas de Clases con la modalidad elegida (Estudio Presencial o Streaming Online) y vincula la cita al expediente de la alumna.

Seguimiento & Expediente por AlumnaSelector de clientas para Giovanna, progreso en los 5 pilares, notas de cuidado articular y bitácora.

Sala En Vivo (Streaming) & Videoteca On-DemandReproductor en vivo con soporte de cámara web, chat en tiempo real y archivo de clases anteriores.

Reservas de Clases (Estudio & Online)Agenda semanal por día y modalidad con confirmación instantánea en el expediente.

Pasarela de Pagos, Membresías & RecibosCobro con Tarjeta, Transferencia SPEI o Recepción en Estudio con historial foliado.

Práctica Interactiva de los 5 PilaresEsfera animada de respiración (4·4·6), audio generativo 432 Hz, checklist de hábitos y mural comunitario.

UNIVERSO DE MARCA, EQUIPAMIENTO & SISTEMA DE DISEÑO