/* global React, ReactDOM */ /* /products/atlas — 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 TOUR_ES = [ { key: "dashboard", label: "Dashboard", desc: "Vista ejecutiva de tu postura de seguridad: hallazgos activos por severidad, tendencias, riesgo de identidad y cobertura de compliance en tiempo real." }, { key: "clowdearth", label: "ClowdEarth", desc: "Globo 3D interactivo con la distribución geográfica de todos tus recursos cloud y sus riesgos asociados por región y proveedor." }, { key: "compliance", label: "Compliance", desc: "19 marcos regulatorios incluidos: ENS (requisito legal en España), DORA, CIS Benchmarks, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA y más, con remediación guiada." }, { key: "finops", label: "FinOps", desc: "Oportunidades de ahorro ordenadas por impacto económico: recursos sobredimensionados, instancias idle y análisis pre-despliegue de IaC." }, { key: "inventory", label: "Inventario", desc: "Inventario en tiempo real de todos los recursos en las 5 nubes, con grafo de relaciones y análisis de exposición a internet." }, { key: "clowdai", label: "ClowdAI", desc: "Copiloto de IA integrado: pregunta en lenguaje natural sobre tu postura, recursos y hallazgos — respuestas contextualizadas al instante." }, ]; const TOUR_EN = [ { key: "dashboard", label: "Dashboard", desc: "Executive view of your full security posture: active findings by severity, trends, identity risk and compliance coverage in real time." }, { key: "clowdearth", label: "ClowdEarth", desc: "Interactive 3D globe showing the geographical distribution of all your cloud resources and associated risks by region and provider." }, { key: "compliance", label: "Compliance", desc: "19 built-in frameworks: ENS (legal requirement in Spain), DORA, CIS Benchmarks, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA and more, with guided remediation." }, { key: "finops", label: "FinOps", desc: "Savings opportunities ranked by financial impact: oversized resources, idle instances and IaC pre-deploy analysis." }, { key: "inventory", label: "Inventory", desc: "Real-time inventory of all resources across 5 clouds, with relationship graph and internet exposure analysis." }, { key: "clowdai", label: "ClowdAI", desc: "Built-in AI copilot: ask in natural language about your posture, resources and findings — contextualised answers instantly." }, ]; const FEATURES_ES = [ { icon: "🛡️", title: "CSPM", desc: "Detección continua de misconfiguraciones en recursos cloud sobre los 5 grandes proveedores. Severidad priorizada y remediación paso a paso." }, { icon: "✅", title: "Compliance", desc: "19 marcos: ENS, DORA, CIS, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA y más. Evidencias listas para auditoría con un clic." }, { icon: "💰", title: "FinOps", desc: "Identifica costes evitables antes y después del despliegue. Análisis de IaC integrado para detectar sobredimensionamiento en diseño." }, { icon: "🗂️", title: "Inventario", desc: "Descubrimiento automático de todos tus recursos con grafo de relaciones, exposición a internet y comparativa en el tiempo." }, { icon: "🔑", title: "CIEM", desc: "Gestión de identidades y accesos cloud: detecta privilegios excesivos, credenciales expuestas y rutas de escalada en AWS, Azure y GCP." }, { icon: "🤖", title: "ClowdAI", desc: "Copiloto de IA en lenguaje natural: responde preguntas sobre hallazgos, recursos y tendencias con contexto de tu infraestructura real." }, ]; const FEATURES_EN = [ { icon: "🛡️", title: "CSPM", desc: "Continuous misconfiguration detection across cloud resources on all 5 major providers. Prioritised severity and step-by-step remediation." }, { icon: "✅", title: "Compliance", desc: "19 frameworks: ENS, DORA, CIS, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA and more. Audit-ready evidence with one click." }, { icon: "💰", title: "FinOps", desc: "Identify avoidable costs before and after deployment. Integrated IaC analysis to detect oversizing at design time." }, { icon: "🗂️", title: "Inventory", desc: "Automatic discovery of all your resources with relationship graph, internet exposure analysis and point-in-time comparison." }, { icon: "🔑", title: "CIEM", desc: "Cloud identity and access management: detect excessive privileges, exposed credentials and escalation paths across AWS, Azure and GCP." }, { icon: "🤖", title: "ClowdAI", desc: "Natural-language AI copilot: answers questions about findings, resources and trends with context from your real infrastructure." }, ]; const WHY_ES = [ { num: "5", title: "Nubes en una sola plataforma", desc: "AWS, Azure, GCP, OCI y Alibaba Cloud. Sin cambiar de herramienta, sin silos, con visibilidad unificada desde el primer día." }, { num: "19", title: "Marcos de compliance incluidos", desc: "ENS, DORA, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA, CIS y más — sin licencias adicionales ni integraciones manuales." }, { num: "0", title: "Agentes que desplegar", desc: "Atlas funciona en modo read-only: solo necesitas permisos de lectura en tu cloud. No hay nada que instalar en tus servidores." }, { num: "IA", title: "Copiloto integrado de serie", desc: "ClowdAI responde preguntas en lenguaje natural sobre tu infraestructura real. No es un chatbot genérico: conoce tu entorno." }, ]; const WHY_EN = [ { num: "5", title: "Clouds in a single platform", desc: "AWS, Azure, GCP, OCI and Alibaba Cloud. No tool-switching, no silos, unified visibility from day one." }, { num: "19", title: "Compliance frameworks included", desc: "ENS, DORA, NIS2, ISO 27001, PCI DSS, SOC 2, HIPAA, CIS and more — no extra licences, no manual integrations." }, { num: "0", title: "Agents to deploy", desc: "Atlas works read-only: you only need read permissions in your cloud. Nothing to install on your servers." }, { num: "AI", title: "Built-in copilot as standard", desc: "ClowdAI answers natural-language questions about your real infrastructure. Not a generic chatbot — it knows your environment." }, ]; const CLOUD_BADGES = ["AWS", "Azure", "GCP", "OCI", "Alibaba Cloud", "ENS", "DORA", "NIS2", "ISO 27001", "PCI DSS", "SOC 2", "CIS Benchmarks"]; /* ── Tour component ─────────────────────────────────────────────────────── */ function AtlasTour({ shots }) { const [active, setActive] = useState(0); return (
{shots.map((s, i) => ( ))}
{"Atlas

{shots[active].desc}

); } /* ── Page ───────────────────────────────────────────────────────────────── */ function AtlasPage() { const { theme, setTheme, lang, setLang } = useAppearance(); const isEs = lang === "es"; useEffect(() => { window.gtmEvent('view_atlas'); }, []); const shots = isEs ? TOUR_ES : TOUR_EN; const feats = isEs ? FEATURES_ES : FEATURES_EN; const whys = isEs ? WHY_ES : WHY_EN; return ( <>
Atlas CNAPP

{isEs ? "Seguridad cloud autónoma, impulsada por IA" : "Autonomous cloud security, powered by AI"}

{isEs ? "La plataforma CNAPP de ClowdSecOps que unifica gestión de postura, compliance, FinOps, inventario y CIEM sobre los 5 grandes proveedores cloud — con un copiloto de IA que responde preguntas sobre tu infraestructura en tiempo real." : "ClowdSecOps's CNAPP platform that unifies posture management, compliance, FinOps, inventory and CIEM across all 5 major cloud providers — with an AI copilot that answers questions about your real-time infrastructure."}

5
{isEs ? "Nubes soportadas" : "Clouds supported"}
19
{isEs ? "Marcos de compliance" : "Compliance frameworks"}
0
{isEs ? "Agentes a instalar" : "Agents to install"}
Atlas dashboard

{isEs ? "Tour de la plataforma" : "Platform tour"}

{isEs ? "Explora los módulos de Atlas — haz clic en cada pestaña para ver la interfaz en detalle." : "Explore Atlas modules — click each tab to see the interface in detail."}

{isEs ? "Todo lo que necesitas para cloud security" : "Everything you need for cloud security"}

{isEs ? "Seis módulos integrados en una sola plataforma, sin herramientas adicionales." : "Six modules integrated into a single platform, no additional tools."}

{feats.map(f => (

{f.title}

{f.desc}

))}

{isEs ? "Por qué Atlas" : "Why Atlas"}

{isEs ? "Diferenciadores que importan cuando evalúas una CNAPP para tu organización." : "Differentiators that matter when evaluating a CNAPP for your organisation."}

{whys.map(w => (
{w.num}

{w.title}

{w.desc}

))}

{isEs ? "COMPATIBLE CON" : "COMPATIBLE WITH"}

{CLOUD_BADGES.map(b => {b})}

{isEs ? "¿Listo para ver Atlas en acción?" : "Ready to see Atlas in action?"}

{isEs ? "Solicita una demo con nuestro equipo o accede directamente a la plataforma." : "Request a demo with our team or access the platform directly."}

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