fixed build errors

new dropdown content from Mik
2025-10-28 19:47:55 +03:00 · 2025-10-28 19:32:09 +03:00
42 changed files with 2525 additions and 147 deletions
--- a/src/components/magicui/bento-grid.tsx
+++ b/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}>
+      <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}
-          <ArrowRightIcon className="ml-2 h-4 w-4" />
+        <ArrowRight className="h-4 w-4" />
      </a>
-      </Button>
    </div>
  </div>
 );
--- a/src/components/ui/Dropdown.tsx
+++ b/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={`
--- a/src/pages/agents/AgentsPage.tsx
+++ b/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'
--- a/src/pages/cloud/CloudArchitecture.tsx
+++ b/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>
+  )
+}
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/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
--- a/src/pages/cloud/CloudFeatures.tsx
+++ b/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>
+  )
+}
--- a/src/pages/cloud/CloudGettingStarted.tsx
+++ b/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>
+  )
+}
--- a/src/pages/cloud/CloudHero.tsx
+++ b/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 italic 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">
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -1,62 +1,79 @@
 import { CircleBackground } from '../../components/CircleBackground'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'

 const focusAreas = [
  {
-    title: 'Sovereign by Design',
+    label: 'Overview',
+    title: 'Decentralized Kubernetes on the ThreeFold Grid',
    description:
-      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+      'Mycelium Cloud provides a comprehensive platform for deploying and managing K3s clusters across global, sovereign infrastructure.',
  },
  {
-    title: 'Secure by Default',
+    label: 'Core Concept',
+    title: 'Sovereign, self-managing operations',
    description:
-      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+      'Deterministic networking, quantum-safe storage, and zero-image delivery keep every workload verifiable and autonomous from day zero.',
  },
  {
-    title: 'Ready to Scale',
+    label: 'Developer Experience',
+    title: 'K3s-native workflows with full control',
    description:
-      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+      'Provision multi-master clusters, govern residency, and observe node health from a single programmable control plane.',
  },
 ]

 export function CloudOverview() {
  return (
-    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+    <section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
      <div className="pointer-events-none absolute inset-0">
        <CircleBackground
          color="#06b6d4"
-          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+          className="absolute left-1/2 top-full h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 opacity-30 blur-3xl"
        />
        <CircleBackground
          color="#22d3ee"
-          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
        />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.18),_transparent_55%)]" />
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
-            Mycelium Cloud
-          </p>
-          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
-            A sovereign, self-healing cloud built for trusted automation.
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
-          </p>
+          <Eyebrow 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 italic">
+            Declarative, sovereign, and ready for production workloads anywhere.
+          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {focusAreas.map((item) => (
            <div
              key={item.title}
-              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.07]"
            >
-              <div className="text-lg font-semibold text-white">
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/15 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-300">
+                  {item.label}
+                </Small>
+                <div className="mt-4 text-lg font-semibold text-white">
                  {item.title}
                </div>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {item.description}
                </p>
              </div>
+            </div>
          ))}
        </div>
      </Container>
--- a/src/pages/cloud/CloudPage.tsx
+++ b/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 />
--- a/src/pages/cloud/CloudUseCases.tsx
+++ b/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>
+  )
+}
--- a/src/pages/cloud/SecurityPillars.tsx
+++ b/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}
--- a/src/pages/compute/ComputeArchitecture.tsx
+++ b/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>
+  )
+}
+
--- a/src/pages/compute/ComputeDeveloperExperience.tsx
+++ b/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>
+  )
+}
+
--- a/src/pages/compute/ComputeDifferentiators.tsx
+++ b/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>
+  )
+}
+
--- a/src/pages/compute/ComputeFeatures.tsx
+++ b/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>
+  )
+}
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/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 italic">
+            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>
+  )
+}
--- a/src/pages/compute/ComputePage.tsx
+++ b/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>
--- a/src/pages/compute/ComputeUseCases.tsx
+++ b/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>
+  )
+}
--- a/src/pages/compute/ComputeZeroImage.tsx
+++ b/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>
+  )
+}
--- a/src/pages/gpu/CallToAction.tsx
+++ b/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>
--- a/src/pages/gpu/GpuArchitecture.tsx
+++ b/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>
+  )
+}
--- a/src/pages/gpu/GpuDifferentiators.tsx
+++ b/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>
+  )
+}
--- a/src/pages/gpu/GpuGettingStarted.tsx
+++ b/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>
+  )
+}
--- a/src/pages/gpu/GpuHero.tsx
+++ b/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 italic 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>
--- a/src/pages/gpu/GpuIntegration.tsx
+++ b/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>
+  )
+}
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/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.
+    <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 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>
-          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
-            {features.map((feature) => (
-              <div key={feature.name}>
-                <dt className="text-base/7 font-semibold text-white">
-                  <div className="mb-6 flex size-10 items-center justify-center rounded-lg">
-                    <feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
-                  </div>
-                  {feature.name}
-                </dt>
-                <dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
            </div>
          ))}
-          </dl>
        </div>
+        <div 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>
  )
 }
--- a/src/pages/gpu/GpuPage.tsx
+++ b/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>
+    </>
  )
 }
--- a/src/pages/gpu/GpuUseCases.tsx
+++ b/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>
+  )
+}
--- a/src/pages/home/HomeBenefits.tsx
+++ b/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'
--- a/src/pages/home/HomePage.tsx
+++ b/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'
--- a/src/pages/home/HomeSlider.tsx
+++ b/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) => (
--- a/src/pages/storage/CallToAction.tsx
+++ b/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>
--- a/src/pages/storage/StorageArchitecture.tsx
+++ b/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>
+  )
+}
--- a/src/pages/storage/StorageDeveloperExperience.tsx
+++ b/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>
+  )
+}
--- a/src/pages/storage/StorageDifferentiators.tsx
+++ b/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>
+  )
+}
--- a/src/pages/storage/StorageFeatures.tsx
+++ b/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>
+  )
+}
--- a/src/pages/storage/StorageHero.tsx
+++ b/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=""
+          alt="Mycelium Storage visual"
          src="/images/storagehero2.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 italic 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>
--- a/src/pages/storage/StorageOverview.tsx
+++ b/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>
+  )
+}
--- a/src/pages/storage/StoragePage.tsx
+++ b/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>
+    </>
  )
 }
--- a/src/pages/storage/StorageUseCases.tsx
+++ b/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>
+  )
+}
--- a/vite.config.ts
+++ b/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'),
Author	SHA1	Message	Date
Emre	6d6cbd115a	fixed build errors	2025-10-28 19:47:55 +03:00
Emre	3c9823bf80	new dropdown content from Mik	2025-10-28 19:32:09 +03:00