feat: update cloud and product page content and visuals

- Simplified cloud messaging to focus on sovereignty and self-healing capabilities
- Updated hero section copy across Cloud, Compute, GPU and Storage pages for clearer value proposition
- Added new CloudHosting component to Cloud page layout
- Changed hero images for GPU and Storage pages to improve visual consistency
- Adjusted layout spacing and typography in Compute hero section
- Streamlined cloud features description to be more concise an

src/pages/cloud/CloudFeatures.tsx

@@ -415,7 +415,7 @@ export function CloudFeatures() {
             A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-           Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold Grid with cryptographic certainty. Networking, storage, and orchestration are all built-in so developers can deploy critical workloads without wrestling infrastructure.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
           </P>
         </div>
       </Container>

src/pages/cloud/CloudHeroNew.tsx

@@ -15,14 +15,15 @@ export function CloudHeroNew() {
              Mycelium Cloud
             </Eyebrow>
             <H3 className="mt-4">
-              Deploy sovereign Kubernetes clusters on decentralized infrastructure.
+              Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
             <H5 className="mt-8 text-lg text-gray-600">
               Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
             </H5>
             <H5 className="mt-4 text-lg text-gray-600">
-              Launch verifiable clusters with nature-inspired networking, quantum-safe storage, and zero-image delivery that keeps every workload deterministic.
-            </H5>
+              Deploy K3s clusters on a global, self-healing mesh network.
+Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
+ </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 to="#"

src/pages/cloud/CloudHosting.tsx

@@ -0,0 +1,65 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: ShieldCheckIcon,
+  },
+]
+
+export function CloudHosting() {
+  return (
+    <div className="relative bg-white py-24 lg:py-32">
+      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
+        <Eyebrow>DEPLOY</Eyebrow>
+        <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
+          giving your data or control to anyone.
+        </P>
+        <div className="mt-16">
+          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudPage.tsx

@@ -6,6 +6,7 @@ import { CloudUseCases } from './CloudUseCases'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
+import { CloudHosting } from './CloudHosting'
 
 export default function CloudPage() {
   return (
@@ -15,6 +16,10 @@ export default function CloudPage() {
         <CloudHeroNew />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CloudHosting />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CloudFeatures />
       </AnimatedSection>

src/pages/compute/ComputeHero.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
 
 export function ComputeHero() {
   return (
@@ -8,22 +9,24 @@ export function ComputeHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt=""
-          src="/images/cloudhero.webp"
-          className="size-full object-cover"
+          src="/images/computehero.webp"
+          className="size-full object-contain"
         />
        
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
-        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
-          <h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
-          <p className="mt-6 text-base/7 text-gray-600">
+      <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>
+          <P className="mt-6  text-gray-600">
             Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
             Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+          </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-8">
+          </P>
+          <div className="mt-12">
             <Button href="#" variant="solid" color="cyan">
               Experience Deterministic Compute
             </Button>

src/pages/gpu/GpuHero.tsx

@@ -9,8 +9,8 @@ export function GpuHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium GPU nebula illustration"
-          src="/images/gpuhero.png"
-          className="size-full object-cover"
+          src="/images/gpuhero2.png"
+          className="size-full object-contain"
         />
       </div>
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">

src/pages/storage/StorageHero.tsx

@@ -9,7 +9,7 @@ export function StorageHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium Storage visual"
-          src="/images/storage4.png"
+          src="/images/computehero11.webp"
           className="size-full object-cover"
         />
       </div>