/* global React, Reveal, anime */ const { useEffect, useRef, useState } = React; /* ============================================================ ProductsPage — full product showcase with roles + modules ============================================================ */ const ROLES = [ { id: "proveedor", title: "Proveedor", icon: ( ), color: "#ee5a1f", functions: [ "Branding institucional", "Configuración de logo, colores y fondos de login", "Configuración de años académicos", "Configuración de horarios", ], detail: "El rol Proveedor gestiona la identidad visual de la institución dentro de la plataforma: logo, colores institucionales, fondos de pantalla de login, y la configuración base de años académicos y horarios que heredan todos los demás módulos.", imageSlot: "role-img-proveedor", imageSrc: "assets/proveedor.png", imageFit: "contain", imagePlaceholder: "Captura: panel de branding del proveedor", }, { id: "admin", title: "Admin", icon: ( ), color: "#DD0031", functions: [ "Acceso total a toda la plataforma", "Administración general", "Gestión de usuarios", "Gestión de estructura académica", "Matrí­cula", "Pagos", "Anuncios", "Asistencia", "Almacén", "Salud escolar", "Permisos de administración", ], detail: "El Admin tiene visibilidad y control total sobre todos los módulos. Desde la creación de usuarios y estructura académica hasta pagos, anuncios y salud escolar. Es el superusuario que configura permisos granulares para el resto de roles.", imageSlot: "role-img-admin", imageSrc: "assets/admin.png", imagePlaceholder: "Captura: dashboard del administrador", }, { id: "administracion", title: "Administración", icon: ( ), color: "#3178C6", functions: [ "Operación diaria por módulos", "Acceso segmentado por permisos", "Usuarios ·Estructura académica", "Matrí­cula ·Pagos ·Anuncios", "Asistencia ·Almacén ·Salud escolar", ], detail: "El personal de Administración opera el dí­a a dí­a de la institución con acceso segmentado según los permisos que el Admin le asigne. Puede gestionar matrí­cula, pagos, asistencia, almacén y más sin ver módulos que no le corresponden.", imageSlot: "role-img-administracion", imageSrc: "assets/administracion.png", imagePlaceholder: "Captura: vista de administración operativa", }, { id: "director", title: "Director", icon: ( ), color: "#6DB33F", functions: [ "Visión directiva y reportes", "Gestión de anuncios", "Gestión de años académicos", "Reportes ejecutivos", ], detail: "El Director accede a reportes ejecutivos, puede gestionar los anuncios institucionales y configurar años académicos. Una vista de alto nivel diseñada para la toma de decisiones estratégicas sin ruido operativo.", imageSlot: "role-img-director", imageSrc: "assets/director.png", imagePlaceholder: "Captura: reportes y dashboard del director", }, { id: "docente", title: "Docente", icon: ( ), color: "#646CFF", functions: [ "Ver cursos asignados", "Workspace por curso", "Gestión de notas", "Gestión de asistencia", "Chat con padres", "Anuncios", ], detail: "Cada docente tiene un workspace por curso: gestiona notas, pasa asistencia, publica anuncios para sus alumnos y se comunica directamente con los padres de familia a través del chat integrado en tiempo real.", imageSlot: "role-img-docente", imageSrc: "assets/docente.png", imagePlaceholder: "Captura: workspace del docente con notas y asistencia", }, { id: "estudiante", title: "Estudiante", icon: ( ), color: "#3ECF8E", functions: [ "Ver cursos", "Ver detalle del curso", "Ver notas", "Ver anuncios", ], detail: "Los estudiantes ven sus cursos, notas, anuncios y detalle de cada materia desde la web o la app móvil. Una interfaz limpia y enfocada en lo esencial: su progreso académico.", imageSlot: "role-img-estudiante", imageSrc: "assets/estudiante.png", imagePlaceholder: "Captura: vista del estudiante con cursos y notas", }, { id: "padre", title: "Padre de familia", icon: ( ), color: "#ee5a1f", functions: [ "Seleccionar hijo", "Seguimiento académico", "Matrí­cula (continuidad / nuevo / traslado)", "Ver solicitudes y notas del hijo", "Ver estado de cuenta", "Chat con docentes", "Ver anuncios", ], detail: "Los padres seleccionan a su hijo, ven su progreso académico, gestionan matrí­cula (continuidad, nuevo ingreso o traslado), consultan el estado de cuenta de pensiones y se comunican con los docentes por chat en tiempo real.", imageSlot: "role-img-padre", imageSrc: "assets/padre.png", imagePlaceholder: "Captura: panel del padre con seguimiento y matrí­cula", }, { id: "almacen", title: "Almacén", icon: ( ), color: "orange", functions: [ "Gestión de espacios fí­sicos", "Gestión de bienes y compras", "Operaciones y reportes", "Inventario fí­sico y préstamos", "Mantenimiento y cotizaciones", "Incidencias de compra", ], detail: "El módulo de Almacén gestiona sectores, pabellones, activos, inventario, compras, cotizaciones, préstamos, mantenimiento y firma operativa. Todo vinculado con enfermerí­a para el control de medicamentos.", imageSlot: "role-img-almacen", imageSrc: "assets/almacen.png", imagePlaceholder: "Captura: inventario y gestión de bienes", }, { id: "enfermeria", title: "Enfermerí­a", icon: ( ), color: "#DD0031", functions: [ "Dashboard de salud escolar", "Gestión de tópico", "Incidencias y alertas médicas", "Comunicación con padres", "Medicación y reportes", "Chat con padres y anuncios", ], detail: "Enfermerí­a opera desde su propio dashboard: registra atenciones, accidentes, incidencias y alertas médicas. Gestiona medicación, se comunica con padres por chat y genera reportes de salud escolar con auditorí­a completa.", imageSlot: "role-img-enfermeria", imageSrc: "assets/enfermeria.png", imagePlaceholder: "Captura: dashboard de salud escolar y tópico", }, ]; const MODULES = [ { n: "01", title: "Gestión de Usuarios", desc: "Creación y edición de usuarios con múltiples roles. Relación padre ↔ hijo y control granular por permisos.", color: "#ee5a1f", features: ["Múltiples roles", "Relación padre ↔ hijo", "Control por permisos"], }, { n: "02", title: "Estructura Académica", desc: "Niveles, grados y secciones con visualización tipo árbol. Asignación de alumnos y docentes por sección. Soporte para el avance entre niveles (5 años → 1.º de primaria, 6.º de primaria → 1.º de secundaria).", color: "#3178C6", features: ["Visualización tipo árbol", "Asignación masiva", "Salto entre niveles"], }, { n: "03", title: "Cursos y Horarios", desc: "Creación de cursos con distribución masiva por niveles, grados y secciones. Asignación de docentes, horarios por sección y workspace docente por curso.", color: "#646CFF", features: ["Distribución masiva", "Horarios por sección", "Workspace docente"], }, { n: "04", title: "Matrí­cula", desc: "Ventanas de matrí­cula, solicitudes, matrí­cula manual. Continuidad, nuevo ingreso, traslado y promoción académica en un solo flujo.", color: "#6DB33F", features: ["Continuidad", "Nuevo ingreso", "Traslado", "Promoción"], }, { n: "05", title: "Pagos", desc: "Tipos de matrí­cula, escalas mensuales, validación de pagos y estado de cuenta para padres. Analí­tica y detalle de pagos en tiempo real.", color: "#ee5a1f", features: ["Escalas mensuales", "Validación de pagos", "Analí­tica"], }, { n: "06", title: "Asistencia", desc: "Asistencia administrativa y docente con vistas por curso y contexto académico. Control preciso de la presencia de cada estudiante.", color: "#3ECF8E", features: ["Administrativa", "Docente", "Vistas por curso"], }, { n: "07", title: "Anuncios", desc: "Anuncios segmentados por rol, banners institucionales, inbox por usuario e indicadores visuales de novedades en tiempo real.", color: "#DD0031", features: ["Por rol", "Banners", "Inbox", "Indicadores"], }, { n: "08", title: "Chat en Tiempo Real", desc: "Comunicación directa padre ↔ docente y padre ↔ enfermerí­a. Mensajes privados 1 a 1, unread count, typing indicator, presencia en lí­nea y notificaciones en tiempo real.", color: "#646CFF", features: ["1 a 1 privado", "Typing indicator", "Presencia online", "Notificaciones"], }, { n: "09", title: "Salud Escolar", desc: "Registro de atenciones, accidentes e incidencias. Alertas médicas, medicación, seguimiento a padres, historial completo, reportes y auditorí­a. Integración automática con chat.", color: "#DD0031", features: ["Alertas médicas", "Historial", "Auditorí­a", "Chat integrado"], }, { n: "10", title: "Almacén / Bienes y Compras", desc: "Sectores, pabellones y espacios. Activos e inventario, compras y cotizaciones, movimientos, préstamos, mantenimiento y firma operativa. Ví­nculo con enfermerí­a para medicamentos.", color: "orange", features: ["Inventario fí­sico", "Préstamos", "Cotizaciones", "Ví­nculo enfermerí­a"], }, ]; const IMPLEMENTATION_STEPS = [ { step: "Paso 1", duration: "Dos dias", title: "Configuración", desc: "Configuramos el sistema según las necesidades de tu institución, personalizando módulos, accesos y estructura académica clave.", side: "left", icon: "gear", }, { step: "Paso 2", duration: "Un dia", title: "Capacitación", desc: "Capacitamos a administradores y personal clave para garantizar un uso claro, rápido y ordenado de toda la plataforma.", side: "right", icon: "doc", }, { step: "Paso 3", duration: "Una semana", title: "Acompañamiento", desc: "Acompañamos la salida en vivo durante la primera semana para resolver dudas y asegurar una transición sin fricción.", side: "left", icon: "briefcase", }, ]; /* ── ProductsPageHero ── */ function ProductsPageHero() { const heroRef = useRef(null); const monthlyPrice = 300; const includedStudents = 300; const extraStudentPrice = 1.3; useEffect(() => { const el = heroRef.current; if (!el || typeof window.anime !== "function") return; window.anime({ targets: el.querySelectorAll(".pp-hero-anim"), translateY: [40, 0], opacity: [0, 1], delay: window.anime.stagger(100), duration: 900, easing: "easeOutQuart", }); }, []); return (

La plataforma académica
integral para colegios
modernos.

Con uno de los precios más cómodos del mercado peruano. Desde {" "}S/ {monthlyPrice.toLocaleString("es-PE")} al mes para integrar gestión académica, administración y comunicación institucional en un solo ecosistema.

S/ {monthlyPrice} mensual
{includedStudents} máx alumnos
S/ {extraStudentPrice} por alumno extra
9 roles del sistema
10 módulos integrados
12k+ estudiantes activos
99.97% uptime
Solicitar demo
); } /* ── RolesSection ── */ function ImpactSection() { const points = [ "Control de matrí­cula, pagos y operación escolar en un solo lugar.", "Registro de notas, asistencia y comunicación con padres en tiempo real.", "Menos fricción administrativa y más tiempo para enfocarse en educación.", ]; return (
Efectividad

Mejore el
rendimiento de su
Centro Educativo.

KUI permite a los centros educativos ordenar su gestión, reducir tiempos operativos y fortalecer la comunicación institucional desde una sola plataforma.

{points.map((point) => (
{point}
))}
Cómo funciona Conocer soluciones
); } function BenefitsSection() { const items = [ { title: "Informacion en Tiempo Real", desc: "Padres y directivos pueden acceder rapidamente a calificaciones, asistencia, tareas y eventos importantes.", tone: "blue", icon: "chart", }, { title: "Comunicacion con Docentes", desc: "KUI facilita una comunicacion directa y ordenada entre familias, docentes y administracion.", tone: "mint", icon: "idea", }, { title: "Alerta de Tareas y Notificaciones", desc: "Envio de avisos oportunos sobre tareas, eventos y novedades para mantener informada a toda la comunidad.", tone: "rose", icon: "alert", badge: "", }, { title: "Control de matricula, Pagos y mas", desc: "Matriculas, pagos, notas, asistencias y procesos clave concentrados en una sola plataforma.", tone: "violet", icon: "briefcase", }, ]; return (
Beneficios

KUI en Centros
Educativos.

{items.map((item) => (
{item.badge && {item.badge}}

{item.title}

{item.desc}

 ))}
); } function BenefitIcon({ kind }) { if (kind === "chart") { return ( ); } if (kind === "idea") { return ( ); } if (kind === "alert") { return ( ); } return ( ); } function ImplementationSection() { return (
— implementación

Salimos en vivo
sin complicarte.

Un proceso corto, claro y acompañado para que tu institución empiece a operar con KUI desde primeros dí­as.

Mascota KUI guiando la implementación
); } function ImplementationIcon({ kind }) { if (kind === "gear") { return ( ); } if (kind === "doc") { return ( ); } return ( ); } function RolesSection() { const [active, setActive] = useState(null); const gridRef = useRef(null); const detailRef = useRef(null); useEffect(() => { const el = gridRef.current; if (!el || typeof window.anime !== "function") return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { window.anime({ targets: el.querySelectorAll(".role-card"), translateY: [40, 0], opacity: [0, 1], delay: window.anime.stagger(60), duration: 800, easing: "easeOutQuart", }); io.unobserve(el); } }); }, { threshold: 0.08 } ); io.observe(el); return () => io.disconnect(); }, []); // Animate detail panel on open useEffect(() => { if (active && detailRef.current && typeof window.anime === "function") { window.anime({ targets: detailRef.current, translateY: [30, 0], opacity: [0, 1], duration: 600, easing: "easeOutQuart", }); } }, [active]); const activeRole = ROLES.find((r) => r.id === active); return (
— roles

Un sistema,
nueve roles.

Cada usuario ve exactamente lo que necesita. Permisos granulares, interfaces especializadas y flujos diseñados para cada actor de la comunidad educativa.

{ROLES.map((r, i) => { const isOpen = active === r.id; return (
setActive(isOpen ? null : r.id)} >
{r.icon}
{String(i + 1).padStart(2, "0")}

{r.title}

{isOpen && (
    {r.functions.map((f, j) => (
    • ))}
)}
); })}
{/* Detail panel — appears below grid when a role is selected */} {activeRole && (

Interfaz del {activeRole.title}

{activeRole.detail}

{activeRole.functions.map((f, j) => ( {f} ))}
)}
); } /* ── ModulesSection ── */ function ModulesSection() { const gridRef = useRef(null); useEffect(() => { const el = gridRef.current; if (!el || typeof window.anime !== "function") return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { window.anime({ targets: el.querySelectorAll(".mod-card"), translateY: [50, 0], opacity: [0, 1], delay: window.anime.stagger(70), duration: 900, easing: "easeOutQuart", }); io.unobserve(el); } }); }, { threshold: 0.08 } ); io.observe(el); return () => io.disconnect(); }, []); return (
— módulos

Diez módulos
integrados.

Cada módulo resuelve un problema real de la operación educativa. Todos conectados entre sí­, sin integraciones externas, sin silos.

{MODULES.map((m) => (
{m.n}

{m.title}

{m.desc}

{m.features.map((f, i) => ( {f} ))}
))}
); } /* ── ProductsCTA ── */ function PlansSection() { const [openIdx, setOpenIdx] = useState(0); const whatsappBase = "https://wa.me/51902487635?text="; const plans = [ { name: "Plan Inicial", desc: "Ideal para instituciones que quieren comenzar con gestión ordenada y rápida implementación.", price: "S/ 300", period: "mensuales", note: "Hasta 300 alumnos", featured: true, }, { name: "Plan Crecimiento", desc: "Para colegios que necesitan más capacidad operativa, más usuarios y más personalización.", price: "S/ 1.30", period: "por alumno extra", note: "Escala según matrí­cula", featured: false, }, { name: "Plan Institucional", desc: "Para grupos educativos o instituciones con necesidades avanzadas de operación y acompañamiento.", price: "A medida", period: "cotización directa", note: "Incluye propuesta personalizada", featured: false, }, ]; return (
Precios

Adquiere KUI
desde.

{plans.map((plan, idx) => (

{plan.desc}

{plan.price} / {plan.period}
Obtenerlo
{plan.note}
))}
); } function ProductsCTA() { const [openIdx, setOpenIdx] = useState(0); const faqs = [ { q: "Como ayuda KUI a los colegios a mejorar su gestion administrativa?", a: "KUI ofrece una solucion integral para la administracion escolar. Simplifica matriculas, pagos, asistencia, calificaciones y comunicacion con padres en tiempo real desde una sola plataforma.", }, { q: "KUI es compatible con dispositivos moviles?", a: "Si. KUI funciona en web y se adapta correctamente a dispositivos moviles para que directivos, docentes y familias accedan sin friccion.", }, { q: "Como protege KUI la seguridad de la informacion?", a: "KUI trabaja con control de accesos por rol, trazabilidad operativa y buenas practicas de resguardo para mantener protegida la informacion institucional.", }, ]; return (
Atencion al cliente

Tienes
Consultas?

Soporte KUI 100% capacitado.
Migrar su informacion a nuestro sistema KUI es simple y acompanado.
GRATIS
); } /* Assembled page component */ function ProductsPageFull({ showPlans = false } = {}) { return (
{showPlans ? ( <> ) : ( <> )}
); } Object.assign(window, { ProductsPageFull });