feat: add mobile app UI screenshots and enhance text components

- Added new app UI screenshots for cloud features (connector, billing, kubeconfig, reserve)
- Added new hero image (cloudhero3.webp) for cloud section
- Enhanced Texts component with new cyan color variant and default props support
- Updated Eyebrow component to use consistent styling with accent color and tracking
- Simplified CloudArchitecture component by removing redundant style props
- Completely rebuilt CloudFeatures component with

README.md

@@ -1,93 +1,195 @@
 # Project Mycelium Website
 
-A multi-page website for Project Mycelium built with React, Vite, TypeScript, and Tailwind CSS.
+All in one project mycelium website
 
-## Tech Stack
 
-- **Framework**: React 19
-- **Build Tool**: Vite 7
+- **Repository:** [https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/](https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/)
+
+
+- **Main Branch (Production):** [https://www.projectmycelium.com/](https://www.projectmycelium.com)
+- **Dev Branch (Staging):** [https://www2.projectmycelium.com/](https://www2.projectmycelium.com/)
+
+
+
+---
+
+
+## About
+
+
+This is the official website for Mycelium , built using Vite.js and Tailwind CSS.
+
+
+---
+
+
+## Technologies
+
+
+- **Framework**: Vite.js (React)
 - **Language**: TypeScript
-- **Styling**: Tailwind CSS 4
-- **Routing**: React Router DOM 7
-- **Animations**: Framer Motion 11
+- **Styling**: Tailwind CSS
 
-## Project Structure
 
-```
-src/
-├── components/          # Shared components
-│   ├── AnimatedSection.tsx
-│   ├── Button.tsx
-│   ├── CircleBackground.tsx
-│   ├── Container.tsx
-│   ├── Header.tsx
-│   ├── Layout.tsx
-│   └── Logo.tsx
-├── pages/              # Page-specific components
-│   ├── home/           # Home page blocks
-│   ├── cloud/          # Cloud page blocks
-│   ├── network/        # Network page blocks
-│   │   ├── animations/ # SVG animations
-│   │   ├── Hero.tsx
-│   │   ├── About.tsx
-│   │   ├── Features.tsx
-│   │   ├── PrimaryFeatures.tsx
-│   │   ├── SecondaryFeatures.tsx
-│   │   ├── CallToAction.tsx
-│   │   └── NetworkPage.tsx
-│   └── agents/         # Agents page blocks
-├── styles/
-│   └── tailwind.css    # Tailwind configuration
-└── App.tsx            # Main app with routing
-```
+---
 
-## Pages
 
-- **Home** (`/`) - Main landing page with placeholder content
-- **Cloud** (`/cloud`) - Mycelium Cloud information (placeholder)
-- **Network** (`/network`) - Full Network page with:
-  - Hero section
-  - Our Mission (About)
-  - Core Components (Features with animations)
-  - How It Works
-  - Roadmap
-  - Call to Action
-- **Agents** (`/agents`) - Mycelium Agents information (placeholder)
+## Dependencies
 
-## Development
+- **@emailjs/browser**: ^4.4.1
+- **@headlessui/react**: ^2.2.9
+- **@heroicons/react**: ^2.2.0
+- **@lobehub/icons**: ^1.97.2
+- **@radix-ui/react-icons**: ^1.3.2
+- **@react-three/drei**: ^9.89.2
+- **@react-three/fiber**: ^8.15.12
+- **@tabler/icons-react**: ^3.35.0
+- **@tailwindcss/forms**: ^0.5.10
+- **@types/node**: ^20.19.23
+- **@types/react**: ^18.3.26
+- **@types/react-dom**: ^18.3.7
+- **@types/react-router-dom**: ^5.3.3
+- **class-variance-authority**: ^0.7.1
+- **clsx**: ^2.1.1
+- **cobe**: ^0.6.5
+- **dotted-map**: ^2.2.3
+- **framer-motion**: ^10.18.0
+- **lucide-react**: ^0.544.0
+- **motion**: ^12.23.24
+- **popmotion**: ^11.0.5
+- **react**: ^18.3.1
+- **react-countup**: ^6.5.3
+- **react-dom**: ^18.3.1
+- **react-icons**: ^5.5.0
+- **react-router-dom**: ^7.9.4
+- **react-type-animation**: ^3.2.0
+- **tailwind-merge**: ^3.3.1
+- **tailwindcss**: ^4.1.15
+- **three**: ^0.151.0
+- **typescript**: ^5.9.3
+- **use-debounce**: ^10.0.6
 
-Install dependencies:
-```bash
-npm install
-```
+### Dev Dependencies
 
-Run development server:
-```bash
-npm run dev
-```
+- **@tailwindcss/postcss**: ^4.1.15
+- **@types/three**: ^0.151.0
+- **@vitejs/plugin-react**: ^5.0.4
+- **autoprefixer**: ^10.4.20
+- **eslint**: ^8.57.1
+- **prettier**: ^3.6.2
+- **prettier-plugin-tailwindcss**: ^0.6.14
+- **sharp**: ^0.33.1
+- **tw-animate-css**: ^1.4.0
+- **vite**: ^7.1.7
 
-Build for production:
-```bash
-npm run build
-```
+---
 
-Preview production build:
-```bash
-npm run preview
-```
 
-## Styling
+## File Structure
 
-The project follows the same styling conventions as the source Mycelium website:
-- **Font**: Inter (Google Fonts)
-- **Colors**: Custom gray scale and cyan accent
-- **Animations**: Framer Motion with reduced motion support
-- **Design**: Tailwind CSS with custom theme extensions
 
-## Migration Notes
+- **Pages**: `src/pages`
+- **Components**: `src/components`
+- **Images**: `public/images`, `src/images`
+- **CSS**: `src/index.css`, `src/App.css`
 
-This website consolidates multiple one-pager sites into a single multi-page application. The Network page contains fully migrated content from the original www_mycelium_net repository, including:
-- All animated SVG components
-- Responsive layouts
-- Hover effects and transitions
-- Accessibility features
+
+---
+
+
+## Branding
+
+
+- **Font**: 'Mulish', 'Neuton'
+- **Logos**: `public/images/logo.svg`, `public/images/logomark.svg`
+
+---
+
+
+## Get Started
+
+
+Follow these steps to get the project running locally:
+
+
+1.  **Install Dependencies**:
+
+    `npm install`
+
+2.  **Build the Project**:
+
+    `npm run build`
+
+3.  **Start the Development Server**:
+
+    `npm run dev`
+
+---
+
+
+## Development Guide
+
+
+This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.
+
+
+### Homepage Structure
+
+
+The homepage is composed of components from `src/components` and pages are defined in `src/pages`.
+
+To edit a specific section of the homepage, navigate to `src/components/`  and modify the corresponding component file.
+
+
+### Base Layout
+
+The base layout for all pages is defined in `src/components/Layout.tsx`.
+
+
+### Creating a New Page
+
+To create a new page, add a new route in `src/App.tsx` and create a corresponding component in `src/pages`.
+
+
+---
+
+
+## Contributing
+
+
+- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
+- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
+- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
+
+
+---
+
+
+## Report an Error
+
+
+To report an issue, please use the following link and provide the requested information:
+
+
+- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
+
+
+- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
+
+
+When reporting an issue, please include:
+
+
+- **URL**: The page where the error occurred.
+- **Repo**: The repository you are working with.
+- **Branch**: The specific branch you are on.
+- **Problem**: A detailed description of the problem.
+
+
+---
+
+
+## Questions
+
+
+If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

docs/mycelium_cloud_for_devs.md

@@ -0,0 +1,181 @@
+# Mycelium Cloud for Developers
+
+*Developer Guide to Decentralized Cloud Computing*
+
+## Overview
+Mycelium Cloud provides a comprehensive platform for deploying and managing Kubernetes clusters on the decentralized ThreeFold Grid infrastructure. This guide covers the core features and capabilities available to developers.
+
+## Architecture
+
+### Decentralized Infrastructure
+Mycelium Cloud deploys on ThreeFold Grid's distributed network, providing:
+- **Direct Node Access**: Each node gets a unique Mycelium IP address
+- **Cross-Node Communication**: Services communicate across nodes using Mycelium networking
+- **Secure Communication**: All traffic is encrypted through the Mycelium network
+- **No Public IPs Required**: Services accessible via Mycelium IPs
+
+### Network Flow
+User Machine → Mycelium Network → Cluster Node → Service
+
+### Kubernetes Management
+- **K3s Support**: Full K3s cluster deployment and management
+- **IPv6 Networking**: Mycelium peer-to-peer networking
+- **High Availability**: Multi-master cluster support
+
+---
+
+## Core Features
+
+### Mycelium Networking
+Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
+
+**Features:**
+- End-to-end encrypted
+- Nature-inspired
+- Direct node communication
+- Secure peer-to-peer connections
+
+### Zero-Image Technology
+Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.
+
+**Benefits:**
+- **Deterministic Deployments**: Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift
+- **Multi-Workload Compatibility with Secure Boot**: Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification
+- **Smart Contract-Based Deployment**: Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution
+
+### Quantum-Safe Storage (QSS)
+Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.
+
+**Features:**
+- **Self-Healing Storage System**: Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention
+- **Multi-Protocol Data Access**: Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration
+- **Geo-Aware Data Placement & Replication**: Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience
+
+### Multi-Master Clusters
+High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
+
+**Capabilities:**
+- **HA Control Plane**
+- **Automatic Failover**
+- **Zero-downtime Upgrades**
+
+### Effortless Load Balancing & Scaling
+Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
+
+**Features:**
+- **Auto-scaling**
+- **Built-in load balancing**
+- **High availability**
+
+### Simple Web Gateway Access
+Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
+
+**Benefits:**
+- **Simple configuration**
+- **Built-in routing**
+- **No ingress controllers**
+
+---
+
+## Getting Started
+
+### 1. Account Setup
+- **Sign Up**: Create your account from signup page
+- **Verify Email**: Check your email and verify your account
+- **Add Funds**: Navigate to your dashboard and add credits to your account
+- **Add SSH Key**: Navigate to Add SSH card and upload your public SSH key
+
+### 2. Deploy Your First Cluster
+- **Access Deploy**: Click "Deploy Cluster" from your dashboard
+- **Configure VMs**: Define your virtual machines:
+  - Choose CPU, memory, and storage requirements
+  - Select the number of master and worker nodes
+- **Select Nodes**: Choose ThreeFold Grid nodes for deployment
+- **Review & Deploy**: Confirm your configuration and deploy
+
+### 3. Access Your Cluster
+
+#### Download Kubeconfig
+- Go to dashboard → Clusters → Click download icon (⬇️)
+- Set kubeconfig: `export KUBECONFIG=/path/to/config`
+- Test: `kubectl get nodes`
+
+#### SSH Access
+- **Find Mycelium IPs**: Check cluster details page for node IPs
+- **Download Mycelium Binary**:
+  ```bash
+  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
+  ```
+- **Start Mycelium**:
+  ```bash
+  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
+  ```
+- **SSH to nodes**: `ssh root@<mycelium-ip>`
+
+---
+
+## Use Cases
+
+### AI/ML Training
+Run GPU-accelerated workloads for deep learning and data science on demand.
+- **GPU Acceleration**
+- **Scalable Compute**
+- **Cost Optimization**
+
+### Enterprise Kubernetes
+Deploy production-grade clusters with full control and no vendor lock-in.
+- **High Availability**
+- **Security**
+- **Compliance**
+
+### Edge & IoT
+Leverage global nodes for low-latency edge computing and IoT applications.
+- **Low Latency**
+- **Global Distribution**
+- **Real-time Processing**
+
+### DigitalMe Example
+Example of what can be done with Mycelium Cloud. With a very simple execution, the following can be deployed on k8s cluster and served on Mycelium IPs:
+
+- **Cryptpad**: Encrypted document collaboration
+- **Elements**: Matrix chat (the Rust one)
+- **Stallwart**: Mail/calendar/contacts
+- **Gitea**: Git hosting and code collaboration
+- **Nextcloud**: File storage and synchronization
+- **LiveKit or Jitsi**: Video conferencing integrated with elements/nextcloud
+- **SSO**: Single Sign-On (can this be gitea as backend - later)
+
+This demonstrates the platform's capability to host complex, integrated applications with minimal configuration.
+
+---
+
+## Key Differentiators
+
+### Sovereign by Design
+Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.
+
+### Secure by Default
+Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.
+
+### Ready to Scale
+Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.
+
+---
+
+## Security Architecture
+
+### Provable Sovereignty
+Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.
+
+### Autonomous Zero-Trust
+Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.
+
+### Planetary-Scale Resilience
+Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.
+
+---
+
+*Mycelium Cloud - Comprehensive platform for decentralized Kubernetes deployment.*

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_gpu_for_devs.md

@@ -0,0 +1,157 @@
+# Mycelium GPU for Developers
+
+*The Energy Behind Intelligence*
+
+## Overview
+
+Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single sovereign fabric for running AI, ML, and rendering workloads.
+
+## Core Concept
+
+Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer. Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
+
+### Key Principles
+- **No Silos**: All GPU resources accessible through single interface
+- **No Intermediaries**: Direct access to GPU resources
+- **Raw, Verifiable Power**: Every GPU cycle cryptographically verified
+- **Orchestrated Through Code**: GPU resources managed through APIs and smart contracts
+
+---
+
+## Use Cases
+
+### AI/ML Training
+Run GPU-accelerated workloads for deep learning and data science on demand.
+
+**Features:**
+- **GPU Acceleration**: High-performance computing for machine learning
+- **Scalable Compute**: Scale training across multiple GPU resources
+- **Cost Optimization**: Pay only for actual GPU usage
+
+### Rendering & Visualization
+Run high-performance graphics processing workloads.
+
+**Applications:**
+- **3D Rendering**: Distributed rendering for film, games, and architecture
+- **Scientific Visualization**: Complex data visualization and analysis
+- **Virtual Reality**: Real-time VR/AR processing
+- **Digital Twins**: Real-time simulation and modeling
+
+### General GPU Computing
+High-performance computing for various computational workloads.
+
+**Applications:**
+- **Scientific Simulations**: Physics, chemistry, climate modeling
+- **Financial Modeling**: Risk analysis and algorithmic trading
+- **Cryptocurrency**: Mining and blockchain processing
+- **Protein Folding**: Drug discovery and molecular modeling
+
+---
+
+## Integration with Mycelium Cloud
+
+Mycelium GPU works seamlessly with Mycelium Cloud infrastructure:
+
+- **Unified Networking**: GPU nodes accessible via Mycelium network
+- **Shared Security**: Zero-trust security model applies to GPU operations
+- **Storage Integration**: Access quantum-safe storage from GPU workloads
+- **Kubernetes Support**: GPU workloads can be deployed as Kubernetes resources
+
+### Deployment Example
+```yaml
+# GPU workload specification for Kubernetes
+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"
+```
+
+---
+
+## Getting Started
+
+### Access GPU Resources
+1. **Account Setup**: Create Mycelium account with GPU access
+2. **Resource Request**: Use Mycelium GPU APIs to request GPU resources
+3. **Workload Deployment**: Deploy your AI/ML or compute workload
+4. **Monitor Usage**: Track GPU utilization and costs through dashboard
+
+### Basic Workflow
+```
+Application → Mycelium GPU API → GPU Resource Allocation → Workload Execution
+```
+
+### Key Benefits
+- **Deterministic Performance**: Predictable GPU allocation and performance
+- **Global Distribution**: Access GPU resources worldwide
+- **Transparent Costs**: Clear pricing without hidden fees
+- **Sovereign Control**: Full control over GPU workloads and data
+
+---
+
+## Technical Architecture
+
+### Distributed GPU Mesh
+Mycelium GPU creates a peer-to-peer network of GPU resources accessible through the Mycelium Network.
+
+**Components:**
+- **GPU Nodes**: Physical GPU hardware distributed globally
+- **Mycelium Network**: Encrypted peer-to-peer communication layer
+- **Orchestration Layer**: API and smart contract-based resource management
+- **Monitoring**: Real-time GPU utilization and health monitoring
+
+### Performance Characteristics
+- **Edge-to-Core Deployment**: Run workloads from edge devices to data centers
+- **Adaptive Intelligence Layer**: Optimizes GPU resource allocation
+- **Deterministic Performance**: Guaranteed resource availability and performance
+- **Transparent Cost**: All GPU usage tracked and billed transparently
+
+---
+
+## Key Differentiators
+
+### Unified Fabric
+Transforms fragmented GPU resources into a single, unified acceleration fabric accessible through standard APIs.
+
+### Sovereign Control
+Complete control over GPU workloads with no vendor lock-in or geographical restrictions.
+
+### Code-Driven Orchestration
+GPU resources managed through APIs and smart contracts, enabling automated and verifiable resource allocation.
+
+### Deterministic Performance
+Guaranteed GPU allocation with consistent performance characteristics across all workloads.
+
+---
+
+## Cost Efficiency
+
+Mycelium GPU provides cost-effective access to GPU resources through:
+
+- **Transparent Pricing**: No hidden fees or surprise charges
+- **Pay-per-Usage**: Pay only for actual GPU consumption
+- **Global Optimization**: Access GPUs where they're most cost-effective
+- **No Vendor Lock-in**: Avoid premium pricing from single providers
+
+---
+
+*Mycelium GPU - Unifying distributed acceleration into a sovereign fabric.*

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.

index.html

@@ -8,6 +8,7 @@
     <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -12,6 +12,7 @@
         "@headlessui/react": "^2.2.9",
         "@heroicons/react": "^2.2.0",
         "@lobehub/icons": "^1.97.2",
+        "@radix-ui/react-icons": "^1.3.2",
         "@react-three/drei": "^9.89.2",
         "@react-three/fiber": "^8.15.12",
         "@tabler/icons-react": "^3.35.0",
@@ -2478,6 +2479,15 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.2.0",
     "@lobehub/icons": "^1.97.2",
+    "@radix-ui/react-icons": "^1.3.2",
     "@react-three/drei": "^9.89.2",
     "@react-three/fiber": "^8.15.12",
     "@tabler/icons-react": "^3.35.0",

src/App.tsx

@@ -1,14 +1,20 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Layout } from './components/Layout'
-import HomePage from './pages/home/HomePage'
-import CloudPage from './pages/cloud/CloudPage'
-import NetworkPage from './pages/network/NetworkPage'
-import AgentsPage from './pages/agents/AgentsPage'
-import DownloadPage from './pages/download/DownloadPage'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { lazy, Suspense } from 'react';
+
+const HomePage = lazy(() => import('./pages/home/HomePage'));
+const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
+const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
+const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
+const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
+const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
+const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
+const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 
 function App() {
   return (
     <BrowserRouter>
+      <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<HomePage />} />
@@ -16,8 +22,12 @@ function App() {
             <Route path="network" element={<NetworkPage />} />
             <Route path="agents" element={<AgentsPage />} />
             <Route path="download" element={<DownloadPage />} />
+            <Route path="compute" element={<ComputePage />} />
+            <Route path="storage" element={<StoragePage />} />
+            <Route path="gpu" element={<GpuPage />} />
           </Route>
         </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }

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/ContactForm.tsx

@@ -9,7 +9,7 @@ interface ContactFormProps {
   isOpen: boolean
   onClose: () => void
   title?: string
-  formType?: 'investor' | 'partner' | 'agent_waitlist'
+  formType?: 'investor' | 'partner' | 'agent_waitlist' | 'storage_waitlist' | 'compute_waitlist' | 'gpu_waitlist'
 }
 
 const initialFormState = {
@@ -187,6 +187,12 @@ export default function ContactForm({
                           ? 'Tell us about your investment interests and how we can collaborate.'
                           : formType === 'agent_waitlist'
                             ? 'Tell us about your sovereign agent requirements.'
+                            : formType === 'storage_waitlist'
+                            ? 'Tell us about your storage requirements.'
+                            : formType === 'compute_waitlist'
+                            ? 'Tell us about your compute requirements.'
+                            : formType === 'gpu_waitlist'
+                            ? 'Tell us about your GPU requirements.'
                             : 'Tell us about your project or how we can help.'
                       }
                     />

src/components/Footer.tsx

@@ -8,7 +8,7 @@ export function Footer() {
         <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
           <div>
             <div className="flex items-center text-gray-900">
-              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
+              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-15 w-15 flex-none" />
               <div className="ml-4">
                 <p className="text-base font-semibold">Project Mycelium</p>
                 <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>

src/components/Header.tsx

@@ -1,7 +1,9 @@
 import { Link } from 'react-router-dom'
+import { Dropdown } from './ui/Dropdown'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/pmyceliumlogo.png'
+import pmyceliumLogo from '../images/logos/logo_1.png'
 
 export function Header() {
   return (
@@ -13,12 +15,20 @@ export function Header() {
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
-              <Link
-                to="/cloud"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
+              <Dropdown
+                buttonContent={
+                  <>
                     Cloud
-              </Link>
+                    <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+                  </>
+                }
+                items={[
+                  { name: 'Cloud', href: '/cloud' },
+                  { name: 'Compute', href: '/compute' },
+                  { name: 'Storage', href: '/storage' },
+                  { name: 'GPU', href: '/gpu' },
+                ]}
+              />
               <Link
                 to="/network"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"

src/components/Texts.tsx

@@ -13,6 +13,7 @@ const colorVariants = {
   secondary: 'text-gray-600',
   light: 'text-gray-50',
   accent: 'text-cyan-500',
+  cyan: 'text-cyan-50',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',
@@ -33,7 +34,8 @@ type PolymorphicProps<E extends React.ElementType, P> = P & {
 
 const createTextComponent = <DefaultElement extends React.ElementType>(
   defaultElement: DefaultElement,
-  defaultClassName: string
+  defaultClassName: string,
+  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
 ) => {
   type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
     E,
@@ -41,9 +43,9 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
   >
 
   function Text<E extends React.ElementType = DefaultElement>({
-    font = 'sans',
+    font = defaultProps.font || 'sans',
     as,
-    color = 'primary',
+    color = defaultProps.color || 'primary',
     className,
     children,
     ...props
@@ -72,7 +74,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports based on your tailwind.css and the example
 export const H1 = createTextComponent(
   'h1',
-  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+  'text-5xl lg:text-7xl font-medium leading-tight tracking-tight'
 )
 export const H2 = createTextComponent(
   'h2',
@@ -88,7 +90,7 @@ export const H4 = createTextComponent(
 )
 export const P = createTextComponent(
   'p',
-  'text-base lg:text-lg leading-relaxed'
+  'text-base lg:text-xl leading-relaxed'
 )
 export const Small = createTextComponent(
   'small',
@@ -100,11 +102,12 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
   'h5',
-  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
+  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
 )
 export const Eyebrow = createTextComponent(
   'h2',
-  'text-base/7 font-semibold tracking-wide'
+  'text-base/7 font-semibold tracking-[0.18em] uppercase',
+  { color: 'accent' }
 )
 export const SectionHeader = createTextComponent(
   'p',
@@ -160,4 +163,4 @@ export const DownloadCardDescription = createTextComponent(
 )
 
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-relaxed font-light')

src/components/magicui/bento-grid.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const BentoGrid = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+const BentoCard = ({
+  name,
+  className,
+  background,
+  Icon,
+  description,
+  href,
+  cta,
+}: {
+  name: string;
+  className: string;
+  background: ReactNode;
+  Icon: any;
+  description: string;
+  href: string;
+  cta: string;
+}) => (
+  <div
+    key={name}
+    className={cn(
+      "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
+      // light styles
+      "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+      // dark styles
+      "transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      className,
+    )}
+  >
+    <div>{background}</div>
+    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
+      <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 -translate-y-12 transition-all duration-300 ease-in-out group-hover:scale-75 group-hover:text-sky-700" />
+      <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+        {name}
+      </h3>
+      <p className="max-w-lg text-neutral-400">{description}</p>
+    </div>
+
+    <div
+      className={cn(
+        "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",
+      )}
+    >
+      <a
+        href={href}
+        className="pointer-events-auto inline-flex items-center gap-2 text-sm font-medium text-neutral-600 transition-colors hover:text-sky-700"
+      >
+        {cta}
+        <ArrowRight className="h-4 w-4" />
+      </a>
+    </div>
+  </div>
+);
+
+export { BentoCard, BentoGrid };

src/components/magicui/magic-card.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+
+interface MagicCardProps {
+  children: ReactNode;
+  className?: string;
+  gradientSize?: number;
+  gradientColor?: string;
+}
+
+export const MagicCard = ({ children, className, gradientSize = 200, gradientColor = '#262626' }: MagicCardProps) => {
+  const mouseX = useRef<number>(0);
+  const mouseY = useRef<number>(0);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [isHovering, setIsHovering] = useState(false);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (cardRef.current) {
+        const rect = cardRef.current.getBoundingClientRect();
+        mouseX.current = e.clientX - rect.left;
+        mouseY.current = e.clientY - rect.top;
+        cardRef.current.style.setProperty('--mouse-x', `${mouseX.current}px`);
+        cardRef.current.style.setProperty('--mouse-y', `${mouseY.current}px`);
+      }
+    };
+
+    const currentCardRef = cardRef.current;
+    if (currentCardRef) {
+      currentCardRef.addEventListener('mousemove', handleMouseMove);
+    }
+
+    return () => {
+      if (currentCardRef) {
+        currentCardRef.removeEventListener('mousemove', handleMouseMove);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={cardRef}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      className={cn(
+        'relative w-full h-full p-px rounded-2xl transition-all duration-300 ease-in-out',
+        'bg-neutral-900 hover:bg-neutral-800',
+        className
+      )}
+      style={{
+        background: isHovering
+          ? `radial-gradient(var(--gradient-size, ${gradientSize}px) circle at var(--mouse-x) var(--mouse-y), var(--gradient-color, ${gradientColor}), transparent 100%)`
+          : 'transparent',
+      }}
+    >
+      <div className="relative w-full h-full bg-neutral-950/90 rounded-[15px] p-8">
+        {children}
+      </div>
+    </div>
+  );
+};

src/components/ui/CubeLight.tsx

@@ -26,8 +26,11 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
     <path
       fill={`url(#cube-gradient-${index})`}
       d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+      stroke="rgba(107, 114, 128, 0.3)"
+      strokeWidth="0.5"
     />
     <defs>
+      {/* Blue-white soft gradient */}
       <linearGradient
         id={`cube-gradient-${index}`}
         x1="185.298"
@@ -36,14 +39,24 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
         y2="206.448"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#E5E7EB" />
-        <stop offset="1" stopColor="#9CA3AF" />
+        <stop offset="0%" stopColor="#EBF8FF" stopOpacity="0.75" />
+        <stop offset="40%" stopColor="#BEE3F8" stopOpacity="0.8" />
+        <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.9" />
       </linearGradient>
     </defs>
   </svg>
 );
 
-export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
+export function CubeLight({
+  title,
+  descriptionTitle,
+  description,
+  isActive,
+  index,
+  onHover,
+  onLeave,
+  onClick,
+}: CubeProps) {
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
@@ -62,22 +75,34 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
           ease: "easeOut",
         }}
       >
+        {/* Glow aura behind cube */}
+        <div
+          className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
+            isActive
+              ? "bg-cyan-400/20 opacity-30"
+              : "bg-cyan-200/20 opacity-40"
+          }`}
+        />
+
         {/* SVG Cube */}
         <CubeSvg
           index={index}
-          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
+          className="w-48 sm:w-64 lg:w-80 h-auto relative"
           style={{
-            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
+            filter: isActive
+              ? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
+              : "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
+            transition: "all 0.4s ease",
           }}
         />
 
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
           <h3
-            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
+            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
             style={{
-              transform: 'rotate(0deg) skewX(0deg)',
-              transformOrigin: 'center'
+              textShadow:
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
             }}
           >
             {title}
@@ -106,25 +131,23 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
                 y1="1"
                 x2="120"
                 y2="1"
-                stroke="black"
+                stroke="rgba(34, 211, 238, 0.6)"
                 strokeWidth="1"
-                opacity="0.6"
+                opacity="0.8"
               />
             </svg>
 
             {/* Description text */}
             <div className="ml-32 w-80">
-              <h4 className="text-black text-base font-semibold mb-2">
+              <h4 className="text-black text-base font-semibold mb-2 drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
                 {descriptionTitle}
               </h4>
-              <p className="text-gray-800 text-sm leading-relaxed font-light">
+              <p className="text-gray-800 text-sm leading-relaxed font-light drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
                 {description}
               </p>
             </div>
           </motion.div>
         )}
-
-        {/* Description for Mobile - Below cube */}
       </motion.div>
     </div>
   );

src/components/ui/Dropdown.tsx

@@ -0,0 +1,55 @@
+import { Menu, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+
+interface DropdownItem {
+  name: string
+  href: string
+}
+
+interface DropdownProps {
+  buttonContent: React.ReactNode
+  items: DropdownItem[]
+}
+
+export function Dropdown({ buttonContent, items }: DropdownProps) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors">
+          {buttonContent}
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {items.map((item) => (
+              <Menu.Item key={item.href}>
+                {({ active }: { active: boolean }) => (
+                  <Link
+                    to={item.href}
+                    className={`
+                      ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'}
+                      block px-4 py-2 text-sm
+                    `}
+                  >
+                    {item.name}
+                  </Link>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  )
+}

src/components/ui/HalfGlobe.tsx

@@ -3,13 +3,10 @@
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Line, OrbitControls, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
-
-type RotatableGroup = {
-  rotation: { y: number };
-};
+import type { Group } from "three";
 
 function Globe() {
-  const groupRef = useRef<RotatableGroup | null>(null);
+  const groupRef = useRef<Group>(null);
   const cloudTexture = useTexture("/images/cloud1.png");
 
   // Rotate the globe slowly
@@ -78,7 +75,7 @@ function Globe() {
 
 export function HalfGlobe() {
   return (
-    <div className="w-full h-[500px] bg-white flex items-center justify-center">
+    <div key="half-globe" className="w-full h-[500px] bg-white flex items-center justify-center">
       <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
         <ambientLight intensity={0.8} />
         <Globe />

src/components/ui/StackedCubesLight.tsx

@@ -2,13 +2,14 @@
 
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { CubeLight } from "@/components/ui/CubeLight"
+import { CubeLight } from "@/components/ui/CubeLight";
 
 const stackData = [
   {
     id: "agent",
     title: "Agent Layer",
-    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
+    descriptionTitle:
+      "Your sovereign agent with private memory and permissioned data access—always under your control.",
     description:
       "Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
     position: "top",
@@ -16,7 +17,8 @@ const stackData = [
   {
     id: "network",
     title: "Network Layer",
-    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
+    descriptionTitle:
+      "A global, end-to-end encrypted overlay that simply doesn’t break.",
     description:
       "Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
     position: "middle",
@@ -24,7 +26,8 @@ const stackData = [
   {
     id: "cloud",
     title: "Cloud Layer",
-    descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
+    descriptionTitle:
+      "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
     description:
       "Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
     position: "bottom",
@@ -32,23 +35,27 @@ const stackData = [
 ];
 
 export function StackedCubesLight() {
-  const [active, setActive] = useState<string | null>("agent");
-  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+  const [active, setActive] = useState<string | null>("network");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");
 
   const handleCubeClick = (id: string) => {
-    setSelectedForMobile(prev => (prev === id ? null : id));
+    setSelectedForMobile((prev) => (prev === id ? null : id));
   };
 
-  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
+  const selectedMobileLayer = stackData.find(
+    (layer) => layer.id === selectedForMobile
+  );
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center relative">
+      {/* ✨ Ambient cyan-white gradient background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
       <div
         className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-      onMouseLeave={() => setActive("agent")}
+        onMouseLeave={() => setActive("network")}
       >
         <motion.div
-        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
+          className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
           animate={{ y: ["-8px", "8px"] }}
           transition={{
             duration: 4,
@@ -60,12 +67,20 @@ export function StackedCubesLight() {
           {stackData.map((layer, index) => (
             <div
               key={layer.id}
-            className="absolute"
+              className="absolute transition-all duration-500"
               style={{
                 top: `calc(${index * 30}% - ${index * 10}px)`,
                 zIndex: active === layer.id ? 20 : 10 - index,
               }}
             >
+              {/* 🌫 subtle glow behind each cube */}
+              <div
+                className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
+                  active === layer.id
+                    ? "bg-cyan-300/20 opacity-20"
+                    : "bg-cyan-200/20 opacity-20"
+                }`}
+              />
               <CubeLight
                 title={layer.title}
                 descriptionTitle={layer.descriptionTitle}
@@ -80,12 +95,14 @@ export function StackedCubesLight() {
           ))}
         </motion.div>
       </div>
+
+      {/* Mobile layer description */}
       {selectedMobileLayer && (
-      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
-        <h4 className="text-black text-lg font-semibold mb-2 text-center">
+        <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-white/50 backdrop-blur-xl border border-cyan-100/40 rounded-xl shadow-[0_0_25px_rgba(0,255,255,0.15)]">
+          <h4 className="text-black text-lg font-semibold mb-2 text-center drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
             {selectedMobileLayer.descriptionTitle}
           </h4>
-        <p className="text-gray-700 text-sm leading-relaxed text-center">
+          <p className="text-cyan-900/80 text-sm leading-relaxed text-center drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
             {selectedMobileLayer.description}
           </p>
         </div>

src/components/ui/apple-cards-carousel.tsx

@@ -0,0 +1,196 @@
+"use client";
+import React, {
+  useEffect,
+  useState,
+} from "react";
+import {
+  IconArrowNarrowLeft,
+  IconArrowNarrowRight,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import { cn } from "@/lib/utils";
+import { Link } from "react-router-dom";
+import { motion } from "motion/react";
+
+interface CarouselProps {
+  items: JSX.Element[];
+  initialScroll?: number;
+}
+
+type Card = {
+  src: string;
+  title: string;
+  category: string;
+  description: string;
+  link: string;
+  bg: any;
+};
+
+export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
+  const carouselRef = React.useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(true);
+
+  useEffect(() => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollLeft = initialScroll;
+      checkScrollability();
+    }
+  }, [initialScroll]);
+
+  const checkScrollability = () => {
+    if (carouselRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
+    }
+  };
+
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
+    }
+  };
+
+  const scrollRight = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
+    }
+  };
+
+  return (
+      <div className="relative w-full">
+        <div
+          className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20"
+          ref={carouselRef}
+          onScroll={checkScrollability}
+        >
+          <div
+            className={cn(
+              "absolute right-0 z-[1000] h-auto w-[5%] overflow-hidden bg-gradient-to-l",
+            )}
+          ></div>
+
+          <div
+            className={cn(
+              "flex flex-row justify-start gap-4 pl-4",
+              "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
+            )}
+          >
+            {items.map((item, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  y: 20,
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    duration: 0.5,
+                    delay: 0.2 * index,
+                    ease: "easeOut",
+                  },
+                }}
+                key={"card" + index}
+                className="rounded-3xl last:pr-[5%] md:last:pr-[33%] "
+              >
+                {item}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <div className="mr-10 flex justify-end gap-2">
+          <button
+            className="relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-neutral-800 disabled:opacity-50"
+            onClick={scrollLeft}
+            disabled={!canScrollLeft}
+          >
+            <IconArrowNarrowLeft className="h-6 w-6 text-white" />
+          </button>
+          <button
+            className="relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-neutral-800 disabled:opacity-50"
+            onClick={scrollRight}
+            disabled={!canScrollRight}
+          >
+            <IconArrowNarrowRight className="h-6 w-6 text-white" />
+          </button>
+        </div>
+      </div>
+  );
+};
+
+export const Card = ({
+  card,
+  layout = false,
+}: {
+  card: Card;
+  layout?: boolean;
+}) => {
+  
+  return (
+    <Link to={card.link}>
+      <motion.div
+        layoutId={layout ? `card-${card.title}` : undefined}
+        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
+        style={{
+          backgroundImage: `url(${card.bg})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        <div className="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
+        <div className="relative z-40 p-8 w-full">
+          <motion.p
+            layoutId={layout ? `category-${card.category}` : undefined}
+            className="text-left font-sans text-sm font-medium text-white md:text-base"
+          >
+            {card.category}
+          </motion.p>
+          <motion.p
+            layoutId={layout ? `title-${card.title}` : undefined}
+            className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
+          >
+            {card.title}
+          </motion.p>
+          <div className="flex flex-row justify-between items-center w-full mt-4">
+            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
+              {card.description}
+            </motion.p>
+            <div className="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
+              <IconChevronRight className="h-6 w-6" />
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </Link>
+  );
+};
+
+export const BlurImage = ({
+  src,
+  className,
+  width,
+  height,
+  alt,
+  ...rest
+}: React.ImgHTMLAttributes<HTMLImageElement>) => {
+  const [isLoading, setLoading] = useState(true);
+  return (
+    <img
+      className={cn(
+        "h-full w-full transition duration-300",
+        isLoading ? "blur-sm" : "blur-0",
+        className,
+      )}
+      onLoad={() => setLoading(false)}
+      src={src as string}
+      width={width}
+      height={height}
+      loading="lazy"
+      decoding="async"
+      alt={alt ? alt : "Background of a beautiful view"}
+      {...rest}
+    />
+  );
+};

src/components/ui/glowing-effect.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { memo, useCallback, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { animate } from "motion/react";
+
+interface GlowingEffectProps {
+  blur?: number;
+  inactiveZone?: number;
+  proximity?: number;
+  spread?: number;
+  variant?: "default" | "white";
+  glow?: boolean;
+  className?: string;
+  disabled?: boolean;
+  movementDuration?: number;
+  borderWidth?: number;
+}
+const GlowingEffect = memo(
+  ({
+    blur = 0,
+    inactiveZone = 0.7,
+    proximity = 0,
+    spread = 20,
+    variant = "default",
+    glow = false,
+    className,
+    movementDuration = 2,
+    borderWidth = 1,
+    disabled = true,
+  }: GlowingEffectProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const animationFrameRef = useRef<number>(0);
+
+    const handleMove = useCallback(
+      (e?: MouseEvent | { x: number; y: number }) => {
+        if (!containerRef.current) return;
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const element = containerRef.current;
+          if (!element) return;
+
+          const { left, top, width, height } = element.getBoundingClientRect();
+          const mouseX = e?.x ?? lastPosition.current.x;
+          const mouseY = e?.y ?? lastPosition.current.y;
+
+          if (e) {
+            lastPosition.current = { x: mouseX, y: mouseY };
+          }
+
+          const center = [left + width * 0.5, top + height * 0.5];
+          const distanceFromCenter = Math.hypot(
+            mouseX - center[0],
+            mouseY - center[1]
+          );
+          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+
+          if (distanceFromCenter < inactiveRadius) {
+            element.style.setProperty("--active", "0");
+            return;
+          }
+
+          const isActive =
+            mouseX > left - proximity &&
+            mouseX < left + width + proximity &&
+            mouseY > top - proximity &&
+            mouseY < top + height + proximity;
+
+          element.style.setProperty("--active", isActive ? "1" : "0");
+
+          if (!isActive) return;
+
+          const currentAngle =
+            parseFloat(element.style.getPropertyValue("--start")) || 0;
+          let targetAngle =
+            (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
+              Math.PI +
+            90;
+
+          const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
+          const newAngle = currentAngle + angleDiff;
+
+          animate(currentAngle, newAngle, {
+            duration: movementDuration,
+            ease: [0.16, 1, 0.3, 1],
+            onUpdate: (value) => {
+              element.style.setProperty("--start", String(value));
+            },
+          });
+        });
+      },
+      [inactiveZone, proximity, movementDuration]
+    );
+
+    useEffect(() => {
+      if (disabled) return;
+
+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => handleMove(e);
+
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      document.body.addEventListener("pointermove", handlePointerMove, {
+        passive: true,
+      });
+
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        window.removeEventListener("scroll", handleScroll);
+        document.body.removeEventListener("pointermove", handlePointerMove);
+      };
+    }, [handleMove, disabled]);
+
+    return (
+      <>
+        <div
+          className={cn(
+            "pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity",
+            glow && "opacity-100",
+            variant === "white" && "border-white",
+            disabled && "!block"
+          )}
+        />
+        <div
+          ref={containerRef}
+          style={
+            {
+              "--blur": `${blur}px`,
+              "--spread": spread,
+              "--start": "0",
+              "--active": "0",
+              "--glowingeffect-border-width": `${borderWidth}px`,
+              "--repeating-conic-gradient-times": "5",
+              "--gradient":
+                variant === "white"
+                  ? `repeating-conic-gradient(
+                  from 236.84deg at 50% 50%,
+                  var(--black),
+                  var(--black) calc(25% / var(--repeating-conic-gradient-times))
+                )`
+                  : `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%),
+                radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%),
+                radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), 
+                radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%),
+                repeating-conic-gradient(
+                  from 236.84deg at 50% 50%,
+                  #dd7bbb 0%,
+                  #d79f1e calc(25% / var(--repeating-conic-gradient-times)),
+                  #5a922c calc(50% / var(--repeating-conic-gradient-times)), 
+                  #4c7894 calc(75% / var(--repeating-conic-gradient-times)),
+                  #dd7bbb calc(100% / var(--repeating-conic-gradient-times))
+                )`,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
+            glow && "opacity-100",
+            blur > 0 && "blur-[var(--blur)] ",
+            className,
+            disabled && "!hidden"
+          )}
+        >
+          <div
+            className={cn(
+              "glow",
+              "rounded-[inherit]",
+              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
+              "after:[border:var(--glowingeffect-border-width)_solid_transparent]",
+              "after:[background:var(--gradient)] after:[background-attachment:fixed]",
+              "after:opacity-[var(--active)] after:transition-opacity after:duration-300",
+              "after:[mask-clip:padding-box,border-box]",
+              "after:[mask-composite:intersect]",
+              "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
+            )}
+          />
+        </div>
+      </>
+    );
+  }
+);
+
+GlowingEffect.displayName = "GlowingEffect";
+
+export { GlowingEffect };

src/components/ui/layout-text-flip.tsx

@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
 
       <motion.span
         layout
-        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
+        className="relative w-fit overflow-hidden px-2 py-2 font-medium tracking-tight"
       >
         <AnimatePresence mode="popLayout">
           <motion.span

src/components/ui/son-of-a-glitch-text.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { type HTMLAttributes, useEffect, useState } from "react";
+
+interface SonOfAGlitchProps extends HTMLAttributes<HTMLHeadingElement> {
+  text: string;
+  textClassName?: string;
+  glitchClassName?: string;
+  showGlitch?: boolean;
+}
+
+export const SonOfAGlitch = ({
+  text,
+  className,
+  textClassName,
+  glitchClassName,
+  showGlitch = true,
+}: SonOfAGlitchProps) => {
+  const [isGlitching, setIsGlitching] = useState(showGlitch);
+
+  useEffect(() => {
+    setIsGlitching(showGlitch);
+  }, [showGlitch]);
+
+  return (
+    <h1 className={cn("relative font-mono", className)}>
+      <span
+        className={cn(
+          "absolute top-0 left-0 w-full h-full bg-transparent",
+          isGlitching &&
+            "before:content-[attr(data-text)] before:absolute before:top-0 before:w-full before:h-full before:bg-transparent before:left-[-2px] before:text-red-500 before:overflow-hidden before:animate-glitch-1",
+          isGlitching &&
+            "after:content-[attr(data-text)] after:absolute after:top-0 after:w-full after:h-full after:bg-transparent after:left-[2px] after:text-blue-500 after:overflow-hidden after:animate-glitch-2",
+          glitchClassName,
+        )}
+        data-text={text}
+      ></span>
+      <span className={cn(textClassName)}>{text}</span>
+    </h1>
+  );
+};

src/hooks/use-outside-click.ts

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+
+export const useOutsideClick = (
+  ref: React.RefObject<HTMLDivElement>,
+  callback: Function
+) => {
+  useEffect(() => {
+    const listener = (event: any) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      callback(event);
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, callback]);
+};

src/hooks/use-outside-click.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+
+export const useOutsideClick = (
+  ref: React.RefObject<HTMLDivElement>,
+  callback: Function
+) => {
+  useEffect(() => {
+    const listener = (event: any) => {
+      // DO NOTHING if the element being clicked is the target element or their children
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      callback(event);
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, callback]);
+};

src/pages/agents/AgentsHeroAlt.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { H2, H5 } from "@/components/Texts";
+import { ScrollDownArrow } from '@/components/ScrollDownArrow';
+
+export function AgentsHeroAlt() {
+  return (
+    <div
+      style={{
+        backgroundImage: "url(/images/agentshero2.png)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+      className="relative mx-auto flex min-h-screen flex-col items-center justify-center px-4 text-white"
+    >
+      <div className="absolute inset-0 bg-white/30" />
+      <div className="relative flex flex-col items-center gap-6">
+        <div className="text-center drop-shadow-lg">
+          <H2>
+            <span className="">
+              Sovereign AI Agents, Coming Soon.
+            </span>
+          </H2>
+        </div>
+        <div className="max-w-4xl text-center font-normal drop-shadow-lg">
+          <H5>
+            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+          </H5>
+        </div>
+      </div>
+      <div className="absolute bottom-10">
+        <ScrollDownArrow />
+      </div>
+    </div>
+  );
+}

src/pages/agents/AgentsPage.tsx

@@ -1,15 +1,15 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { AgentsHero } from './AgentsHero'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
+import { AgentsHeroAlt } from './AgentsHeroAlt'
 
 export default function AgentsPage() {
   return (
     <div>
       <AnimatedSection>
-        <AgentsHero />
+        <AgentsHeroAlt />
       </AnimatedSection>
 
       <AnimatedSection>

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>
+            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,433 @@
+'use client'
+
+import { Fragment, useEffect, useId, useRef, useState } from 'react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+import {
+  type MotionProps,
+  type Variant,
+  AnimatePresence,
+  motion,
+} from 'framer-motion'
+import { useDebouncedCallback } from 'use-debounce'
+
+import { AppScreen } from '../network/AppScreen'
+import {
+  Eyebrow,
+  FeatureDescription,
+  FeatureTitle,
+  MobileFeatureTitle,
+  P,
+  SectionHeader,
+} from '@/components/Texts'
+import { CircleBackground } from '@/components/CircleBackground'
+import { Container } from '@/components/Container'
+
+import connectorImg from '@/images/connector.png'
+import peersImg from '@/images/peers.png'
+import settingImg from '@/images/setting.png'
+import { PhoneFrame } from '@/components/PhoneFrame'
+
+
+interface CustomAnimationProps {
+  isForwards: boolean
+  changeCount: number
+}
+
+const features = [
+  {
+    name: 'Mycelium Connector',
+    description:
+      "Start (and stop) your Mycelium connector to gain access to sites, apps, and workloads available exclusively on the Mycelium Network. View statistics around peers and traffic.",
+    icon: DeviceUserIcon,
+    screen: InviteScreen,
+  },
+  {
+    name: 'Mycelium Peers',
+    description:
+      'Search and discover active peers on the Mycelium Network, or add your own.',
+    icon: DeviceNotificationIcon,
+    screen: StocksScreen,
+  },
+  {
+    name: 'Network Setting',
+    description:
+      'Find version and network information and trigger light or dark mode.',
+    icon: DeviceTouchIcon,
+    screen: InvestScreen,
+  },
+]
+
+function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
+        fill="#A3A3A3"
+      />
+    </svg>
+  )
+}
+
+function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#A3A3A3"
+      />
+      <path
+        d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z"
+        fill="#737373"
+      />
+    </svg>
+  )
+}
+
+function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  let id = useId()
+
+  return (
+    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient
+          id={`${id}-gradient`}
+          x1={14}
+          y1={14.5}
+          x2={7}
+          y2={17}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#737373" />
+          <stop offset={1} stopColor="#D4D4D4" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
+        fill="#A3A3A3"
+      />
+      <path
+        d="M7 22c0-4.694 3.5-8 8-8"
+        stroke={`url(#${id}-gradient)`}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
+        fill="#A3A3A3"
+      />
+    </svg>
+  )
+}
+
+const maxZIndex = 2147483647
+
+const bodyVariantBackwards: Variant = {
+  opacity: 0.4,
+  scale: 0.8,
+  zIndex: 0,
+  filter: 'blur(4px)',
+  transition: { duration: 0.4 },
+}
+
+
+const bodyAnimation: MotionProps = {
+  initial: 'initial',
+  animate: 'animate',
+  exit: 'exit',
+  variants: {
+    initial: (custom: CustomAnimationProps) => (
+      custom.isForwards
+        ? {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+        : bodyVariantBackwards
+    ),
+    animate: (custom: CustomAnimationProps) => ({
+      y: '0%',
+      opacity: 1,
+      scale: 1,
+      zIndex: maxZIndex / 2 - custom.changeCount,
+      filter: 'blur(0px)',
+      transition: { duration: 0.4 },
+    }),
+    exit: (custom: CustomAnimationProps) => (
+      custom.isForwards
+        ? bodyVariantBackwards
+        : {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+    ),
+  },
+}
+
+
+function InviteScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
+    </AppScreen>
+  )
+}
+
+function StocksScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
+    </AppScreen>
+  )
+}
+
+function InvestScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
+    </AppScreen>
+  )
+}
+
+function usePrevious<T>(value: T) {
+  const ref = useRef<T>()
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
+function FeaturesDesktop() {
+  let [changeCount, setChangeCount] = useState(0)
+  let [selectedIndex, setSelectedIndex] = useState(0)
+  let prevIndex = usePrevious(selectedIndex)
+  let isForwards = prevIndex === undefined ? true : selectedIndex > prevIndex
+
+  let onChange = useDebouncedCallback(
+    (selectedIndex: number) => {
+      setSelectedIndex(selectedIndex)
+      setChangeCount((changeCount) => changeCount + 1)
+    },
+    100,
+    { leading: true },
+  )
+
+  return (
+    <TabGroup
+      className="grid grid-cols-12 items-center gap-8 lg:gap-16"
+      selectedIndex={selectedIndex}
+      onChange={onChange}
+      vertical
+    >
+      <TabList className="z-10 order-last col-span-6 space-y-6">
+        {features.map((feature, featureIndex) => (
+          <div
+            key={feature.name}
+            className={clsx(
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              selectedIndex === featureIndex
+                ? 'outline-cyan-500'
+                : 'outline-transparent hover:outline-cyan-500',
+            )}
+          >
+            {featureIndex === selectedIndex && (
+              <motion.div
+                layoutId="activeBackground"
+                className="absolute inset-0 bg-gray-800"
+                initial={{ borderRadius: 16 }}
+              />
+            )}
+            <div className="relative z-10 p-8">
+              <feature.icon className="h-8 w-8" />
+              <FeatureTitle as="h3" color="white" className="mt-6">
+                <Tab className="text-left data-selected:not-data-focus:outline-hidden">
+                  <span className="absolute inset-0 rounded-2xl" />
+                  {feature.name}
+                </Tab>
+              </FeatureTitle>
+              <FeatureDescription color="secondary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
+            </div>
+          </div>
+        ))}
+      </TabList>
+      <div className="relative col-span-6">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
+        </div>
+        <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
+          <TabPanels as={Fragment}>
+            <AnimatePresence
+              initial={false}
+              custom={{ isForwards, changeCount }}
+            >
+              {features.map((feature, featureIndex) =>
+                selectedIndex === featureIndex ? (
+                  <TabPanel
+                    static
+                    key={feature.name + changeCount}
+                    className="col-start-1 row-start-1 flex focus:outline-offset-32 data-selected:not-data-focus:outline-hidden"
+                  >
+                    <motion.div {...bodyAnimation} custom={{ isForwards, changeCount }}>
+                      <feature.screen />
+                    </motion.div>
+                  </TabPanel>
+                ) : null,
+              )}
+            </AnimatePresence>
+          </TabPanels>
+        </PhoneFrame>
+      </div>
+    </TabGroup>
+  )
+}
+
+function FeaturesMobile() {
+  let [activeIndex, setActiveIndex] = useState(0)
+  let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
+  let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
+
+  useEffect(() => {
+    let observer = new window.IntersectionObserver(
+      (entries) => {
+        for (let entry of entries) {
+          if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
+            setActiveIndex(slideRefs.current.indexOf(entry.target))
+            break
+          }
+        }
+      },
+      {
+        root: slideContainerRef.current,
+        threshold: 0.6,
+      },
+    )
+
+    for (let slide of slideRefs.current) {
+      if (slide) {
+        observer.observe(slide)
+      }
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [slideContainerRef, slideRefs])
+
+  return (
+    <>
+      <div
+        ref={slideContainerRef}
+        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
+      >
+        {features.map((feature, featureIndex) => (
+          <div
+            key={featureIndex}
+            ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
+            className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
+          >
+                        <div
+              className={clsx(
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                activeIndex === featureIndex
+                  ? 'outline-transparent' // Remove outline for active mobile slide
+                  : 'outline-transparent hover:outline-cyan-500',
+              )}
+            >
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                                <CircleBackground
+                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
+                  color="#13B5C8"
+                  className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
+                />
+              </div>
+              <PhoneFrame className="relative mx-auto w-full max-w-[366px]">
+                <feature.screen />
+              </PhoneFrame>
+              <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
+                <feature.icon className="h-8 w-8" />
+                <MobileFeatureTitle color="white" className="mt-6">
+                  {feature.name}
+                </MobileFeatureTitle>
+                <FeatureDescription color="secondary" className="mt-2">
+                  {feature.description}
+                </FeatureDescription>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-6 flex justify-center gap-3">
+        {features.map((_, featureIndex) => (
+          <button
+            type="button"
+            key={featureIndex}
+            className={clsx(
+              'relative h-0.5 w-4 rounded-full',
+              featureIndex === activeIndex ? 'bg-gray-300' : 'bg-gray-500',
+            )}
+            aria-label={`Go to slide ${featureIndex + 1}`}
+            onClick={() => {
+              slideRefs.current[featureIndex].scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+              })
+            }}
+          >
+            <span className="absolute -inset-x-1.5 -inset-y-3" />
+          </button>
+        ))}
+      </div>
+    </>
+  )
+}
+
+export function CloudFeatures() {
+  return (
+    <section
+      id="howitworks"
+      aria-label="Features for investing all your money"
+      className="bg-gray-900 py-20 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
+          <Eyebrow color="accent">How It Works</Eyebrow>
+          <SectionHeader color="white" className="mt-2">
+            How Mycelium Operates
+          </SectionHeader>
+          <P color="light" className="mt-6">
+            Mycelium, like its natural namesake, thrives on decentralization,
+            efficiency, and security, making it a truly powerful force in the world
+            of decentralized networks.
+          </P>
+        </div>
+      </Container>
+      <div className="mt-16 md:hidden">
+        <FeaturesMobile />
+      </div>
+      <Container className="hidden md:mt-20 md:block">
+        <FeaturesDesktop />
+      </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>
-            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Own every workload with certainty.
-            </h2>
-            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
-              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
-            </p>
-            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
-                Start Deployment
+            </Eyebrow>
+            <SectionHeader as="h1" className="mt-6 text-gray-900">
+              Deploy sovereign Kubernetes clusters on decentralized
+              infrastructure.
+            </SectionHeader>
+            <P className="mt-6 text-gray-600">
+              Mycelium Cloud turns the ThreeFold Grid into a programmable
+              substrate for K3s. Launch verifiable clusters with nature-inspired
+              networking, quantum-safe storage, and zero-image delivery that
+              keeps every workload deterministic.
+            </P>
+            <P className="mt-6 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

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '../../components/Button'
+
+export function CloudHeroAlt() {
+  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=""
+          src="/images/kubernetes.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">CLOUD</h2>
+          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
+          <p className="mt-6 text-base/7 text-gray-600">
+             Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
+          </p>
+          <div className="mt-8">
+            <Button href="#" variant="solid" color="cyan">
+              Experience Deterministic Compute
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudHeroNew.tsx

@@ -0,0 +1,44 @@
+import { H3, H5, Eyebrow } from "../../components/Texts"
+import { Button } from "../../components/Button"
+
+
+export function CloudHeroNew() {
+  return (
+    <div
+      className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/cloudhero3.webp')" }}
+    >
+      <div className="mx-auto max-w-7xl lg:px-8">
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <Eyebrow>
+             Mycelium Cloud
+            </Eyebrow>
+            <H3 className="mt-4">
+              Deploy sovereign Kubernetes clusters on decentralized infrastructure.
+            </H3>
+            <H5 className="mt-8 text-lg text-gray-600">
+              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
+            </H5>
+            <H5 className="mt-4 text-lg text-gray-600">
+              Launch verifiable clusters with nature-inspired networking, quantum-safe storage, and zero-image delivery that keeps every workload deterministic.
+            </H5>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                to="#"
+                variant="solid"
+                className=""
+                color="cyan"
+              >
+                Get started
+              </Button>
+              <Button to="#" variant="outline">
+                Explore Docs <span aria-hidden="true"> →</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudOverview.tsx

@@ -1,62 +1,79 @@
 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">
-            Mycelium Cloud
-          </p>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
-            A sovereign, self-healing cloud built for trusted automation.
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
-          </p>
+          <Eyebrow>
+            Platform Overview
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
+            A decentralized cloud that operates itself.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold
+            Grid with cryptographic certainty. Networking, storage, and
+            orchestration are all built-in so developers can deploy critical
+            workloads without wrestling infrastructure.
+          </P>
+          <P color="lightSecondary" className="mt-6">
+            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" />
+              <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>
+            </div>
           ))}
         </div>
       </Container>

src/pages/cloud/CloudPage.tsx

@@ -1,21 +1,35 @@
 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 { CloudHeroNew } from './CloudHeroNew'
 
 export default function CloudPage() {
   return (
     <>
+
       <AnimatedSection>
-        <CloudHero />
+        <CloudHeroNew />
       </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>
+            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">
-            Sovereign Architecture
-          </p>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
-            Built for security, trust, and unstoppable continuity.
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
-          </p>
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Security Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Provable trust from substrate to service.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Cloud enforces sovereignty, security, and resilience at the
+            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/CallToAction.tsx

@@ -0,0 +1,40 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <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
+          </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.
+          </p>
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            <Button to="/download" variant="solid" color="white">
+              Get Mycelium Connector
+            </Button>
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              as="a"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Read Docs
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}