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

docs/mycelium_cloud_for_devs.md

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

docs/mycelium_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.*

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>
+    <title>Project 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." />
+    <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>

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",

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",

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>

src/components/AnimatedSection.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react'
+import { motion } from 'framer-motion'
-import { motion, useInView } from 'framer-motion'
 
-export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
+type AnimatedSectionProps = {
-  const ref = useRef(null)
+  children: React.ReactNode
-  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+  id?: string
+  className?: string
+}
 
+export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
   return (
     <motion.section
       id={id}
-      ref={ref}
+      className={className}
-      initial={{ opacity: 0, y: 50 }}
+      initial={{ opacity: 0, y: 40 }}
-      animate={{
+      whileInView={{ opacity: 1, y: 0 }}
-        opacity: isInView ? 1 : 0,
+      viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
-        y: isInView ? 0 : 50,
+      transition={{ duration: 0.5, ease: 'easeOut' }}
-      }}
-      transition={{ duration: 0.5 }}
     >
       {children}
     </motion.section>

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>
+  )
+}

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' }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
-      transition={transition || { duration: 0.5 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
     >
       {children}
     </motion.div>
   )
 }
-

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
+                  Download Mycelium Connector
-                </a>
+                </Link>
               </p>
               <p className="mt-1 text-sm text-gray-700">
                 Head to the GitHub to access the latest Mycelium builds for your devices.

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
+              <Dropdown
-                to="/"
+                buttonContent={
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+                  <>
-              >
+                    Cloud
-                Home
+                    <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-              </Link>
+                  </>
-              <Link
+                }
-                to="/cloud"
+                items={[
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+                  { name: 'Cloud', href: '/cloud' },
-              >
+                  { name: 'Compute', href: '/compute' },
-                Cloud
+                  { name: 'Storage', href: '/storage' },
-              </Link>
+                  { 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>

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')

src/components/features-section-demo-1.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useId } from "react";
 
 export default function FeaturesSectionDemo() {

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 };

src/components/magicui/magic-card.tsx

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

src/components/ui/CubeLight.tsx

@@ -26,8 +26,11 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
     <path
       fill={`url(#cube-gradient-${index})`}
       d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+      stroke="rgba(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="0%" stopColor="#EBF8FF" stopOpacity="0.75" />
-        <stop offset="1" stopColor="#9CA3AF" />
+        <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 
+          <h3
-            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
+            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
-            style={{ 
+            style={{
-              transform: 'rotate(0deg) skewX(0deg)',
+              textShadow:
-              transformOrigin: 'center'
+                "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>
         )}
-
+      </motion.div>
-        {/* Description for Mobile - Below cube */}
-              </motion.div>
     </div>
   );
 }

src/components/ui/Dropdown.tsx

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

src/components/ui/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' }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
-      transition={transition || { duration: 0.5 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
     >
       {children}
     </motion.div>
   )
 }
-

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 { Line, OrbitControls, useTexture } from "@react-three/drei";
-import { useRef } from "react";
+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) => {
+      {arcPoints.map((points, i) => (
-        const radius = 2.5;
+        <Line
-        const curve = new THREE.EllipseCurve(
+          key={i}
-          0,
+          points={points}
-          0,
+          color="#00e5ff"
-          radius,
+          lineWidth={1}
-          radius / 2,
+          transparent
-          0,
+          opacity={0.5}
-          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>
-        );
-      })}
 
       {/* 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>
       ))}

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="flex flex-col items-center relative">
-    <div 
+      {/* ✨ Ambient cyan-white gradient background */}
-      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
-      onMouseLeave={() => setActive("agent")}
+      <div
-    >
+        className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-      <motion.div
+        onMouseLeave={() => setActive("agent")}
-        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",
-        }}
       >
-        {stackData.map((layer, index) => (
+        <motion.div
-          <div
+          className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
-            key={layer.id}
+          animate={{ y: ["-8px", "8px"] }}
-            className="absolute"
+          transition={{
-            style={{
+            duration: 4,
-              top: `calc(${index * 30}% - ${index * 10}px)`,
+            repeat: Infinity,
-              zIndex: active === layer.id ? 20 : 10 - index,
+            repeatType: "reverse",
-            }}
+            ease: "easeInOut",
-          >
+          }}
-            <CubeLight
+        >
-              title={layer.title}
+          {stackData.map((layer, index) => (
-              descriptionTitle={layer.descriptionTitle}
+            <div
-              description={layer.description}
+              key={layer.id}
-              isActive={active === layer.id}
+              className="absolute transition-all duration-500"
-              index={index}
+              style={{
-              onHover={() => setActive(layer.id)}
+                top: `calc(${index * 30}% - ${index * 10}px)`,
-              onLeave={() => {}}
+                zIndex: active === layer.id ? 20 : 10 - index,
-              onClick={() => handleCubeClick(layer.id)}
+              }}
-            />
+            >
-          </div>
+              {/* 🌫 subtle glow behind each cube */}
-        ))}
+              <div
-      </motion.div>
+                className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
-    </div>
+                  active === layer.id
-    {selectedMobileLayer && (
+                    ? "bg-cyan-300/40 opacity-70"
-      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
+                    : "bg-cyan-200/20 opacity-40"
-        <h4 className="text-black text-lg font-semibold mb-2 text-center">
+                }`}
-          {selectedMobileLayer.descriptionTitle}
+              />
-        </h4>
+              <CubeLight
-        <p className="text-gray-700 text-sm leading-relaxed text-center">
+                title={layer.title}
-          {selectedMobileLayer.description}
+                descriptionTitle={layer.descriptionTitle}
-        </p>
+                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>
   );
 }

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}
+    />
+  );
+};

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

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);

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>

src/components/ui/glowing-effect.tsx

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

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

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

src/hooks/use-outside-click.ts

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

src/hooks/use-outside-click.tsx

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

src/pages/agents/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"
+      />
+    </>
+  )
+}

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>
+  );
+}

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>

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 }}
+          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.8 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className="mx-auto max-w-3xl text-center mb-16"
+          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 }}
+              viewport={{ once: true, amount: 0.2 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
-              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"
+              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}

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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1 }}
+          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">

src/pages/agents/DeploySection.tsx

@@ -1,46 +1,63 @@
-'use client'
+"use client";
 
-import { useRef } from 'react'
+import { motion } from "framer-motion";
-import { motion, useInView } from 'framer-motion'
+import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
-import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
+import type { ComponentPropsWithoutRef } from "react";
-import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+
+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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
+          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 }}
+          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          viewport={{ once: true, amount: 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"
+          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 }}
+              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
+              viewport={{ once: true, amount: 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"
+              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" />
+              <feature.icon className="mb-4 h-8 w-8 text-white" />
-              <CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
+              <CT as="span" className="text-left font-semibold" color="light">
-              <CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
+                {feature.name}
+              </CT>
+              <CP className="mt-2 text-left text-sm" color="light">
+                {feature.description}
+              </CP>
             </motion.li>
           ))}
         </motion.ul>
       </div>
     </section>
-  )
+  );
 }

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="mx-auto max-w-3xl text-center">
-          <div className="max-w-3xl mx-auto">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+            Ready Today
-              Ready Today
+          </p>
-            </p>
+          <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            <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.
-              Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+          </h2>
-            </h2>
+          <p className="mt-6 text-lg text-gray-600">
-            <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.
-              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>
-            </p>
+          <div className="mt-10 flex justify-center">
-            <div className="mt-10 flex justify-center">
+            <Button
-              <Button
+              to="https://myceliumcloud.tf"
-                to="https://myceliumcloud.tf"
+              as="a"
-                as="a"
+              variant="solid"
-                variant="solid"
+              color="cyan"
-                color="cyan"
+              target="_blank"
-                target="_blank"
+              rel="noreferrer"
-                rel="noreferrer"
+            >
-              >
+              Start Deployment
-                Start Deploying
+            </Button>
-              </Button>
-            </div>
           </div>
         </div>
       </Container>

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">
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
-                Start Deploying
+                Start Deployment
-              </Button>
-              <Button
-                to="https://manual.grid.tf"
-                as="a"
-                variant="outline"
-                color="gray"
-                target="_blank"
-                rel="noreferrer"
-              >
-                View Documentation
               </Button>
+              
             </div>
           </div>
           <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

src/pages/cloud/CloudHeroAlt.tsx

@@ -0,0 +1,36 @@
+'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="#"
+              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            >
+              {' '}
+              Experience Deterministic Compute{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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>

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 />

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}

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>
+  )
+}

src/pages/compute/ComputeHero.tsx

@@ -0,0 +1,39 @@
+'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="#"
+              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            >
+              {' '}
+              Experience Deterministic Compute{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+    </>
+  )
+}

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>
+  )
+}

src/pages/gpu/GpuHero.tsx

@@ -0,0 +1,38 @@
+'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>
+          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
+          <p className="mt-6 text-base/7 text-gray-600">
+            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.
+            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
+          </p>
+          <div className="mt-8">
+            <Button
+              href="#"
+              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            >
+              {' '}
+              Unify Your GPU Power{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/gpu/GpuPage.tsx

@@ -0,0 +1,16 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { GpuHero } from './GpuHero'
+import { CallToAction } from './CallToAction'
+
+export default function GpuPage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <GpuHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
+    </div>
+  )
+}

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">
+            <Button to="/cloud" variant="solid" color="white">
-              Start Building
+              Start Deployment
+            </Button>
+            <Button to="/download" variant="solid" color="cyan">
+              Get Mycelium Connector
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

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">

src/pages/home/HomeAurora.tsx

@@ -1,35 +1,35 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { H1, H5 } from "@/components/Texts";
-import { H1, H2, H3, H4, H5 } from "@/components/Texts";
 import { ScrollDownArrow } from '@/components/ScrollDownArrow';
 
 export function HomeAurora() {
   return (
-      <motion.div
+    <div
-        initial={{ opacity: 0.0, y: 40 }}
+      style={{
-        whileInView={{ opacity: 1, y: 0 }}
+        backgroundImage: "url(/images/homehero1.png)",
-        transition={{
+        backgroundSize: "cover",
-          delay: 0.5,
+        backgroundPosition: "center",
-          duration: 1,
+      }}
-          ease: "easeInOut",
+      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"
-        }}
+    >
-        style={{
+      <div className="text-center -mt-5">
-          backgroundImage: "url(/images/mchip2.webp)",
+        <H1>
-          backgroundSize: "cover",
+          <span className="text-bold lg:text-8xl">
-          backgroundPosition: "center",
+            Full Sovereignty for<br />Cloud, Network & AI.
-        }}
+          </span>
-        className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
+        </H1>
-      >
+      </div>
-        <div className="text-center text-gray-800">
+      <div className="max-w-4xl text-center font-light text-gray-500">
-          <H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
+        <H5>
-        </div>
+          Build and run mission-critical workloads on distributed compute,
-        <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
+          encrypted networking, and sovereign AI orchestration — all under your
-          <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
+          control, without centralized gatekeepers.
-        </div>
+        </H5>
-        <div className="pt-8">
+      </div>
-          <ScrollDownArrow />
+      <div className="pt-6">
-        </div>
+        <ScrollDownArrow />
-      </motion.div>
+      </div>
+    </div>
   );
 }

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" />,
+      image: "/images/benefits/sovereign.webp",
-      className:
-        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
     },
     {
       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" />,
+      image: "/images/benefits/autonomous.webp",
-      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
     },
     {
       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" />,
+      image: "/images/benefits/energy.webp",
-      className:
-        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
     },
     {
       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" />,
+      image: "/images/benefits/cost.webp",
-      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
     },
   ];
   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="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="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
+          <div className="flex p-px lg:col-span-4">
-          {features.map((feature) => (
+            <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">
-            <FeatureCard key={feature.title} className={feature.className}>
+                <div className="flex items-center">
-                            <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
+                    <div className="w-1/3 p-2">
-              <FeatureDescription>{feature.description}</FeatureDescription>
+                        <img
-            </FeatureCard>
+                            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 (

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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
           className="max-w-xl"
         >
-          <Eyebrow color="accent">Network</Eyebrow>
+          <Eyebrow color="accent">Decentralized Network</Eyebrow>
-          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <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 }}
+            whileInView={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
+              viewport={{ once: true, amount: 0.3 }}
-              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"
+              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>
+              <MagicCard
-              <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
+                gradientColor="#334155"
-              <CP color="light" className="mt-2 text-sm">
+                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"
-                Total Central Processing Unit Cores available on the grid.
+              >
-              </CP>
+                <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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
+              viewport={{ once: true, amount: 0.3 }}
-              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"
+              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>
+              <MagicCard
-              <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
+                gradientColor="#334155"
-              <CP color="light" className="mt-2 text-sm">
+                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"
-                Total number of nodes on the grid.
+              >
-              </CP>
+                <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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.6 }}
+              viewport={{ once: true, amount: 0.3 }}
-              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"
+              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>
+              <MagicCard
-              <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
+                gradientColor="#334155"
-              <CP color="light" className="mt-2 text-sm">
+                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"
-                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+              >
-              </CP>
+                <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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.7 }}
+              viewport={{ once: true, amount: 0.3 }}
-              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"
+              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>
+              <MagicCard
-              <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
+                gradientColor="#334155"
-              <CP color="light" className="mt-2 text-sm">
+                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"
-                Total number of countries with active nodes.
+              >
-              </CP>
+                <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>

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>
-  )
-}

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>
-  );
-}

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>
-  )
-}

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>

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",
+  },
+];

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">
+      <div className="absolute inset-0 z-0 bg-transparent">
-        {/* Dotted Glow Background */}
+        {/* Central main aura */}
-        <DottedGlowBackground
+        <motion.div
-          gap={15}
+          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"
-          radius={2}
+          style={{
-          color="rgba(0,0,0,0.4)"
+            background:
-          glowColor="rgba(0,170,255,0.85)"
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
-          opacity={0.2}
+            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
+              Project Mycelium unifies compute, storage, networking, and AI into a resilient
-              unbreakable networks, complete data sovereignty, ultra-secure
+              ecosystem that preserves data sovereignty, powers seamless collaboration,
-              agent-human communication, and unhackable data storage systems.
+              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 }}

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>
-  )
-}

src/pages/network/CallToAction.tsx

@@ -21,7 +21,7 @@ export function CallToAction() {
           </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
+              Get Mycelium Connector
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

src/pages/network/Hero.tsx

@@ -74,32 +74,32 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
 
 export function Hero() {
   return (
-        <div className="overflow-hidden py-32">
+    <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 lg:text-6xl font-medium tracking-tight text-gray-900">
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
               Mycelium Network
             </h1>
-            <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
               Unleashing the Power of Decentralized Networks
             </h2>
-            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
+            <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
               Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
+                Get Mycelium Connector
               </Button>
             </div>
           </div>
-          <div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:top-0 lg:ml-12 ml-0" />
+            <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-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:top-0 lg:h-auto lg:pt-10 xl:-bottom-32">
+            <div className="mx-auto h-[460px] max-w-[520px] 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-32">
               <img
                 src={phoneFrame}
                 alt="Mycelium application demo"
-                className="mx-auto max-w-[366px]"
+                className="mx-auto h-full w-auto max-w-[366px]"
                 width={366}
                 height={729}
               />

src/pages/network/PrimaryFeatures.tsx

@@ -6,7 +6,6 @@ import clsx from 'clsx'
 import {
   type MotionProps,
   type Variant,
-  type Variants,
   AnimatePresence,
   motion,
 } from 'framer-motion'
@@ -137,12 +136,6 @@ function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-const headerAnimation: Variants = {
-  initial: { opacity: 0, transition: { duration: 0.3 } },
-  animate: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
-  exit: { opacity: 0, transition: { duration: 0.3 } },
-}
-
 const maxZIndex = 2147483647
 
 const bodyVariantBackwards: Variant = {

src/pages/network/animations/ContentDistribution.tsx

@@ -7,7 +7,6 @@ type Props = {
 
 const ACCENT = '#00b8db';
 const STROKE = '#111827';
-const GRAY = '#9CA3AF';
 const GRAY_LT = '#E5E7EB';
 
 const IconSquare = () => (