docs: add developer docs for compute and storage

feat: add GPU overview section with key features
- Created new GpuOverview component showcasing 4 core features of GPU service - Added responsive grid layout with feature cards displaying icons and descriptions - Integrated overview section into GpuPage between hero and call-to-action - Implemented dark theme styling with cyan accents for feature icons - Added descriptive text explaining unified GPU acceleration across ThreeFold Grid
2025-10-27 12:32:21 -04:00 · 2025-10-27 17:16:14 +01:00 · 2025-10-27 17:15:58 +01:00 · 2025-10-27 17:01:15 +01:00 · 2025-10-27 17:00:33 +01:00 · 2025-10-27 15:23:38 +01:00
109 changed files with 3108 additions and 670 deletions
--- a/docs/mycelium_cloud_for_devs.md
+++ b/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.*
--- a/docs/mycelium_compute_for_devs.md
+++ b/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.
--- a/docs/mycelium_gpu_for_devs.md
+++ b/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.*
--- a/docs/mycelium_storage_for_devs.md
+++ b/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.
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mycelium - Unleash the Power of Decentralized Networks</title>
-    <meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
+    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
+    <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 />
  </head>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
      "name": "www_try",
      "version": "0.0.0",
      "dependencies": {
+        "@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",
@@ -612,6 +614,15 @@
        "react": ">=16.8.0"
      }
    },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@emnapi/core": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
@@ -2468,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",
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@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",
--- a/public/images/ChatGPT
+++ b/public/images/ChatGPT
--- a/public/images/agentshero.png
+++ b/public/images/agentshero.png
--- a/public/images/benefits/autonomous.webp
+++ b/public/images/benefits/autonomous.webp
--- a/public/images/benefits/cost.webp
+++ b/public/images/benefits/cost.webp
--- a/public/images/benefits/energy.webp
+++ b/public/images/benefits/energy.webp
--- a/public/images/benefits/sovereign.webp
+++ b/public/images/benefits/sovereign.webp
--- a/public/images/computehero.jpg
+++ b/public/images/computehero.jpg
--- a/public/images/computehero.png
+++ b/public/images/computehero.png
--- a/public/images/computehero2.png
+++ b/public/images/computehero2.png
--- a/public/images/computehero3.jpg
+++ b/public/images/computehero3.jpg
--- a/public/images/computehero3.png
+++ b/public/images/computehero3.png
--- a/public/images/computehero4.png
+++ b/public/images/computehero4.png
--- a/public/images/gpuhero.jpeg
+++ b/public/images/gpuhero.jpeg
--- a/public/images/gpuhero.png
+++ b/public/images/gpuhero.png
--- a/public/images/home.png
+++ b/public/images/home.png
--- a/public/images/homehero1.png
+++ b/public/images/homehero1.png
--- a/public/images/isometric-artificial-intelligence-chip-concept-artificial-intelligence-concept-futuristic-microchip-processor-illustration-vector.jpg
+++ b/public/images/isometric-artificial-intelligence-chip-concept-artificial-intelligence-concept-futuristic-microchip-processor-illustration-vector.jpg
--- a/public/images/logo_1.png
+++ b/public/images/logo_1.png
--- a/public/images/logomark.svg
+++ b/public/images/logomark.svg
--- a/public/images/mchip3.webp
+++ b/public/images/mchip3.webp
--- a/public/images/networkhero.png
+++ b/public/images/networkhero.png
--- a/public/images/storagehero.png
+++ b/public/images/storagehero.png
--- a/public/images/storagehero2.png
+++ b/public/images/storagehero2.png
--- a/public/videos/chip_vid.mp4
+++ b/public/videos/chip_vid.mp4
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,10 @@ 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 ComputePage from './pages/compute/ComputePage'
+import StoragePage from './pages/storage/StoragePage'
+import GpuPage from './pages/gpu/GpuPage'

 function App() {
  return (
@@ -14,6 +18,10 @@ function App() {
          <Route path="cloud" element={<CloudPage />} />
          <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>
    </BrowserRouter>
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -1,20 +1,20 @@
-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { motion } from 'framer-motion'

-export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+type AnimatedSectionProps = {
+  children: React.ReactNode
+  id?: string
+  className?: string
+}

+export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
  return (
    <motion.section
      id={id}
-      ref={ref}
-      initial={{ opacity: 0, y: 50 }}
-      animate={{
-        opacity: isInView ? 1 : 0,
-        y: isInView ? 0 : 50,
-      }}
-      transition={{ duration: 0.5 }}
+      className={className}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.section>
--- a/src/components/Button.tsx
+++ b/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'
    }
 ) &
  (
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -0,0 +1,226 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState, type ChangeEvent, type FormEvent } from 'react'
+import emailjs from '@emailjs/browser'
+import { CheckCircle, Send, X } from 'lucide-react'
+
+interface ContactFormProps {
+  isOpen: boolean
+  onClose: () => void
+  title?: string
+  formType?: 'investor' | 'partner' | 'agent_waitlist' | 'storage_waitlist' | 'compute_waitlist' | 'gpu_waitlist'
+}
+
+const initialFormState = {
+  name: '',
+  email: '',
+  company: '',
+  message: '',
+}
+
+export default function ContactForm({
+  isOpen,
+  onClose,
+  title = 'Book a Meeting',
+  formType,
+}: ContactFormProps) {
+  const [formData, setFormData] = useState(initialFormState)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      const templateParams = {
+        from_name: formData.name,
+        from_email: formData.email,
+        company: formData.company,
+        message: formData.message,
+        to_email: 'emre@incubaid.com',
+        form_type: formType || 'General Inquiry',
+      }
+
+      await emailjs.send(
+        'service_03d0vf8',
+        'template_6o6e8oe',
+        templateParams,
+        'bhkly3gzrO-SA9w7v',
+      )
+
+      setIsSubmitted(true)
+      setTimeout(() => {
+        setIsSubmitted(false)
+        setFormData(initialFormState)
+        onClose()
+      }, 3000)
+    } catch (error) {
+      console.error('Email sending failed:', error)
+      alert('Failed to send message. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <motion.div
+            className="relative w-full max-w-md overflow-hidden rounded-2xl bg-card shadow-2xl"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+          >
+            <div className="flex items-center justify-between border-b border-border p-6">
+              <h3 className="text-xl font-bold text-foreground">{title}</h3>
+              <button
+                onClick={onClose}
+                className="rounded-lg p-2 transition-colors hover:bg-muted"
+                aria-label="Close form"
+              >
+                <X className="h-5 w-5 text-muted-foreground" />
+              </button>
+            </div>
+
+            <div className="p-6">
+              {isSubmitted ? (
+                <motion.div
+                  className="py-8 text-center"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                >
+                  <CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
+                  <h4 className="mb-2 text-lg font-semibold text-foreground">Thank you!</h4>
+                  <p className="text-muted-foreground">We&apos;ll get back to you soon.</p>
+                </motion.div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div>
+                    <label
+                      htmlFor="name"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Full Name *
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="Your full name"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Email Address *
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="your.email@company.com"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="company"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Company
+                    </label>
+                    <input
+                      type="text"
+                      id="company"
+                      name="company"
+                      value={formData.company}
+                      onChange={handleInputChange}
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="Your company name"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="message"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Message
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      value={formData.message}
+                      onChange={handleInputChange}
+                      rows={4}
+                      className="w-full resize-none rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder={
+                        formType === 'investor'
+                          ? '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.'
+                      }
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="flex w-full items-center justify-center rounded-lg bg-primary px-6 py-3 font-semibold text-primary-foreground transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
+                        Sending...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="h-5 w-5" />
+                        <span className="ml-2">Send Message</span>
+                      </>
+                    )}
+                  </button>
+                </form>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -18,11 +18,10 @@ export function FadeIn({ children, transition, className }: FadeInProps) {
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
-      transition={transition || { duration: 0.5 }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
 }
-
--- a/src/components/Footer.tsx
+++ b/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>
@@ -35,10 +35,10 @@ export function Footer() {
            </div>
            <div className="ml-4 lg:w-72">
              <p className="text-base font-semibold text-gray-900">
-                <a href="https://github.com/threefoldtech/mycelium/releases/" target="_blank" rel="noopener noreferrer">
+                <Link to="/download">
                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download Mycelium
-                </a>
+                  Download Mycelium Connector
+                </Link>
              </p>
              <p className="mt-1 text-sm text-gray-700">
                Head to the GitHub to access the latest Mycelium builds for your devices.
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +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/logo_1.png'

 export function Header() {
  return (
@@ -9,21 +12,23 @@ export function Header() {
                <Container className="relative z-50 flex justify-between py-4">
          <div className="relative z-10 flex items-center gap-16">
            <Link to="/" aria-label="Home">
-              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+              <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
            </Link>
            <div className="hidden lg:flex lg:gap-10">
-              <Link
-                to="/"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Home
-              </Link>
-              <Link
-                to="/cloud"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Cloud
-              </Link>
+              <Dropdown
+                buttonContent={
+                  <>
+                    Cloud
+                    <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"
@@ -41,16 +46,16 @@ export function Header() {
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-6 max-lg:hidden">
              <Button
-                to="https://threefold.info/mycelium_network/docs/"
+                to="https://myceliumcloud.tf"
                variant="outline"
                as="a"
                target="_blank"
                rel="noopener noreferrer"
              >
-                Docs
+                Start Deployment
              </Button>
              <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
+                Get Mycelium Connector
              </Button>
            </div>
          </div>
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -23,6 +23,7 @@ type TextOwnProps = {
  font?: keyof typeof fontVariants
  color?: keyof typeof colorVariants
  className?: string
+  children?: React.ReactNode
 }

 // Polymorphic helpers
@@ -159,4 +160,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-sm tracking-wide leading-[1.525] font-light')
--- a/src/components/features-section-demo-1.tsx
+++ b/src/components/features-section-demo-1.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useId } from "react";

 export default function FeaturesSectionDemo() {
--- a/src/components/magicui/bento-grid.tsx
+++ b/src/components/magicui/bento-grid.tsx
@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+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",
+      )}
+    >
+      <Button variant="ghost" asChild size="sm" className="pointer-events-auto">
+        <a href={href}>
+          {cta}
+          <ArrowRightIcon className="ml-2 h-4 w-4" />
+        </a>
+      </Button>
+    </div>
+  </div>
+);
+
+export { BentoCard, BentoGrid };
--- a/src/components/magicui/magic-card.tsx
+++ b/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>
+  );
+};
--- a/src/components/ui/CubeLight.tsx
+++ b/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(59, 130, 246, 0.25)"
+      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-blue-400/40 opacity-70"
+              : "bg-blue-200/20 opacity-40"
+          }`}
+        />
+
        {/* SVG Cube */}
-        <CubeSvg 
+        <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 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
+              : "drop-shadow(0 0 10px rgba(59, 130, 246, 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"
-            style={{ 
-              transform: 'rotate(0deg) skewX(0deg)',
-              transformOrigin: 'center'
+          <h3
+            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
+            style={{
+              textShadow:
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
            }}
          >
            {title}
@@ -106,26 +131,24 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
                y1="1"
                x2="120"
                y2="1"
-                stroke="black"
+                stroke="rgba(59, 130, 246, 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>
+      </motion.div>
    </div>
  );
 }
--- a/src/components/ui/Dropdown.tsx
+++ b/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 }) => (
+                  <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>
+  )
+}
--- a/src/components/ui/FadeIn.tsx
+++ b/src/components/ui/FadeIn.tsx
@@ -18,11 +18,10 @@ export function FadeIn({ children, transition, className }: FadeInProps) {
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
-      transition={transition || { duration: 0.5 }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
 }
-
--- a/src/components/ui/HalfGlobe.tsx
+++ b/src/components/ui/HalfGlobe.tsx
@@ -1,12 +1,15 @@
 "use client";

-import * as THREE from "three";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, useTexture } from "@react-three/drei";
-import { useRef } from "react";
+import { Line, OrbitControls, useTexture } from "@react-three/drei";
+import { useMemo, useRef } from "react";
+
+type RotatableGroup = {
+  rotation: { y: number };
+};

 function Globe() {
-  const groupRef = useRef<THREE.Group>(null);
+  const groupRef = useRef<RotatableGroup | null>(null);
  const cloudTexture = useTexture("/images/cloud1.png");

  // Rotate the globe slowly
@@ -17,7 +20,7 @@ function Globe() {
  });

  // Coordinates for markers (half-globe)
-  const points = [
+  const markers = [
    [0, 1, 0],
    [0.7, 0.5, 0.2],
    [-0.5, 0.4, 0.5],
@@ -25,42 +28,47 @@ function Globe() {
    [-0.6, -0.1, 0.3],
    [0.3, -0.2, 0.8],
  ];
+  const arcPoints = useMemo(() => {
+    const radius = 2.5;
+    const verticalRadius = radius / 2;
+    const segments = 120;
+
+    return Array.from({ length: 8 }, () => {
+      const points: number[] = [];
+      for (let i = 0; i < segments; i++) {
+        const t = (i / (segments - 1)) * Math.PI;
+        const x = Math.cos(t) * radius;
+        const z = Math.sin(t) * verticalRadius;
+        const y = Math.sin(x / radius) * 0.5;
+        points.push(x, y, z);
+      }
+      return points;
+    });
+  }, []);

  return (
    <group ref={groupRef}>
      {/* Cyan arcs */}
-      {Array.from({ length: 8 }).map((_, i) => {
-        const radius = 2.5;
-        const curve = new THREE.EllipseCurve(
-          0,
-          0,
-          radius,
-          radius / 2,
-          0,
-          Math.PI,
-          false,
-          0
-        );
-        const points = curve.getPoints(100);
-        const geometry = new THREE.BufferGeometry().setFromPoints(
-          points.map((p) => new THREE.Vector3(p.x, Math.sin(p.x / radius) * 0.5, p.y))
-        );
-        return (
-          <line key={i} geometry={geometry}>
-            <lineBasicMaterial color="#00e5ff" linewidth={1} transparent opacity={0.5} />
-          </line>
-        );
-      })}
+      {arcPoints.map((points, i) => (
+        <Line
+          key={i}
+          points={points}
+          color="#00e5ff"
+          lineWidth={1}
+          transparent
+          opacity={0.5}
+        />
+      ))}

      {/* Cloud markers */}
-      {points.map(([x, y, z], i) => (
+      {markers.map(([x, y, z], i) => (
        <mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
          <planeGeometry args={[0.3, 0.3]} />
          <meshBasicMaterial
            map={cloudTexture}
            transparent
            opacity={1}
-            side={THREE.DoubleSide}
+            side={2 /* DoubleSide */}
          />
        </mesh>
      ))}
--- a/src/components/ui/StackedCubesLight.tsx
+++ b/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",
@@ -36,60 +39,74 @@ export function StackedCubesLight() {
  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");

  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="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-      onMouseLeave={() => setActive("agent")}
-    >
-      <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"
-        animate={{ y: ["-8px", "8px"] }}
-        transition={{
-          duration: 4,
-          repeat: Infinity,
-          repeatType: "reverse",
-          ease: "easeInOut",
-        }}
+    <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/40 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")}
      >
-        {stackData.map((layer, index) => (
-          <div
-            key={layer.id}
-            className="absolute"
-            style={{
-              top: `calc(${index * 30}% - ${index * 10}px)`,
-              zIndex: active === layer.id ? 20 : 10 - index,
-            }}
-          >
-            <CubeLight
-              title={layer.title}
-              descriptionTitle={layer.descriptionTitle}
-              description={layer.description}
-              isActive={active === layer.id}
-              index={index}
-              onHover={() => setActive(layer.id)}
-              onLeave={() => {}}
-              onClick={() => handleCubeClick(layer.id)}
-            />
-          </div>
-        ))}
-      </motion.div>
-    </div>
-    {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">
-          {selectedMobileLayer.descriptionTitle}
-        </h4>
-        <p className="text-gray-700 text-sm leading-relaxed text-center">
-          {selectedMobileLayer.description}
-        </p>
+        <motion.div
+          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,
+            repeat: Infinity,
+            repeatType: "reverse",
+            ease: "easeInOut",
+          }}
+        >
+          {stackData.map((layer, index) => (
+            <div
+              key={layer.id}
+              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/40 opacity-70"
+                    : "bg-cyan-200/20 opacity-40"
+                }`}
+              />
+              <CubeLight
+                title={layer.title}
+                descriptionTitle={layer.descriptionTitle}
+                description={layer.description}
+                isActive={active === layer.id}
+                index={index}
+                onHover={() => setActive(layer.id)}
+                onLeave={() => {}}
+                onClick={() => handleCubeClick(layer.id)}
+              />
+            </div>
+          ))}
+        </motion.div>
      </div>
-    )}
+
+      {/* Mobile layer description */}
+      {selectedMobileLayer && (
+        <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-cyan-900/80 text-sm leading-relaxed text-center drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
+            {selectedMobileLayer.description}
+          </p>
+        </div>
+      )}
    </div>
  );
 }
--- a/src/components/ui/apple-cards-carousel.tsx
+++ b/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 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 text-sm 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}
+    />
+  );
+};
--- a/src/components/ui/aurora-background.tsx
+++ b/src/components/ui/aurora-background.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "@/lib/utils";
-import React, { ReactNode } from "react";
+import type { CSSProperties, HTMLProps, ReactNode } from "react";

-interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+interface AuroraBackgroundProps extends HTMLProps<HTMLDivElement> {
  children: ReactNode;
  showRadialGradient?: boolean;
 }
@@ -44,7 +44,7 @@ export const AuroraBackground = ({
              "--black": "#000",
              "--white": "#fff",
              "--transparent": "transparent",
-            } as React.CSSProperties
+            } as CSSProperties
          }
        >
          <div
--- a/src/components/ui/dotted-glow-background.tsx
+++ b/src/components/ui/dotted-glow-background.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";

 type DottedGlowBackgroundProps = {
  className?: string;
@@ -203,12 +203,8 @@ export function DottedGlowBackground({

    regenDots();

-    let last = performance.now();
-
    const draw = (now: number) => {
      if (stopped) return;
-      const dt = (now - last) / 1000; // seconds
-      last = now;
      const { width, height } = container.getBoundingClientRect();

      ctx.clearRect(0, 0, el.width, el.height);
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -81,7 +81,7 @@ export const FloatingNav = ({
            <span className="hidden sm:block text-sm">Docs</span>
          </a>
          <Button to="/download" variant="solid" color="cyan">
-            Get Mycelium
+            Get Mycelium Connector
          </Button>
        </div>
      </motion.div>
--- a/src/components/ui/glowing-effect.tsx
+++ b/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 };
--- a/src/components/ui/son-of-a-glitch-text.tsx
+++ b/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>
+  );
+};
--- a/src/hooks/use-outside-click.ts
+++ b/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]);
+};
--- a/src/hooks/use-outside-click.tsx
+++ b/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]);
+};
--- a/src/images/agent1.jpg
+++ b/src/images/agent1.jpg
--- a/src/images/logomark.svg
+++ b/src/images/logomark.svg
--- a/src/images/logos/logo_1.png
+++ b/src/images/logos/logo_1.png
--- a/src/images/logos/pmyceliumlogo.png
+++ b/src/images/logos/pmyceliumlogo.png
--- a/src/images/slider/agent1.jpg
+++ b/src/images/slider/agent1.jpg
--- a/src/images/slider/cloud1.jpg
+++ b/src/images/slider/cloud1.jpg
--- a/src/images/slider/compute1.jpg
+++ b/src/images/slider/compute1.jpg
--- a/src/images/slider/gpu1.jpg
+++ b/src/images/slider/gpu1.jpg
--- a/src/images/slider/network1.jpg
+++ b/src/images/slider/network1.jpg
--- a/src/images/slider/storage1.jpg
+++ b/src/images/slider/storage1.jpg
--- a/src/images/storage.png
+++ b/src/images/storage.png
--- a/src/pages/agents/AgentsHero.tsx
+++ b/src/pages/agents/AgentsHero.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useId, useState } from 'react'
+
+import { Button } from '../../components/Button'
+import { Container } from '../../components/Container'
+import ContactForm from '../../components/ContactForm'
+
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  const id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
+
+export function AgentsHero() {
+  const [isContactOpen, setIsContactOpen] = useState(false)
+
+  return (
+    <>
+      <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
+        <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">
+                Mycelium Agents
+              </h1>
+              <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+                Sovereign AI agents, coming soon.
+              </h2>
+              <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
+                Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+              </p>
+              <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+                <Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
+                  Join the Waitlist
+                </Button>
+              </div>
+            </div>
+            <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+              <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+              <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
+                <img
+                  src="/images/agent_icon.png"
+                  alt="Preview of Hero sovereign agent orchestration"
+                  className="mx-auto w-full max-w-[520px]"
+                  width={1024}
+                  height={1024}
+                />
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+      <ContactForm
+        isOpen={isContactOpen}
+        onClose={() => setIsContactOpen(false)}
+        title="Join the Waitlist"
+        formType="agent_waitlist"
+      />
+    </>
+  )
+}
--- a/src/pages/agents/AgentsHeroAlt.tsx
+++ b/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/agentshero.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>
+  );
+}
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -1,12 +1,18 @@
 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>
+        <AgentsHeroAlt />
+      </AnimatedSection>
+
      <AnimatedSection>
        <DeploySection />
      </AnimatedSection>
@@ -15,7 +21,6 @@ export default function AgentsPage() {
        <Companies />
      </AnimatedSection>

-      
      <AnimatedSection>
        <GallerySection />
      </AnimatedSection>
--- a/src/pages/agents/BentoSection.tsx
+++ b/src/pages/agents/BentoSection.tsx
@@ -48,16 +48,16 @@ export function BentoSection() {
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center mb-16"
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="mx-auto mb-16 max-w-3xl text-center"
        >
          <Eyebrow color="accent">Components</Eyebrow>
          <SectionHeader color="light">
-            Augmented Intelligence Fabric
+            Intelligence Fabric
          </SectionHeader>
          <P className="mt-6" color="lightSecondary">
-            A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
+            A complete infrastructure for building and deploying sovereign AI agents with enterprise-grade security and performance. Your data never leaves your control.
          </P>
        </motion.div>

@@ -67,9 +67,9 @@ export function BentoSection() {
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-gray-900 border border-gray-800 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 hover:scale-105 overflow-hidden"
+              viewport={{ once: true, amount: 0.2 }}
+              transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
+              className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
            >
              <video
                src={item.video}
--- a/src/pages/agents/Companies.tsx
+++ b/src/pages/agents/Companies.tsx
@@ -1,8 +1,7 @@
 "use client";

-import React from "react";
 import { motion } from "framer-motion";
-import { P, Eyebrow } from '@/components/Texts';
+import { P, Eyebrow } from "@/components/Texts";
 import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";


@@ -47,8 +46,9 @@ export function Companies() {
        <motion.div
          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <Eyebrow color="accent"></Eyebrow>
          <P className="hidden min-xl:text-gray-100 text-center mb-6">
--- a/src/pages/agents/DeploySection.tsx
+++ b/src/pages/agents/DeploySection.tsx
@@ -1,46 +1,63 @@
-'use client'
+"use client";

-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
-import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
-import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+import { motion } from "framer-motion";
+import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
+import type { ComponentPropsWithoutRef } from "react";
+
+type CircleIconProps = ComponentPropsWithoutRef<"svg">;
+
+const CircleNumber1Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
+  </svg>
+);
+
+const CircleNumber2Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
+  </svg>
+);
+
+const CircleNumber3Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
+  </svg>
+);

 const features = [
  {
    name: 'Choose Your Intelligence',
    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
-    icon: TbCircleNumber1Filled,
+    icon: CircleNumber1Icon,
  },
  {
    name: 'Add Your Knowledge',
    description:
      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
-    icon: TbCircleNumber2Filled,
+    icon: CircleNumber2Icon,
  },
  {
    name: 'Define Your Network',
    description:
      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
-    icon: TbCircleNumber3Filled,
+    icon: CircleNumber3Icon,
  },
-]
+];

 export function DeploySection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
-
  return (
-    <section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12  text-white bg-black">
+    <section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
      <div className="relative px-6 lg:px-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          className="mx-auto max-w-5xl text-center"
        >
          <Eyebrow color="accent">Get Started</Eyebrow>
          <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-            Deploy Scalable LLMs and AI Agents in Seconds
+            Deploy Scalable LLMs and AI Agents
          </SectionHeader>
          <P className="mt-6" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
@@ -48,25 +65,31 @@ export function DeploySection() {
        </motion.div>
        <motion.ul
          initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
-          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true, amount: 0.2 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:mt-12 lg:max-w-7xl lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
              key={feature.name}
              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.2 }}
+              transition={{ duration: 0.45, delay: 0.3 + index * 0.15, ease: "easeOut" }}
+              className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
            >
-              <feature.icon className="h-8 w-8 mb-4 text-white" />
-              <CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
-              <CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
+              <feature.icon className="mb-4 h-8 w-8 text-white" />
+              <CT as="span" className="text-left font-semibold" color="light">
+                {feature.name}
+              </CT>
+              <CP className="mt-2 text-left text-sm" color="light">
+                {feature.description}
+              </CP>
            </motion.li>
          ))}
        </motion.ul>
      </div>
    </section>
-  )
+  );
 }
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/src/pages/cloud/CloudCTA.tsx
@@ -5,29 +5,27 @@ export function CloudCTA() {
  return (
    <section className="relative overflow-hidden py-24 lg:py-32">
      <Container className="relative">
-        <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-gray-200/60 bg-white/90 px-10 py-16 text-center shadow-[0_30px_120px_-70px_rgba(6,182,212,0.65)] backdrop-blur lg:px-16 lg:py-20">
-          <div className="max-w-3xl mx-auto">
-            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-              Ready 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.
-            </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.
-            </p>
-            <div className="mt-10 flex justify-center">
-              <Button
-                to="https://myceliumcloud.tf"
-                as="a"
-                variant="solid"
-                color="cyan"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Start Deploying
-              </Button>
-            </div>
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+            Ready 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.
+          </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.
+          </p>
+          <div className="mt-10 flex justify-center">
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="cyan"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Start Deployment
+            </Button>
          </div>
        </div>
      </Container>
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -88,19 +88,10 @@ export function CloudHero() {
              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="/download" variant="solid" color="cyan">
-                Start Deploying
-              </Button>
-              <Button
-                to="https://manual.grid.tf"
-                as="a"
-                variant="outline"
-                color="gray"
-                target="_blank"
-                rel="noreferrer"
-              >
-                View Documentation
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
+                Start Deployment
              </Button>
+              
            </div>
          </div>
          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
--- a/src/pages/cloud/CloudHeroAlt.tsx
+++ b/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>
+  )
+}
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -48,12 +48,12 @@ export function CloudOverview() {
          {focusAreas.map((item) => (
            <div
              key={item.title}
-              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-[0_20px_60px_-40px_rgba(6,182,212,0.6)] backdrop-blur"
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
-              <div className="text-base font-semibold text-cyan-200">
+              <div className="text-lg font-semibold text-white">
                {item.title}
              </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-200">
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
                {item.description}
              </p>
            </div>
--- a/src/pages/cloud/CloudPage.tsx
+++ b/src/pages/cloud/CloudPage.tsx
@@ -4,12 +4,13 @@ import { CloudOverview } from './CloudOverview'
 import { ComputeStorageSplit } from './ComputeStorageSplit'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
+import { CloudHeroAlt } from './CloudHeroAlt'

 export default function CloudPage() {
  return (
    <>
      <AnimatedSection>
-        <CloudHero />
+        <CloudHeroAlt />
      </AnimatedSection>
      <AnimatedSection>
        <CloudOverview />
--- a/src/pages/cloud/SecurityPillars.tsx
+++ b/src/pages/cloud/SecurityPillars.tsx
@@ -45,7 +45,7 @@ export function SecurityPillars() {
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
-              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-400/60"
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
              <div className="text-lg font-semibold text-white">
                {pillar.title}
--- a/src/pages/compute/CallToAction.tsx
+++ b/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>
+  )
+}
--- a/src/pages/compute/ComputeHero.tsx
+++ b/src/pages/compute/ComputeHero.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Button } from '../../components/Button'
+
+export function ComputeHero() {
+  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/computehero4.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">COMPUTE</h2>
+          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
+          <p className="mt-6 text-base/7 text-gray-600">
+            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
+            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+            From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
+            Compute that verifies itself. Expands itself. Heals itself.
+          </p>
+          <div className="mt-8">
+            <Button href="#" variant="solid" color="cyan">
+              Experience Deterministic Compute
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/compute/ComputePage.tsx
+++ b/src/pages/compute/ComputePage.tsx
@@ -0,0 +1,16 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { ComputeHero } from './ComputeHero'
+import { CallToAction } from './CallToAction'
+
+export default function ComputePage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <ComputeHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
+    </div>
+  )
+}
--- a/src/pages/download/DevHub.tsx
+++ b/src/pages/download/DevHub.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import {
+  BookOpenIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  LifebuoyIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'Documentation',
+    description: 'Documentation for Mycelium.',
+    href: 'https://threefold.info/mycelium_network/docs/',
+    icon: BookOpenIcon,
+  },
+  {
+    name: 'Support',
+    description: 'Talk to an expert.',
+    href: 'https://threefoldfaq.crisp.help/en/',
+    icon: LifebuoyIcon,
+  },
+  {
+    name: 'Forum',
+    description: 'Forum for all your questions.',
+    href: 'https://forum.threefold.io/',
+    icon: ChatBubbleOvalLeftEllipsisIcon,
+  },
+  {
+    name: 'Community',
+    description: 'Join our Developers community on telegram.',
+    href: 'https://t.me/threefoldtesting',
+    icon: UserGroupIcon,
+  },
+]
+
+export function DevHub() {
+  return (
+    <div className="bg-gray-900 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="col-span-2">
+            <h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
+            <p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
+            <p className="mt-6 text-lg text-gray-300">
+              Our Developer Hub is a resource center for developers looking to build on top of Mycelium.
+              Join our Developers community on telegram to get started.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
+            {features.map((feature) => (
+              <a
+                key={feature.name}
+                href={feature.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
+              >
+                <feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
+                <dt className="font-semibold text-white">{feature.name}</dt>
+                <dd className="mt-2 text-gray-400">{feature.description}</dd>
+              </a>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/download/DownloadHero.tsx
+++ b/src/pages/download/DownloadHero.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+import appleIcon from '@/images/apple.svg'
+import windowsIcon from '@/images/windows.svg'
+import androidIcon from '@/images/android.svg'
+import linuxIcon from '@/images/linux.svg'
+
+const features = [
+  {
+    name: 'Download for iOS & MacOS',
+    description: 'Download Mycelium App from the Apple Store.',
+    href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
+    icon: appleIcon,
+    alt: 'Apple logo',
+  },
+  {
+    name: 'Download for Windows',
+    description: 'Download the Mycelium App for Windows directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/myceliumflut/releases',
+    icon: windowsIcon,
+    alt: 'Windows logo',
+  },
+  {
+    name: 'Download for Android',
+    description: 'Download Mycelium from the Google Play Store.',
+    href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
+    icon: androidIcon,
+    alt: 'Android logo',
+  },
+  {
+    name: 'Download for Linux',
+    description: 'Download the Mycelium binary for Linux directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/mycelium/releases',
+    icon: linuxIcon,
+    alt: 'Linux logo',
+  },
+]
+
+export function DownloadHero() {
+  return (
+    <div className="py-16 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
+          >
+            Download Mycelium Network
+          </motion.h2>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-6 text-lg text-gray-600 lg:leading-8"
+          >
+            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
+            <a
+              href="https://threefold.info/mycelium_network/docs/"
+              className="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read the manual.
+            </a>
+          </motion.p>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
+            {features.map((feature) => (
+              <div
+                key={feature.name}
+                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+              >
+                <dt className="text-base font-semibold leading-7 text-gray-900">
+                  <div className="mb-6 flex h-10 w-10 items-center justify-center">
+                    <img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
+                  <p className="flex-auto">{feature.description}</p>
+                  <p className="mt-6">
+                    <a
+                      href={feature.href}
+                      className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Download Now <span aria-hidden="true">→</span>
+                    </a>
+                  </p>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/download/DownloadPage.tsx
+++ b/src/pages/download/DownloadPage.tsx
@@ -0,0 +1,17 @@
+import { AnimatedSection } from '@/components/AnimatedSection'
+
+import { DownloadHero } from './DownloadHero'
+import { DevHub } from './DevHub'
+
+export default function DownloadPage() {
+  return (
+    <>
+      <AnimatedSection>
+        <DownloadHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <DevHub />
+      </AnimatedSection>
+    </>
+  )
+}
--- a/src/pages/gpu/CallToAction.tsx
+++ b/src/pages/gpu/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>
+  )
+}
--- a/src/pages/gpu/GpuHero.tsx
+++ b/src/pages/gpu/GpuHero.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Button } from '../../components/Button'
+
+export function GpuHero() {
+  return (
+    <div className="relative bg-white">
+      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
+        <img
+          alt=""
+          src="/images/gpuhero.png"
+          className="size-full object-cover"
+        />
+       
+      </div>
+      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
+        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
+          <h2 className="text-base/7 font-semibold text-cyan-500">GPU</h2>
+          <h1 className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Unify Distributed GPU Power. Run Intelligence Anywhere.</h1>
+          <p className="mt-6 text-base/7 text-gray-600">
+            Mycelium GPU transforms fragmented GPU resources into a single sovereign fabric for running AI, ML, and rendering workloads — from edge to core, with deterministic performance and transparent cost.
+          </p>
+          <div className="mt-8 flex items-center gap-x-4">
+            <Button to="/docs" variant="solid" color="cyan">
+              Get Started →
+            </Button>
+            <Button to="#architecture" variant="outline" color="cyan">
+              Explore Architecture →
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -0,0 +1,56 @@
+import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'No Silos',
+    description: 'All GPU resources accessible through a single interface.',
+    icon: Squares2X2Icon,
+  },
+  {
+    name: 'No Intermediaries',
+    description: 'Direct access to GPU resources without centralized control.',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Managed entirely through APIs and smart contracts.',
+    icon: CodeBracketSquareIcon,
+  },
+]
+
+export function GpuOverview() {
+  return (
+    <div className="bg-[#171717] py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="lg:col-span-2">
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
+              Unified GPU Acceleration Across the Grid
+            </h2>
+            <p className="mt-4 text-base/7 text-gray-300">
+              Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single adaptive intelligence layer — enabling you to run AI, ML, and rendering workloads anywhere, anytime, with verifiable performance and transparent costs.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
+            {features.map((feature) => (
+              <div key={feature.name}>
+                <dt className="text-base/7 font-semibold text-white">
+                  <div className="mb-6 flex size-10 items-center justify-center rounded-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/gpu/GpuPage.tsx
+++ b/src/pages/gpu/GpuPage.tsx
@@ -0,0 +1,20 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { GpuHero } from './GpuHero'
+import { CallToAction } from './CallToAction'
+import { GpuOverview } from './GpuOverview'
+
+export default function GpuPage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <GpuHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuOverview />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
+    </div>
+  )
+}
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -14,14 +14,17 @@ export function CallToAction() {
      <Container className="relative">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Build the Future, Today
+            Activate Your Sovereign <br />Mycelium Stack
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started.
+            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-                        <Button to="/cloud" variant="solid" color="white">
-              Start Building
+            <Button to="/cloud" variant="solid" color="white">
+              Start Deployment
+            </Button>
+            <Button to="/download" variant="solid" color="cyan">
+              Get Mycelium Connector
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
--- a/src/pages/home/HomeAgent.tsx
+++ b/src/pages/home/HomeAgent.tsx
@@ -26,7 +26,7 @@ export function HomeAgent() {
          </H2>

          <P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
-            Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
+            Mycelium delivers enterprise-grade AI experiences that run on sovereign compute and the Mycelium Network, so production agents can reason over private data, collaborate across sites, and stay fully under your governance.
          </P>

          <div className="mt-10 flex items-center justify-center gap-x-6">
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -1,35 +1,35 @@
 "use client";

-import { motion } from "framer-motion";
-import { H1, H2, H3, H4, H5 } from "@/components/Texts";
+import { H1, H5 } from "@/components/Texts";
 import { ScrollDownArrow } from '@/components/ScrollDownArrow';

 export function HomeAurora() {
  return (
-      <motion.div
-        initial={{ opacity: 0.0, y: 40 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.5,
-          duration: 1,
-          ease: "easeInOut",
-        }}
-        style={{
-          backgroundImage: "url(/images/mchip2.webp)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-        className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
-      >
-        <div className="text-center text-gray-800">
-          <H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
-        </div>
-        <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
-          <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
-        </div>
-        <div className="pt-8">
-          <ScrollDownArrow />
-        </div>
-      </motion.div>
+    <div
+      style={{
+        backgroundImage: "url(/images/homehero1.png)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+      className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
+    >
+      <div className="text-center -mt-5">
+        <H1>
+          <span className="text-bold lg:text-8xl">
+            Full Sovereignty for<br />Cloud, Network & AI.
+          </span>
+        </H1>
+      </div>
+      <div className="max-w-4xl text-center font-light text-gray-500">
+        <H5>
+          Build and run mission-critical workloads on distributed compute,
+          encrypted networking, and sovereign AI orchestration — all under your
+          control, without centralized gatekeepers.
+        </H5>
+      </div>
+      <div className="pt-6">
+        <ScrollDownArrow />
+      </div>
+    </div>
  );
 }
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -1,110 +1,132 @@
-import React from "react";
 import { cn } from "@/lib/utils";
 import createGlobe from "cobe";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
 import { H2, P } from '@/components/Texts'


 export function HomeBenefits() {
-      const features = [
+  const features = [
    {
      title: "Sovereign",
      description:
        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
-            icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+      image: "/images/benefits/sovereign.webp",
    },
    {
      title: "Autonomous",
      description:
        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
-            icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
-      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+      image: "/images/benefits/autonomous.webp",
    },
    {
      title: "Energy Efficient",
      description:
        "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
-            icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
+      image: "/images/benefits/energy.webp",
    },
    {
      title: "Cost Efficient",
      description:
        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
-            icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
-      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+      image: "/images/benefits/cost.webp",
    },
  ];
  return (
    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
-      <div className="px-8">
+      <div className="px-12">
        <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
          Why It Changes Everything
        </H2>

        <P className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
-          Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
+          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
        </P>
      </div>

-      <div className="relative ">
-        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
-          {features.map((feature) => (
-            <FeatureCard key={feature.title} className={feature.className}>
-                            <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
-              <FeatureDescription>{feature.description}</FeatureDescription>
-            </FeatureCard>
-          ))}
+      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
+          <div className="flex p-px lg:col-span-4">
+            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
+                <div className="flex items-center">
+                    <div className="w-1/3 p-2">
+                        <img
+                            alt={features[0].title}
+                            src={features[0].image}
+                            className="w-40 h-40 object-contain"
+                        />
+                    </div>
+                    <div className="w-2/3 p-2 pr-12">
+                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[0].title}</h3>
+                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                            {features[0].description}
+                        </p>
+                    </div>
+                </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-3">
+            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-tr-4xl">
+                <div className="flex items-center">
+                    <div className="w-1/3 p-4">
+                        <img
+                            alt={features[1].title}
+                            src={features[1].image}
+                            className="w-40 h-40 object-contain"
+                        />
+                    </div>
+                    <div className="w-2/3 p-4">
+                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[1].title}</h3>
+                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                            {features[1].description}
+                        </p>
+                    </div>
+                </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-3">
+            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-bl-4xl">
+                <div className="flex items-center">
+                    <div className="w-1/3 p-4">
+                        <img
+                            alt={features[2].title}
+                            src={features[2].image}
+                            className="w-40 h-40 object-contain"
+                        />
+                    </div>
+                    <div className="w-2/3 p-4">
+                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[2].title}</h3>
+                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                            {features[2].description}
+                        </p>
+                    </div>
+                </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-4">
+            <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-b-4xl lg:rounded-br-4xl">
+                <div className="flex items-center">
+                    <div className="w-1/3 p-2">
+                        <img
+                            alt={features[3].title}
+                            src={features[3].image}
+                            className="w-40 h-40 object-contain"
+                        />
+                    </div>
+                    <div className="w-2/3 p-2 pr-12">
+                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[3].title}</h3>
+                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                            {features[3].description}
+                        </p>
+                    </div>
+                </div>
+            </div>
+          </div>
        </div>
-      </div>
    </div>
  );
 }

-const FeatureCard = ({
-  children,
-  className,
-}: {
-  children?: React.ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
-      {children}
-    </div>
-  );
-};
-
-const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => {
-  return (
-    <div className="flex items-center gap-2">
-      {icon}
-            <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
-        {children}
-      </p>
-    </div>
-  );
-};
-
-const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <p
-      className={cn(
-        "text-sm md:text-base  max-w-4xl text-left mx-auto",
-        "text-neutral-500 text-center font-normal dark:text-neutral-300",
-        "text-left max-w-sm mx-0 md:text-sm my-2"
-      )}
-    >
-      {children}
-    </p>
-  );
-};

 export const SkeletonOne = () => {
  return (
--- a/src/pages/home/HomeGlobe.tsx
+++ b/src/pages/home/HomeGlobe.tsx
@@ -2,8 +2,9 @@

 import { Globe } from "@/components/ui/Globe"
 import { motion } from "framer-motion"
-import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
+import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from '@/components/CountUpNumber'
+import { MagicCard } from '@/components/magicui/magic-card'

 export function WorldMap() {
  return (
@@ -27,14 +28,15 @@ export function WorldMap() {
        {/* Title + Subtitle */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
          className="max-w-xl"
        >
-          <Eyebrow color="accent">Network</Eyebrow>
-          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <Eyebrow color="accent">Decentralized Network</Eyebrow>
+          <SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
          <P className=" mt-4 text-base leading-relaxed" color="light">
-            Mycelium Cloud's advancement technology enables anyone to deploy
+            Project Mycelium enables anyone to deploy
            their own Internet infrastructure, anywhere.
          </P>
        </motion.div>
@@ -44,8 +46,9 @@ export function WorldMap() {
          {/* Globe Left Column */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
            className="flex-1 flex items-center justify-center"
          >
            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
@@ -57,54 +60,78 @@ export function WorldMap() {
          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
+              className="lg:absolute lg:top-12 lg:-left-12 w-80"
            >
-              <div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
-              <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total Central Processing Unit Cores available on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total Central Processing Unit Cores available on the grid.
+                </CP>
+              </MagicCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
-              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
+              className="lg:absolute lg:-top-10 lg:right-0 w-80"
            >
-              <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
-              <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total number of nodes on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl  shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total number of nodes on the grid.
+                </CP>
+              </MagicCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.6 }}
-              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
            >
-              <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
-              <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+                </CP>
+              </MagicCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.7 }}
-              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
+              className="lg:absolute lg:top-47 lg:right-0 w-80"
            >
-              <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
-              <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
-              <CP color="light" className="mt-2 text-sm">
-                Total number of countries with active nodes.
-              </CP>
+              <MagicCard
+                gradientColor="#334155"
+                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+              >
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
+                <CP color="light" className="mt-2 text-sm">
+                  Total number of countries with active nodes.
+                </CP>
+              </MagicCard>
            </motion.div>
          </div>
        </div>
--- a/src/pages/home/HomeHero.tsx
+++ b/src/pages/home/HomeHero.tsx
@@ -1,36 +0,0 @@
-'use client'
-
-import { H1, P } from '@/components/Texts'
-import { Button } from '@/components/Button'
-
-export function HomeHero() {
-  return (
-        <div
-      className="relative isolate overflow-hidden bg-white h-screen -z-10  flex items-center justify-center"
-      style={{
-        backgroundImage: 'url(/images/cloud.png)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}
-    >
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="-mt-32 mx-auto max-w-2xl text-center">
-                    <H1 color="primary" className="text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
-            Decentralized Autonomous Agentic Cloud.
-          </H1>
-          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
-            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-          </P>
-          <div className="mt-10 flex items-center justify-center gap-x-6">
-            <Button variant="solid" color="cyan" href="#">
-              Get started
-            </Button>
-            <a href="#" className="text-sm/6 font-semibold text-gray-50">
-              Learn more <span aria-hidden="true">→</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
--- a/src/pages/home/HomeHeroDark.tsx
+++ b/src/pages/home/HomeHeroDark.tsx
@@ -1,35 +0,0 @@
-"use client";
-import React from "react";
-import { motion } from "motion/react";
-import { LampContainer } from "@/components/ui/lamp";
-
-export function HomeHeroDark() {
-  return (
-    <LampContainer>
-      <motion.h1
-        initial={{ opacity: 0.5, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.3,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
-      >
-        Decentralized Autonomous Agentic Cloud.
-      </motion.h1>
-      <motion.p
-        initial={{ opacity: 0.5, y: 60 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.5,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
-      >
-        Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
-      </motion.p>
-    </LampContainer>
-  );
-}
--- a/src/pages/home/HomeHeroLight2.tsx
+++ b/src/pages/home/HomeHeroLight2.tsx
@@ -1,69 +0,0 @@
-'use client'
-
-import { useRef, useEffect } from 'react'
-import { H1, H5 } from '@/components/Texts'
-
-export function HomeHeroLight2() {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (video) {
-      video.playbackRate = 0.4;
-      const playPromise = video.play();
-      if (playPromise !== undefined) {
-        playPromise.catch(error => {
-          console.error("Video autoplay was prevented:", error);
-        });
-      }
-    }
-  }, []);
-
-  return (
-    <section className="relative h-screen overflow-hidden">
-      {/* Background video */}
-      <video
-        ref={videoRef}
-        src="/videos/cloud.mp4"
-        autoPlay
-        loop
-        muted
-        playsInline
-        className="absolute inset-0 h-full w-full object-cover z-[-10]"
-      />
-
-      {/* Global soft wash + blur (Temporarily commented out for debugging) */}
-      {/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}
-
-      {/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
-      {/* <div
-        className="absolute inset-0 z-0"
-        style={{
-          background:
-            'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
-        }}
-      /> */}
-
-      {/* Content */}
-      <div className="relative z-10 h-full flex items-center justify-center">
-        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
-          
-          <H1 
-            className="pt-6"
-            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
-          >
-            Decentralized Autonomous Agentic Cloud.
-          </H1>
-
-          <H5
-            className="mt-8"
-            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
-          >
-            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
-            autonomous Agents that connect, learn, and grow with you.
-          </H5>
-        </div>
-      </div>
-    </section>
-  )
-}
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,13 +1,11 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { HomeFeatures } from './HomeFeatures'
 import { HomeFeaturesDark } from './HomeFeaturesDark'
-import { HomeCloud } from './HomeCloud'
-import { HomeAgent } from './HomeAgent'
 import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
+import { HomeSlider } from './HomeSlider'


 export default function HomePage() {
@@ -27,7 +25,7 @@ export default function HomePage() {


      <AnimatedSection>
-        <HomeFeaturesDark />
+        <HomeSlider />
      </AnimatedSection>

      <AnimatedSection>
--- a/src/pages/home/HomeSlider.tsx
+++ b/src/pages/home/HomeSlider.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import React from "react";
+import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
+import { H2, H3, P } from "@/components/Texts";
+
+export function HomeSlider() {
+  const cards = data.map((card) => (
+    <Card key={card.src} card={card} />
+  ));
+
+  return (
+    <div className="w-full h-full py-20 bg-[#0b0b0b]">
+      <div className="max-w-7xl mx-auto pl-4">
+        <H3 className="text-left text-white">
+          Discover the Mycelium Ecosystem
+        </H3>
+        <div className="mt-4 max-w-3xl">
+          <P className="text-left text-neutral-400">
+            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+          </P>
+        </div>
+      </div>
+      <Carousel items={cards} />
+    </div>
+  );
+}
+
+
+import networkImage from "@/images/slider/network1.jpg";
+import agentImage from "@/images/slider/agent1.jpg";
+import cloudImage from "@/images/slider/cloud1.jpg";
+import gpuImage from "@/images/slider/gpu1.jpg";
+import computeImage from "@/images/slider/compute1.jpg";
+import storageImage from "@/images/slider/storage1.jpg";
+
+const data = [
+  {
+    category: "DePIN",
+    title: "Mycelium Network",
+    description: "A decentralized network for distributed computing.",
+    src: "/images/gallery/9.webp",
+    bg: networkImage,
+    link: "/network",
+  },
+  {
+    category: "AI Agent",
+    title: "Mycelium Agent",
+    description: "An intelligent agent for task automation.",
+    src: "/images/gallery/2.webp",
+    bg: agentImage,
+    link: "/agent",
+  },
+  {
+    category: "Cloud",
+    title: "Mycelium Cloud",
+    description: "Decentralized cloud storage and services.",
+    src: "/images/gallery/3.webp",
+    bg: cloudImage,
+    link: "/cloud",
+  },
+
+  {
+    category: "GPU",
+    title: "Mycelium GPU",
+    description: "Access to a global network of GPUs.",
+    src: "/images/gallery/4.webp",
+    bg: gpuImage,
+    link: "/gpu",
+  },
+  {
+    category: "Compute",
+    title: "Mycelium Compute",
+    description: "Run computations on a distributed network.",
+    src: "/images/gallery/5.webp",
+    bg: computeImage,
+    link: "/compute",
+  },
+  {
+    category: "Storage",
+    title: "Mycelium Storage",
+    description: "Secure and decentralized data storage.",
+    src: "/images/gallery/6.webp",
+    bg: storageImage,
+    link: "/storage",
+  },
+];
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -2,33 +2,58 @@

 import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
+import { P, SectionHeader, Eyebrow } from "@/components/Texts";
 import { FadeIn } from "@/components/ui/FadeIn";
-import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';

 export function StackSectionLight() {
  return (
-    <section className="relative w-full overflow-hidden py-24 lg:py-40">
+    <section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
      {/* === Background Layer === */}
-      <div className="absolute inset-0 -z-10 bg-transparent">
-        {/* Dotted Glow Background */}
-        <DottedGlowBackground
-          gap={15}
-          radius={2}
-          color="rgba(0,0,0,0.4)"
-          glowColor="rgba(0,170,255,0.85)"
-          opacity={0.2}
+      <div className="absolute inset-0 z-0 bg-transparent">
+        {/* Central main aura */}
+        <motion.div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
+            filter: "blur(140px)",
+          }}
+          animate={{
+            opacity: [0.5, 0.8, 0.5],
+            scale: [1, 1.05, 1],
+          }}
+          transition={{
+            duration: 9,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+
+        {/* Faint cyan mist in the back for depth */}
+        <motion.div
+          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 20§§%, rgba(255,255,255,0) 30%)",
+            filter: "blur(200px)",
+          }}
+          animate={{
+            opacity: [0.2, 0.35, 0.2],
+            scale: [1, 1.1, 1],
+          }}
+          transition={{
+            duration: 12,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 3,
+          }}
        />
-        {/* Faint 3D grid floor */}
-        <div className="absolute inset-0 flex items-end justify-center overflow-hidden">
-          <div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
-        </div>
      </div>

      {/* === Content === */}
      <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
        {/* Left Column - Text */}
-        <div className="text-center lg:text-left">
+        <div className="text-center lg:text-left z-10">
          <FadeIn>
            <Eyebrow color="accent">Technology Layers</Eyebrow>
            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
@@ -38,15 +63,15 @@ export function StackSectionLight() {

          <FadeIn>
            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
-              Built with Mycelium technology, our AI infrastructure ensures
-              unbreakable networks, complete data sovereignty, ultra-secure
-              agent-human communication, and unhackable data storage systems.
+              Project Mycelium unifies compute, storage, networking, and AI into a resilient
+              ecosystem that preserves data sovereignty, powers seamless collaboration,
+              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
            </P>
          </FadeIn>
        </div>

        {/* Right Column - Animated Stack */}
-        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
          <motion.div
            initial={{ y: 30, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
--- a/src/pages/home/WorldMapSection.tsx
+++ b/src/pages/home/WorldMapSection.tsx
@@ -1,106 +0,0 @@
-import { motion } from 'framer-motion'
-import { Globe } from '../../components/ui/Globe2'
-import { CountUpNumber } from '../../components/CountUpNumber'
-import { Container } from '../../components/Container'
-
-export function WorldMapSection() {
-  return (
-    <section className="relative bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="mb-12"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Mycelium Network is Live.
-          </h2>
-        </motion.div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Globe */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className="flex items-center justify-center"
-          >
-            <div className="relative w-full max-w-[500px] aspect-square">
-              <Globe className="w-full h-full" />
-            </div>
-          </motion.div>
-
-          {/* Stats Cards */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.3 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">CORES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={54958} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total Central Processing Unit Cores available on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">NODES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={1493} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total number of nodes on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.5 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">SSD CAPACITY</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={5388956} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.6 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">COUNTRIES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={44} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total number of countries with active nodes.
-              </p>
-            </motion.div>
-          </div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
mik-tf	1260afdd82	docs: add developer docs for compute and storage	2025-10-27 12:32:21 -04:00
sasha-astiadi	ff1f29b652	feat: add GPU overview section with key features - Created new GpuOverview component showcasing 4 core features of GPU service - Added responsive grid layout with feature cards displaying icons and descriptions - Integrated overview section into GpuPage between hero and call-to-action - Implemented dark theme styling with cyan accents for feature icons - Added descriptive text explaining unified GPU acceleration across ThreeFold Grid	2025-10-27 17:16:14 +01:00
sasha-astiadi	41bd49dfaf	feat: standardize button components and update GPU hero section - Refactored Button component usage across hero sections to use consistent variant/color props instead of inline styles - Added new cyan outline button variant with hover state styling - Updated GPU hero section with new heading, condensed description, and dual CTA buttons - Standardized button spacing and removed unnecessary whitespace in button text - Modified Button component type definitions to support cyan color in outline variant	2025-10-27 17:15:58 +01:00
sasha-astiadi	9ae3785c70	feat: update button hover color scheme across hero sections - Changed hover color from indigo-500 to cyan-600 on primary action buttons in all hero components - Standardized hover state styling across Cloud, Compute, GPU and Storage pages - Improved color consistency by keeping interactions within the cyan color family	2025-10-27 17:01:15 +01:00
sasha-astiadi	24a0a981a9	feat: update hero button styling across product pages - Changed button background color from indigo-600 to cyan-500 for consistent branding - Updated button border radius from rounded-md to rounded-xl for softer appearance - Modified focus outline color from indigo-600 to cyan-600 to match new button color - Applied changes consistently across Cloud, Compute, GPU, and Storage hero sections	2025-10-27 17:00:33 +01:00
sasha-astiadi	e5cbce4c86	style: adjust footer logo size and spacing - Reduced logo dimensions from 20x20 to 15x15 pixels for better visual balance - Updated height and width classes from h-20/w-20 to h-15/w-15 to match new design spec	2025-10-27 15:23:38 +01:00
sasha-astiadi	2ba55566b5	feat: redesign benefits section with image cards - Replaced icon-based feature cards with new image-based card layout using product benefit images - Updated grid layout to 7-column system with asymmetric card sizes for better visual hierarchy - Added hover effects with cyan highlights and scale transitions for better interactivity - Implemented responsive design with custom rounded corners for mobile/desktop views - Removed unused FeatureCard, FeatureTitle and FeatureDescription components - Adde	2025-10-27 15:22:42 +01:00
mik-tf	d82d3351f3	docs: add developer docs for gpu and cloud	2025-10-27 09:51:50 -04:00
sasha-astiadi	05cd30f510	feat: redesign agents hero section for improved visual hierarchy - Updated layout to use centered vertical alignment with justify-center - Added semi-transparent white overlay (bg-white/30) for better text contrast - Changed text color to white and added drop shadows for improved readability - Repositioned scroll arrow to fixed bottom position for consistent placement - Removed redundant padding and margin adjustments - Updated font weight from light to normal for better legibility	2025-10-27 14:50:11 +01:00
sasha-astiadi	2a141cbc91	Based on the git diff, here's an appropriate commit message: feat: update brand logo assets - Added new logo_1.png image file to public/images directory - Simplified logomark.svg by removing complex gradient patterns and clip paths - Reduced SVG markup complexity for better performance and maintainability This is a "feat" type commit since it modifies user-visible brand assets. The message clearly describes both the addition of a new logo file and the simplification of the existing SVG logomark,	2025-10-27 13:58:51 +01:00
sasha-astiadi	2ebdb14409	refactor: simplify home slider and carousel components - Removed unused DummyContent component and content prop from slider data - Simplified Card component mapping by removing unnecessary index parameter - Cleaned up whitespace in apple-cards-carousel component - Streamlined data structure by removing unused content fields from slider items	2025-10-27 13:50:57 +01:00
sasha-astiadi	3ea9e77a7b	refactor: remove unused isMobile function - Deleted unused isMobile() function that was checking window width - Cleaned up code by removing redundant window width check that wasn't being utilized in the component	2025-10-27 13:29:20 +01:00
sasha-astiadi	a52e838d17	feat: update card carousel to use direct background images - Replaced BlurImage component with direct background image styling for better performance - Added new 'bg' property to Card type to support background image imports - Imported slider background images for each card category - Removed redundant background color class and BlurImage component - Updated card styling to maintain visual consistency with background images	2025-10-27 13:29:05 +01:00
sasha-astiadi	b543aebce9	style: adjust gradient fade radius in StackSection - Reduced gradient fade-out radius from 90% to 30% for more concentrated visual effect - Adjusted middle gradient stop from 50% to 20% to create smoother transition - Fine-tuned visual appearance of the radial background gradient in light theme	2025-10-27 11:41:11 +01:00
sasha-astiadi	8844ec8a63	feat: update cube component color scheme from cyan to blue - Changed cube gradient colors from cyan to blue for better visual consistency - Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan - Modified background aura gradients in StackSection for enhanced depth perception - Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout - Added isolate property to StackSection to prevent gradient bleeding - Enhanced background layer in StackSection with additional	2025-10-24 21:16:41 +02:00
sasha-astiadi	68b2119c76	feat: enhance UI with glowing effects and visual improvements - Added new MagicCard component for interactive hover effects with gradient lighting - Enhanced CubeLight component with cyan glow effects and improved visual styling - Added new GlowingEffect component for dynamic lighting animations - Updated StackedCubesLight with ambient gradient background and smoother transitions - Added tracking-wide property to CP text component for better readability - Added new networkhero.png image asset	2025-10-24 20:41:42 +02:00
sasha-astiadi	94f4e72e57	feat: update hero sections with new visual designs - Added new hero section alternatives for Agents, Cloud, Compute and GPU pages with modern visual layouts - Updated hero background images with new high-quality assets for better visual appeal - Replaced spinning animation heroes with full-width image + text split layouts - Added consistent styling across hero sections with left-aligned text and right-side hero images - Updated hero copy to focus on platform capabilities and value propositions - Replace	2025-10-24 17:58:21 +02:00
sasha-astiadi	c1952754d7	feat: update homepage hero section design - Replaced hero background image with new mchip3.webp visual - Added new home.png asset for UI elements - Adjusted vertical spacing with pt-[20vh] and -mt-5 for better visual balance - Refined container layout by removing justify-center for more precise positioning	2025-10-24 16:52:21 +02:00
sasha-astiadi	c0df7c21a7	feat: redesign storage hero section with new layout and visuals - Replaced spinning circular animation with new static hero image (storagehero2.png) - Updated hero section layout to right-aligned image with left content format - Changed messaging to focus on data/intelligence relationship and storage capabilities - Simplified component by removing BackgroundIllustration and ContactForm - Updated CTA from "Join Waitlist" to "Talk to an expert" - Added "STORAGE" label with cyan accent color - Improved responsive design	2025-10-24 16:42:16 +02:00
sasha-astiadi	be74079de2	feat: convert CTA components to full pages and expand waitlist form options - Renamed CallToAction components to full Page components for compute, storage and GPU sections - Added new waitlist form types: storage_waitlist, compute_waitlist, and gpu_waitlist - Updated form placeholder text to show relevant requirements based on waitlist type - Fixed string template syntax in Dropdown component CSS classes	2025-10-24 16:30:23 +02:00
sasha-astiadi	752668b38d	feat: add cloud services dropdown menu in header - Replaced individual cloud service pages with CallToAction components for Compute, Storage and GPU - Added dropdown menu in header to consolidate cloud service navigation options - Removed redundant page components (Compute.tsx, Storage.tsx, Gpu.tsx) that shared identical layouts - Updated route components to use new CallToAction components - Added ChevronDownIcon to visually indicate dropdown functionality	2025-10-24 15:50:12 +02:00
sasha-astiadi	11689fdd37	feat: add new compute, storage and GPU pages with routes - Created new page components for Compute, Storage and GPU sections with basic layout structure - Added corresponding routes in App.tsx to enable navigation to the new pages - Implemented consistent page structure with Header, main content area and Footer - Added decorative background gradient effect using tailwind classes for visual consistency	2025-10-24 15:34:11 +02:00
Emre	45b1c43b97	improvements	2025-10-24 15:11:28 +03:00
Emre	26fbea3ec4	fixed build errors	2025-10-24 04:17:02 +03:00
Emre	3a7aa82ff7	improvements	2025-10-24 02:17:33 +03:00