feat: simplify compute and cloud page content

- Streamlined ComputeFeatures and ComputeUseCases to focus on high-level benefits rather than detailed bullet points
- Updated ComputeHero messaging to emphasize deterministic control and self-verification
- Revised CallToAction to clarify deployment vs hosting options
- Added CloudDesign and ComputeCapabilities/ComputeDesign sections to page layouts

src/pages/cloud/CloudPage.tsx

@@ -8,6 +8,7 @@ import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
 import { CloudBluePrint } from './CloudBluePrint'
+import { CloudDesign } from './CloudDesign'
 
 export default function CloudPage() {
   return (
@@ -21,6 +22,10 @@ export default function CloudPage() {
         <CloudHosting />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CloudDesign />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CloudFeatures />
       </AnimatedSection>

src/pages/compute/CallToAction.tsx

@@ -14,14 +14,16 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Get Started Today
+            Choose How You Want to Start
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Run workloads using Mycelium Cloud, or host your own compute node.
+Both use the same deterministic execution fabric.
+
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+              Deploy Workloads
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +32,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Read Docs
+              Host Compute Node
             </Button>
           </div>
         </div>

src/pages/compute/ComputeCapabilities.tsx

@@ -0,0 +1,58 @@
+import {
+  CpuChipIcon,
+  CubeIcon,
+  ServerIcon,
+} from '@heroicons/react/24/solid'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+import { Container } from '../../components/Container'
+
+const capabilities = [
+  {
+    name: 'Containers',
+    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
+    icon: CubeIcon,
+  },
+  {
+    name: 'Virtual Machines',
+    description:
+      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Native Linux Workloads',
+    description:
+      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
+    icon: CpuChipIcon,
+  },
+]
+
+export function ComputeCapabilities() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>CAPABILITIES</Eyebrow>
+          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
+          <P className="mt-6 text-gray-600">
+            Mycelium Compute supports multiple workload types on a single
+            execution fabric.
+          </P>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+            {capabilities.map((feature) => (
+              <div key={feature.name} className="flex flex-col text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
+                </div>
+                <CT className="mt-6 text-gray-900">{feature.name}</CT>
+                <CP className="mt-2 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeDesign.tsx

@@ -0,0 +1,56 @@
+import {
+  ShieldCheckIcon,
+  ArrowPathIcon,
+  RocketLaunchIcon,
+} from '@heroicons/react/24/solid'
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+
+const features = [
+  {
+    name: 'Cryptographically verified deployments',
+    description: 'Every cluster state is signed and checksummed to guarantee truth.',
+    icon: ShieldCheckIcon,
+  },
+  {
+    name: 'Stateless execution that scales anywhere',
+    description: 'Run workloads on any node, region, or edge without manual orchestration.',
+    icon: RocketLaunchIcon,
+  },
+  {
+    name: 'Automatic healing and recovery',
+    description: 'Self-repairing processes ensure workloads stay available and consistent.',
+    icon: ArrowPathIcon,
+  },
+]
+
+export default function ComputeDesign() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl sm:text-center">
+          <Eyebrow>CORE VALUE</Eyebrow>
+          <H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
+          <P className="mt-6 text-gray-600">
+            Every workload runs exactly as declared: no drift, no hidden state, no surprises.
+          </P>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative pl-12">
+                <feature.icon
+                  aria-hidden="true"
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                />
+                <CT className="font-semibold text-gray-900">{feature.name}</CT>
+                <CP className="mt-1 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeFeatures.tsx

@@ -3,52 +3,24 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const featureGroups = [
   {
-    title: 'Deterministic Deployments',
+    title: 'Self-Managing Infrastructure',
     description:
-      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+      'Scaling, healing, and failover happen automatically, no manual intervention.',
-    listTitle: 'Benefits',
-    bullets: [
-      'Cryptographic verification of every workload component',
-      'Zero configuration drift across environments',
-      'Immediate detection of unauthorized changes',
-      'Complete reproducibility for every deployment',
-    ],
   },
   {
-    title: 'Self-Managing & Stateless Infrastructure',
+    title: 'Secure, Stateless Execution',
     description:
-      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
-    listTitle: 'Capabilities',
-    bullets: [
-      'Autonomous operations that self-orchestrate workloads',
-      'Global scaling sewn into the fabric of the platform',
-      'Stateless design removes hardware dependencies',
-      'Self-healing recovery from failures and anomalies',
-    ],
   },
   {
-    title: 'Smart Contract-Based Deployment',
+    title: 'Zero-Image Delivery',
     description:
-      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+      'Deploy workloads using metadata instead of large container images for instant launches.',
-    listTitle: 'Benefits',
-    bullets: [
-      'Every deployment contract cryptographically signed',
-      'Fully auditable, transparent execution of operations',
-      'Tamper-proof orchestration that cannot be rewritten',
-      'Smart contracts automate the entire workload lifecycle',
-    ],
   },
   {
-    title: 'Multi-Workload Compatibility with Secure Boot',
+    title: 'Global Placement Control',
     description:
-      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+      'Choose where workloads run, on your hardware or across the decentralized grid.',
-    listTitle: 'Capabilities',
-    bullets: [
-      'Full compatibility with Kubernetes and Docker workloads',
-      'Securely run virtual machines with attested boot paths',
-      'Native Linux applications verified end-to-end',
-      'Continuous verification maintains trusted execution',
-    ],
   },
 ]
 
@@ -69,6 +41,7 @@ export function ComputeFeatures() {
             the grid.
           </P>
         </div>
+
         <div className="mt-16 grid gap-8 md:grid-cols-2">
           {featureGroups.map((feature) => (
             <div
@@ -77,7 +50,7 @@ export function ComputeFeatures() {
             >
               <div>
                 <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  {feature.listTitle}
+                  Feature
                 </Small>
                 <h3 className="mt-4 text-2xl font-semibold text-gray-900">
                   {feature.title}
@@ -86,17 +59,6 @@ export function ComputeFeatures() {
                   {feature.description}
                 </p>
               </div>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {feature.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>

src/pages/compute/ComputeHero.tsx

@@ -17,19 +17,16 @@ export function ComputeHero() {
       <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
         <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
           <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
-          <H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3>
+          <H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3>
           <P className="mt-6  text-gray-600">
-            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
+            Run workloads on sovereign, self-verifying infrastructure.
-            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+            Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
-          </P>
-          <P className="mt-6  text-gray-600">
-            From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
-            Compute that verifies itself. Expands itself. Heals itself.
           </P>
           <div className="mt-12">
             <Button href="#" variant="solid" color="cyan">
-              Experience Deterministic Compute
+              How it works
             </Button>
+            <Button href="#" variant="outline" color="cyan">Explore Docs</Button>
           </div>
         </div>
       </div>

src/pages/compute/ComputePage.tsx

@@ -8,6 +8,8 @@ import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
 import { ComputeUseCases } from './ComputeUseCases'
 import { ComputeDifferentiators } from './ComputeDifferentiators'
 import { CallToAction } from './CallToAction'
+import { ComputeCapabilities } from './ComputeCapabilities'
+import { ComputeDesign } from './ComputeDesign'
 
 export default function ComputePage() {
   return (
@@ -15,12 +17,24 @@ export default function ComputePage() {
       <AnimatedSection>
         <ComputeHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <ComputeOverview />
+        <ComputeCapabilities />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <ComputeDesign />
+      </AnimatedSection>
+
       <AnimatedSection>
         <ComputeFeatures />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <ComputeOverview />
+      </AnimatedSection>
+
+    
       <AnimatedSection>
         <ComputeZeroImage />
       </AnimatedSection>

src/pages/compute/ComputeUseCases.tsx

@@ -1,72 +1,21 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const primaryUseCases = [
+const useCases = [
   {
     title: 'AI / ML Training',
-    bullets: [
+    description:
-      'Deterministic training pipelines for reproducible experiments.',
+      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
-      'Cryptographically verified model artifacts end-to-end.',
-      'Autonomous scaling for distributed training runs.',
-      'Zero-drift environments that remain consistent over time.',
-    ],
   },
   {
     title: 'Application Hosting',
-    bullets: [
+    description:
-      'Transparent deployments with verifiable execution.',
+      'Private, reliable, self-healing services – without cloud vendor lock-in.',
-      'Auto-scaling that allocates resources on demand.',
-      'Instant global distribution across the ThreeFold Grid.',
-      'Cryptographically secured runtime environments.',
-    ],
   },
   {
-    title: 'Data Processing',
+    title: 'Distributed & Edge Compute',
-    bullets: [
+    description:
-      'Deterministic pipelines that document every transformation.',
+      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
-      'Secure computation with cryptographic verification.',
-      'Auto-scaling resources for fluctuating workloads.',
-      'Global processing placement to minimize latency.',
-    ],
-  },
-  {
-    title: 'Scientific Computing',
-    bullets: [
-      'Reproducible research environments for shared experiments.',
-      'Secure workloads with verifiable execution paths.',
-      'Dynamic scaling for compute-intensive tasks.',
-      'Global collaboration with sovereign resource control.',
-    ],
-  },
-]
-
-const computeSpecific = [
-  {
-    title: 'Deterministic Training Environments',
-    bullets: [
-      'Reproducible ML experiments with identical conditions every run.',
-      'Verifiable computational research for scientific collaboration.',
-      'Auditable financial modelling workflows with traceable outputs.',
-      'Consistent IoT edge processing with predictable performance.',
-    ],
-  },
-  {
-    title: 'Multi-Platform Application Hosting',
-    bullets: [
-      'Kubernetes orchestration with deterministic deployment pipelines.',
-      'Virtual machines launched with hardware-attested secure boot.',
-      'Native Linux workloads with cryptographic assurance.',
-      'Hybrid topologies mixing containers, VMs, and bare metal.',
-    ],
-  },
-  {
-    title: 'Auto-Scaling Workloads',
-    bullets: [
-      'Demand-based scaling that reacts instantly to load.',
-      'Global distribution across the ThreeFold Grid.',
-      'Automated failover that restores services without intervention.',
-      'Cost optimization through intelligent resource allocation.',
-    ],
   },
 ]
 
@@ -87,47 +36,21 @@ export function ComputeUseCases() {
             self-orchestrating so teams can focus on building.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          <div className="space-y-6">
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
-            {primaryUseCases.map((useCase) => (
+          {useCases.map((useCase) => (
-              <div
+            <div
-                key={useCase.title}
+              key={useCase.title}
-                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
-              >
+            >
-                <h3 className="text-xl font-semibold text-white">
+              <h3 className="text-xl font-semibold text-white">
-                  {useCase.title}
+                {useCase.title}
-                </h3>
+              </h3>
-                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+              <p className="mt-3 text-sm leading-relaxed text-gray-200">
-                  {useCase.bullets.map((bullet) => (
+                {useCase.description}
-                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+              </p>
-                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+            </div>
-                      <span>{bullet}</span>
+          ))}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-          <div className="space-y-6">
-            {computeSpecific.map((useCase) => (
-              <div
-                key={useCase.title}
-                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
-              >
-                <h3 className="text-xl font-semibold text-white">
-                  {useCase.title}
-                </h3>
-                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
-                  {useCase.bullets.map((bullet) => (
-                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
-                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
-                      <span>{bullet}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
         </div>
       </Container>
     </section>

src/pages/compute/ComputeUseCasesArchived.tsx

@@ -0,0 +1,135 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const primaryUseCases = [
+  {
+    title: 'AI / ML Training',
+    bullets: [
+      'Deterministic training pipelines for reproducible experiments.',
+      'Cryptographically verified model artifacts end-to-end.',
+      'Autonomous scaling for distributed training runs.',
+      'Zero-drift environments that remain consistent over time.',
+    ],
+  },
+  {
+    title: 'Application Hosting',
+    bullets: [
+      'Transparent deployments with verifiable execution.',
+      'Auto-scaling that allocates resources on demand.',
+      'Instant global distribution across the ThreeFold Grid.',
+      'Cryptographically secured runtime environments.',
+    ],
+  },
+  {
+    title: 'Data Processing',
+    bullets: [
+      'Deterministic pipelines that document every transformation.',
+      'Secure computation with cryptographic verification.',
+      'Auto-scaling resources for fluctuating workloads.',
+      'Global processing placement to minimize latency.',
+    ],
+  },
+  {
+    title: 'Scientific Computing',
+    bullets: [
+      'Reproducible research environments for shared experiments.',
+      'Secure workloads with verifiable execution paths.',
+      'Dynamic scaling for compute-intensive tasks.',
+      'Global collaboration with sovereign resource control.',
+    ],
+  },
+]
+
+const computeSpecific = [
+  {
+    title: 'Deterministic Training Environments',
+    bullets: [
+      'Reproducible ML experiments with identical conditions every run.',
+      'Verifiable computational research for scientific collaboration.',
+      'Auditable financial modelling workflows with traceable outputs.',
+      'Consistent IoT edge processing with predictable performance.',
+    ],
+  },
+  {
+    title: 'Multi-Platform Application Hosting',
+    bullets: [
+      'Kubernetes orchestration with deterministic deployment pipelines.',
+      'Virtual machines launched with hardware-attested secure boot.',
+      'Native Linux workloads with cryptographic assurance.',
+      'Hybrid topologies mixing containers, VMs, and bare metal.',
+    ],
+  },
+  {
+    title: 'Auto-Scaling Workloads',
+    bullets: [
+      'Demand-based scaling that reacts instantly to load.',
+      'Global distribution across the ThreeFold Grid.',
+      'Automated failover that restores services without intervention.',
+      'Cost optimization through intelligent resource allocation.',
+    ],
+  },
+]
+
+export function ComputeUseCases() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Purpose-built for reproducibility, security, and scale.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            From sovereign AI training loops to globally distributed
+            applications, Mycelium Compute keeps environments verifiable and
+            self-orchestrating so teams can focus on building.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          <div className="space-y-6">
+            {primaryUseCases.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="space-y-6">
+            {computeSpecific.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}