fixed build errors

- Created new GpuOverview component showcasing 4 core features of GPU service
- Added responsive grid layout with feature cards displaying icons and descriptions
- Integrated overview section into GpuPage between hero and call-to-action
- Implemented dark theme styling with cyan accents for feature icons
- Added descriptive text explaining unified GPU acceleration across ThreeFold Grid

docs/mycelium_compute_for_devs.md

@@ -0,0 +1,215 @@
+# Mycelium Compute for Developers
+
+*Deterministic Compute Fabric*
+
+## Overview
+
+Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it offers transparent, verifiable computing environments with zero manual intervention.
+
+## Core Concept
+
+Deterministic compute fabric ensures that every workload deploys exactly as intended with cryptographic verification, eliminating tampering and drift while maintaining full operational autonomy.
+
+---
+
+## Core Features
+
+### Deterministic Deployments
+Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.
+
+**Benefits:**
+- **Cryptographic Verification**: Every workload component verified before deployment
+- **No Configuration Drift**: Environments remain exactly as specified
+- **Tamper Detection**: Any unauthorized changes immediately identified
+- **Complete Reproducibility**: Exact same environment every deployment
+
+### Self-Managing & Stateless Infrastructure
+Fully autonomous infrastructure that scales globally without manual intervention.
+
+**Capabilities:**
+- **Autonomous Operations**: No manual intervention required for scaling
+- **Global Scaling**: Infrastructure scales across the ThreeFold Grid
+- **Stateless Design**: No persistent dependencies on specific hardware
+- **Self-Healing**: Automatic recovery from failures and issues
+
+### Smart Contract-Based Deployment
+Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.
+
+**Benefits:**
+- **Cryptographic Signatures**: Every deployment contract cryptographically signed
+- **Transparent Execution**: All operations verifiable and auditable
+- **Tamper-Proof**: Immutable deployment contracts
+- **Automated Orchestration**: Smart contracts manage workload lifecycle
+
+### Multi-Workload Compatibility with Secure Boot
+Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.
+
+**Capabilities:**
+- **Container Support**: Full Kubernetes and Docker compatibility
+- **VM Workloads**: Support for virtual machine deployments
+- **Linux Workloads**: Native Linux application support
+- **Secure Boot**: Hardware-level verification and security
+- **Continuous Verification**: Ongoing integrity checking
+
+---
+
+## Zero-Image Integration
+
+Mycelium Compute integrates with Mycelium Storage's Zero-Image technology for ultra-efficient deployments:
+
+**Benefits:**
+- **Metadata-Only**: Deployments use metadata instead of full artifacts
+- **Instant Startup**: Rapid workload initialization
+- **Bandwidth Optimization**: Minimal transfer requirements
+- **Global Distribution**: Deploy anywhere on ThreeFold Grid
+
+---
+
+## Technical Architecture
+
+### Deterministic Computing
+Mycelium Compute ensures every computational step is predictable and verifiable:
+
+- **Cryptographic Verification**: All computations verified before execution
+- **State Determinism**: Same inputs always produce same outputs
+- **Tamper Resistance**: Any modification detected immediately
+- **Audit Trail**: Complete verification history for all operations
+
+### Stateless Infrastructure
+- **No Persistent State**: Workloads don't depend on specific hardware
+- **Global Distribution**: Compute resources available worldwide
+- **Auto-Scaling**: Automatic resource allocation and scaling
+- **Fault Tolerance**: Automatic failover and recovery
+
+### Zero-Image System
+- **Metadata-Only**: Images represented as metadata, not full artifacts
+- **Instant Deployment**: Rapid workload startup using metadata
+- **Efficient Storage**: Minimal storage requirements for images
+- **Bandwidth Optimization**: Significant reduction in transfer overhead
+
+---
+
+## Developer Experience
+
+### Simple Deployment
+```yaml
+# Basic compute workload
+apiVersion: v1
+kind: Deployment
+metadata:
+  name: deterministic-app
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: deterministic-app
+  template:
+    metadata:
+      labels:
+        app: deterministic-app
+    spec:
+      containers:
+      - name: app
+        image: ubuntu:latest
+        command: ["echo", "Deterministic deployment"]
+```
+
+### Zero-Image Deployment
+```yaml
+# Using zero-image technology
+apiVersion: v1
+kind: Pod
+metadata:
+  name: zero-image-pod
+spec:
+  containers:
+  - name: app
+    image: "zero-image://ubuntu-latest"  # Metadata-only image
+    command: ["echo", "Running on zero-image"]
+```
+
+### Smart Contract Deployment
+```yaml
+# Smart contract orchestrated deployment
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: deployment-contract
+data:
+  contract: |
+    smart_contract:
+      signature: "cryptographically_signed_deployment"
+      workload_spec:
+        image: "ubuntu-latest"
+        replicas: 3
+        verification_hash: "sha256_hash_of_workload"
+```
+
+---
+
+## Use Cases
+
+### AI/ML Training
+- **Deterministic Training**: Reproducible machine learning experiments
+- **Secure Model Deployment**: Cryptographically verified model artifacts
+- **Distributed Training**: Autonomous scaling across compute nodes
+- **Zero-Drift Environments**: Consistent training environments
+
+### Application Hosting
+- **Transparent Deployments**: Verifiable application deployments
+- **Auto-Scaling**: Automatic resource allocation based on demand
+- **Global Distribution**: Deploy applications worldwide instantly
+- **Secure Execution**: Cryptographically verified runtime environments
+
+### Data Processing
+- **Deterministic Pipelines**: Reproducible data processing workflows
+- **Secure Computation**: Verified data transformation operations
+- **Auto-Scaling**: Dynamic resource allocation for processing workloads
+- **Global Processing**: Distribute workloads across ThreeFold Grid
+
+### Scientific Computing
+- **Reproducible Research**: Verifiable computational experiments
+- **Secure Workloads**: Cryptographically verified scientific applications
+- **Auto-Scaling**: Dynamic resource allocation for compute-intensive tasks
+- **Global Collaboration**: Share computational resources worldwide
+
+---
+
+## Compute-Specific Use Cases
+
+### Deterministic Training Environments
+- **Reproducible ML Experiments**: Identical training conditions every time
+- **Scientific Computing**: Verifiable computational research
+- **Financial Modeling**: Auditable risk calculations
+- **IoT Processing**: Consistent edge computing environments
+
+### Multi-Platform Application Hosting
+- **Container Orchestration**: Kubernetes workloads with deterministic deployment
+- **VM Management**: Virtual machines with secure boot verification
+- **Linux Workloads**: Native applications with cryptographic assurance
+- **Hybrid Deployments**: Mix containers, VMs, and bare metal
+
+### Auto-Scaling Workloads
+- **Demand-Based Scaling**: Automatic resource allocation based on load
+- **Global Distribution**: Deploy compute across ThreeFold Grid
+- **Failure Recovery**: Automatic failover and service restoration
+- **Cost Optimization**: Scale resources efficiently
+
+---
+
+## Key Differentiators
+
+### Deterministic Guarantee
+Every computation is cryptographically verified and guaranteed to produce consistent results.
+
+### Autonomous Operations
+Infrastructure manages itself without human intervention, scaling and healing automatically.
+
+### Smart Contract Security
+Workload orchestration through cryptographically signed, tamper-proof contracts.
+
+### Multi-Platform Support
+Run any workload type - containers, VMs, or native Linux applications.
+
+### Secure Boot Verification
+Hardware-level security verification for all deployments.

docs/mycelium_storage_for_devs.md

@@ -0,0 +1,234 @@
+# Mycelium Storage for Developers
+
+*Quantum-Safe, Sovereign Data Plane*
+
+## Overview
+
+Mycelium Storage provides quantum-safe, sovereign data management that protects and places data precisely while keeping access effortless. Built on advanced cryptographic principles and autonomous recovery systems, it ensures data integrity, availability, and sovereignty across global distributed infrastructure.
+
+## Core Concept
+
+Quantum-safe, sovereign data plane protects data beyond the application layer while providing multi-protocol access and geo-aware placement for complete data control and ownership.
+
+---
+
+## Core Features
+
+### Quantum-Safe Storage (QSS)
+Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.
+
+**Benefits:**
+- **Beyond AES-256**: Quantum-resistant encryption algorithms
+- **Multi-Layer Protection**: Data secured beyond application level
+- **Future-Proof**: Protected against current and future quantum threats
+- **Complete Ownership**: Data control and sovereignty maintained
+
+### Self-Healing Storage System
+Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.
+
+**Capabilities:**
+- **Instant Recovery**: Automatic detection and repair of failures
+- **Integrity Preservation**: Data integrity maintained during recovery
+- **Autonomous Operation**: No manual intervention required
+- **Corruption Healing**: Automatic detection and repair of data corruption
+
+### Multi-Protocol Data Access
+Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.
+
+**Protocol Support:**
+- **IPFS**: Decentralized, content-addressed storage
+- **S3**: Amazon S3 compatible API for existing tools
+- **WebDAV**: Web-based file access and synchronization
+- **HTTP**: Direct API access for web applications
+- **Native File Systems**: Standard POSIX file system access
+
+### Geo-Aware Data Placement & Replication
+Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.
+
+**Features:**
+- **Data Residency**: Choose where data physically resides
+- **Custom Redundancy**: Define replication levels per workload
+- **Zone-to-Zone Replication**: Automatic cross-zone data replication
+- **Geographic Distribution**: Global data placement across ThreeFold Grid
+
+### Ultra-Efficient Zero-Images (Flists)
+Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.
+
+**Benefits:**
+- **100x Size Reduction**: Dramatic reduction in image sizes
+- **Metadata-Only**: Images represented as metadata, not full artifacts
+- **Zero-OS Support**: Instant deployment of operating systems
+- **Bandwidth Efficiency**: Minimal transfer requirements
+
+---
+
+## Technical Architecture
+
+### Quantum-Safe Data Protection
+- **Post-Quantum Encryption**: Algorithms resistant to quantum computing attacks
+- **Beyond Application Layer**: Protection at infrastructure level
+- **Cryptographic Verification**: All storage operations verified
+- **Future-Proof Security**: Designed for long-term data protection
+
+### Autonomous Self-Healing
+- **Continuous Monitoring**: 24/7 detection of failures and corruption
+- **Instant Recovery**: Automatic repair without service interruption
+- **Data Integrity**: Ongoing verification of all stored data
+- **Zero Intervention**: Complete autonomous operation
+
+### Multi-Protocol Access
+```
+Application → Protocol Adapter → Mycelium Storage → Data Nodes
+```
+
+### Geo-Aware Data Governance
+- **Sovereignty Control**: Choose specific jurisdictions for data residency
+- **Custom Redundancy**: Define replication levels per workload
+- **Zone Replication**: Automatic cross-zone data synchronization
+- **Global Distribution**: Deploy data across ThreeFold Grid worldwide
+
+---
+
+## Developer Experience
+
+### S3-Compatible Access
+```python
+# Using S3-compatible API
+import boto3
+
+# Initialize S3 client
+s3_client = boto3.client(
+    's3',
+    endpoint_url='https://storage.mycelium.com',
+    aws_access_key_id='your_access_key',
+    aws_secret_access_key='your_secret_key'
+)
+
+# Upload file
+s3_client.upload_file('local_file.txt', 'my-bucket', 'remote_file.txt')
+
+# Download file
+s3_client.download_file('my-bucket', 'remote_file.txt', 'downloaded_file.txt')
+```
+
+### WebDAV Access
+```bash
+# Mount WebDAV storage
+mount -t davfs https://storage.mycelium.com/dav /mnt/storage
+
+# Access files normally
+cp /mnt/storage/data.txt ./
+echo "Data updated" > /mnt/storage/updated.txt
+```
+
+### IPFS Integration
+```python
+# Using IPFS for decentralized access
+import ipfshttpclient
+
+# Connect to IPFS
+client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
+
+# Add file to IPFS
+res = client.add('data.txt')
+
+# Access file via IPFS hash
+print(f"File available at: {res['Hash']}")
+```
+
+### Geo-Aware Configuration
+```yaml
+# Data placement configuration
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: storage-config
+data:
+  placement: |
+    geo_aware_storage:
+      residency: "eu-west"
+      redundancy: 3
+      zones:
+        - "zone-1"
+        - "zone-2" 
+        - "zone-3"
+      protocols:
+        - "s3"
+        - "ipfs"
+        - "webdav"
+```
+
+---
+
+## Use Cases
+
+### Data Sovereignty Applications
+- **Privacy-First Applications**: Complete control over user data location
+- **Regulatory Compliance**: Ensure data stays in specific jurisdictions
+- **Enterprise Data**: Keep sensitive data in preferred locations
+- **DigitalMe Applications**: Self-hosted services with full data control
+
+### Multi-Protocol Applications
+- **Legacy System Integration**: Support multiple access protocols simultaneously
+- **Hybrid Applications**: Combine centralized and decentralized storage
+- **Developer Flexibility**: Choose protocol based on application needs
+- **Migration Scenarios**: Gradual migration from traditional storage
+
+### Backup and Recovery
+- **Autonomous Backup**: Self-healing storage with automatic recovery
+- **Cross-Zone Replication**: Automatic data replication across zones
+- **Integrity Verification**: Continuous verification of backup integrity
+- **Instant Recovery**: Rapid restoration from storage failures
+
+### Content Distribution
+- **Global CDN**: Distribute content across ThreeFold Grid worldwide
+- **IPFS Integration**: Decentralized content addressing
+- **Multi-Protocol Access**: Serve content via HTTP, S3, WebDAV
+- **Geo-Optimization**: Place content near users for optimal performance
+
+---
+
+## Storage-Specific Use Cases
+
+### Data Sovereignty & Compliance
+- **Regulatory Requirements**: Ensure data stays in specific jurisdictions
+- **Privacy-First Applications**: Complete control over personal data location
+- **Enterprise Data Governance**: Keep sensitive business data in controlled regions
+- **Cross-Border Compliance**: Navigate international data regulations
+
+### Multi-Protocol Data Solutions
+- **Legacy System Integration**: Support existing S3, WebDAV, and HTTP workflows
+- **Decentralized Applications**: IPFS integration for blockchain and Web3 projects
+- **Hybrid Storage**: Combine centralized and decentralized access patterns
+- **Developer Flexibility**: Choose protocols based on application requirements
+
+### Autonomous Backup & Recovery
+- **Self-Healing Backups**: Storage automatically maintains backup integrity
+- **Cross-Zone Resilience**: Automatic replication across geographic zones
+- **Instant Recovery**: Rapid restoration from storage failures
+- **Continuous Verification**: Ongoing integrity checking without intervention
+
+### Content Distribution & CDN
+- **Global Content Delivery**: Distribute content across ThreeFold Grid worldwide
+- **IPFS Integration**: Decentralized content addressing and access
+- **Multi-Protocol Serving**: Serve same content via HTTP, S3, WebDAV
+- **Geo-Optimized Placement**: Position content near end users
+
+---
+
+## Key Differentiators
+
+### Quantum-Safe Protection
+Data protected with encryption algorithms resistant to quantum computing threats.
+
+### Autonomous Self-Healing
+Storage manages itself with automatic detection, recovery, and verification.
+
+### Universal Protocol Support
+Same data accessible via IPFS, S3, WebDAV, HTTP, and native file systems.
+
+### Geo-Aware Data Governance
+Complete control over data placement, residency, and replication.
+
+### Ultra-Efficient Storage
+Zero-Image technology reduces storage requirements by 100x.

src/components/Button.tsx

@@ -17,6 +17,7 @@ const variantStyles = {
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
+    cyan: 'border-cyan-500 text-cyan-500 hover:bg-cyan-50',
     gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
     white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
   },
@@ -29,7 +30,7 @@ type ButtonProps = (
     }
   | {
       variant: 'outline'
-      color?: keyof typeof variantStyles.outline
+      color?: (keyof typeof variantStyles.outline) | 'cyan'
     }
 ) &
   (

src/components/magicui/bento-grid.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
-import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
-import { ArrowRightIcon } from "@radix-ui/react-icons";
 import { cn } from "@/lib/utils";
 
 const BentoGrid = ({
@@ -64,12 +63,13 @@ const BentoCard = ({
         "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
       )}
     >
-      <Button variant="ghost" asChild size="sm" className="pointer-events-auto">
+      <a
-        <a href={href}>
+        href={href}
-          {cta}
+        className="pointer-events-auto inline-flex items-center gap-2 text-sm font-medium text-neutral-600 transition-colors hover:text-sky-700"
-          <ArrowRightIcon className="ml-2 h-4 w-4" />
+      >
-        </a>
+        {cta}
-      </Button>
+        <ArrowRight className="h-4 w-4" />
+      </a>
     </div>
   </div>
 );

src/components/ui/Dropdown.tsx

@@ -34,7 +34,7 @@ export function Dropdown({ buttonContent, items }: DropdownProps) {
           <div className="py-1">
             {items.map((item) => (
               <Menu.Item key={item.href}>
-                {({ active }) => (
+                {({ active }: { active: boolean }) => (
                   <Link
                     to={item.href}
                     className={`

src/pages/agents/AgentsPage.tsx

@@ -1,5 +1,4 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { AgentsHero } from './AgentsHero'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'

src/pages/cloud/CloudArchitecture.tsx

@@ -0,0 +1,92 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Decentralized Infrastructure',
+    description:
+      'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
+    bullets: [
+      'Unique Mycelium IP addresses assigned to every node.',
+      'Peer-to-peer mesh networking links services across nodes.',
+      'End-to-end encryption keeps traffic sealed inside the fabric.',
+      'No public IP exposure—everything is addressable via Mycelium IPs.',
+    ],
+  },
+  {
+    title: 'Network Flow',
+    description:
+      'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
+    bullets: [
+      'User requests enter through the encrypted Mycelium network.',
+      'Traffic routes directly to cluster nodes without intermediate hops.',
+      'Services answer over the same mesh—no ingress controller required.',
+      'Operational visibility without exposing public attack surface.',
+    ],
+  },
+  {
+    title: 'Kubernetes Management',
+    description:
+      'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
+    bullets: [
+      'Full K3s deployment and lifecycle management built-in.',
+      'IPv6-native networking ensures deterministic service discovery.',
+      'Multi-master topologies with automatic failover for resilience.',
+      'Drift-free upgrades orchestrated through smart contracts.',
+    ],
+  },
+]
+
+export function CloudArchitecture() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Built on a sovereign, encrypted delivery mesh.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
+            networking with deterministic K3s orchestration. Every layer is
+            designed to keep workloads sovereign, observable, and effortless to
+            operate.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center gap-3">
+                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
+                  •
+                </span>
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {section.title}
+                </h3>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudCTA.tsx

@@ -7,13 +7,16 @@ export function CloudCTA() {
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
           <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-            Ready Today
+            Launch Today
           </p>
           <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+            Put sovereign Kubernetes into production on the ThreeFold Grid.
           </h2>
           <p className="mt-6 text-lg text-gray-600">
-            Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
+            Provision multi-master clusters, integrate quantum-safe storage, and
+            expose services worldwide without leaving the Mycelium mesh. Our
+            team will help you launch deterministic workloads that stay private,
+            compliant, and always-on.
           </p>
           <div className="mt-10 flex justify-center">
             <Button

src/pages/cloud/CloudFeatures.tsx

@@ -0,0 +1,125 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureSections = [
+  {
+    title: 'Mycelium Networking',
+    description:
+      'Ultra-fast, decentralized networking inspired by nature to keep services reachable without exposing surfaces.',
+    bullets: [
+      'End-to-end encrypted mesh connectivity between every node.',
+      'Direct node communication without centralized intermediaries.',
+      'Self-optimizing routes that heal around failures automatically.',
+      'Secure peer-to-peer communication across the entire grid.',
+    ],
+  },
+  {
+    title: 'Zero-Image Technology',
+    description:
+      'Metadata-first zero-images shrink artifacts up to 100x, reducing deployment time and bandwidth.',
+    bullets: [
+      'Deterministic deployments verified cryptographically.',
+      'Run containers, VMs, and Linux workloads with secure boot.',
+      'Smart contract orchestration manages every workload lifecycle.',
+      'Minimal artifact footprint accelerates delivery everywhere.',
+    ],
+  },
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer for complete ownership.',
+    bullets: [
+      'Self-healing storage recovers instantly from corruption or failure.',
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native FS.',
+      'Geo-aware placement enforces residency and redundancy policies.',
+      'Autonomous replication keeps data resilient across the globe.',
+    ],
+  },
+  {
+    title: 'Multi-Master Clusters',
+    description:
+      'High-availability Kubernetes with automatic failover and leadership orchestration.',
+    bullets: [
+      'Multi-master topologies orchestrated with zero downtime.',
+      'Automatic failover keeps control planes healthy and responsive.',
+      'HA operations managed without manual intervention or scripts.',
+      'Upgrades roll out seamlessly with continuous verification.',
+    ],
+  },
+  {
+    title: 'Effortless Load Balancing & Scaling',
+    description:
+      'Adaptive automation balances traffic and scales workloads based on demand.',
+    bullets: [
+      'Built-in autoscaling that responds to real-time usage.',
+      'Native load balancing distributes traffic globally.',
+      'High availability delivered without custom controllers.',
+      'Elastic scaling keeps costs aligned with workload demand.',
+    ],
+  },
+  {
+    title: 'Simple Web Gateway Access',
+    description:
+      'Expose services to the public web with declarative Kubernetes resources.',
+    bullets: [
+      'One resource publishes services without complex ingress rules.',
+      'Domain and prefix-based routing built into the platform.',
+      'No need to manage dedicated ingress controllers.',
+      'Consistent configuration across every cluster and region.',
+    ],
+  },
+]
+
+export function CloudFeatures() {
+  return (
+    <section className="bg-gray-50 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Infrastructure that verifies, heals, and scales itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            From mesh networking to quantum-safe storage, every capability in
+            Mycelium Cloud is designed for sovereign control and autonomous
+            operations—so your teams focus on shipping workloads instead of
+            wiring infrastructure.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
+          {featureSections.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Capability
+                </Small>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {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 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudGettingStarted.tsx

@@ -0,0 +1,138 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+type Step = {
+  number: string
+  title: string
+  description: string
+  bullets: string[]
+  codes?: string[]
+}
+
+const steps: Step[] = [
+  {
+    number: '01',
+    title: 'Account Setup',
+    description: 'Create and prepare your Mycelium Cloud account.',
+    bullets: [
+      'Sign up through the Mycelium Cloud portal and verify your email.',
+      'Add credits in the dashboard so resources can be provisioned.',
+      'Upload your SSH public key to enable secure node access.',
+    ],
+  },
+  {
+    number: '02',
+    title: 'Deploy Your First Cluster',
+    description:
+      'Use the dashboard to define topology, resources, and deployment targets.',
+    bullets: [
+      'Open the Deploy Cluster workflow from your dashboard.',
+      'Choose CPU, memory, and storage for master and worker nodes.',
+      'Select ThreeFold Grid nodes that match your residency policies.',
+      'Review the configuration and launch the cluster.',
+    ],
+  },
+  {
+    number: '03',
+    title: 'Access Your Cluster',
+    description:
+      'Connect through kubeconfig and the Mycelium mesh to manage workloads.',
+    bullets: [
+      'Download the kubeconfig from the Clusters view and export `KUBECONFIG`.',
+      'Validate connectivity with `kubectl get nodes`.',
+      'Install the Mycelium client and join the provided peer list.',
+      'SSH directly to each node over its assigned Mycelium IP address.',
+    ],
+    codes: [
+      `export KUBECONFIG=/path/to/config
+kubectl get nodes`,
+      `wget https://github.com/threefoldtech/mycelium/releases/latest/download/mycelium-private-x86_64-unknown-linux-musl.tar.gz
+tar -xzf mycelium-private-x86_64-unknown-linux-musl.tar.gz
+sudo chmod +x mycelium-private
+sudo mv mycelium-private /usr/local/bin/mycelium`,
+      `sudo mycelium --peers \\
+  tcp://188.40.132.242:9651 \\
+  tcp://136.243.47.186:9651 \\
+  tcp://185.69.166.7:9651 \\
+  tcp://185.69.166.8:9651 \\
+  tcp://65.21.231.58:9651 \\
+  tcp://65.109.18.113:9651 \\
+  tcp://209.159.146.190:9651 \\
+  tcp://5.78.122.16:9651 \\
+  tcp://5.223.43.251:9651 \\
+  tcp://142.93.217.194:9651`,
+    ],
+  },
+]
+
+export function CloudGettingStarted() {
+  return (
+    <section
+      id="getting-started"
+      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Getting Started
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Launch, connect, and operate in three steps.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Follow the workflow from account creation to mesh connectivity.
+            You&rsquo;ll have a production-ready K3s cluster running on the
+            ThreeFold Grid in minutes.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-3">
+          {steps.map((step) => (
+            <div
+              key={step.title}
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+            >
+              <div className="flex items-center justify-between">
+                <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
+                  {step.number}
+                </Small>
+                <span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
+                  Go
+                </span>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold text-white">
+                {step.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {step.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-300">
+                {step.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+              {step.codes && (
+                <div className="mt-6 space-y-4">
+                  {step.codes.map((code) => (
+                    <pre
+                      key={code}
+                      className="overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100"
+                    >
+                      <code>{code}</code>
+                    </pre>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudHero.tsx

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()
@@ -78,20 +79,36 @@ export function CloudHero() {
       <Container>
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
+            <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
               Mycelium Cloud
-            </h1>
+            </Eyebrow>
-            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+            <SectionHeader as="h1" className="mt-6 text-gray-900">
-              Own every workload with certainty.
+              Deploy sovereign Kubernetes clusters on decentralized
-            </h2>
+              infrastructure.
-            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
+            </SectionHeader>
-              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
+            <P className="mt-6 text-gray-600">
-            </p>
+              Mycelium Cloud turns the ThreeFold Grid into a programmable
-            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              substrate for K3s. Launch verifiable clusters with nature-inspired
-              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
+              networking, quantum-safe storage, and zero-image delivery that
-                Start Deployment
+              keeps every workload deterministic.
+            </P>
+            <P className="mt-6 italic text-gray-500">
+              Developer guide to decentralized cloud computing.
+            </P>
+            <div className="mt-10 flex flex-wrap gap-4">
+              <Button
+                to="https://myceliumcloud.tf"
+                as="a"
+                variant="solid"
+                color="cyan"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Launch a Cluster
+              </Button>
+              <Button to="#getting-started" as="a" variant="outline" color="cyan">
+                View Getting Started
               </Button>
-              
             </div>
           </div>
           <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

src/pages/cloud/CloudHeroAlt.tsx

@@ -21,12 +21,8 @@ export function CloudHeroAlt() {
              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/cloud/CloudOverview.tsx

@@ -1,61 +1,78 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const focusAreas = [
   {
-    title: 'Sovereign by Design',
+    label: 'Overview',
+    title: 'Decentralized Kubernetes on the ThreeFold Grid',
     description:
-      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+      'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
   },
   {
-    title: 'Secure by Default',
+    label: 'Core Concept',
+    title: 'Sovereign, self-managing operations',
     description:
-      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+      'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
   },
   {
-    title: 'Ready to Scale',
+    label: 'Developer Experience',
+    title: 'K3s-native workflows with full control',
     description:
-      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+      'Provision multi-master clusters, govern residency, and observe node health from a single programmable control plane.',
   },
 ]
 
 export function CloudOverview() {
   return (
-    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <CircleBackground
           color="#06b6d4"
-          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+          className="absolute left-1/2 top-full h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 opacity-30 blur-3xl"
         />
         <CircleBackground
           color="#22d3ee"
-          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
         />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.18),_transparent_55%)]" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-400">
-            Mycelium Cloud
+            Platform Overview
-          </p>
+          </Eyebrow>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            A sovereign, self-healing cloud built for trusted automation.
+            A decentralized cloud that operates itself.
-          </h2>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-300">
+          <P color="lightSecondary" className="mt-6">
-            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
+            Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold
-          </p>
+            Grid with cryptographic certainty. Networking, storage, and
+            orchestration are all built-in so developers can deploy critical
+            workloads without wrestling infrastructure.
+          </P>
+          <P color="lightSecondary" className="mt-6 italic">
+            Declarative, sovereign, and ready for production workloads anywhere.
+          </P>
         </div>
         <div className="mt-16 grid gap-8 lg:grid-cols-3">
           {focusAreas.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
             >
-              <div className="text-lg font-semibold text-white">
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/15 opacity-0 transition group-hover:opacity-100" />
-                {item.title}
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-300">
+                  {item.label}
+                </Small>
+                <div className="mt-4 text-lg font-semibold text-white">
+                  {item.title}
+                </div>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {item.description}
+                </p>
               </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-300">
-                {item.description}
-              </p>
             </div>
           ))}
         </div>

src/pages/cloud/CloudPage.tsx

@@ -1,22 +1,33 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
 import { CloudOverview } from './CloudOverview'
-import { ComputeStorageSplit } from './ComputeStorageSplit'
+import { CloudArchitecture } from './CloudArchitecture'
+import { CloudFeatures } from './CloudFeatures'
+import { CloudGettingStarted } from './CloudGettingStarted'
+import { CloudUseCases } from './CloudUseCases'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
-import { CloudHeroAlt } from './CloudHeroAlt'
 
 export default function CloudPage() {
   return (
     <>
       <AnimatedSection>
-        <CloudHeroAlt />
+        <CloudHero />
       </AnimatedSection>
       <AnimatedSection>
         <CloudOverview />
       </AnimatedSection>
       <AnimatedSection>
-        <ComputeStorageSplit />
+        <CloudArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudGettingStarted />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CloudUseCases />
       </AnimatedSection>
       <AnimatedSection>
         <SecurityPillars />

src/pages/cloud/CloudUseCases.tsx

@@ -0,0 +1,90 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const useCases = [
+  {
+    title: 'AI / ML Training',
+    description:
+      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+  },
+  {
+    title: 'Enterprise Kubernetes',
+    description:
+      'Operate production-grade clusters with complete control and no vendor lock-in.',
+    bullets: ['High availability', 'Security', 'Compliance'],
+  },
+  {
+    title: 'Edge & IoT',
+    description:
+      'Leverage global nodes for low-latency workloads and connected device deployments.',
+    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
+  },
+  {
+    title: 'DigitalMe Blueprint',
+    description:
+      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
+    bullets: [
+      'Cryptpad • Encrypted collaboration',
+      'Elements • Matrix chat',
+      'Stallwart • Mail, calendar, contacts',
+      'Gitea • Git hosting',
+      'Nextcloud • File storage and sync',
+      'LiveKit / Jitsi • Real-time video',
+      'Single Sign-On backed by Gitea',
+    ],
+  },
+]
+
+export function CloudUseCases() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Built for intelligent workloads across every edge.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Cloud unifies compute, storage, and networking so teams can
+            launch anything from GPU inference farms to global collaboration
+            suites with deterministic outcomes.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {useCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center justify-between">
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {useCase.title}
+                </h3>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Scenario
+                </Small>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {useCase.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/SecurityPillars.tsx

@@ -1,7 +1,26 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
-const pillars = [
+const differentiators = [
+  {
+    title: 'Sovereign by Design',
+    description:
+      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+  },
+  {
+    title: 'Ready to Scale',
+    description:
+      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+  },
+]
+
+const securityPillars = [
   {
     title: 'Provable Sovereignty',
     description:
@@ -21,31 +40,51 @@ const pillars = [
 
 export function SecurityPillars() {
   return (
-    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
       <div className="pointer-events-none absolute inset-0">
         <CircleBackground
           color="#22d3ee"
-          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
+          className="absolute -top-24 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl"
         />
-        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom,_rgba(8,145,178,0.14),_transparent_60%)]" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            Sovereign Architecture
+            Security Architecture
-          </p>
+          </Eyebrow>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+          <SectionHeader as="h2" color="light" className="mt-6">
-            Built for security, trust, and unstoppable continuity.
+            Provable trust from substrate to service.
-          </h2>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-300">
+          <P color="lightSecondary" className="mt-6">
-            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
+            Mycelium Cloud enforces sovereignty, security, and resilience at the
-          </p>
+            protocol level. The platform continuously verifies state, heals
+            itself, and keeps workloads operating even when regions go dark.
+          </P>
         </div>
         <div className="mt-16 grid gap-8 lg:grid-cols-3">
-          {pillars.map((pillar) => (
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                Key Differentiator
+              </Small>
+              <div className="mt-4 text-lg font-semibold text-white">
+                {item.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {securityPillars.map((pillar) => (
             <div
               key={pillar.title}
-              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+              className="rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
             >
               <div className="text-lg font-semibold text-white">
                 {pillar.title}

src/pages/compute/ComputeArchitecture.tsx

@@ -0,0 +1,92 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Deterministic Computing',
+    description:
+      'Every computational step is predictable and provable before it ever executes.',
+    bullets: [
+      'Cryptographic verification precedes every operation.',
+      'State determinism ensures identical results from identical inputs.',
+      'Tamper resistance surfaces any modification instantly.',
+      'Comprehensive audit trails verify the full execution history.',
+    ],
+  },
+  {
+    title: 'Stateless Infrastructure',
+    description:
+      'A global substrate that scales and recovers without hardware-bound state.',
+    bullets: [
+      'No persistent state coupled to specific hardware or regions.',
+      'Global distribution makes compute available wherever it is needed.',
+      'Auto-scaling allocates the right resources at the right time.',
+      'Fault-tolerant orchestration provides automatic failover.',
+    ],
+  },
+  {
+    title: 'Zero-Image System',
+    description:
+      'Metadata-first delivery keeps deployments lightweight and instantly repeatable.',
+    bullets: [
+      'Images represented as metadata instead of heavyweight artifacts.',
+      'Instant deployment for rapid workload startup.',
+      'Efficient storage with minimal footprint for artifacts.',
+      'Bandwidth-optimized transfers shrink delivery times.',
+    ],
+  },
+]
+
+export function ComputeArchitecture() {
+  return (
+    <section className="bg-gray-50 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Infrastructure engineered for provable outcomes.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Deterministic computing, stateless orchestration, and metadata-first
+            delivery combine to create a compute fabric you can trust with your
+            most sensitive workloads.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-cyan-100 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center gap-3">
+                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-600">
+                  •
+                </span>
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {section.title}
+                </h3>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
+

src/pages/compute/ComputeDeveloperExperience.tsx

@@ -0,0 +1,114 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const codeSamples = [
+  {
+    title: 'Simple Deployment',
+    description:
+      'Define deterministic workloads with familiar manifests that execute exactly as declared anywhere on the fabric.',
+    language: 'yaml',
+    code: `# Basic compute workload
+apiVersion: v1
+kind: Deployment
+metadata:
+  name: deterministic-app
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: deterministic-app
+  template:
+    metadata:
+      labels:
+        app: deterministic-app
+    spec:
+      containers:
+      - name: app
+        image: ubuntu:latest
+        command: ["echo", "Deterministic deployment"]`,
+  },
+  {
+    title: 'Zero-Image Deployment',
+    description:
+      'Use metadata-only images to launch workloads instantly with zero heavy artifacts to distribute.',
+    language: 'yaml',
+    code: `# Using zero-image technology
+apiVersion: v1
+kind: Pod
+metadata:
+  name: zero-image-pod
+spec:
+  containers:
+  - name: app
+    image: "zero-image://ubuntu-latest"  # Metadata-only image
+    command: ["echo", "Running on zero-image"]`,
+  },
+  {
+    title: 'Smart Contract Orchestration',
+    description:
+      'Automate workload lifecycles through cryptographically signed contracts that govern execution.',
+    language: 'yaml',
+    code: `# Smart contract orchestrated deployment
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: deployment-contract
+data:
+  contract: |
+    smart_contract:
+      signature: "cryptographically_signed_deployment"
+      workload_spec:
+        image: "ubuntu-latest"
+        replicas: 3
+        verification_hash: "sha256_hash_of_workload"`,
+  },
+]
+
+export function ComputeDeveloperExperience() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+            Developer Experience
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Declarative workflows, deterministic results.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Ship workloads using the same declarative patterns you already
+            trust. Mycelium Compute verifies and enforces every detail, from
+            classic deployments to zero-image launches and smart contract
+            upgrades.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {codeSamples.map((sample) => (
+            <div
+              key={sample.title}
+              className="flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-slate-50"
+            >
+              <div className="p-8">
+                <p className="text-sm font-semibold uppercase tracking-[0.24em] text-cyan-500">
+                  {sample.language}
+                </p>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {sample.title}
+                </h3>
+                <p className="mt-3 text-sm leading-relaxed text-gray-600">
+                  {sample.description}
+                </p>
+              </div>
+              <div className="mt-auto bg-gray-900 p-6">
+                <pre className="overflow-auto text-left text-xs leading-relaxed text-cyan-100">
+                  <code>{sample.code}</code>
+                </pre>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
+

src/pages/compute/ComputeDifferentiators.tsx

@@ -0,0 +1,68 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Deterministic Guarantee',
+    description:
+      'Every computation is cryptographically verified to ensure consistent, repeatable outcomes across environments.',
+  },
+  {
+    title: 'Autonomous Operations',
+    description:
+      'Infrastructure monitors, scales, and heals itself with zero human intervention required.',
+  },
+  {
+    title: 'Smart Contract Security',
+    description:
+      'Workload orchestration flows through cryptographically signed, tamper-proof contracts.',
+  },
+  {
+    title: 'Multi-Platform Support',
+    description:
+      'Run containers, VMs, or native Linux workloads with the same deterministic guarantees.',
+  },
+  {
+    title: 'Secure Boot Verification',
+    description:
+      'Hardware-level attestation validates every deployment path before workloads execute.',
+  },
+]
+
+export function ComputeDifferentiators() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.3em] uppercase text-cyan-500">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Why teams choose Mycelium Compute.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Deterministic execution, contract-grade governance, and hardware
+            attestation make Mycelium Compute the most trusted substrate for
+            sensitive workloads.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-slate-200 bg-slate-50 p-8 transition hover:-translate-y-1 hover:border-cyan-300 hover:bg-white hover:shadow-lg"
+            >
+              <h3 className="text-lg font-semibold text-gray-900">
+                {item.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
+

src/pages/compute/ComputeFeatures.tsx

@@ -0,0 +1,106 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureGroups = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+    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',
+    description:
+      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+    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',
+    description:
+      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+    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',
+    description:
+      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+    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',
+    ],
+  },
+]
+
+export function ComputeFeatures() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Precision infrastructure that verifies itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Every layer is designed for determinism, from how workloads are
+            declared to the way they scale, protect, and govern themselves on
+            the grid.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {featureGroups.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  {feature.listTitle}
+                </Small>
+                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {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>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeHero.tsx

@@ -24,12 +24,8 @@ export function ComputeHero() {
             Compute that verifies itself. Expands itself. Heals itself.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/compute/ComputeOverview.tsx

@@ -0,0 +1,74 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const overviewCards = [
+  {
+    label: 'Overview',
+    title: 'Built for sovereign, verifiable operations',
+    copy: `Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it keeps environments transparent, verifiable, and free from manual intervention.`,
+  },
+  {
+    label: 'Core Concept',
+    title: 'Deterministic compute fabric',
+    copy: `Every workload deploys exactly as intended through cryptographic verification—eliminating tampering and configuration drift while maintaining complete operational autonomy.`,
+  },
+]
+
+export function ComputeOverview() {
+  return (
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#06b6d4"
+          className="absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl sm:opacity-40"
+        />
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
+        />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.1),_transparent_55%)]" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
+            Mycelium Compute
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+            Deterministic compute fabric for autonomous workloads.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Compute delivers predictable, sovereign performance—free
+            from lock-in and drift. Deploy any workload with cryptographic
+            precision, knowing the platform verifies, scales, and heals itself
+            on your behalf.
+          </P>
+          <P color="lightSecondary" className="mt-4 italic">
+            Deterministic. Self-managing. Stateless by design.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-6 lg:grid-cols-2">
+          {overviewCards.map((card) => (
+            <div
+              key={card.title}
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/40 hover:bg-white/[0.06]"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/10 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-300">
+                  {card.label}
+                </p>
+                <h3 className="mt-4 text-xl font-semibold text-white">
+                  {card.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {card.copy}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputePage.tsx

@@ -1,5 +1,12 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { ComputeHero } from './ComputeHero'
+import { ComputeOverview } from './ComputeOverview'
+import { ComputeFeatures } from './ComputeFeatures'
+import { ComputeZeroImage } from './ComputeZeroImage'
+import { ComputeArchitecture } from './ComputeArchitecture'
+import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
+import { ComputeUseCases } from './ComputeUseCases'
+import { ComputeDifferentiators } from './ComputeDifferentiators'
 import { CallToAction } from './CallToAction'
 
 export default function ComputePage() {
@@ -8,6 +15,27 @@ export default function ComputePage() {
       <AnimatedSection>
         <ComputeHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <ComputeOverview />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeZeroImage />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeDeveloperExperience />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/compute/ComputeUseCases.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>
+  )
+}

src/pages/compute/ComputeZeroImage.tsx

@@ -0,0 +1,50 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const zeroImageBenefits = [
+  'Metadata-only artifacts replace heavy images for ultra-fast delivery.',
+  'Instant startup times accelerate workload initialization anywhere.',
+  'Bandwidth consumption drops dramatically with minimal transfers.',
+  'Deploy workloads globally across the ThreeFold Grid without friction.',
+]
+
+export function ComputeZeroImage() {
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -top-32 right-1/4 h-72 w-72 rounded-full bg-cyan-500/30 blur-[120px]" />
+        <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-[140px]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,_rgba(8,145,178,0.18),_transparent_55%)]" />
+      </div>
+      <Container className="relative">
+        <div className="grid items-center gap-12 lg:grid-cols-[0.85fr_1.15fr]">
+          <div>
+            <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
+              Zero-Image Integration
+            </Eyebrow>
+            <SectionHeader as="h2" color="light" className="mt-6">
+              Ultra-efficient deployments that move at the speed of metadata.
+            </SectionHeader>
+            <P color="lightSecondary" className="mt-6">
+              Mycelium Compute integrates natively with Mycelium Storage&apos;s
+              Zero-Image system. Deployments ship as metadata descriptors rather
+              than bulky artifacts, enabling consistent, deterministic
+              environments delivered on demand.
+            </P>
+          </div>
+          <ul className="space-y-4 text-sm text-cyan-100">
+            {zeroImageBenefits.map((benefit) => (
+              <li
+                key={benefit}
+                className="flex items-start gap-3 rounded-3xl border border-cyan-400/20 bg-white/5 p-5 backdrop-blur-sm transition hover:border-cyan-200/40 hover:bg-white/10"
+              >
+                <span className="mt-1 inline-flex size-3 flex-none rounded-full bg-cyan-300 shadow-[0_0_12px_rgba(45,212,191,0.6)]" />
+                <span className="leading-relaxed">{benefit}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/CallToAction.tsx

@@ -14,23 +14,30 @@ 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
+            Bring sovereign GPU acceleration to production.
           </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.
+            Work with the Mycelium team to deploy GPU workloads that remain
+            verifiable, performant, and cost-transparent from edge to core.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/download" variant="solid" color="white">
+            <Button
-              Get Mycelium Connector
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="white"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Talk to our team
             </Button>
             <Button
-              to="https://threefold.info/mycelium_network/docs/"
+              to="#gpu-architecture"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Review architecture
             </Button>
           </div>
         </div>

src/pages/gpu/GpuArchitecture.tsx

@@ -0,0 +1,75 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Distributed GPU Mesh',
+    description:
+      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
+    bullets: [
+      'GPU nodes distributed globally for on-demand acceleration.',
+      'Mycelium network provides encrypted peer-to-peer connectivity.',
+      'Smart contract orchestration allocates and governs resources.',
+      'Real-time monitoring tracks utilization and health.',
+    ],
+  },
+  {
+    title: 'Performance Characteristics',
+    description:
+      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
+    bullets: [
+      'Edge-to-core deployment flexibility for every workload profile.',
+      'Adaptive intelligence optimizes allocation automatically.',
+      'Deterministic performance guarantees availability when booked.',
+      'Transparent cost tracking for every GPU cycle consumed.',
+    ],
+  },
+]
+
+export function GpuArchitecture() {
+  return (
+    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            A peer-to-peer mesh purpose-built for acceleration.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
+            networking, smart contract orchestration, and transparent monitoring
+            ensure your workloads receive precisely the power they request.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">
+                {section.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuDifferentiators.tsx

@@ -0,0 +1,85 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Unified Fabric',
+    description:
+      'Transforms fragmented GPU resources into a single, standard interface accessible anywhere.',
+  },
+  {
+    title: 'Sovereign Control',
+    description:
+      'Operate without vendor lock-in or geographic restrictions—govern policies entirely through code.',
+  },
+  {
+    title: 'Code-Driven Orchestration',
+    description:
+      'APIs and smart contracts automate allocation, attestation, and lifecycle management.',
+  },
+  {
+    title: 'Deterministic Performance',
+    description:
+      'Guaranteed GPU allocation delivers the compute you reserve with consistent performance characteristics.',
+  },
+]
+
+const costEfficiency = [
+  'Transparent pricing with no hidden fees.',
+  'Pay only for the GPU cycles you consume.',
+  'Global optimization locates the most cost-effective nodes.',
+  'Avoid premium lock-in from centralized providers.',
+]
+
+export function GpuDifferentiators() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            GPU acceleration with sovereignty and clarity.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU delivers verifiable access to power when you need it.
+            Control stays in your hands, from allocation policies to cost
+            structure.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <h3 className="text-lg font-semibold text-white">{item.title}</h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
+          <h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
+          <p className="mt-4 text-sm leading-relaxed text-gray-300">
+            Transparent economics makes capacity planning simple while keeping
+            budgets predictable.
+          </p>
+          <ul className="mt-6 space-y-3 text-sm text-gray-300">
+            {costEfficiency.map((item) => (
+              <li
+                key={item}
+                className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+              >
+                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuGettingStarted.tsx

@@ -0,0 +1,103 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const steps = [
+  {
+    number: '01',
+    title: 'Account Setup',
+    description:
+      'Create your Mycelium account and ensure GPU access is enabled.',
+    bullets: [
+      'Sign up and verify your account credentials.',
+      'Enable GPU access or request it from the Mycelium team.',
+      'Configure billing to align usage with your budget.',
+    ],
+  },
+  {
+    number: '02',
+    title: 'Request GPU Resources',
+    description: 'Use the Mycelium GPU API to allocate the acceleration you need.',
+    bullets: [
+      'Describe the GPU profile (memory, cores, region) your workload requires.',
+      'Let smart contracts reserve and attest the selected hardware.',
+      'Receive deterministic allocation details for orchestration.',
+    ],
+  },
+  {
+    number: '03',
+    title: 'Deploy & Monitor',
+    description:
+      'Launch your workload, integrate storage, and monitor performance from the dashboard.',
+    bullets: [
+      'Deploy via Kubernetes, containers, or custom runtimes.',
+      'Bind to Quantum-Safe Storage for datasets and checkpoints.',
+      'Track GPU utilization, cost, and health in real time.',
+    ],
+  },
+]
+
+const workflow = 'Application → Mycelium GPU API → GPU Resource Allocation → Workload Execution'
+
+export function GpuGettingStarted() {
+  return (
+    <section
+      id="gpu-getting-started"
+      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Getting Started
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Allocate, run, and observe in three moves.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU keeps onboarding simple—declare what you need, deploy
+            your workload, and let the mesh guarantee performance with full
+            transparency.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-3">
+          {steps.map((step) => (
+            <div
+              key={step.title}
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+            >
+              <div className="flex items-center justify-between">
+                <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
+                  {step.number}
+                </Small>
+                <span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
+                  Go
+                </span>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold text-white">{step.title}</h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {step.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-300">
+                {step.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center backdrop-blur-sm">
+          <p className="text-sm font-medium uppercase tracking-[0.3em] text-cyan-200">
+            Basic Workflow
+          </p>
+          <p className="mt-4 text-base text-gray-100">{workflow}</p>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuHero.tsx

@@ -1,34 +1,42 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 export function GpuHero() {
   return (
     <div className="relative bg-white">
       <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=""
+          alt="Mycelium GPU nebula illustration"
           src="/images/gpuhero.png"
           className="size-full object-cover"
         />
-       
       </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">GPU</h2>
+          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
+            Mycelium GPU
-          <p className="mt-6 text-base/7 text-gray-600">
+          </Eyebrow>
-            Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer.
+          <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
+            Unify distributed GPU power into a sovereign acceleration fabric.
-            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
+          </SectionHeader>
-          </p>
+          <P className="mt-6 text-gray-600">
-          <div className="mt-8">
+            Mycelium GPU transforms fragmented hardware across the ThreeFold
-            <Button
+            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
-              href="#"
+            and high-performance workloads anywhere—from edge devices to
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            planetary clusters—with deterministic performance and transparent
-            >
+            cost.
-              {' '}
+          </P>
-              Unify Your GPU Power{' '}
+          <P className="mt-4 italic text-gray-500">
+            The energy behind intelligence, orchestrated entirely through code.
+          </P>
+          <div className="mt-10 flex flex-wrap gap-4">
+            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
+              Start with GPU Access
+            </Button>
+            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
+              Explore the Mesh
             </Button>
           </div>
         </div>

src/pages/gpu/GpuIntegration.tsx

@@ -0,0 +1,81 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const integrationPoints = [
+  'Unified Mycelium networking provides secure access to GPU nodes.',
+  'Zero-trust security model extends to GPU operations automatically.',
+  'Quantum-safe storage available directly to GPU workloads.',
+  'Native Kubernetes support exposes GPUs through familiar resources.',
+]
+
+const yamlExample = `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: gpu-workload
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: gpu-compute
+  template:
+    metadata:
+      labels:
+        app: gpu-compute
+    spec:
+      containers:
+        - name: gpu-compute
+          image: tensorflow/tensorflow:latest-gpu
+          resources:
+            limits:
+              nvidia.com/gpu: 1
+          env:
+            - name: MYCELIUM_GPU_REGION
+              value: "auto"`
+
+export function GpuIntegration() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Cloud Integration
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Seamless with Mycelium Cloud infrastructure.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            GPU workloads plug directly into the same mesh that powers Mycelium
+            Cloud. Networking, security, and storage policies flow with every
+            deployment.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-2">
+          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Platform alignment
+            </h3>
+            <ul className="space-y-3 text-sm text-gray-300">
+              {integrationPoints.map((point) => (
+                <li
+                  key={point}
+                  className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                >
+                  <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Kubernetes deployment example
+            </h3>
+            <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
+              <code>{yamlExample}</code>
+            </pre>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuOverview.tsx

@@ -0,0 +1,108 @@
+import {
+  CodeBracketSquareIcon,
+  CubeTransparentIcon,
+  LockClosedIcon,
+  Squares2X2Icon,
+} from '@heroicons/react/24/outline'
+
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const overviewCards = [
+  {
+    label: 'Overview',
+    title: 'Unified GPU acceleration across the ThreeFold Grid',
+    description:
+      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+  },
+  {
+    label: 'Core Concept',
+    title: 'Sovereign intelligence layer',
+    description:
+      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
+  },
+]
+
+const principles = [
+  {
+    name: 'No Silos',
+    description: 'Every GPU resource is accessible through a single interface.',
+    icon: Squares2X2Icon,
+  },
+  {
+    name: 'No Intermediaries',
+    description: 'Direct access to hardware without centralized brokers.',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle is attested and cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Smart contracts and APIs automate allocation and policy.',
+    icon: CodeBracketSquareIcon,
+  },
+]
+
+export function GpuOverview() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Platform Overview
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+            The sovereign acceleration layer for intelligent workloads.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU makes distributed acceleration feel like one machine.
+            Harness global GPUs with deterministic performance, transparent
+            costs, and end-to-end verification.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {overviewCards.map((card) => (
+            <div
+              key={card.title}
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                  {card.label}
+                </Small>
+                <h3 className="mt-4 text-lg font-semibold text-white">
+                  {card.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {principles.map((principle) => (
+            <div
+              key={principle.name}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
+                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
+              </div>
+              <h3 className="text-base font-semibold text-white">
+                {principle.name}
+              </h3>
+              <p className="mt-3 text-sm leading-relaxed text-gray-300">
+                {principle.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuPage.tsx

@@ -1,16 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
+import { GpuOverview } from './GpuOverview'
+import { GpuArchitecture } from './GpuArchitecture'
+import { GpuIntegration } from './GpuIntegration'
+import { GpuUseCases } from './GpuUseCases'
+import { GpuGettingStarted } from './GpuGettingStarted'
+import { GpuDifferentiators } from './GpuDifferentiators'
 import { CallToAction } from './CallToAction'
 
 export default function GpuPage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <GpuOverview />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuIntegration />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuGettingStarted />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/gpu/GpuUseCases.tsx

@@ -0,0 +1,81 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const useCases = [
+  {
+    title: 'AI / ML Training',
+    description:
+      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+  },
+  {
+    title: 'Rendering & Visualization',
+    description:
+      'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
+    bullets: [
+      'Distributed 3D rendering',
+      'Scientific visualization',
+      'Real-time VR / AR processing',
+      'Digital twin simulations',
+    ],
+  },
+  {
+    title: 'General GPU Computing',
+    description:
+      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
+    bullets: [
+      'Scientific simulations',
+      'Financial modeling',
+      'Blockchain processing',
+      'Protein folding and discovery',
+    ],
+  },
+]
+
+export function GpuUseCases() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Acceleration for every intelligent workload.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            From deep learning to immersive visualization, Mycelium GPU delivers
+            deterministic access to the power you need without the waitlists or
+            markups of centralized clouds.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {useCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">
+                {useCase.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {useCase.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/home/HomeBenefits.tsx

@@ -1,6 +1,5 @@
-import { cn } from "@/lib/utils";
 import createGlobe from "cobe";
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 import { H2, P } from '@/components/Texts'

src/pages/home/HomePage.tsx

@@ -1,6 +1,5 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { HomeFeaturesDark } from './HomeFeaturesDark'
 import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'

src/pages/home/HomeSlider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import React from "react";
 import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
-import { H2, H3, P } from "@/components/Texts";
+import { H3, P } from "@/components/Texts";
 
 export function HomeSlider() {
   const cards = data.map((card) => (

src/pages/storage/CallToAction.tsx

@@ -14,23 +14,31 @@ 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
+            Bring sovereign storage into your stack.
           </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.
+            Partner with the Mycelium team to design quantum-safe, compliant
+            storage that meets your residency, redundancy, and performance
+            requirements across the globe.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/download" variant="solid" color="white">
+            <Button
-              Get Mycelium Connector
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="white"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Talk to our team
             </Button>
             <Button
-              to="https://threefold.info/mycelium_network/docs/"
+              to="#storage-developer-experience"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Explore developer workflow
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

@@ -0,0 +1,97 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architecture = [
+  {
+    title: 'Quantum-Safe Data Protection',
+    description:
+      'Post-quantum encryption and cryptographic verification protect every storage operation end-to-end.',
+    bullets: [
+      'Algorithms selected to resist quantum computing attacks.',
+      'Protection applied beneath the application layer.',
+      'All writes and reads verified cryptographically.',
+      'Future-proof design for long-lived data sets.',
+    ],
+  },
+  {
+    title: 'Autonomous Self-Healing',
+    description:
+      'Storage monitors itself, heals corruption, and restores replicas without human intervention.',
+    bullets: [
+      'Continuous detection of failures or anomalies.',
+      'Instant recovery without service interruption.',
+      'Integrity checks keep replicas in lockstep.',
+      '24/7 autonomy removes the pager from the loop.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Fabric',
+    description:
+      'A single data plane serves every protocol so workloads can mix and migrate freely.',
+    bullets: [
+      'Protocol adapters sit in front of the same storage core.',
+      'Applications choose the protocol that fits their workflow.',
+      'No data duplication needed to support multiple interfaces.',
+      'Consistent governance across all access patterns.',
+    ],
+  },
+  {
+    title: 'Geo-Aware Data Governance',
+    description:
+      'Data placement policies enforce sovereignty, redundancy, and compliance requirements.',
+    bullets: [
+      'Pin workloads to specific jurisdictions or providers.',
+      'Define redundancy at the dataset or workload level.',
+      'Automatic zone-to-zone replication hardens resilience.',
+      'Global distribution optimized across the ThreeFold Grid.',
+    ],
+  },
+]
+
+export function StorageArchitecture() {
+  return (
+    <section className="bg-gray-50 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Autonomous governance for planetary-scale storage.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            The Mycelium Storage data plane is designed to protect data at the
+            cryptographic layer, operate without manual intervention, and meet
+            jurisdictional requirements anywhere in the world.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {architecture.map((item) => (
+            <div
+              key={item.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">
+                {item.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {item.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {item.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageDeveloperExperience.tsx

@@ -0,0 +1,120 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+type Experience = {
+  title: string
+  description: string
+  code: string
+  language: string
+}
+
+const experiences: Experience[] = [
+  {
+    title: 'S3-Compatible Access',
+    description:
+      'Use familiar AWS SDKs to read and write data against the Mycelium Storage endpoint.',
+    language: 'python',
+    code: `import boto3
+
+s3_client = boto3.client(
+    's3',
+    endpoint_url='https://storage.mycelium.com',
+    aws_access_key_id='your_access_key',
+    aws_secret_access_key='your_secret_key'
+)
+
+s3_client.upload_file('local_file.txt', 'my-bucket', 'remote_file.txt')
+s3_client.download_file('my-bucket', 'remote_file.txt', 'downloaded_file.txt')`,
+  },
+  {
+    title: 'WebDAV Mount',
+    description:
+      'Mount storage as a filesystem for desktop workflows and legacy integrations.',
+    language: 'bash',
+    code: `mount -t davfs https://storage.mycelium.com/dav /mnt/storage
+cp /mnt/storage/data.txt ./
+echo "Data updated" > /mnt/storage/updated.txt`,
+  },
+  {
+    title: 'IPFS Integration',
+    description:
+      'Leverage IPFS for decentralized addressability without duplicating datasets.',
+    language: 'python',
+    code: `import ipfshttpclient
+
+client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
+result = client.add('data.txt')
+print(f"File available at: {result['Hash']}")`,
+  },
+  {
+    title: 'Geo-Aware Placement Policy',
+    description:
+      'Declare residency, redundancy, and protocol availability in a single configuration.',
+    language: 'yaml',
+    code: `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: storage-config
+data:
+  placement: |
+    geo_aware_storage:
+      residency: "eu-west"
+      redundancy: 3
+      zones:
+        - "zone-1"
+        - "zone-2"
+        - "zone-3"
+      protocols:
+        - "s3"
+        - "ipfs"
+        - "webdav"`,
+  },
+]
+
+export function StorageDeveloperExperience() {
+  return (
+    <section
+      id="storage-developer-experience"
+      className="bg-gray-900 py-24 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Developer Experience
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Build with the interfaces you already know.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Every protocol rides the same quantum-safe storage fabric, so moving
+            between APIs is as simple as switching adapters. Choose the workflow
+            that fits your stack.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {experiences.map((experience) => (
+            <div
+              key={experience.title}
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div>
+                <h3 className="text-xl font-semibold text-white">
+                  {experience.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {experience.description}
+                </p>
+              </div>
+              <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
+                <code>{experience.code}</code>
+              </pre>
+              <span className="mt-4 inline-flex w-fit items-center rounded-full border border-cyan-500/40 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.3em] text-cyan-200">
+                {experience.language}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageDifferentiators.tsx

@@ -0,0 +1,65 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Quantum-Safe Protection',
+    description:
+      'Data is encrypted with algorithms that resist quantum attacks, preserving integrity for decades.',
+  },
+  {
+    title: 'Autonomous Self-Healing',
+    description:
+      'Failures and corruption are detected and repaired automatically—no on-call rotations required.',
+  },
+  {
+    title: 'Universal Protocol Support',
+    description:
+      'Serve the same data through IPFS, S3, WebDAV, HTTP, and native file systems without duplication.',
+  },
+  {
+    title: 'Geo-Aware Data Governance',
+    description:
+      'Define residency, redundancy, and distribution policies per workload and enforce them automatically.',
+  },
+  {
+    title: 'Ultra-Efficient Storage',
+    description:
+      'Zero-image technology reduces artifacts by up to 100x, cutting bandwidth and accelerating deployment.',
+  },
+]
+
+export function StorageDifferentiators() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Sovereignty, resilience, and flexibility in one fabric.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Storage blends quantum safety, autonomous operations, and
+            protocol choice into a single platform that meets the most demanding
+            requirements for modern data services.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <h3 className="text-lg font-semibold text-white">{item.title}</h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageFeatures.tsx

@@ -0,0 +1,113 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const features = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer so ownership stays yours.',
+    bullets: [
+      'Beyond AES-256 with post-quantum algorithms.',
+      'Multi-layer protection enforced automatically.',
+      'Future-proof against emerging quantum threats.',
+      'Total control of keys, residency, and governance.',
+    ],
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly with no human intervention.',
+    bullets: [
+      'Instant detection and repair of anomalies.',
+      'Integrity preserved while data is restored.',
+      'Continuous verification validates every replica.',
+      'Zero-ops recovery that runs around the clock.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same dataset over IPFS, S3, WebDAV, HTTP, and native file systems.',
+    bullets: [
+      'IPFS for decentralized, content-addressed retrieval.',
+      'S3-compatible API for existing tooling and SDKs.',
+      'WebDAV for mounted filesystem access.',
+      'HTTP and POSIX for direct application integration.',
+    ],
+  },
+  {
+    title: 'Geo-Aware Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution on a per-workload basis.',
+    bullets: [
+      'Pin data to specific jurisdictions or zones.',
+      'Custom redundancy policies per dataset.',
+      'Automatic zone-to-zone replication for resilience.',
+      'Global distribution across the ThreeFold Grid.',
+    ],
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, enabling instant Zero-OS deployments.',
+    bullets: [
+      'Drastically reduced storage footprint for artifacts.',
+      'Metadata-driven delivery accelerates boot times.',
+      'Bandwidth-efficient transfers to any node.',
+      'Perfect for immutable workloads and rapid rollback.',
+    ],
+  },
+]
+
+export function StorageFeatures() {
+  return (
+    <section id="storage-features" className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Data services engineered for sovereignty and speed.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage combines quantum-safe cryptography, autonomous
+            healing, and universal protocol support. It adapts to every workload
+            without sacrificing control or performance.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Capability
+                </Small>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {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 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageHero.tsx

@@ -1,33 +1,46 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 export function StorageHero() {
   return (
     <div className="relative bg-white">
       <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=""
+          alt="Mycelium Storage visual"
           src="/images/storagehero2.png"
           className="size-full object-cover"
         />
-       
       </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">STORAGE</h2>
+          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">If GPUs are the engine, data is the lifeblood of intelligence.</p>
+            Mycelium Storage
-          <p className="mt-6 text-base/7 text-gray-600">
+          </Eyebrow>
-            Mycelium interconnects autonomous nodes with unified storage that adapts to every workload — from high-throughput object stores to parallel file systems.
+          <SectionHeader as="h1" className="mt-4 text-gray-900">
-Rooted in open standards, it ensures speed, resilience, and true data sovereignty.
+            Quantum-safe, sovereign data plane for every workload.
-          </p>
+          </SectionHeader>
-          <div className="mt-8">
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage delivers quantum-resistant protection, autonomous
+            recovery, and multi-protocol access across the ThreeFold Grid. Place
+            data exactly where you need it while keeping ownership entirely in
+            your hands.
+          </P>
+          <P className="mt-4 italic text-gray-500">
+            Quantum-safe. Self-healing. Universally accessible.
+          </P>
+          <div className="mt-10 flex flex-wrap gap-4">
+            <Button to="#storage-features" as="a" variant="solid" color="cyan">
+              Explore Features
+            </Button>
             <Button
-              href="#"
+              to="#storage-developer-experience"
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+              as="a"
+              variant="outline"
+              color="cyan"
             >
-              {' '}
+              View Developer Flow
-              Talk to an expert{' '}
             </Button>
           </div>
         </div>

src/pages/storage/StorageOverview.tsx

@@ -0,0 +1,66 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const highlights = [
+  {
+    label: 'Overview',
+    title: 'Quantum-safe, sovereign data management',
+    description:
+      'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
+  },
+  {
+    label: 'Core Concept',
+    title: 'Unified data plane across every protocol',
+    description:
+      'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
+  },
+  {
+    label: 'Outcome',
+    title: 'Ownership without compromise',
+    description:
+      'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
+  },
+]
+
+export function StorageOverview() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Platform Overview
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+            A quantum-safe data plane that heals itself.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Built on sovereign infrastructure, Mycelium Storage keeps data
+            resilient, verifiable, and instantly accessible. Encryption,
+            replication, and governance are woven directly into the substrate.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {highlights.map((item) => (
+            <div
+              key={item.title}
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                  {item.label}
+                </Small>
+                <h3 className="mt-4 text-lg font-semibold text-white">
+                  {item.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StoragePage.tsx

@@ -1,16 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { StorageHero } from './StorageHero'
+import { StorageOverview } from './StorageOverview'
+import { StorageFeatures } from './StorageFeatures'
+import { StorageArchitecture } from './StorageArchitecture'
+import { StorageDeveloperExperience } from './StorageDeveloperExperience'
+import { StorageUseCases } from './StorageUseCases'
+import { StorageDifferentiators } from './StorageDifferentiators'
 import { CallToAction } from './CallToAction'
 
 export default function StoragePage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
         <StorageHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <StorageOverview />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageDeveloperExperience />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/storage/StorageUseCases.tsx

@@ -0,0 +1,155 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const primaryUseCases = [
+  {
+    title: 'Data Sovereignty Applications',
+    bullets: [
+      'Privacy-first products with full control over data location.',
+      'Regulatory compliance for regional or industry mandates.',
+      'Enterprise workloads that demand audit-ready governance.',
+      'DigitalMe applications hosted with complete data ownership.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Applications',
+    bullets: [
+      'Support legacy S3, WebDAV, and HTTP workloads simultaneously.',
+      'Enable hybrid architectures that mix centralized and decentralized access.',
+      'Give developers freedom to choose best-fit protocols per service.',
+      'Simplify migrations by keeping data accessible through multiple APIs.',
+    ],
+  },
+  {
+    title: 'Backup and Recovery',
+    bullets: [
+      'Autonomous backups with continuous verification.',
+      'Cross-zone replication that survives regional outages.',
+      'Integrity monitoring that spots corruption immediately.',
+      'Instant recovery from failures without manual restore steps.',
+    ],
+  },
+  {
+    title: 'Content Distribution',
+    bullets: [
+      'Global CDN leveraging the breadth of the ThreeFold Grid.',
+      'IPFS integration for decentralized content addressing.',
+      'Serve the same assets over HTTP, S3, or WebDAV.',
+      'Geo-optimized placement keeps content close to users.',
+    ],
+  },
+]
+
+const storageSpecificUseCases = [
+  {
+    title: 'Data Sovereignty & Compliance',
+    bullets: [
+      'Guarantee residency in specific jurisdictions.',
+      'Protect personal or regulated data with audit trails.',
+      'Empower enterprises with region-specific governance.',
+      'Handle cross-border rules without duplicating datasets.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Data Solutions',
+    bullets: [
+      'Bridge legacy S3 tooling with decentralized IPFS access.',
+      'Offer WebDAV and HTTP endpoints for collaboration suites.',
+      'Blend centralized and decentralized patterns as needed.',
+      'Let developers change protocols without rewriting storage.',
+    ],
+  },
+  {
+    title: 'Autonomous Backup & Recovery',
+    bullets: [
+      'Self-healing backups that maintain integrity automatically.',
+      'Zone-aware replication delivers geographic redundancy.',
+      'Instant recovery with continuous verification.',
+      'Keeps backups up-to-date without operator intervention.',
+    ],
+  },
+  {
+    title: 'Content Distribution & CDN',
+    bullets: [
+      'Distribute media and assets across a planetary mesh.',
+      'Use IPFS for decentralized caching and retrieval.',
+      'Serve identical content across multiple access protocols.',
+      'Geo-optimize placement for latency-sensitive workloads.',
+    ],
+  },
+]
+
+export function StorageUseCases() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Sovereign storage for every data-intensive workload.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage adapts to compliance-driven enterprise data,
+            decentralized content distribution, and everything in between.
+            Choose the pattern that fits your strategy without sacrificing
+            ownership.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {primaryUseCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">
+                {useCase.title}
+              </h3>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {useCase.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 rounded-3xl border border-slate-200 bg-slate-50 p-10 shadow-sm">
+          <h3 className="text-2xl font-semibold text-gray-900">
+            Storage-Specific Scenarios
+          </h3>
+          <p className="mt-4 text-sm leading-relaxed text-gray-600">
+            These patterns highlight how Mycelium Storage keeps sovereignty,
+            protocol flexibility, and resilience at the center of data strategy.
+          </p>
+          <div className="mt-10 grid gap-8 lg:grid-cols-2">
+            {storageSpecificUseCases.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-100 bg-white p-6 leading-relaxed text-gray-600"
+              >
+                <h4 className="text-lg font-semibold text-gray-900">
+                  {useCase.title}
+                </h4>
+                <ul className="mt-4 space-y-3 text-sm">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex gap-3">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

vite.config.ts

@@ -5,6 +5,9 @@ import path from 'node:path'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    allowedHosts: ['stale-adults-strive.loca.lt'],
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),