style: adjust eyebrow text tracking for better readability

- Changed tracking property from 'tracking-wide' to 'tracking-wider' to increase letter spacing in eyebrow text component
- Improves visual hierarchy and text legibility for uppercase headings

README.md

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

index.html

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

src/App.tsx

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

src/components/Texts.tsx

@@ -72,7 +72,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports based on your tailwind.css and the example
 export const H1 = createTextComponent(
   'h1',
-  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+  'text-5xl lg:text-7xl font-medium leading-tight tracking-tight'
 )
 export const H2 = createTextComponent(
   'h2',
@@ -104,7 +104,7 @@ export const H5 = createTextComponent(
 )
 export const Eyebrow = createTextComponent(
   'h2',
-  'text-base/7 font-semibold tracking-wide'
+  'text-base/7 font-semibold tracking-wider uppercase'
 )
 export const SectionHeader = createTextComponent(
   'p',

src/components/magicui/bento-grid.tsx

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

src/components/ui/Dropdown.tsx

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

src/components/ui/HalfGlobe.tsx

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

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

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

src/pages/agents/AgentsHeroAlt.tsx

@@ -7,7 +7,7 @@ export function AgentsHeroAlt() {
   return (
     <div
       style={{
-        backgroundImage: "url(/images/agentshero.png)",
+        backgroundImage: "url(/images/agentshero2.png)",
         backgroundSize: "cover",
         backgroundPosition: "center",
       }}

src/pages/agents/AgentsPage.tsx

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

src/pages/cloud/CloudArchitecture.tsx

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

src/pages/cloud/CloudCTA.tsx

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

src/pages/cloud/CloudFeatures.tsx

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

src/pages/cloud/CloudGettingStarted.tsx

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

src/pages/cloud/CloudHero.tsx

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

src/pages/cloud/CloudOverview.tsx

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

src/pages/cloud/CloudPage.tsx

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

src/pages/cloud/CloudUseCases.tsx

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

src/pages/cloud/SecurityPillars.tsx

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

src/pages/compute/ComputeArchitecture.tsx

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

src/pages/compute/ComputeDeveloperExperience.tsx

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

src/pages/compute/ComputeDifferentiators.tsx

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

src/pages/compute/ComputeFeatures.tsx

@@ -0,0 +1,106 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureGroups = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+    listTitle: 'Benefits',
+    bullets: [
+      'Cryptographic verification of every workload component',
+      'Zero configuration drift across environments',
+      'Immediate detection of unauthorized changes',
+      'Complete reproducibility for every deployment',
+    ],
+  },
+  {
+    title: 'Self-Managing & Stateless Infrastructure',
+    description:
+      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+    listTitle: 'Capabilities',
+    bullets: [
+      'Autonomous operations that self-orchestrate workloads',
+      'Global scaling sewn into the fabric of the platform',
+      'Stateless design removes hardware dependencies',
+      'Self-healing recovery from failures and anomalies',
+    ],
+  },
+  {
+    title: 'Smart Contract-Based Deployment',
+    description:
+      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+    listTitle: 'Benefits',
+    bullets: [
+      'Every deployment contract cryptographically signed',
+      'Fully auditable, transparent execution of operations',
+      'Tamper-proof orchestration that cannot be rewritten',
+      'Smart contracts automate the entire workload lifecycle',
+    ],
+  },
+  {
+    title: 'Multi-Workload Compatibility with Secure Boot',
+    description:
+      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+    listTitle: 'Capabilities',
+    bullets: [
+      'Full compatibility with Kubernetes and Docker workloads',
+      'Securely run virtual machines with attested boot paths',
+      'Native Linux applications verified end-to-end',
+      'Continuous verification maintains trusted execution',
+    ],
+  },
+]
+
+export function ComputeFeatures() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Precision infrastructure that verifies itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Every layer is designed for determinism, from how workloads are
+            declared to the way they scale, protect, and govern themselves on
+            the grid.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {featureGroups.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  {feature.listTitle}
+                </Small>
+                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {feature.description}
+                </p>
+              </div>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {feature.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeHero.tsx

@@ -8,7 +8,7 @@ export function ComputeHero() {
       <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"
+          src="/images/hero.webp"
           className="size-full object-cover"
         />
        

src/pages/compute/ComputeOverview.tsx

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

src/pages/compute/ComputePage.tsx

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

src/pages/compute/ComputeUseCases.tsx

@@ -0,0 +1,135 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const primaryUseCases = [
+  {
+    title: 'AI / ML Training',
+    bullets: [
+      'Deterministic training pipelines for reproducible experiments.',
+      'Cryptographically verified model artifacts end-to-end.',
+      'Autonomous scaling for distributed training runs.',
+      'Zero-drift environments that remain consistent over time.',
+    ],
+  },
+  {
+    title: 'Application Hosting',
+    bullets: [
+      'Transparent deployments with verifiable execution.',
+      'Auto-scaling that allocates resources on demand.',
+      'Instant global distribution across the ThreeFold Grid.',
+      'Cryptographically secured runtime environments.',
+    ],
+  },
+  {
+    title: 'Data Processing',
+    bullets: [
+      'Deterministic pipelines that document every transformation.',
+      'Secure computation with cryptographic verification.',
+      'Auto-scaling resources for fluctuating workloads.',
+      'Global processing placement to minimize latency.',
+    ],
+  },
+  {
+    title: 'Scientific Computing',
+    bullets: [
+      'Reproducible research environments for shared experiments.',
+      'Secure workloads with verifiable execution paths.',
+      'Dynamic scaling for compute-intensive tasks.',
+      'Global collaboration with sovereign resource control.',
+    ],
+  },
+]
+
+const computeSpecific = [
+  {
+    title: 'Deterministic Training Environments',
+    bullets: [
+      'Reproducible ML experiments with identical conditions every run.',
+      'Verifiable computational research for scientific collaboration.',
+      'Auditable financial modelling workflows with traceable outputs.',
+      'Consistent IoT edge processing with predictable performance.',
+    ],
+  },
+  {
+    title: 'Multi-Platform Application Hosting',
+    bullets: [
+      'Kubernetes orchestration with deterministic deployment pipelines.',
+      'Virtual machines launched with hardware-attested secure boot.',
+      'Native Linux workloads with cryptographic assurance.',
+      'Hybrid topologies mixing containers, VMs, and bare metal.',
+    ],
+  },
+  {
+    title: 'Auto-Scaling Workloads',
+    bullets: [
+      'Demand-based scaling that reacts instantly to load.',
+      'Global distribution across the ThreeFold Grid.',
+      'Automated failover that restores services without intervention.',
+      'Cost optimization through intelligent resource allocation.',
+    ],
+  },
+]
+
+export function ComputeUseCases() {
+  return (
+    <section className="bg-gray-950 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Purpose-built for reproducibility, security, and scale.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            From sovereign AI training loops to globally distributed
+            applications, Mycelium Compute keeps environments verifiable and
+            self-orchestrating so teams can focus on building.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          <div className="space-y-6">
+            {primaryUseCases.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="space-y-6">
+            {computeSpecific.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/compute/ComputeZeroImage.tsx

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

src/pages/gpu/CallToAction.tsx

@@ -14,23 +14,30 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Get Started Today
+            Bring sovereign GPU acceleration to production.
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Work with the Mycelium team to deploy GPU workloads that remain
+            verifiable, performant, and cost-transparent from edge to core.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="white"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Talk to our team
             </Button>
             <Button
-              to="https://threefold.info/mycelium_network/docs/"
+              to="#gpu-architecture"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Review architecture
             </Button>
           </div>
         </div>

src/pages/gpu/GpuArchitecture.tsx

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

src/pages/gpu/GpuDifferentiators.tsx

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

src/pages/gpu/GpuGettingStarted.tsx

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

src/pages/gpu/GpuHero.tsx

@@ -1,31 +1,42 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 export function GpuHero() {
   return (
     <div className="relative bg-white">
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
-          alt=""
+          alt="Mycelium GPU nebula illustration"
           src="/images/gpuhero.png"
           className="size-full object-cover"
         />
-       
       </div>
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
-          <h2 className="text-base/7 font-semibold text-cyan-500">GPU</h2>
-          <h1 className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Unify Distributed GPU Power. Run Intelligence Anywhere.</h1>
-          <p className="mt-6 text-base/7 text-gray-600">
-            Mycelium GPU transforms fragmented GPU resources into a single sovereign fabric for running AI, ML, and rendering workloads — from edge to core, with deterministic performance and transparent cost.
-          </p>
-          <div className="mt-8 flex items-center gap-x-4">
-            <Button to="/docs" variant="solid" color="cyan">
-              Get Started →
+          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
+            Mycelium GPU
+          </Eyebrow>
+          <SectionHeader as="h1" className="mt-4 text-gray-900">
+            Unify distributed GPU power into a sovereign acceleration fabric.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU transforms fragmented hardware across the ThreeFold
+            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
+            and high-performance workloads anywhere—from edge devices to
+            planetary clusters—with deterministic performance and transparent
+            cost.
+          </P>
+          <P className="mt-4 text-gray-500">
+            The energy behind intelligence, orchestrated entirely through code.
+          </P>
+          <div className="mt-10 flex flex-wrap gap-4">
+            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
+              Start with GPU Access
             </Button>
-            <Button to="#architecture" variant="outline" color="cyan">
-              Explore Architecture →
+            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
+              Explore the Mesh
             </Button>
           </div>
         </div>

src/pages/gpu/GpuIntegration.tsx

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

src/pages/gpu/GpuOverview.tsx

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

src/pages/gpu/GpuPage.tsx

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

src/pages/gpu/GpuUseCases.tsx

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

src/pages/home/CallToAction.tsx

@@ -33,7 +33,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Read Docs
+              Docs
             </Button>
           </div>
         </div>

src/pages/home/HomeAgent.tsx

@@ -9,7 +9,7 @@ export function HomeAgent() {
         <div className="mx-auto max-w-4xl text-center">
           <H2>
             Deploy your own{" "}
-            <span className="text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
+            <span className="text-left text-black font-medium text-7xl  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
               <LayoutTextFlip
                 text=""
                 words={[

src/pages/home/HomeAurora.tsx

@@ -1,35 +1,47 @@
-"use client";
+import { H1, H2, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
 
-import { H1, H5 } from "@/components/Texts";
-import { ScrollDownArrow } from '@/components/ScrollDownArrow';
 
-export function HomeAurora() {
+export  function HomeAurora() {
   return (
     <div
-      style={{
-        backgroundImage: "url(/images/homehero1.png)",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-      className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <div className="text-center -mt-5">
-        <H1>
-          <span className="text-bold lg:text-8xl">
-            Full Sovereignty for<br />Cloud, Network & AI.
-          </span>
-        </H1>
-      </div>
-      <div className="max-w-4xl text-center font-light text-gray-500">
-        <H5>
-          Build and run mission-critical workloads on distributed compute,
-          encrypted networking, and sovereign AI orchestration — all under your
-          control, without centralized gatekeepers.
-        </H5>
-      </div>
-      <div className="pt-6">
-        <ScrollDownArrow />
+      <div className="mx-auto max-w-7xl lg:px-8">
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
+          <div className="mx-auto max-w-3xl lg:mx-0">
+            <div className="hidden sm:flex">
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Read more <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </div>
+            <H1 className="mt-8">
+              Full Sovereignty for Cloud, Network & AI.
+            </H1>
+            <H5 className="mt-8 text-lg text-gray-600">
+              Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
+            </H5>
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                to="#"
+                variant="solid"
+                className=""
+                color="cyan"
+              >
+                Get started
+              </Button>
+              <Button to="#" variant="outline">
+                Explore Docs <span aria-hidden="true"> →</span>
+              </Button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  );
+  )
 }

src/pages/home/HomeBenefits.tsx

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

src/pages/home/HomeCloud.tsx

@@ -23,7 +23,7 @@ export function HomeCloud() {
             />
             <div className="w-full flex-auto">
               <H2 className="">
-                Mycelium <span className="font-medium text-7xl italic">Cloud</span>
+                Mycelium <span className="font-medium text-7xl">Cloud</span>
               </H2>
               <P className="mt-6 text-lg/8 text-pretty text-gray-600">
                 A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure

src/pages/home/HomeMap.tsx

@@ -9,7 +9,7 @@ export function HomeMapSection() {
       <div className="max-w-7xl mx-auto text-center">
         <H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
           Mycelium Network is{" "}
-          <span className="text-black text-bold italic">
+          <span className="text-black text-bold">
             {"Live.".split("").map((word, idx) => (
               <motion.span
                 key={idx}

src/pages/home/HomePage.tsx

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

src/pages/home/HomeSlider.tsx

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

src/pages/storage/CallToAction.tsx

@@ -14,23 +14,31 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Get Started Today
+            Bring sovereign storage into your stack.
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Partner with the Mycelium team to design quantum-safe, compliant
+            storage that meets your residency, redundancy, and performance
+            requirements across the globe.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="white"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Talk to our team
             </Button>
             <Button
-              to="https://threefold.info/mycelium_network/docs/"
+              to="#storage-developer-experience"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Explore developer workflow
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

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

src/pages/storage/StorageDeveloperExperience.tsx

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

src/pages/storage/StorageDifferentiators.tsx

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

src/pages/storage/StorageFeatures.tsx

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

src/pages/storage/StorageHero.tsx

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

src/pages/storage/StorageOverview.tsx

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

src/pages/storage/StoragePage.tsx

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

src/pages/storage/StorageUseCases.tsx

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

tailwind.config.js

@@ -6,6 +6,9 @@ export default {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
+      },
       keyframes: {
         'glitch-1': {
           '0%': { transform: 'none' },

vite.config.ts

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