// SVG icons + visual elements for CloudEngine Digital const { useEffect, useState, useRef } = React; const I = { arrow: (p={}) => ( ), check: () => ( ), spark: () => ( ), shield: () => ( ), cube: () => ( ), loop: () => ( ), mail: () => ( ), pin: () => ( ), phone: () => ( ), close: () => ( ), }; // Brand mark — hard-edged "CE" cipher in brand blue. const BrandMark = ({size=30}) => ( ); /* Hero visual — editorial technical schematic. Frames the GPU-cluster + control-plane + lifecycle stack as a single monochrome diagram. Replaces the floating-orb hero entirely. */ const HeroVisual = () => ( ); // Service visuals — one per pillar const StackVisual = () => (
AI Developer EcosystemLAYER 01
PyTorch TensorFlow Ray vLLM Jupyter MLflow W&B Airflow
Control PlaneLAYER 02
Projects Users Quota SSO/LDAP Multi-GPU Multi-Node Partitioning Batch Jobs
Infrastructure ClusterLAYER 03
NVIDIA AMD BeeGFS Ceph / NFS
); const LifecycleVisual = () => { const steps = ['Plan', 'Data', 'Prompt', 'Eval', 'Deploy', 'Operate', 'Monitor', 'Adapt']; return (
LLM LIFECYCLE Plan Operate Evaluate
{['Data','Prompt','Model','Deploy','Monitor','Adapt'].map(s => {s})}
); }; const SecurityVisual = () => (
End Users
AI Gateway
AI Providers
Policy
— Rate limiting — Token authentication — Access policy — AI security policy
Inspection
— DLP policy — Prompt-injection defense — Output sanitization — Plugin control
AISG / GPU
DLPoD
Audit & Alerts
); const DataVisual = () => (
Activation LayerLAYER 01
AI Agents RAG Apps Analytics Dashboards
AI-Ready DatasetsLAYER 02
Validated Reconciled Canonical Versioned
Quality & GovernanceLAYER 03
Catalog Lineage Policy Monitoring
Cloud Data PlatformLAYER 04
Lakehouse Warehouse Streaming Object Store
); Object.assign(window, { I, BrandMark, HeroVisual, StackVisual, LifecycleVisual, SecurityVisual, DataVisual });