// app.jsx — Wipbot landing rework // Audience: padres con hijos. Goal: confianza + claridad operativa + chispa lúdica. const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "wipbot", "heroVariant": "asymmetric", "showRibbon": true, "density": "regular" } /*EDITMODE-END*/; const PALETTES = { wipbot: { name: "Wipbot original", bg: "#F5F1E1", surface: "#FFFFFF", ink: "#0E3B47", inkSoft: "#3D5862", primary: "#1B8FB5", primaryInk: "#FFFFFF", accent: "#F5C518", accentInk: "#0E3B47", pop: "#E85D75", mint: "#3CC9A2", chip: "#EAE3CB" }, ocean: { name: "Océano", bg: "#FAF7F2", surface: "#FFFFFF", ink: "#0E1A2B", inkSoft: "#3D4D63", primary: "#1B3A6B", primaryInk: "#FFFFFF", accent: "#F5C518", accentInk: "#0E1A2B", pop: "#E85D5D", chip: "#EAF1FA" }, sunset: { name: "Atardecer", bg: "#FFF8F1", surface: "#FFFFFF", ink: "#231410", inkSoft: "#5A3F38", primary: "#C8472A", primaryInk: "#FFF8F1", accent: "#1F4F4A", accentInk: "#FFF8F1", pop: "#F5C518", chip: "#FBE9DD" }, forest: { name: "Bosque", bg: "#F4F6F1", surface: "#FFFFFF", ink: "#10211C", inkSoft: "#3B5249", primary: "#1F4F3F", primaryInk: "#F4F6F1", accent: "#E8B339", accentInk: "#10211C", pop: "#D86B3A", chip: "#E4ECDD" } }; // Real assets from wipbot.es CDN (user authorized) const ASSETS = { logo: "assets/wipbot-logo-full.png", hero1: "assets/robotica/index1.webp", hero2: "assets/robotica/index2.webp", lego: "assets/robotica/robotica.webp", steam: "assets/robotica/diverciencia.webp", team: "assets/robotica/mundo-digital.webp", classroom: "assets/nosotros.webp", crea: "assets/crea.webp", aprende: "assets/aprende.webp", comparte: "assets/comparte.webp" }; const PROGRAMS = [ { id: "robotica", name: "Robótica", age: "8 – 16 años", tagline: "Construyen, programan, prueban y vuelven a empezar.", description: "De LEGO® SPIKE a Arduino. Los peques pasan de seguir instrucciones a inventar sus propios robots. Aprenden lógica, mecánica y programación por bloques sin darse cuenta.", bullets: [ "Material LEGO® Education y kits Arduino propios", "Proyectos por trimestre con reto final", "Hasta 16 alumnos por grupo"], duration: "90 min", price: "35€/mes", image: ASSETS.lego, color: "primary" }, { id: "diverciencia", name: "DiverCiencia", age: "6 – 12 años", tagline: "Experimentos reales, manos sucias, mil porqués.", description: "Reacciones químicas, biología, física aplicada. Cada sesión aplica el método científico: hipótesis, experimento y conclusión. Curiosidad pura sin pizarra.", bullets: [ "Sesiones temáticas con material fungible incluido", "Cuaderno de laboratorio personal", "Física, química y biología con el método científico"], duration: "90 min", price: "35€/mes", image: ASSETS.steam, color: "accent" }, { id: "mundo-digital", name: "Mundo Digital", age: "6 – 9 años", tagline: "El ordenador, su primer superpoder.", description: "Para peques de 6 a 9 años que empiezan desde cero. Mecanografía, control del ratón y sistema operativo a través de retos y minijuegos.", bullets: [ "Mecanografía con retos y minijuegos", "Control del ratón y sistema operativo", "Hasta 16 alumnos por grupo"], duration: "75 min", price: "30€/mes", image: ASSETS.team, color: "pop" }]; const STATS = [ { n: "7", suffix: "años", label: "formando peques en el Bajo Aragón" }, { n: "+300", label: "alumnos han pasado por nuestras aulas" }, { n: "16", label: "alumnos máximo por grupo" }, { n: "100%", label: "metodología STEAM activa" }]; const FAQ_ITEMS = [ { q: "¿A qué edades van dirigidas las extraescolares?", a: "Tenemos grupos desde 6 hasta 16 años, separados por edad y nivel. Cada programa indica su rango y, si tienes dudas con un caso concreto, escríbenos por WhatsApp y te ayudamos a colocar a tu hijo/a en el grupo que mejor le encaje." }, { q: "¿Cuándo y dónde son las clases?", a: "De miércoles a jueves por la tarde, a partir de las 15:30, tenemos grupos en muchas localidades. Cada grupo tiene un día fijo a la semana, una sesión de 90 minutos." }, { q: "¿Hay que comprar material o llevar algo?", a: "No. Todo el material —robots, kits, fungibles— está incluido. Solo necesitan ganas. Para Mundo Digital pueden traer su propio portátil si quieren, pero también disponemos de equipos en clase." }, { q: "¿Cómo es una clase típica?", a: "Empezamos con un reto del día, repaso rápido de lo anterior, fase de construcción/experimentación en equipos de 2, puesta en común y limpieza. Sin pizarras eternas: 90% manos a la obra." }, { q: "¿Puedo probar una clase antes de matricular?", a: "Sí. Ofrecemos una clase de prueba gratuita en septiembre y enero. Reserva plaza por WhatsApp y te pasamos los horarios disponibles." }, { q: "¿Hay descuento para hermanos?", a: "Sí, los hermanos tienen descuento en la cuota mensual. También hay descuento si matriculas a tu hijo/a en dos extraescolares distintas." }]; const TESTIMONIALS = [ { text: "Mi hijo lleva yendo desde el primer curso que se imparte aquí, y le encanta.", author: "Celia Calvo", role: "Reseña de Google" }, { text: "Mi hijo de 7 años se ha iniciado en clases extraescolares de robótica este curso y LE HA ENCANTADO. El profe tiene unas ideas fascinantes, se le nota que ama lo que hace y así lo transmite a los peques. Totalmente recomendable.", author: "Miriam Triguero", role: "Reseña de Google" }, { text: "Una experiencia enriquecedora, educativa y divertida para niños y niñas de cualquier edad y nivel de conocimiento. Muchas gracias por abrirles este maravilloso mundo de conocimiento.", author: "Silvia González", role: "Reseña de Google" }]; // ───────────────────────────────────────────────────────────────────────── // UI // ───────────────────────────────────────────────────────────────────────── function Ribbon({ p }) { const [visible, setVisible] = useState(true); if (!visible) return null; const R = (window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.ribbon) || {}; const badge = R.badge || "NOVEDAD"; const text = R.text || "Campus Verano 2026 · plazas limitadas"; const linkText = R.linkText || "Ver campus →"; const linkHref = R.linkHref || "campus.html"; return (
{badge} {text} {linkText}
); } function Nav({ p }) { const [scrolled, setScrolled] = useState(false); const [dropOpen, setDropOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const dropRef = React.useRef(null); const closeTimer = React.useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!mobileOpen) { document.body.style.overflow = ""; return; } document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); }; document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [mobileOpen]); const openDrop = () => { clearTimeout(closeTimer.current); setDropOpen(true); }; const closeDrop = () => { closeTimer.current = setTimeout(() => setDropOpen(false), 120); }; const closeMobile = () => setMobileOpen(false); const linkStyle = { color: p.ink, fontSize: 14, fontWeight: 500, textDecoration: "none", padding: "8px 0", position: "relative" }; const programs = [ { name: "Robótica", href: "robotica.html", color: p.primary, age: "8 – 16 años" }, { name: "DiverCiencia", href: "diverciencia.html", color: p.accent, age: "6 – 12 años" }, { name: "Mundo Digital",href: "mundo-digital.html", color: p.pop, age: "6 – 10 años" }, ]; return ( <>
Wipbot {/* Desktop nav */} {/* Hamburguesa crema pegada al header — visible solo cuando menú cerrado */}
{/* X marino flotante — visible solo cuando menú abierto */} {/* Backdrop — clic fuera cierra. Debajo del drawer, encima del header. */}