// Trust Portal prototype — single-file React app. // Two views: Public Portal (prospect-facing) and Config (MSP admin). const { useState, useEffect, useRef, useMemo, Fragment } = React; // ── Brand tokens (matches directory prototype) ────────────────────────────── const ASX = { navy: "#071e47", blue: "#0b3885", teal: "#2a9d8f", tealDark: "#238477", lime: "#b8d645", limeContrast: "#9fba3d", ink: "#071e47", muted: "#6b7280", line: "#e5e7eb", bg: "#ffffff", bgSoft: "#f5f7fa", bgMuted: "#f3f4f6", font: "'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", green: "#13C296", greenDark: "#0fa87f", }; // ── Responsive hook ───────────────────────────────────────────────────────── function useIsMobile(bp = 768) { const get = () => typeof window !== "undefined" && window.innerWidth <= bp; const [m, setM] = useState(get); useEffect(() => { const h = () => setM(get()); window.addEventListener("resize", h); return () => window.removeEventListener("resize", h); }, []); return m; } // ── Icons (Lucide-style inline SVGs) ──────────────────────────────────────── const ICON_PATHS = { "shield-check": "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4", "lock": "M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 0110 0v4", "database": "M12 2C6.48 2 2 3.79 2 6v12c0 2.21 4.48 4 10 4s10-1.79 10-4V6c0-2.21-4.48-4-10-4z M2 6c0 2.21 4.48 4 10 4s10-1.79 10-4 M2 12c0 2.21 4.48 4 10 4s10-1.79 10-4", "bar-chart": "M12 20V10 M18 20V4 M6 20v-4", "monitor": "M2 3h20v14H2z M8 21h8 M12 17v4", "alert-circle": "M12 2a10 10 0 100 20 10 10 0 000-20z M12 8v4 M12 16h.01", "alert-triangle": "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z M12 9v4 M12 17h.01", "check-circle": "M22 11.08V12a10 10 0 11-5.93-9.14 M22 4L12 14.01l-3-3", "check-square": "M9 11l3 3L22 4 M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11", "check": "M20 6L9 17l-5-5", "shield": "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", "award": "M12 15a7 7 0 100-14 7 7 0 000 14z M8.21 13.89L7 23l5-3 5 3-1.21-9.12", "hexagon": "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", "star": "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", "chevron-down": "M6 9l6 6 6-6", "chevron-up": "M18 15l-6-6-6 6", "chevron-right": "M9 18l6-6-6-6", "external-link": "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3", "copy": "M20 9h-9a2 2 0 00-2 2v9a2 2 0 002 2h9a2 2 0 002-2v-9a2 2 0 00-2-2z M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", "eye": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 100 6 3 3 0 000-6z", "eye-off": "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24 M1 1l22 22", "download": "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3", "arrow-right": "M5 12h14 M12 5l7 7-7 7", "settings": "M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z M12 8a4 4 0 100 8 4 4 0 000-8z", "globe": "M12 2a10 10 0 100 20 10 10 0 000-20z M2 12h20 M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z", "toggle-right": "M16 5H8a7 7 0 000 14h8a7 7 0 000-14z M16 15a3 3 0 100-6 3 3 0 000 6z", "toggle-left": "M16 5H8a7 7 0 000 14h8a7 7 0 000-14z M8 15a3 3 0 100-6 3 3 0 000 6z", "info": "M12 2a10 10 0 100 20 10 10 0 000-20z M12 16v-4 M12 8h.01", "x": "M18 6L6 18 M6 6l12 12", "home": "M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z M9 22V12h6v10", "message-square": "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z", "layers": "M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5", "book-open": "M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z", "trending-up": "M23 6l-9.5 9.5-5-5L1 18", "clipboard-check": "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2 M9 5a2 2 0 002 2h2a2 2 0 002-2 M9 5a2 2 0 012-2h2a2 2 0 012 2 M9 14l2 2 4-4", "file-stack": "M16 2H8a2 2 0 00-2 2v2 M20 6H10a2 2 0 00-2 2v2 M14 10H4a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2v-8a2 2 0 00-2-2z", "library": "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z", "plug-zap": "M6.3 20.3a2.4 2.4 0 003.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 000 3.4z M2 22l3-3 M7.5 13.5L10 11 M10.5 16.5L13 14 M12 6l6 6 2.3-2.3a2.4 2.4 0 000-3.4l-3.6-3.6a2.4 2.4 0 00-3.4 0z M22 2l-3 3", "building-2": "M6 22V4a2 2 0 012-2h8a2 2 0 012 2v18z M6 12H4a2 2 0 00-2 2v6a2 2 0 002 2h2 M18 9h2a2 2 0 012 2v9a2 2 0 01-2 2h-2 M10 6h4 M10 10h4 M10 14h4 M10 18h4", "users": "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M9 11a4 4 0 100-8 4 4 0 000 8z M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75", "bell": "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 01-3.46 0", "panel-left": "M3 3h18a2 2 0 012 2v14a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2z M9 3v18", "log-out": "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4 M16 17l5-5-5-5 M21 12H9", "user": "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2 M12 11a4 4 0 100-8 4 4 0 000 8z", }; function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.8, style }) { const d = ICON_PATHS[name] || ""; return ( {d.split(" M").map((seg, i) => ( ))} ); } // ── Hex background pattern ────────────────────────────────────────────────── function HexPattern({ opacity = 0.05, stroke = "#071e47", id = "hex-bg" }) { return ( ); } // ── Top Nav ───────────────────────────────────────────────────────────────── function TopNav() { const isMobile = useIsMobile(); const linkStyle = { color: "rgba(255,255,255,0.8)", textDecoration: "none", fontWeight: 400, fontSize: 14 }; return (
Assurix {!isMobile && ( )}
{isMobile ? "Talk to expert" : "Talk to an expert"}
); } // ── Footer ────────────────────────────────────────────────────────────────── function Footer() { const isMobile = useIsMobile(); return ( ); } // ── Trustmark Badge (real image) ──────────────────────────────────────────── function TrustmarkBadge({ size = 120 }) { return ( Assurix Trusted MSP ); } // ── Status Pill ───────────────────────────────────────────────────────────── function StatusPill({ status = "passing", label }) { const colors = { passing: { bg: "#ecfdf5", fg: "#059669", dot: "#10b981" }, warning: { bg: "#fffbeb", fg: "#d97706", dot: "#f59e0b" }, failing: { bg: "#fef2f2", fg: "#dc2626", dot: "#ef4444" }, }; const c = colors[status] || colors.passing; return ( {label || (status === "passing" ? "Passing" : status === "warning" ? "Attention" : "Failing")} ); } // ════════════════════════════════════════════════════════════════════════════ // PUBLIC PORTAL VIEW // ════════════════════════════════════════════════════════════════════════════ function PortalHero({ msp }) { const isMobile = useIsMobile(); return (
{/* Powered by Assurix bar */}
Powered by Assurix
Independently verified
{msp.name}
Verified & Monitored

Trust Centre

{msp.subtitle}

); } function MetricCard({ metric }) { const isMobile = useIsMobile(); const statusColors = { passing: { bg: "#ecfdf5", icon: "#059669" }, warning: { bg: "#fffbeb", icon: "#d97706" }, failing: { bg: "#fef2f2", icon: "#dc2626" }, }; const sc = statusColors[metric.status] || statusColors.passing; return (
{ e.currentTarget.style.boxShadow = "0 4px 20px rgba(7,30,71,0.08)"; e.currentTarget.style.borderColor = "#d1d5db"; }} onMouseLeave={e => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = ASX.line; }} >
{metric.trustmark && ( Trustmark )}
{metric.value}
{metric.label}
{metric.detail}
{metric.target != null && (
Target: {metric.target}{metric.unit === "percentage" ? "%" : ""} | Warn: {metric.warnThreshold}{metric.unit === "percentage" ? "%" : ""} | Fail: {metric.failThreshold}{metric.unit === "percentage" ? "%" : ""}
)}
{metric.trend}
); } function SecurityPosture() { const isMobile = useIsMobile(); const metrics = window.SECURITY_METRICS.filter(m => m.published); const categories = [...new Set(metrics.map(m => m.category))]; return (
{categories.map(cat => (
{cat}
{metrics.filter(m => m.category === cat).map(m => )}
))}
); } function SectionHeader({ title, subtitle }) { return (

{title}

{subtitle && (

{subtitle}

)}
); } function LiveControls() { const isMobile = useIsMobile(); const controls = window.LIVE_CONTROLS; const total = controls.reduce((s, c) => s + c.controls, 0); const passing = controls.reduce((s, c) => s + c.passing, 0); const objectives = [ { key: "A", label: "Organisational Structures, Policies & Processes" }, { key: "B", label: "Protecting Against Cyber Attack" }, { key: "C", label: "Detecting Cyber Security Events" }, { key: "D", label: "Minimising Impact of Incidents" }, { key: "ops", label: "Operational Maturity" }, ]; const groupedControls = objectives.map(obj => ({ ...obj, items: controls.filter(c => obj.key === "ops" ? ["E","F","G","H","I","J"].includes(c.section) : c.section === obj.key ), })).filter(g => g.items.length > 0); return (
{passing} / {total} controls passing
Across {controls.length} categories
{groupedControls.map((group, gi) => (
0 ? "2px solid " + ASX.line : "none", background: ASX.bgSoft, }}> {group.label}
{group.items.map((cat, i) => (
{cat.category}
{cat.passing}/{cat.controls}
))} ))}
); } function PoliciesSection() { const isMobile = useIsMobile(); const policies = window.POLICIES; return (
{policies.map(pol => (
{pol.name}
{pol.summary}
{pol.availability} {pol.downloadable && ( )}
Updated {pol.lastUpdated}
))}
); } function CertificationsSection() { const isMobile = useIsMobile(); const certs = window.CERTIFICATIONS; return (
{certs.map(cert => (
{cert.name}
{cert.status}{cert.expiry ? ` — Expires ${cert.expiry}` : ""}
))}
); } // ── Sub-processors Section ───────────────────────────────────────────────── function SubProcessorsSection() { const isMobile = useIsMobile(); const subs = window.SUBPROCESSORS; return (
{!isMobile && (
Vendor Purpose Certifications Data region
)} {subs.map((sub, i) => (
{sub.name}
{sub.purpose}
{sub.certs.map(cert => ( {cert} ))}
{sub.region}
))}
Full sub-processor register with DPA status available in the Documents section.
); } // ── Gated Documents Section ──────────────────────────────────────────────── function DocumentsSection() { const isMobile = useIsMobile(); const docs = window.GATED_DOCUMENTS; const [requestedIds, setRequestedIds] = useState({}); const handleRequest = (id) => { setRequestedIds(prev => ({ ...prev, [id]: true })); }; return (
{docs.map(doc => (
{doc.name}
{doc.format} — Updated {doc.updated}
{doc.description}
{doc.requiresNda && ( NDA required )} {!doc.requiresNda && } {requestedIds[doc.id] ? ( Request sent ) : ( )}
))}
); } // ── Incident History Section ─────────────────────────────────────────────── function IncidentHistorySection() { const isMobile = useIsMobile(); const data = window.INCIDENT_HISTORY; const maxBarH = 60; return (
{[ { label: "Security incidents (12 months)", value: "0", icon: "shield-check", color: "#059669", bg: "#ecfdf5" }, { label: "Infrastructure uptime", value: data.uptime, icon: "trending-up", color: "#059669", bg: "#ecfdf5" }, { label: "Avg P1 first response", value: data.avgResponseP1, icon: "alert-circle", color: "#059669", bg: "#ecfdf5" }, ].map(stat => (
{stat.value}
{stat.label}
))}
Monthly incident timeline
{data.timeline.slice().reverse().map((m, i) => (
{m.month.split(" ")[0].slice(0, 3)} {m.note && !isMobile && (
)}
))}
{data.timeline.some(m => m.note) && (
{data.timeline.filter(m => m.note).map(m => (
{m.month}: {m.note}
))}
)}
); } // ── Security Responses Section (questionnaire pre-fill) ──────────────────── function SecurityResponsesSection() { const isMobile = useIsMobile(); const categories = window.SECURITY_RESPONSES; const [openCat, setOpenCat] = useState(null); const [copiedQ, setCopiedQ] = useState(null); const [copiedAll, setCopiedAll] = useState(false); const copyText = (text, qId) => { if (navigator.clipboard) { navigator.clipboard.writeText(text); setCopiedQ(qId); setTimeout(() => setCopiedQ(null), 1500); } }; const copyAll = () => { const text = categories.map(cat => `## ${cat.category}\n\n` + cat.questions.map(q => `**Q: ${q.q}**\nA: ${q.a}`).join("\n\n") ).join("\n\n---\n\n"); if (navigator.clipboard) { navigator.clipboard.writeText(text); setCopiedAll(true); setTimeout(() => setCopiedAll(false), 2000); } }; const totalQs = categories.reduce((s, c) => s + c.questions.length, 0); return (
{categories.map((cat, ci) => { const isOpen = openCat === ci; return (
{isOpen && (
{cat.questions.map((item, qi) => { const qId = `${ci}-${qi}`; return (
{item.q}
{item.a}
); })}
)}
); })}
); } // ── Data Residency Section ───────────────────────────────────────────────── function DataResidencySection() { const isMobile = useIsMobile(); const locations = [ { region: "UK South", city: "London", type: "Primary", services: "Compute, storage, identity, email", color: "#059669" }, { region: "UK West", city: "Cardiff", type: "Failover", services: "Geo-redundant backup, DR", color: "#3b82f6" }, ]; const flows = [ { from: "Client endpoints", to: "Azure UK South", protocol: "TLS 1.2+", data: "Telemetry, auth, workloads" }, { from: "Azure UK South", to: "Azure UK West", protocol: "Azure replication", data: "Encrypted backups" }, { from: "Admin access", to: "Azure UK South", protocol: "MFA + PIM + Conditional Access", data: "Management plane" }, ]; return (
{locations.map(loc => (
{loc.region}
{loc.city} — {loc.type}
Services: {loc.services}
))}
Data flow summary
{flows.map((flow, i) => (
{flow.from}
{!isMobile && ( )}
{isMobile && → } {flow.to}
{flow.protocol} {flow.data}
))}
UK data sovereignty commitment. No client data is transferred outside the United Kingdom. International sub-processors (ConnectWise, IT Glue) handle operational metadata only — no client PII or workload data.
); } function PoweredByBar() { return (
Independently verified by Assurix
); } function PublicPortal({ msp }) { return ( ); } // ════════════════════════════════════════════════════════════════════════════ // PLATFORM SHELL (Assurix app layout) // ════════════════════════════════════════════════════════════════════════════ const SIDEBAR_NAV = [ { group: "Main", items: [ { name: "Dashboard", icon: "home" }, { name: "Tasks", icon: "check-square" }, { name: "Alerts", icon: "alert-triangle", badge: 3 }, { name: "Discussions", icon: "message-square" }, ]}, { group: "Compliance", items: [ { name: "Controls", icon: "shield" }, { name: "Frameworks", icon: "layers" }, { name: "Policies", icon: "book-open" }, { name: "Registers", icon: "database" }, { name: "Metrics", icon: "trending-up" }, { name: "Assessments", icon: "clipboard-check" }, { name: "Certificates", icon: "award" }, ]}, { group: "Resources", items: [ { name: "Evidence", icon: "file-stack" }, { name: "Templates", icon: "library" }, ]}, { group: "Platform", items: [ { name: "Integrations", icon: "plug-zap" }, { name: "Organisation", icon: "building-2" }, { name: "Trust Portal", icon: "globe", active: true }, { name: "Documentation", icon: "book-open" }, { name: "Users", icon: "users" }, { name: "Reports", icon: "bar-chart" }, ]}, ]; function PlatformSidebar({ collapsed, onToggle }) { const isMobile = useIsMobile(); const w = collapsed ? 48 : 192; if (isMobile && collapsed) return null; return ( ); } function PlatformHeader({ onToggleSidebar }) { return (
Platform / Trust Portal
); } function PlatformShell({ children }) { const isMobile = useIsMobile(); const [collapsed, setCollapsed] = useState(false); return (
{isMobile && !collapsed && (
setCollapsed(true)} style={{ position: "fixed", inset: 0, zIndex: 999, background: "rgba(0,0,0,0.4)", }} /> )} setCollapsed(c => !c)} />
setCollapsed(c => !c)} />
{children}
); } // ════════════════════════════════════════════════════════════════════════════ // CONFIG VIEW (MSP Admin) — inside platform shell // ════════════════════════════════════════════════════════════════════════════ function ConfigView({ msp }) { const isMobile = useIsMobile(); const [activeTab, setActiveTab] = useState("general"); const [copied, setCopied] = useState(false); const [accessLevel, setAccessLevel] = useState("public"); const [sections, setSections] = useState(() => window.PORTAL_SECTIONS.map(s => ({ ...s }))); const [portalEnabled, setPortalEnabled] = useState(true); const [customDomainEnabled, setCustomDomainEnabled] = useState(false); const [customDomain, setCustomDomain] = useState("trust.downforcetechnologies.com"); const [domainVerified, setDomainVerified] = useState(false); const [metrics, setMetrics] = useState(() => window.SECURITY_METRICS.map(m => ({ ...m }))); const tabs = [ { id: "general", label: "General" }, { id: "branding", label: "Branding" }, { id: "metrics", label: "Metrics" }, { id: "content", label: "Content & visibility" }, ]; const toggleMetricPublished = (id) => { setMetrics(prev => prev.map(m => m.id === id ? { ...m, published: !m.published } : m)); }; const handleCopy = () => { setCopied(true); setTimeout(() => setCopied(false), 2000); }; const setSectionVisibility = (id, visibility) => { setSections(prev => prev.map(s => s.id === id ? { ...s, visibility } : s)); }; return (

Trust Portal

Configure what prospects and customers see on your public trust page.

{/* Tab bar */}
{tabs.map(tab => ( ))}
{/* General tab */} {activeTab === "general" && (
{portalEnabled ? "Trust Portal is live" : "Trust Portal is disabled"}
{portalEnabled ? "Visitors can access your portal at the URL above." : "Visitors will see \"This portal is unavailable\"."}
{/* Custom domain */}
Use a custom domain
Serve your Trust Portal from your own domain instead of trust.uk.assurix.com
{customDomainEnabled && (
{ setCustomDomain(e.target.value); setDomainVerified(false); }} placeholder="trust.yourdomain.com" style={{ ...inputStyle, flex: 1 }} />
DNS configuration
Type CNAME Name {customDomain.split(".")[0] || "trust"} Value portal.assurix.com
Add this CNAME record to your DNS provider. SSL is provisioned automatically once the record is verified.
{domainVerified && (
Domain verified. SSL certificate provisioned. Your portal is live at{" "} https://{customDomain}
)}
)}
)} {/* Branding tab */} {activeTab === "branding" && (
Drop logo here or click to upload
)} {/* Metrics tab */} {activeTab === "metrics" && (
Choose which metrics to publish on your trust portal. Trustmark metrics are part of the Assurix Trusted MSP framework. Unpublished metrics are still tracked internally but hidden from visitors.
{metrics.filter(m => m.published).length} Published {metrics.filter(m => !m.published).length} Hidden | {metrics.filter(m => m.trustmark).length} Trustmark
{["Performance", "Security", "Customer Success"].map(cat => { const catMetrics = metrics.filter(m => m.category === cat); if (catMetrics.length === 0) return null; const catColor = cat === "Security" ? "#059669" : cat === "Performance" ? "#3b82f6" : "#8b5cf6"; return (
{cat} ({catMetrics.length})
{catMetrics.map((m, i) => (
{m.label} {m.trustmark && ( Trustmark )} {m.scope}
{m.detail}
Value: {m.value} {m.target != null && Target: {m.target}{m.unit === "percentage" ? "%" : ""}}
))}
); })}
)} {/* Content & visibility tab */} {activeTab === "content" && (
Control visibility per section — just like LinkedIn profile settings. Public sections are visible to anyone. Under NDA sections require NDA acceptance before viewing. Private sections are hidden from the portal entirely.
{sections.map((sec, i) => { const visColors = { public: { bg: "#ecfdf5", fg: "#059669", icon: "globe", label: "Public" }, nda: { bg: "#fffbeb", fg: "#d97706", icon: "lock", label: "Under NDA" }, private: { bg: "#f3f4f6", fg: "#6b7280", icon: "eye-off", label: "Private" }, }; const vis = visColors[sec.visibility] || visColors.public; return (
{sec.label}
{sec.description}
{[ { id: "public", label: "Public", icon: "globe", color: "#059669" }, { id: "nda", label: "NDA", icon: "lock", color: "#d97706" }, { id: "private", label: "Private", icon: "eye-off", color: "#6b7280" }, ].map((opt, oi) => { const active = sec.visibility === opt.id; return ( ); })}
); })}
{sections.filter(s => s.visibility === "public").length} Public {sections.filter(s => s.visibility === "nda").length} Under NDA {sections.filter(s => s.visibility === "private").length} Private
)}
); } function FieldGroup({ label, children }) { return (
{children}
); } const inputStyle = { width: "100%", padding: "10px 14px", border: "1px solid " + ASX.line, borderRadius: 8, fontSize: 14, fontFamily: ASX.font, color: ASX.navy, outline: "none", boxSizing: "border-box", }; const btnOutline = { background: "#fff", border: "1px solid " + ASX.line, borderRadius: 8, padding: "8px 16px", fontSize: 13, fontWeight: 500, color: ASX.navy, cursor: "pointer", fontFamily: ASX.font, }; // ════════════════════════════════════════════════════════════════════════════ // EMBEDDABLE WIDGET VIEW // ════════════════════════════════════════════════════════════════════════════ function EmbeddableWidget({ msp }) { const metrics = window.SECURITY_METRICS.slice(0, 3); const isMobile = useIsMobile(); const DF = { ink: "#0a1220", navy900: "#0e1b3a", navy800: "#15254b", navy700: "#1f3366", teal: "#0fb8a8", tealDark: "#0a8a7e", paper: "#f7f8fa", fgHi: "#f2f4f8", fgLo: "#a2a6b3", font: "'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }; const trustWidget = (
{msp.name}
Assurix Trusted MSP
All systems verified
Key metrics (last 30 days)
{metrics.map((m, i) => (
{m.label}
{m.detail}
{m.value}
))}
View full Trust Centre Powered by Assurix
); return (
{/* Mock browser chrome */}
trust.downforcetechnologies.com
{/* Mock Downforce website */}
{/* Downforce nav — white bg, sticky-style */} {/* Hero section — dark navy with teal radial wash */}
Trust & security

Every claim independently verified

We hold ourselves to the highest standards. Our security posture is continuously monitored and verified by Assurix.

{/* Page content with embedded widget */}

Our commitment to security

As a managed IT provider for London's regulated firms, security is at the core of everything we do. We continuously monitor and verify our controls through Assurix, an independent third-party platform.

Our Trust Centre gives you real-time visibility into our security posture, certifications, sub-processors, and incident history — no questionnaire needed.

Certifications
{["ISO 27001", "Cyber Essentials Plus", "IASME Cyber Assurance", "Assurix Trusted MSP"].map(c => ( {c} ))}
{trustWidget}
{/* Footer — dark navy with teal gradient top line */}
Downforce Technologies

IT support for London's regulated firms. Independently verified by Assurix.

{!isMobile && ( {[ { title: "Services", items: ["Managed IT", "Cyber Security", "Cloud", "Compliance"] }, { title: "Company", items: ["About", "Trust", "Contact", "Privacy"] }, ].map(col => (
{col.title}
{col.items.map(item => ( {item} ))}
))} )}
© 2026 Downforce Technologies Ltd. Verified by Assurix
); } // ════════════════════════════════════════════════════════════════════════════ // FLOATING VIEW SWITCHER // ════════════════════════════════════════════════════════════════════════════ const VIEWS = [ { id: "portal", label: "Public Portal", icon: "globe", desc: "What prospects see" }, { id: "config", label: "Configuration", icon: "settings", desc: "MSP admin panel" }, { id: "widget", label: "Embed Widget", icon: "monitor", desc: "Website trustmark" }, ]; function ViewSwitcher({ current, onChange }) { const isMobile = useIsMobile(); const [expanded, setExpanded] = useState(false); const currentView = VIEWS.find(v => v.id === current); if (isMobile) { return (
{expanded && (
Prototype views
{VIEWS.map(v => ( ))}
)}
); } return (
Prototype
{VIEWS.map(v => { const active = v.id === current; return ( ); })}
); } // ════════════════════════════════════════════════════════════════════════════ // APP ROOT // ════════════════════════════════════════════════════════════════════════════ function App() { const [view, setView] = useState("portal"); const msp = window.SAMPLE_MSP; useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [view]); if (view === "config") { return ( ); } return (
{view === "portal" && } {view === "widget" && }
); } window.App = App;