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.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",
@@ -28,8 +30,6 @@
     "framer-motion": "^10.18.0",
     "lucide-react": "^0.544.0",
     "motion": "^12.23.24",
-    "next": "^14.2.33",
-    "next-themes": "^0.4.6",
     "popmotion": "^11.0.5",
     "react": "^18.3.1",
     "react-countup": "^6.5.3",
@@ -49,7 +49,6 @@
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.33",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "sharp": "^0.33.1",

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,10 +8,10 @@ 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">Mycelium</p>
+                <p className="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
               </div>
             </div>
             <nav className="mt-10 flex gap-8">
@@ -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,124 +1,66 @@
-'use client'
-
-
-import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { AnimatePresence, motion } from 'framer-motion'
+import { Dropdown } from './ui/Dropdown'
-import clsx from 'clsx'
+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() {
-function NavLinks() {
-  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-  let timeoutRef = useRef<number | null>(null)
-
-
   return (
-    <div className="flex items-center gap-x-5">
+    <header>
+      <nav>
+                <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="flex items-center gap-x-5 border-l border-white/10 pl-5">
+            <div className="hidden lg:flex lg:gap-10">
-        {[
+              <Dropdown
-          ['Home', '/'],
+                buttonContent={
-          ['Cloud', '/cloud'],
+                  <>
-          ['Network', '/network'],
+                    Cloud
-          ['Agents', '/agents'],
+                    <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-        ].map(([label, href], index) => (
+                  </>
-          <Link
-            key={label}
-            to={href}
-            className={clsx(
-              'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
-            )}
-            onMouseEnter={() => {
-              if (timeoutRef.current) {
-                window.clearTimeout(timeoutRef.current)
                 }
-              setHoveredIndex(index)
+                items={[
-            }}
+                  { name: 'Cloud', href: '/cloud' },
-            onMouseLeave={() => {
+                  { name: 'Compute', href: '/compute' },
-              timeoutRef.current = window.setTimeout(() => {
+                  { name: 'Storage', href: '/storage' },
-                setHoveredIndex(null)
+                  { name: 'GPU', href: '/gpu' },
-              }, 200)
+                ]}
-            }}
-          >
-            <AnimatePresence>
-              {hoveredIndex === index && (
-                <motion.span
-                  className="absolute inset-0 rounded-lg bg-white/10"
-                  layoutId="hoverBackground"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1, transition: { duration: 0.15 } }}
-                  exit={{
-                    opacity: 0,
-                    transition: { duration: 0.15 },
-                  }}
               />
-              )}
+              <Link
-            </AnimatePresence>
+                to="/network"
-            <span className="relative z-10">{label}</span>
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Network
+              </Link>
+              <Link
+                to="/agents"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Agents
               </Link>
-        ))}
             </div>
-       <div className="flex items-center gap-8">
+          </div>
+          <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>
-    </div>
+        </Container>
-  )
+      </nav>
-}
+    </header>
-
-
-export function Header() {
-  const [isVisible, setIsVisible] = useState(true);
-  const [lastScrollY, setLastScrollY] = useState(0);
-
-
-  const controlHeader = () => {
-    if (typeof window !== 'undefined') {
-      if (window.scrollY > lastScrollY && window.scrollY > 100) { // Hides when scrolling down past 100px
-        setIsVisible(false);
-      } else { // Shows when scrolling up
-        setIsVisible(true);
-      }
-      setLastScrollY(window.scrollY);
-    }
-  };
-
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', controlHeader);
-      return () => {
-        window.removeEventListener('scroll', controlHeader);
-      };
-    }
-  }, [lastScrollY]);
-
-
-  return (
-    <motion.header 
-      className="fixed top-4 left-0 right-0 z-50 flex justify-center"
-      initial={{ y: 0, opacity: 1 }}
-      animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
-      transition={{ duration: 0.3, ease: 'easeInOut' }}
-    >
-      <div className="rounded-full bg-white/10 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
-        <NavLinks />
-      </div>
-    </motion.header>
   )
 }

src/components/Layout.tsx

@@ -1,20 +1,13 @@
 import { Outlet } from 'react-router-dom'
-import { FloatingNav } from './ui/floating-navbar'
 import { Footer } from './Footer'
 import { Header } from './Header'
 
 export function Layout() {
-  const navItems = [
-    { name: 'Home', link: '/' },
-    { name: 'Cloud', link: '/cloud' },
-    { name: 'Network', link: '/network' },
-    { name: 'Agents', link: '/agents' },
-  ];
 
   return (
     <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
       <Header />
-      <main>
+            <main className="">
         <Outlet />
       </main>
       <Footer />

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

@@ -0,0 +1,138 @@
+import { useId } from "react";
+
+export default function FeaturesSectionDemo() {
+  return (
+    <div className="py-20 lg:py-40">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto">
+        {grid.map((feature) => (
+          <div
+            key={feature.title}
+            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden"
+          >
+            <Grid size={20} />
+            <p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
+              {feature.title}
+            </p>
+            <p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
+              {feature.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const grid = [
+  {
+    title: "HIPAA and SOC2 Compliant",
+    description:
+      "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
+  },
+  {
+    title: "Automated Social Media Posting",
+    description:
+      "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
+  },
+  {
+    title: "Advanced Analytics",
+    description:
+      "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
+  },
+  {
+    title: "Content Calendar",
+    description:
+      "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
+  },
+  {
+    title: "Audience Targeting",
+    description:
+      "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
+  },
+  {
+    title: "Social Listening",
+    description:
+      "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
+  },
+  {
+    title: "Customizable Templates",
+    description:
+      "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
+  },
+  {
+    title: "Collaboration Tools",
+    description:
+      "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
+  },
+];
+
+export const Grid = ({
+  pattern,
+  size,
+}: {
+  pattern?: number[][];
+  size?: number;
+}) => {
+  const p = pattern ?? [
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+  ];
+  return (
+    <div className="pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
+      <div className="absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
+        <GridPattern
+          width={size ?? 20}
+          height={size ?? 20}
+          x="-12"
+          y="4"
+          squares={p}
+          className="absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
+        />
+      </div>
+    </div>
+  );
+};
+
+export function GridPattern({ width, height, x, y, squares, ...props }: any) {
+  const patternId = useId();
+
+  return (
+    <svg aria-hidden="true" {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
+        </pattern>
+      </defs>
+      <rect
+        width="100%"
+        height="100%"
+        strokeWidth={0}
+        fill={`url(#${patternId})`}
+      />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]: any) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width + 1}
+              height={height + 1}
+              x={x * width}
+              y={y * height}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}

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

@@ -0,0 +1,109 @@
+import { cn } from "@/lib/utils";
+import {
+  IconAdjustmentsBolt,
+  IconCloud,
+  IconCurrencyDollar,
+  IconEaseInOut,
+  IconHeart,
+  IconHelp,
+  IconRouteAltLeft,
+  IconTerminal2,
+} from "@tabler/icons-react";
+
+export default function FeaturesSectionDemo() {
+  const features = [
+    {
+      title: "Built for developers",
+      description:
+        "Built for engineers, developers, dreamers, thinkers and doers.",
+      icon: <IconTerminal2 />,
+    },
+    {
+      title: "Ease of use",
+      description:
+        "It's as easy as using an Apple, and as expensive as buying one.",
+      icon: <IconEaseInOut />,
+    },
+    {
+      title: "Pricing like no other",
+      description:
+        "Our prices are best in the market. No cap, no lock, no credit card required.",
+      icon: <IconCurrencyDollar />,
+    },
+    {
+      title: "100% Uptime guarantee",
+      description: "We just cannot be taken down by anyone.",
+      icon: <IconCloud />,
+    },
+    {
+      title: "Multi-tenant Architecture",
+      description: "You can simply share passwords instead of buying new seats",
+      icon: <IconRouteAltLeft />,
+    },
+    {
+      title: "24/7 Customer Support",
+      description:
+        "We are available a 100% of the time. Atleast our AI Agents are.",
+      icon: <IconHelp />,
+    },
+    {
+      title: "Money back guarantee",
+      description:
+        "If you donot like EveryAI, we will convince you to like us.",
+      icon: <IconAdjustmentsBolt />,
+    },
+    {
+      title: "And everything else",
+      description: "I just ran out of copy ideas. Accept my sincere apologies",
+      icon: <IconHeart />,
+    },
+  ];
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-10 max-w-7xl mx-auto">
+      {features.map((feature, index) => (
+        <Feature key={feature.title} {...feature} index={index} />
+      ))}
+    </div>
+  );
+}
+
+const Feature = ({
+  title,
+  description,
+  icon,
+  index,
+}: {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  index: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800",
+        (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
+        index < 4 && "lg:border-b dark:border-neutral-800"
+      )}
+    >
+      {index < 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      {index >= 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
+        {icon}
+      </div>
+      <div className="text-lg font-bold mb-2 relative z-10 px-10">
+        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
+        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
+          {title}
+        </span>
+      </div>
+      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
+        {description}
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,281 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import createGlobe from "cobe";
+import { useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import { IconBrandYoutubeFilled } from "@tabler/icons-react";
+
+
+export default function FeaturesSectionDemo() {
+  const features = [
+    {
+      title: "Track issues effectively",
+      description:
+        "Track and manage your project issues with ease using our intuitive interface.",
+      skeleton: <SkeletonOne />,
+      className:
+        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Capture pictures with AI",
+      description:
+        "Capture stunning photos effortlessly using our advanced AI technology.",
+      skeleton: <SkeletonTwo />,
+      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+    },
+    {
+      title: "Watch our AI on YouTube",
+      description:
+        "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
+      skeleton: <SkeletonThree />,
+      className:
+        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
+    },
+    {
+      title: "Deploy in seconds",
+      description:
+        "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
+      skeleton: <SkeletonFour />,
+      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">
+        <h4 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">
+          Packed with thousands of features
+        </h4>
+
+        <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">
+          From Image generation to video generation, Everything AI has APIs for
+          literally everything. It can even create this website copy for you.
+        </p>
+      </div>
+
+      <div className="relative ">
+        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} className={feature.className}>
+              <FeatureTitle>{feature.title}</FeatureTitle>
+              <FeatureDescription>{feature.description}</FeatureDescription>
+              <div className=" h-full w-full">{feature.skeleton}</div>
+            </FeatureCard>
+          ))}
+        </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 }: { children?: React.ReactNode }) => {
+  return (
+    <p className=" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
+      {children}
+    </p>
+  );
+};
+
+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 (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
+          {/* TODO */}
+          <img
+            src="/linear.webp"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
+          />
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
+      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonThree = () => {
+  return (
+    <a
+      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
+      target="__blank"
+      className="relative flex gap-10  h-full group/image"
+    >
+      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
+          {/* TODO */}
+          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
+          <img
+            src="https://assets.aceternity.com/fireship.jpg"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+          />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export const SkeletonTwo = () => {
+  const images = [
+    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  ];
+
+  const imageVariants = {
+    whileHover: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+    whileTap: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+  };
+  return (
+    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
+      {/* TODO */}
+      <div className="flex flex-row -ml-20">
+        {images.map((image, idx) => (
+          <motion.div
+            variants={imageVariants}
+            key={"images-first" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+      <div className="flex flex-row">
+        {images.map((image, idx) => (
+          <motion.div
+            key={"images-second" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            variants={imageVariants}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
+      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonFour = () => {
+  return (
+    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
+      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
+    </div>
+  );
+};
+
+export const Globe = ({ className }: { className?: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let phi = 0;
+
+    if (!canvasRef.current) return;
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 1,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        // longitude latitude
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        // Called on every animation frame.
+        // `state` will be an empty object, return updated params.
+        state.phi = phi;
+        phi += 0.01;
+      },
+    });
+
+    return () => {
+      globe.destroy();
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
+      className={className}
+    />
+  );
+};

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

@@ -0,0 +1,18 @@
+'use client'
+
+import CountUp from 'react-countup'
+import { SectionHeader } from '@/components/Texts'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+  color?: 'light' | 'primary' | 'secondary' | 'white'
+}
+
+export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
+  return (
+    <SectionHeader color={color} className={className}>
+      <CountUp end={end} duration={2.75} separator="," />
+    </SectionHeader>
+  )
+}

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
           index={index}
-          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
+          className="w-48 sm:w-64 lg:w-80 h-auto relative"
           style={{
-            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
+            filter: isActive
+              ? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
+              : "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
+            transition: "all 0.4s ease",
           }}
         />
 
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
           <h3
-            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
+            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
             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,25 +131,23 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
                 y1="1"
                 x2="120"
                 y2="1"
-                stroke="black"
+                stroke="rgba(59, 130, 246, 0.6)"
                 strokeWidth="1"
-                opacity="0.6"
+                opacity="0.8"
               />
             </svg>
 
             {/* Description text */}
             <div className="ml-32 w-80">
-              <h4 className="text-black text-base font-semibold mb-2">
+              <h4 className="text-black text-base font-semibold mb-2 drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
                 {descriptionTitle}
               </h4>
-              <p className="text-gray-800 text-sm leading-relaxed font-light">
+              <p className="text-gray-800 text-sm leading-relaxed font-light drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
                 {description}
               </p>
             </div>
           </motion.div>
         )}
-
-        {/* Description for Mobile - Below cube */}
       </motion.div>
     </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

@@ -0,0 +1,27 @@
+'use client'
+
+import { motion, type Transition } from 'framer-motion'
+import React from 'react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
+
+type FadeInProps = {
+  children: React.ReactNode
+  transition?: Transition
+  className?: string
+}
+
+export function FadeIn({ children, transition, className }: FadeInProps) {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
+    >
+      {children}
+    </motion.div>
+  )
+}

src/components/ui/Globe.tsx

@@ -1,47 +1,159 @@
-import { useEffect, useRef } from 'react'
+"use client";
-import createGlobe from 'cobe'
 
-export function Globe({ className }: { className?: string }) {
+import createGlobe, { type COBEOptions } from "cobe";
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+import { useMotionValue, useSpring } from "motion/react";
+import { useEffect, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const MOVEMENT_DAMPING = 1400;
+
+const GLOBE_CONFIG: COBEOptions = {
+  width: 800,
+  height: 800,
+  onRender: () => {},
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.3,
+  dark: 0,
+  diffuse: 0.25, // softer shading for premium look
+  mapSamples: 16000,
+  mapBrightness: 1.1,
+  baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
+  markerColor: [0.02, 0.71, 0.83], // cyan-500
+  glowColor: [0.8, 0.8, 0.85], // grey
+  
+  markers: [
+    // --- Core Global Markers ---
+    { location: [14.5995, 120.9842], size: 0.03 }, // Manila
+    { location: [19.076, 72.8777], size: 0.1 }, // Mumbai
+    { location: [23.8103, 90.4125], size: 0.05 }, // Dhaka
+    { location: [30.0444, 31.2357], size: 0.07 }, // Cairo
+    { location: [39.9042, 116.4074], size: 0.08 }, // Beijing
+    { location: [-23.5505, -46.6333], size: 0.1 }, // São Paulo
+    { location: [19.4326, -99.1332], size: 0.1 }, // Mexico City
+    { location: [40.7128, -74.006], size: 0.1 }, // New York
+    { location: [34.6937, 135.5022], size: 0.05 }, // Osaka
+    { location: [41.0082, 28.9784], size: 0.06 }, // Istanbul
+    { location: [48.8566, 2.3522], size: 0.08 }, // Paris
+    { location: [51.5072, -0.1276], size: 0.08 }, // London
+    { location: [52.52, 13.405], size: 0.07 }, // Berlin
+    { location: [35.6895, 139.6917], size: 0.06 }, // Tokyo
+    { location: [-33.8688, 151.2093], size: 0.06 }, // Sydney
+    { location: [-1.2921, 36.8219], size: 0.05 }, // Nairobi
+    { location: [-34.6037, -58.3816], size: 0.07 }, // Buenos Aires
+    { location: [37.7749, -122.4194], size: 0.08 }, // San Francisco
+    { location: [1.3521, 103.8198], size: 0.06 }, // Singapore
+    { location: [28.6139, 77.2090], size: 0.08 }, // New Delhi
+    { location: [13.7563, 100.5018], size: 0.06 }, // Bangkok
+    { location: [59.9343, 30.3351], size: 0.05 }, // St. Petersburg
+    { location: [33.6844, 73.0479], size: 0.05 }, // Islamabad
+    { location: [25.276987, 55.296249], size: 0.07 }, // Dubai
+    { location: [60.1699, 24.9384], size: 0.05 }, // Helsinki
+    { location: [43.6532, -79.3832], size: 0.07 }, // Toronto
+    { location: [6.5244, 3.3792], size: 0.08 }, // Lagos
+    { location: [50.1109, 8.6821], size: 0.06 }, // Frankfurt
+
+    // --- 12 New US + European Cities ---
+    { location: [34.0522, -118.2437], size: 0.08 }, // Los Angeles
+    { location: [41.8781, -87.6298], size: 0.07 }, // Chicago
+    { location: [29.7604, -95.3698], size: 0.07 }, // Houston
+    { location: [25.7617, -80.1918], size: 0.07 }, // Miami
+    { location: [45.5017, -73.5673], size: 0.06 }, // Montreal
+    { location: [47.6062, -122.3321], size: 0.06 }, // Seattle
+    { location: [40.4406, -79.9959], size: 0.05 }, // Pittsburgh
+    { location: [41.3851, 2.1734], size: 0.06 }, // Barcelona
+    { location: [45.4642, 9.19], size: 0.06 }, // Milan
+    { location: [52.3676, 4.9041], size: 0.06 }, // Amsterdam
+    { location: [38.7169, -9.139], size: 0.05 }, // Lisbon
+    { location: [59.3293, 18.0686], size: 0.05 }, // Stockholmx
+  ],
+};
+
+export function Globe({
+  className,
+  config = GLOBE_CONFIG,
+}: {
+  className?: string;
+  config?: COBEOptions;
+}) {
+  let phi = 0;
+  let width = 0;
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const pointerInteracting = useRef<number | null>(null);
+
+  const r = useMotionValue(0);
+  const rs = useSpring(r, {
+    mass: 1,
+    damping: 35, // slightly smoother motion
+    stiffness: 100,
+  });
+
+  const updatePointerInteraction = (value: number | null) => {
+    pointerInteracting.current = value;
+    if (canvasRef.current) {
+      canvasRef.current.style.cursor = value !== null ? "grabbing" : "grab";
+    }
+  };
+
+  const updateMovement = (clientX: number) => {
+    if (pointerInteracting.current !== null) {
+      const delta = clientX - pointerInteracting.current;
+      r.set(r.get() + delta / MOVEMENT_DAMPING);
+    }
+  };
 
   useEffect(() => {
-    let phi = 0
+    const onResize = () => {
+      if (canvasRef.current) width = canvasRef.current.offsetWidth;
+    };
 
-    if (!canvasRef.current) return
+    window.addEventListener("resize", onResize);
+    onResize();
 
-    const globe = createGlobe(canvasRef.current, {
+    const globe = createGlobe(canvasRef.current!, {
-      devicePixelRatio: 2,
+      ...config,
-      width: 600 * 2,
+      width: width * 2,
-      height: 600 * 2,
+      height: width * 2,
-      phi: 0,
-      theta: 0,
-      dark: 0,
-      diffuse: 1.2,
-      mapSamples: 16000,
-      mapBrightness: 6,
-      baseColor: [0.3, 0.3, 0.3],
-      markerColor: [0.1, 0.8, 1],
-      glowColor: [1, 1, 1],
-      markers: [
-        { location: [37.7595, -122.4367], size: 0.03 },
-        { location: [40.7128, -74.006], size: 0.1 },
-      ],
       onRender: (state) => {
-        state.phi = phi
+        if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
-        phi += 0.01
+        state.phi = phi + rs.get();
+        state.width = width * 2;
+        state.height = width * 2;
       },
-    })
+    });
 
+    setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
     return () => {
-      globe.destroy()
+      globe.destroy();
-    }
+      window.removeEventListener("resize", onResize);
-  }, [])
+    };
+  }, [rs, config]);
 
   return (
+    <div
+      className={cn(
+        // Radial gradient background that fades to pure black at edges
+        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
+        className,
+      )}
+    >
       <canvas
+        className={cn(
+          "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
+        )}
         ref={canvasRef}
-      className={className}
+        onPointerDown={(e) => {
-      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+          pointerInteracting.current = e.clientX;
-    />
+          updatePointerInteraction(e.clientX);
-  )
+        }}
+        onPointerUp={() => updatePointerInteraction(null)}
+        onPointerOut={() => updatePointerInteraction(null)}
+        onMouseMove={(e) => updateMovement(e.clientX)}
+        onTouchMove={(e) =>
+          e.touches[0] && updateMovement(e.touches[0].clientX)
+        }
+      />
+    </div>
+  );
 }

src/components/ui/Globe2.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import createGlobe from 'cobe'
+
+export function Globe({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    let phi = 0
+
+    if (!canvasRef.current) return
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 0,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        state.phi = phi
+        phi += 0.01
+      },
+    })
+
+    return () => {
+      globe.destroy()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+    />
+  )
+}

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,19 +39,23 @@ 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">
+      {/* ✨ Ambient cyan-white gradient background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
       <div
         className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
         onMouseLeave={() => setActive("agent")}
       >
         <motion.div
-        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
+          className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
           animate={{ y: ["-8px", "8px"] }}
           transition={{
             duration: 4,
@@ -60,12 +67,20 @@ export function StackedCubesLight() {
           {stackData.map((layer, index) => (
             <div
               key={layer.id}
-            className="absolute"
+              className="absolute transition-all duration-500"
               style={{
                 top: `calc(${index * 30}% - ${index * 10}px)`,
                 zIndex: active === layer.id ? 20 : 10 - index,
               }}
             >
+              {/* 🌫 subtle glow behind each cube */}
+              <div
+                className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
+                  active === layer.id
+                    ? "bg-cyan-300/40 opacity-70"
+                    : "bg-cyan-200/20 opacity-40"
+                }`}
+              />
               <CubeLight
                 title={layer.title}
                 descriptionTitle={layer.descriptionTitle}
@@ -80,12 +95,14 @@ export function StackedCubesLight() {
           ))}
         </motion.div>
       </div>
+
+      {/* Mobile layer description */}
       {selectedMobileLayer && (
-      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
+        <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">
+          <h4 className="text-black text-lg font-semibold mb-2 text-center drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
             {selectedMobileLayer.descriptionTitle}
           </h4>
-        <p className="text-gray-700 text-sm leading-relaxed text-center">
+          <p className="text-cyan-900/80 text-sm leading-relaxed text-center drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
             {selectedMobileLayer.description}
           </p>
         </div>

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

@@ -0,0 +1,196 @@
+"use client";
+import React, {
+  useEffect,
+  useState,
+} from "react";
+import {
+  IconArrowNarrowLeft,
+  IconArrowNarrowRight,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import { cn } from "@/lib/utils";
+import { Link } from "react-router-dom";
+import { motion } from "motion/react";
+
+interface CarouselProps {
+  items: JSX.Element[];
+  initialScroll?: number;
+}
+
+type Card = {
+  src: string;
+  title: string;
+  category: string;
+  description: string;
+  link: string;
+  bg: any;
+};
+
+export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
+  const carouselRef = React.useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(true);
+
+  useEffect(() => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollLeft = initialScroll;
+      checkScrollability();
+    }
+  }, [initialScroll]);
+
+  const checkScrollability = () => {
+    if (carouselRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
+    }
+  };
+
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
+    }
+  };
+
+  const scrollRight = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
+    }
+  };
+
+  return (
+      <div className="relative w-full">
+        <div
+          className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20"
+          ref={carouselRef}
+          onScroll={checkScrollability}
+        >
+          <div
+            className={cn(
+              "absolute right-0 z-[1000] h-auto w-[5%] overflow-hidden bg-gradient-to-l",
+            )}
+          ></div>
+
+          <div
+            className={cn(
+              "flex flex-row justify-start gap-4 pl-4",
+              "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
+            )}
+          >
+            {items.map((item, index) => (
+              <motion.div
+                initial={{
+                  opacity: 0,
+                  y: 20,
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    duration: 0.5,
+                    delay: 0.2 * index,
+                    ease: "easeOut",
+                  },
+                }}
+                key={"card" + index}
+                className="rounded-3xl last:pr-[5%] md:last:pr-[33%]"
+              >
+                {item}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+        <div className="mr-10 flex justify-end gap-2">
+          <button
+            className="relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-neutral-800 disabled:opacity-50"
+            onClick={scrollLeft}
+            disabled={!canScrollLeft}
+          >
+            <IconArrowNarrowLeft className="h-6 w-6 text-white" />
+          </button>
+          <button
+            className="relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-neutral-800 disabled:opacity-50"
+            onClick={scrollRight}
+            disabled={!canScrollRight}
+          >
+            <IconArrowNarrowRight className="h-6 w-6 text-white" />
+          </button>
+        </div>
+      </div>
+  );
+};
+
+export const Card = ({
+  card,
+  layout = false,
+}: {
+  card: Card;
+  layout?: boolean;
+}) => {
+  
+  return (
+    <Link to={card.link}>
+      <motion.div
+        layoutId={layout ? `card-${card.title}` : undefined}
+        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl 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/bento-grid.tsx

@@ -1,6 +1,5 @@
 import { cn } from "@/lib/utils";
 import { CT, CP } from "@/components/Texts";
-import Image from 'next/image';
 import React from 'react';
 import { motion } from 'framer-motion';
 
@@ -55,11 +54,9 @@ export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps
               className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
             />
           ) : img ? (
-            <Image
+            <img
               src={img}
               alt={title as string}
-              width={300}
-              height={300}
               className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
             />
           ) : null}

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/layout-text-flip.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
 
 export const LayoutTextFlip = ({
@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
 
       <motion.span
         layout
-        className="relative w-fit overflow-hidden px-2 py-2 font-neuton font-medium italic tracking-tight"
+        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
       >
         <AnimatePresence mode="popLayout">
           <motion.span

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

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

src/components/ui/world-map.tsx

@@ -4,8 +4,6 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import DottedMap from "dotted-map";
 
-import { useTheme } from "next-themes";
-
 interface MapProps {
   dots?: Array<{
     start: { lat: number; lng: number; label?: string };
@@ -21,13 +19,11 @@ export default function WorldMap({
   const svgRef = useRef<SVGSVGElement>(null);
   const map = new DottedMap({ height: 100, grid: "diagonal" });
 
-  const { theme } = useTheme();
-
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: theme === "dark" ? "#FFFFFF40" : "#00000040",
+    color: "#FFFFFF40", // Hardcoded for dark theme
     shape: "circle",
-    backgroundColor: theme === "dark" ? "black" : "white",
+    backgroundColor: "black", // Hardcoded for dark theme
   });
 
   const projectPoint = (lat: number, lng: number) => {

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

@@ -1,35 +1,33 @@
-import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
-import { CircleBackground } from '../../components/CircleBackground'
 
 export function CloudCTA() {
   return (
-    <section className="relative bg-white py-20 lg:py-32 overflow-hidden">
+    <section className="relative overflow-hidden py-24 lg:py-32">
-      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       <Container className="relative">
-        <motion.div
+        <div className="mx-auto max-w-3xl text-center">
-          initial={{ opacity: 0, y: 20 }}
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-          whileInView={{ opacity: 1, y: 0 }}
+            Ready Today
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center"
-        >
-          <h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
-            Ready to Transform Your Kubernetes Experience?
-          </h2>
-          <p className="mt-6 text-lg lg:text-xl text-gray-600">
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
           </p>
-          <div className="mt-10 flex flex-wrap gap-4 justify-center">
+          <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            <Button to="/download" variant="solid" color="cyan">
+            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
-              Start Your Free Trial
+          </h2>
-            </Button>
+          <p className="mt-6 text-lg text-gray-600">
-            <Button to="https://manual.grid.tf" variant="outline" color="gray">
+            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.
-              Read Documentation
+          </p>
+          <div className="mt-10 flex justify-center">
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="cyan"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Start Deployment
             </Button>
           </div>
-        </motion.div>
+        </div>
       </Container>
     </section>
   )

src/pages/cloud/CloudHero.tsx

@@ -1,65 +1,113 @@
-import { motion } from 'framer-motion'
+import { useId } from 'react'
-import { Globe } from '../../components/ui/Globe'
+
-import { CountUpNumber } from '../../components/CountUpNumber'
+import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
 
-const stats = [
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  { value: 54958, label: 'CPU Cores' },
+  const id = useId()
-  { value: 1493, label: 'Nodes' },
+
-  { value: 5388956, label: 'GB Storage' },
+  return (
-  { value: 44, label: 'Countries' },
+    <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 CloudHero() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
+    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          {/* Text Content */}
+          <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">
-          <motion.div
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8 }}
-          >
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
               Mycelium Cloud
             </h1>
-            <p className="mt-6 text-lg lg:text-xl text-gray-600">
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+              Own every workload with certainty.
+            </h2>
+            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
+              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
             </p>
-          </motion.div>
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
+                Start Deployment
+              </Button>
               
-          {/* Globe */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, 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>
           </div>
-
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-        {/* Stats */}
+            <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="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
+            <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">
-          {stats.map((stat, index) => (
+              <img
-            <motion.div
+                src="/src/images/desktop.png"
-              key={stat.label}
+                alt="Mycelium Cloud dashboard preview"
-              initial={{ opacity: 0, y: 20 }}
+                className="mx-auto w-full max-w-[640px]"
-              animate={{ opacity: 1, y: 0 }}
+                width={1366}
-              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
+                height={768}
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
+              />
-            >
+            </div>
-              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
-                <CountUpNumber end={stat.value} />
           </div>
-              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
-            </motion.div>
-          ))}
         </div>
       </Container>
-    </section>
+    </div>
   )
 }

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

@@ -0,0 +1,65 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const focusAreas = [
+  {
+    title: 'Sovereign by Design',
+    description:
+      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+  },
+  {
+    title: 'Ready to Scale',
+    description:
+      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+  },
+]
+
+export function CloudOverview() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#06b6d4"
+          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+        />
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+        />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Mycelium Cloud
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            A sovereign, self-healing cloud built for trusted automation.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {focusAreas.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+            >
+              <div className="text-lg font-semibold text-white">
+                {item.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudPage.tsx

@@ -1,42 +1,29 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
-import { FeaturesSection } from './FeaturesSection'
+import { CloudOverview } from './CloudOverview'
-import { MyceliumNetworking } from './MyceliumNetworking'
+import { ComputeStorageSplit } from './ComputeStorageSplit'
-import { WebGateway } from './WebGateway'
+import { SecurityPillars } from './SecurityPillars'
-import { MultiMaster } from './MultiMaster'
-import { LoadBalancing } from './LoadBalancing'
 import { CloudCTA } from './CloudCTA'
+import { CloudHeroAlt } from './CloudHeroAlt'
 
 export default function CloudPage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
-        <CloudHero />
+        <CloudHeroAlt />
       </AnimatedSection>
-      
       <AnimatedSection>
-        <FeaturesSection />
+        <CloudOverview />
       </AnimatedSection>
-
       <AnimatedSection>
-        <MyceliumNetworking />
+        <ComputeStorageSplit />
       </AnimatedSection>
-
       <AnimatedSection>
-        <WebGateway />
+        <SecurityPillars />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <MultiMaster />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <LoadBalancing />
-      </AnimatedSection>
-
       <AnimatedSection>
         <CloudCTA />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/cloud/ComputeStorageSplit.tsx

@@ -0,0 +1,144 @@
+import { Container } from '../../components/Container'
+
+const computeFeatures = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
+  },
+  {
+    title: 'Self-Managing & Stateless Infrastructure',
+    description:
+      'Fully autonomous infrastructure that scales globally without manual intervention.',
+  },
+  {
+    title: 'Zero-Image Technology (100x Compression)',
+    description:
+      'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
+  },
+  {
+    title: 'Smart Contract-Based Deployment',
+    description:
+      'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
+  },
+  {
+    title: 'Multi-Workload Compatibility with Secure Boot',
+    description:
+      'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
+  },
+]
+
+const storageFeatures = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
+  },
+  {
+    title: 'Geo-Aware Data Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
+  },
+]
+
+export function ComputeStorageSplit() {
+  return (
+    <section className="relative overflow-hidden bg-white">
+      <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
+      <Container className="relative py-24 lg:py-32">
+        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
+                Compute
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Deterministic compute fabric.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Launch workloads with cryptographic certainty and autonomous operations.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {computeFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
+            <span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
+          </div>
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
+                Storage
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Quantum-safe, sovereign data plane.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Protect and place data precisely while keeping access effortless.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {storageFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/FeaturesSection.tsx

@@ -1,75 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-const features = [
-  {
-    icon: '☁️',
-    title: 'Cloud-Native Architecture',
-    description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
-  },
-  {
-    icon: '🛡️',
-    title: 'Enterprise Security',
-    description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
-  },
-  {
-    icon: '📊',
-    title: 'Real-time Monitoring',
-    description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
-  },
-  {
-    icon: '🚀',
-    title: 'One-Click Deployments',
-    description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
-  },
-  {
-    icon: '👥',
-    title: 'Team Collaboration',
-    description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
-  },
-  {
-    icon: '⚙️',
-    title: 'Advanced Configuration',
-    description: 'Flexible configuration management with support for Helm charts and custom resources.',
-  },
-]
-
-export function FeaturesSection() {
-  return (
-    <section className="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.8 }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Everything You Need to Succeed
-          </h2>
-          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
-            Powerful tools and features designed for modern cloud-native applications
-          </p>
-        </motion.div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <motion.div
-              key={feature.title}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
-            >
-              <div className="text-4xl mb-4">{feature.icon}</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
-              <p className="text-gray-600">{feature.description}</p>
-            </motion.div>
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/LoadBalancing.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function LoadBalancing() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚖️</div>
-              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Effortless Load Balancing & Scaling
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              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.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Auto-scaling
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in load balancing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                High availability
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/MultiMaster.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MultiMaster() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Multi-Master Clusters
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                HA Control Plane
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Automatic Failover
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Zero-downtime Upgrades
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚡</div>
-              <p className="text-gray-600">High Availability Clusters</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/MyceliumNetworking.tsx

@@ -1,49 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MyceliumNetworking() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Mycelium Networking
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                End-to-end encrypted
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Nature-inspired
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🕸️</div>
-              <p className="text-gray-600">Decentralized Mesh Network</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/SecurityPillars.tsx

@@ -0,0 +1,62 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const pillars = [
+  {
+    title: 'Provable Sovereignty',
+    description:
+      'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
+  },
+  {
+    title: 'Autonomous Zero-Trust',
+    description:
+      'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
+  },
+  {
+    title: 'Planetary-Scale Resilience',
+    description:
+      'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
+  },
+]
+
+export function SecurityPillars() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
+        />
+        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Sovereign Architecture
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            Built for security, trust, and unstoppable continuity.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {pillars.map((pillar) => (
+            <div
+              key={pillar.title}
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+            >
+              <div className="text-lg font-semibold text-white">
+                {pillar.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {pillar.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/WebGateway.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function WebGateway() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🌐</div>
-              <p className="text-gray-600">Simple Web Gateway</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Simple Web Gateway Access
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Simple configuration
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in routing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                No ingress controllers
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

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