/* global React, ReactDOM */ /* /products/academy — self-contained bundle (shared + page) */ const { useState, useEffect } = React; /* ── Appearance ─────────────────────────────────────────────────────────── */ function applyPersistedAppearance() { const theme = localStorage.getItem("cs_theme") || "dark"; const bg = localStorage.getItem("cs_bg") || "mist"; const display = localStorage.getItem("cs_display") || "apple"; document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-bg", bg); document.documentElement.setAttribute("data-display", display); } applyPersistedAppearance(); function useAppearance() { const [theme, setTheme] = useState(() => localStorage.getItem("cs_theme") || "dark"); const [lang, setLang] = useState(() => localStorage.getItem("cs_lang") || "en"); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("cs_theme", theme); }, [theme]); useEffect(() => { document.documentElement.lang = lang; localStorage.setItem("cs_lang", lang); }, [lang]); return { theme, setTheme, lang, setLang }; } /* ── Icons ──────────────────────────────────────────────────────────────── */ const PIcon = { arrow: () => , external: () => , sun: () => , moon: () => , }; function ThemeToggle({ theme, setTheme }) { const isDark = theme === "dark"; return ( ); } /* ── Nav ────────────────────────────────────────────────────────────────── */ function ProductNav({ lang, setLang, theme, setTheme }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 4); window.addEventListener("scroll", on, { passive: true }); on(); return () => window.removeEventListener("scroll", on); }, []); const t = window.I18N[lang]; return (
ClowdSecOps
window.gtmEvent('book_demo', { source: 'nav' })}> {t.nav.book}
); } /* ── Footer ─────────────────────────────────────────────────────────────── */ function ProductFooter({ lang }) { const t = window.I18N[lang]; return ( ); } /* ── Page data ──────────────────────────────────────────────────────────── */ const ENTERPRISE_ES = { badge: "Para equipos · En preparación", title: "Certifica a tu equipo en ATLAS", sub: "El programa oficial de formación para organizaciones que operan Atlas. Rutas por rol, certificados verificables y seguimiento de progreso para todo el equipo.", items: [ "Rutas de certificación por rol: Security Analyst, Cloud Engineer, Compliance Officer", "Certificados con QR verificable — shareables en LinkedIn", "Panel de administración para seguimiento del equipo completo", "Formación en cloud security, IaC, FinOps y compliance dentro de Atlas", "Integración nativa con el ecosistema ClowdSecOps", ], roles: [ { icon: "\u{1F6E1}️", label: "Security Analyst" }, { icon: "⚙️", label: "Cloud Engineer" }, { icon: "\u{1F4CB}", label: "Compliance Officer" }, { icon: "\u{1F4B0}", label: "FinOps Specialist" }, ], cta: "Unirse a la lista de espera", cta2: "Hablar con el equipo", comingSoon: "Próximamente", }; const ENTERPRISE_EN = { badge: "For teams · Coming soon", title: "Certify your team in ATLAS", sub: "The official training programme for organisations operating Atlas. Role-based tracks, verifiable certificates and progress tracking across your whole team.", items: [ "Role-based certification tracks: Security Analyst, Cloud Engineer, Compliance Officer", "QR-verifiable certificates — shareable on LinkedIn", "Admin panel for full team progress tracking", "Training in cloud security, IaC, FinOps and Atlas compliance", "Native integration with the ClowdSecOps ecosystem", ], roles: [ { icon: "\u{1F6E1}️", label: "Security Analyst" }, { icon: "⚙️", label: "Cloud Engineer" }, { icon: "\u{1F4CB}", label: "Compliance Officer" }, { icon: "\u{1F4B0}", label: "FinOps Specialist" }, ], cta: "Join the waitlist", cta2: "Talk to the team", comingSoon: "Coming soon", }; const PROGRAMS_ES = [ { tier: "Programa", title: "IA Automation Engineer", tagline: "Fundamentos sólidos para automatizar con IA en producción", price: "1.197€", priceNote: "Pago único · Acceso de por vida", featured: false, popular: null, features: [ "3 módulos estructurados · 23 lecciones", "Tutor IA ClowdBot incluido en cada lección", "Proyectos prácticos por módulo", "Gamificación: puntos, badges y leaderboard", "Certificado oficial por módulo completado", "Comunidad y soporte en Discord", ], }, { tier: "Máster", title: "IA Automation Máster", tagline: "El programa completo para convertirte en referente de IA", price: "3.897€", priceNote: "Pago único · Acceso de por vida", featured: true, popular: "Más popular", features: [ "4 módulos completos · 31 lecciones", "Todo lo del programa Engineer", "Módulo avanzado de agentes y orquestación", "Casos de uso reales en entornos enterprise", "Proyecto final con revisión del equipo", "Certificado Máster ClowdAcademy", "Acceso prioritario a nuevos contenidos", ], }, ]; const PROGRAMS_EN = [ { tier: "Programme", title: "AI Automation Engineer", tagline: "Solid foundations for automating with AI in production", price: "€1,197", priceNote: "One-time payment · Lifetime access", featured: false, popular: null, features: [ "3 structured modules · 23 lessons", "AI tutor ClowdBot included in every lesson", "Practical projects per module", "Gamification: points, badges and leaderboard", "Official certificate per completed module", "Community and Discord support", ], }, { tier: "Master", title: "AI Automation Master", tagline: "The complete programme to become an AI automation expert", price: "€3,897", priceNote: "One-time payment · Lifetime access", featured: true, popular: "Most popular", features: [ "4 full modules · 31 lessons", "Everything in Engineer programme", "Advanced agents and orchestration module", "Real-world enterprise use cases", "Final project with team review", "ClowdAcademy Master certificate", "Priority access to new content", ], }, ]; const FEATURES_ES = [ { icon: "\u{1F916}", title: "ClowdBot — Tutor IA", desc: "Asistente de aprendizaje integrado en cada lección. Pregunta dudas sobre el contenido, pide explicaciones alternativas o haz un quiz al final de cada módulo." }, { icon: "\u{1F3C6}", title: "Gamificación real", desc: "Sistema de puntos, badges por logros y leaderboard global. Aprende con la motivación de ver tu progreso y compararte con otros estudiantes." }, { icon: "\u{1F512}", title: "Progreso gated", desc: "El contenido se desbloquea en orden. Cada lección abre la siguiente cuando la completas — para garantizar que aprendes los fundamentos antes de avanzar." }, { icon: "\u{1F4DC}", title: "Certificados por módulo", desc: "Recibes un certificado oficial al completar cada módulo, verificable con QR y compartible en LinkedIn. El Máster incluye además un certificado global del programa." }, ]; const FEATURES_EN = [ { icon: "\u{1F916}", title: "ClowdBot — AI Tutor", desc: "Learning assistant integrated into every lesson. Ask questions about the content, request alternative explanations, or take a quiz at the end of each module." }, { icon: "\u{1F3C6}", title: "Real gamification", desc: "Points system, achievement badges and global leaderboard. Learn with the motivation of seeing your progress and comparing with other students." }, { icon: "\u{1F512}", title: "Gated progress", desc: "Content unlocks in order. Each lesson opens the next when you complete it — to ensure you learn the fundamentals before advancing." }, { icon: "\u{1F4DC}", title: "Certificates per module", desc: "You receive an official certificate upon completing each module, QR-verifiable and shareable on LinkedIn. The Master also includes a global programme certificate." }, ]; const SHOTS_ES = [ { key: "academy-home", label: "Página de inicio", sublabel: "→ assets/academy/academy-home.webp" }, { key: "academy-lesson", label: "Lección + ClowdBot IA", sublabel: "→ assets/academy/academy-lesson.webp" }, { key: "academy-pricing", label: "Precios y programas", sublabel: "→ assets/academy/academy-pricing.webp" }, { key: "academy-achievements", label: "Logros y badges", sublabel: "→ assets/academy/academy-achievements.webp" }, { key: "academy-dashboard", label: "Dashboard del alumno", sublabel: "→ assets/academy/academy-dashboard.webp" }, { key: "academy-catalog", label: "Catálogo de lecciones", sublabel: "→ assets/academy/academy-catalog.webp" }, ]; const SHOTS_EN = [ { key: "academy-home", label: "Home page", sublabel: "→ assets/academy/academy-home.webp" }, { key: "academy-lesson", label: "Lesson + ClowdBot AI", sublabel: "→ assets/academy/academy-lesson.webp" }, { key: "academy-pricing", label: "Pricing & programmes", sublabel: "→ assets/academy/academy-pricing.webp" }, { key: "academy-achievements", label: "Achievements & badges", sublabel: "→ assets/academy/academy-achievements.webp" }, { key: "academy-dashboard", label: "Student dashboard", sublabel: "→ assets/academy/academy-dashboard.webp" }, { key: "academy-catalog", label: "Lesson catalogue", sublabel: "→ assets/academy/academy-catalog.webp" }, ]; /* ── ShotSlot ────────────────────────────────────────────────────────────── */ function ShotSlot({ shot }) { const [hasImg, setHasImg] = useState(true); const src = "/assets/academy/" + shot.key + ".webp"; return (
{hasImg ? {shot.label} setHasImg(false)} /> :
{shot.label} {shot.sublabel}
}
); } /* ── Page ───────────────────────────────────────────────────────────────── */ function AcademyPage() { const { theme, setTheme, lang, setLang } = useAppearance(); const isEs = lang === "es"; useEffect(() => { window.gtmEvent('view_academy'); }, []); const programs = isEs ? PROGRAMS_ES : PROGRAMS_EN; const feats = isEs ? FEATURES_ES : FEATURES_EN; const shots = isEs ? SHOTS_ES : SHOTS_EN; const enterprise = isEs ? ENTERPRISE_ES : ENTERPRISE_EN; return ( <>
{/* Hero */}
ClowdAcademy

{isEs ? "Aprende IA. Certifica a tu equipo." : "Learn AI. Certify your team."}

{isEs ? "La plataforma oficial del ecosistema ClowdSecOps. Para profesionales cloud que quieren dominar la IA Automation y para equipos enterprise que operan Atlas." : "The official ClowdSecOps learning platform. For cloud professionals who want to master AI Automation, and for enterprise teams operating Atlas."}

window.gtmEvent('click_cta', { cta_label: 'go_to_academy', source: 'academy_hero' })}> {isEs ? "Ir a ClowdAcademy" : "Go to ClowdAcademy"} ↗ { window.gtmEvent('book_demo', { source: 'academy_hero' }); window.gtmEvent('generate_lead', { source: 'academy_hero' }); }}> {isEs ? "Hablar con el equipo" : "Talk to the team"}
{/* Enterprise Atlas Certification */}
🎉 {isEs ? "Certificación Oficial ATLAS" : "Official ATLAS Certification"}
{enterprise.roles.map(r => (
{r.icon} {r.label}
))}
{enterprise.comingSoon}
{/* Individual Programs */}

{isEs ? "Elige tu programa" : "Choose your programme"}

{isEs ? "Dos niveles según tus objetivos. Mismo método, diferente profundidad." : "Two levels for different goals. Same method, different depth."}

{programs.map(p => (
{p.popular &&
{p.popular}
}
{p.tier}

{p.title}

{p.tagline}

{p.price}

{p.priceNote}

    {p.features.map(f => (
  • ✓ {f}
    • ))}
{isEs ? "Empezar ahora" : "Start now"} →
))}
{/* Platform Features */}

{isEs ? "Cómo funciona ClowdAcademy" : "How ClowdAcademy works"}

{isEs ? "Aprendizaje guiado, con las mecánicas que mantienen el ritmo de estudio." : "Guided learning with the mechanics that keep your study pace."}

{feats.map(f => (

{f.title}

{f.desc}

))}
{/* Screenshots */}

{isEs ? "La plataforma" : "The platform"}

{isEs ? "Una experiencia de aprendizaje construida para retención real, no para hacer clic en vídeos." : "A learning experience built for real retention, not just clicking through videos."}

{shots.map(s => )}
{/* CTA */}

{isEs ? "¿Listo para empezar?" : "Ready to start?"}

{isEs ? "Accede hoy a ClowdAcademy y empieza con el primer módulo gratis." : "Join ClowdAcademy today and start with the first module free."}

window.gtmEvent('click_cta', { cta_label: 'go_to_academy', source: 'academy_bottom_cta' })}> {isEs ? "Ir a ClowdAcademy" : "Go to ClowdAcademy"} ↗ { window.gtmEvent('book_demo', { source: 'academy_bottom_cta' }); window.gtmEvent('generate_lead', { source: 'academy_bottom_cta' }); }}> {isEs ? "Hablar con el equipo" : "Talk to the team"}
); } ReactDOM.createRoot(document.getElementById("root")).render();