/* global React, ReactDOM, I18N, HeroDiagram, BOOKING_URL */ const { useState, useEffect, useMemo } = React; /* ---------------- Icons ---------------- */ const Icon = { shield: () => , compass: () => , cloud: () => , pipeline: () => , spark: () => , radar: () => , plus: () => , arrow: () => , external: () => , }; const SERVICE_ICONS = [Icon.shield, Icon.compass, Icon.cloud, Icon.pipeline, Icon.spark, Icon.radar]; /* ---------------- Brand stack icons — official logos with auto-fallback ---------------- */ // `src` = direct URL · `slug` = simple-icons slug · `node` = inline JSX · `color` = brand hex (no #) // AWS & Azure use devicon because simple-icons removed them for trademark reasons. // Claude (Anthropic) & MCP use inline SVGs because their official logos aren't on standard CDNs. const CLAUDE_NODE = ( ); const MCP_NODE = ( ); const BRANDS = { "AWS": { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/icons/amazonwebservices/amazonwebservices-original-wordmark.svg", color: "FF9900" }, "Azure": { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/icons/azure/azure-original.svg", color: "0078D4" }, "Google Cloud": { slug: "googlecloud", color: "4285F4" }, "Terraform": { slug: "terraform", color: "844FBA" }, "Kubernetes": { slug: "kubernetes", color: "326CE5" }, "GitHub Actions": { slug: "githubactions", color: "2088FF" }, "GitLab CI": { slug: "gitlab", color: "FC6D26" }, "Docker": { slug: "docker", color: "2496ED" }, "Ansible": { slug: "ansible", color: "EE0000", invertOnDark: true }, "Helm": { slug: "helm", color: "0F1689", invertOnDark: true }, "Prometheus": { slug: "prometheus", color: "E6522C" }, "Datadog": { slug: "datadog", color: "632CA6" }, // AI / LLM row "Claude": { src: "assets/claude-logo.png", color: "D97757" }, "OpenAI": { src: "assets/openai-logo.png", color: "000000", invertOnDark: true }, "MCP": { node: MCP_NODE, color: "2A6FDB", inheritColor: true }, "LangChain": { slug: "langchain", color: "1C3C3C", invertOnDark: true }, "Ollama": { slug: "ollama", color: "000000", invertOnDark: true }, "Hugging Face": { slug: "huggingface", color: "FFD21E" }, }; function FallbackMark({ name, color }) { const initials = name.split(/[\s]/).map(w => w[0]).join("").slice(0, 2).toUpperCase(); return ( {initials} ); } function BrandMark({ name }) { const b = BRANDS[name]; const [failed, setFailed] = useState(false); if (!b) return null; if (b.node) { return ( {b.node} ); } if (failed) return ; const src = b.src || `https://cdn.simpleicons.org/${b.slug}/${b.color}`; return ( {`${name} setFailed(true)} /> ); } /* ---------------- Nav ---------------- */ function ThemeToggle({ theme, setTheme }) { const isDark = theme === "dark"; return ( ); } function Nav({ lang, setLang, t, 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); }, []); return (
ClowdSecOps
{t.nav.book}
); } /* ---------------- Hero ---------------- */ function Hero({ t }) { return (
); } /* ---------------- Stack ---------------- */ function Stack({ t }) { return (
{t.stack.label}
{t.stack.items.map((name) => (
{name}
))}
{t.stack.ai_label}
{t.stack.ai_items.map((name) => (
{name}
))}
); } /* ---------------- Services ---------------- */ function Services({ t }) { return (
{t.services.eyebrow}

{t.services.title}

{t.services.sub}

{t.services.items.map((s, i) => { const IconC = SERVICE_ICONS[i]; return (
{s.num}

{s.title}

{s.partner && ★ {s.partner}}

{s.body}

{s.tags.map((tag) => {tag})}
); })}
); } /* ---------------- Why us ---------------- */ function Why({ t }) { return (
{t.why.eyebrow}

{t.why.title}

{t.why.sub}

{t.why.items.map((w) => (
{w.num}

{w.title}

{w.body}

))}
); } /* ---------------- Process ---------------- */ function Process({ t }) { return (
{t.process.eyebrow}

{t.process.title}

{t.process.sub}

{t.process.steps.map((s) => (
{s.step}

{s.title}

{s.body}

))}
); } /* ---------------- Testimonials ---------------- */ function Testimonials({ t }) { return (
{t.testimonials.eyebrow}

{t.testimonials.title}

{t.testimonials.items.map((c) => (

“{c.quote}”

{c.initials}
{c.name}
{c.role}
))}
); } /* ---------------- FAQ ---------------- */ function FAQ({ t }) { const [open, setOpen] = useState(0); return (
{t.faq.eyebrow}

{t.faq.title}

{t.faq.items.map((it, i) => (
{it.a}
))}
); } /* ---------------- Blog ---------------- */ function Blog({ t }) { return (
{t.blog.eyebrow}

{t.blog.title}

{t.blog.sub}

{t.blog.items.map((p) => (
{t.blog.thumb_label}
{p.tag}·{p.time}

{p.title}

{p.body}

))}
); } /* ---------------- CTA ---------------- */ function CTA({ t }) { return (
{t.cta.eyebrow}

{t.cta.title}

{t.cta.sub}

{t.cta.primary} {t.cta.secondary}
); } /* ---------------- Footer ---------------- */ function Footer({ t }) { return ( ); } /* ---------------- Tweaks ---------------- */ function CSOPSTweaks({ tweaks, setTweak }) { return ( setTweak("theme", v)} options={[ { value: "light", label: "Light" }, { value: "dark", label: "Dark" }, ]} /> setTweak("bg", v)} options={[ { value: "warm", label: "Warm off-white" }, { value: "paper", label: "Pure paper" }, { value: "mist", label: "Cool mist" }, { value: "sage", label: "Sage" }, { value: "sand", label: "Sand" }, { value: "stone", label: "Stone" }, ]} /> setTweak("display", v)} options={[ { value: "apple", label: "Apple (SF Pro)" }, { value: "space", label: "Space Grotesk" }, { value: "bricolage", label: "Bricolage Grotesque" }, { value: "schibsted", label: "Schibsted Grotesk" }, { value: "inter", label: "Inter Tight" }, { value: "instrument", label: "Instrument Serif" }, { value: "fraunces", label: "Fraunces" }, ]} /> ); } /* ---------------- App ---------------- */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "bg": "mist", "display": "apple" }/*EDITMODE-END*/; function App() { const [lang, setLang] = useState(() => localStorage.getItem("cs_lang") || "en"); const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); useEffect(() => { localStorage.setItem("cs_lang", lang); document.documentElement.lang = lang; }, [lang]); useEffect(() => { document.documentElement.setAttribute("data-theme", tweaks.theme || "light"); localStorage.setItem("cs_theme", tweaks.theme || "light"); }, [tweaks.theme]); useEffect(() => { document.documentElement.setAttribute("data-bg", tweaks.bg || "warm"); localStorage.setItem("cs_bg", tweaks.bg || "warm"); }, [tweaks.bg]); useEffect(() => { document.documentElement.setAttribute("data-display", tweaks.display || "space"); localStorage.setItem("cs_display", tweaks.display || "space"); }, [tweaks.display]); const t = useMemo(() => window.I18N[lang], [lang]); return ( <>