refactor: remove comparison table section from home page

src/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header() {
   return (
     <header>
       <nav>
-                <Container className="relative z-50 flex bg-transparent justify-between py-4">
+                <Container className="relative z-50 flex justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />

src/components/ui/cards.tsx

@@ -8,7 +8,7 @@ const DarkCard = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
+      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
       className
     )}
     {...props}

src/pages/agents/AgentComponents.tsx

@@ -1,75 +0,0 @@
-
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader } from '../../components/Texts'
-
-const components = [
-  {
-    component: 'Long-Term Memory (FungiStor)',
-    purpose: 'Durable, distributed memory with erasure-coded resilience',
-    backedBy: 'Mycelium Storage',
-  },
-  {
-    component: 'Active Retrieval (HeroDB)',
-    purpose: 'Fast multimodal vector + keyword retrieval',
-    backedBy: 'Compute + Storage',
-  },
-  {
-    component: 'Secure Agent Workspaces (MOS Sandboxes)',
-    purpose: 'Ephemeral, isolated execution for agent actions',
-    backedBy: 'Mycelium Compute',
-  },
-  {
-    component: 'Private Communication (Mycelium Mesh)',
-    purpose: 'Peer-to-peer encrypted network',
-    backedBy: 'Mycelium Network',
-  },
-  {
-    component: 'Verifiable Execution (Deterministic Deploy)',
-    purpose: 'Ensure the code running is exactly what you signed',
-    backedBy: 'The Stack',
-  },
-  {
-    component: 'Agent Coordination Engine (coming online next)',
-    purpose: 'Orchestrate multi-step workflows and tool use',
-    backedBy: 'Hero Orchestrator',
-  },
-]
-
-export function AgentComponents() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>AGENT COMPONENTS</Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            The Building Blocks of Sovereign Agents
-          </SectionHeader>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
-          <table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
-            <thead>
-              <tr className="bg-cyan-50 border-b border-gray-200">
-                <th className="py-3 px-4 font-semibold text-gray-900">Component</th>
-                <th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
-                <th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
-              </tr>
-            </thead>
-            <tbody>
-              {components.map((item) => (
-                <tr
-                  key={item.component}
-                  className="border-b border-gray-100 hover:bg-cyan-50/40 transition"
-                >
-                  <td className="py-4 px-4 font-medium text-gray-900">{item.component}</td>
-                  <td className="py-4 px-4">{item.purpose}</td>
-                  <td className="py-4 px-4 text-cyan-700 font-medium">{item.backedBy}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/agents/AgentHeroAlt.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '../../components/Button'
-import { Eyebrow, P, H3 } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
 
 export function AgentHeroAlt() {
   return (
@@ -16,21 +16,14 @@ export function AgentHeroAlt() {
       </div>
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8">
         <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">
-          <Eyebrow className="text-base/7 font-semibold text-cyan-500">MYCELIUM AGENTS</Eyebrow>
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">AGENT</Eyebrow>
           <H3 as="h1" className="mt-2 text-gray-900">Sovereign AI Agents, Coming Soon.</H3>
           <P className="mt-6  text-gray-600">
-            The Agent layer will allow you to run autonomous, policy-governed AI that operates on infrastructure you control, with private memory, verifiable execution, and coordination across your personal or organizational environment.
+            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
-          </P>
-          <P className="mt-6  text-gray-600">
-            Works Alone. Works Together.
-            Use Agents on top of any Mycelium Cloud deployment or pair them with the Mycelium Network for private, encrypted collaboration across users and systems.
           </P>
           <div className="mt-8">
             <Button href="#" variant="solid" color="cyan">
-              Follow Deployment
+              Join the Waitlist
-            </Button>
-            <Button href="#" variant="outline" color="white">
-              Explore Docs
             </Button>
           </div>
         </div>

src/pages/agents/AgentsPage.tsx

@@ -4,8 +4,6 @@ import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
 import { AgentHeroAlt } from './AgentHeroAlt'
-import { CallToAction } from './CallToAction'
-import { AgentComponents } from './AgentComponents'
 
 export default function AgentsPage() {
   return (
@@ -29,14 +27,6 @@ export default function AgentsPage() {
       <AnimatedSection>
         <BentoSection />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <AgentComponents />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <CallToAction />
-      </AnimatedSection>
     </div>
   )
 }

src/pages/agents/CallToAction.tsx

@@ -1,59 +0,0 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
-
-export function CallToAction() {
-  return (
-    <section
-      id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
-    >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
-
-      <Container className="relative">
-        <div className="mx-auto max-w-2xl text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Start Building the Future of Sovereign AI
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Use today’s components — models, storage, compute, mesh — 
-            and step into agents as they arrive.
-          </p>
-
-          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button
-              as="a"
-              to="/deploy"
-              variant="solid"
-              color="white"
-            >
-              Deploy a Model
-            </Button>
-
-            <Button
-              as="a"
-              to="/host"
-              variant="outline"
-              color="white"
-            >
-              Host a Node
-            </Button>
-
-            <Button
-              as="a"
-              to="https://threefold.info/mycelium_network/docs/"
-              target="_blank"
-              rel="noreferrer"
-              variant="outline"
-              color="white"
-            >
-              Follow Development
-            </Button>
-          </div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/agents/DeploySection.tsx

@@ -55,12 +55,12 @@ export function DeploySection() {
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
           className="mx-auto max-w-5xl text-center"
         >
-          <Eyebrow color="accent">Deployment</Eyebrow>
+          <Eyebrow color="accent">Get Started</Eyebrow>
           <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-            Run LLMs and Agent Workloads privately, today.
+            Deploy Scalable LLMs and AI Agents
           </SectionHeader>
           <P className="mt-6" color="light">
-            Even before the full Agent layer launches, you can deploy models and retrieval pipelines using Mycelium Cloud. 
+            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
           </P>
         </motion.div>
         <motion.ul

src/pages/agents/GallerySection.tsx

@@ -53,13 +53,14 @@ export function GallerySection() {
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl lg:mt-12">
             <Eyebrow color="accent">Use Cases</Eyebrow>
-            <SectionHeader className="text-center" color="dark">What Agents Will Enable</SectionHeader>
+            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
           </div>
         </FadeIn>
         <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
           <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
             <P className="text-center" color="dark">
-            The Agent layer is the coordination layer that sits on top of the Mycelium Stack, combining memory, execution, and secure communication into a single intelligence plane.
+            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
+            Many agents, one intelligence—yours.
             </P>
           </div>
         </FadeIn>

src/pages/cloud/CalltoAction.tsx

@@ -1,55 +0,0 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
-
-export function CallToAction() {
-  return (
-    <section
-      id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-24 lg:py-32"
-    >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
-
-      <Container className="relative">
-        <div className="mx-auto max-w-xl text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl lg:text-4xl">
-            Choose How You Want to Start
-          </h2>
-
-          <p className="mt-6 text-lg text-gray-300">
-            Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
-          </p>
-
-          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <div className="flex flex-col items-center text-center">
-              <h3 className="text-lg font-semibold text-white">Host a Node</h3>
-              <p className="mt-2 text-gray-300">
-                Add compute to the network and run your own environment.
-              </p>
-              <Button to="/host" variant="solid" color="cyan" className="mt-4">
-                Host a Node
-              </Button>
-            </div>
-
-            <div className="flex flex-col items-center text-center">
-              <h3 className="text-lg font-semibold text-white">Deploy Workloads</h3>
-              <p className="mt-2 text-gray-300">
-                Run Kubernetes clusters, agents, and services on the Mycelium Cloud.
-              </p>
-              <Button to="/cloud" variant="outline" color="white" className="mt-4">
-                Start Deploying
-              </Button>
-            </div>
-          </div>
-
-          <p className="mt-10 text-gray-300 text-lg max-w-md mx-auto">
-            You don’t need to host before deploying, and you don’t need to deploy before hosting.
-            Start wherever it makes sense for you.
-          </p>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/CloudArchitecture.tsx

@@ -1,22 +1,39 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P } from '../../components/Texts'
-import { Button } from '../../components/Button'
 
-const architecture = [
+const architectureSections = [
   {
-    title: 'Mesh Networking Layer',
+    title: 'Decentralized Infrastructure',
     description:
-      'Every node receives a cryptographic network identity and secure routing path.',
+      '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: 'Sovereign Compute Layer',
+    title: 'Network Flow',
     description:
-      'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
+      '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: 'Deterministic Orchestration',
+    title: 'Kubernetes Management',
     description:
-      'K3s clusters deploy predictably, verifiably, and remain drift-free.',
+      '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.',
+    ],
   },
 ]
 
@@ -24,41 +41,51 @@ export function CloudArchitecture() {
   return (
     <section className="bg-white py-24 lg:py-32">
       <Container>
-        <div className="mx-auto max-w-4xl text-center">
+        <div className="mx-auto max-w-5xl text-center">
-          <Eyebrow>ARCHITECTURE</Eyebrow>
+          <Eyebrow>
+            Technical Architecture
+          </Eyebrow>
           <H3 className="mt-6 text-gray-900">
-            How Mycelium Cloud Works
+            Built on a Sovereign, Encrypted Delivery Mesh.
           </H3>
           <P className="mt-6 text-gray-600">
-            Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
+            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
-            identity, routing, and state verified at the protocol level.
+            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">
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {architectureSections.map((section) => (
-          {architecture.map((layer) => (
             <div
-              key={layer.title}
+              key={section.title}
-              className="rounded-3xl border border-slate-200 bg-gray-50/40 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 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">
-                {layer.title}
+                  {section.title}
                 </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
+              </div>
-                {layer.description}
+              <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>
-
-        <div className="mx-auto mt-16 flex justify-center gap-4">
-          <Button variant="solid" color="cyan" href="/start">
-            Get Started
-          </Button>
-          <Button variant="outline" color="gray" href="/docs">
-            Explore Docs
-          </Button>
-        </div>
       </Container>
     </section>
   )

src/pages/cloud/CloudBluePrint.tsx

@@ -1,52 +0,0 @@
-import { H3, P, Eyebrow } from '../../components/Texts'
-
-
-export function CloudBluePrint() {
-  return (
-    <div className="bg-white py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <Eyebrow color="accent">Featured Blueprint</Eyebrow>
-        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
-        <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
-            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
-        <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
-          <img
-            alt="Transistor"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="Reform"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="Tuple"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="SavvyCal"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
-          />
-          <img
-            alt="Statamic"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/cloud/CloudFeatures.tsx

@@ -415,7 +415,7 @@ export function CloudFeatures() {
             A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you don’t need external cloud dependencies.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
           </P>
         </div>
       </Container>

src/pages/cloud/CloudHeroNew.tsx

@@ -17,14 +17,12 @@ export function CloudHeroNew() {
             <H3 className="mt-4">
               Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
+            <H5 className="mt-8 text-lg text-gray-600">
+              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
+            </H5>
             <H5 className="mt-4 text-lg text-gray-600">
               Deploy K3s clusters on a global, self-healing mesh network.
-              Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
+Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
-            </H5>
-            <H5 className="mt-4 text-sm text-gray-600">
-              Works Alone. Works Together.
-              Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
-              for sovereign connectivity.
  </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
@@ -36,7 +34,7 @@ export function CloudHeroNew() {
                 Get started
               </Button>
               <Button to="#" variant="outline">
-                Documentation <span aria-hidden="true"> →</span>
+                Explore Docs <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/cloud/CloudHosting.tsx

@@ -4,32 +4,28 @@ import {
   ServerIcon,
   ShieldCheckIcon,
 } from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3 } from '../../components/Texts'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
 
 const features = [
   {
-    Eyebrow: 'DevOps / Cloud teams',
     name: 'Kubernetes Clusters',
-    description: 'Deterministic K3s workloads across sovereign hardware.',
+    description: 'Deploy and scale containerized apps across your own hardware.',
     icon: ServerIcon,
   },
   {
-    Eyebrow: 'Security & infrastructure',
+    name: 'AI Agents & LLM Runtimes',
-    name: 'Encrypted Mesh Networking',
+    description: 'Run open-source models locally, securely, and offline.',
-    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    icon: ArrowPathIcon,
-    icon: ShieldCheckIcon,
   },
   {
-    Eyebrow: 'Data-driven teams',
     name: 'S3-Compatible Storage',
-    description: 'Distributed storage with erasure coding and residency control.',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
     icon: CloudArrowUpIcon,
   },
   {
-    Eyebrow: 'AI / ML workloads',
+    name: 'Mesh VPN & Zero-Trust Networking',
-    name: 'GPU-Ready',
+    description: 'Securely connect all your devices and remote locations.',
-    description: 'Scale inference & training on demand.',
+    icon: ShieldCheckIcon,
-    icon: ArrowPathIcon,
   },
 ]
 
@@ -37,8 +33,13 @@ export function CloudHosting() {
   return (
     <div className="relative bg-white py-24 lg:py-32">
       <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
-        <Eyebrow>CAPABILITIES</Eyebrow>
+        <Eyebrow>DEPLOY</Eyebrow>
         <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
+          giving your data or control to anyone.
+        </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
             {features.map((feature) => (
@@ -47,7 +48,6 @@ export function CloudHosting() {
                   <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
                     <feature.icon aria-hidden="true" className="size-8 text-white" />
                   </span>
-                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
                   <CT as="h3" className="mt-4">
                     {feature.name}
                   </CT>

src/pages/cloud/CloudPage.tsx

@@ -1,11 +1,12 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 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 { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
-import { CloudBluePrint } from './CloudBluePrint'
-import { CallToAction } from './CalltoAction'
 
 export default function CloudPage() {
   return (
@@ -27,16 +28,17 @@ export default function CloudPage() {
         <CloudArchitecture />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CloudGettingStarted />
+      </AnimatedSection>
       <AnimatedSection>
         <CloudUseCases />
       </AnimatedSection>
-
       <AnimatedSection>
-        <CloudBluePrint />
+        <SecurityPillars />
       </AnimatedSection>
-
       <AnimatedSection>
-        <CallToAction />
+        <CloudCTA />
       </AnimatedSection>
     </>
   )

src/pages/cloud/CloudUseCases.tsx

@@ -3,33 +3,35 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const useCases = [
   {
-    title: 'Enterprise & Private Kubernetes',
+    title: 'AI / ML Training',
     description:
-      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
+      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
-    bullets: [
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
-      'High availability + failover',
-      'Encrypted, mesh-native networking',
-      'Compliance-ready governance & policy control',
-    ],
   },
   {
-    title: 'Edge & Distributed Deployments',
+    title: 'Enterprise Kubernetes',
     description:
-      'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
+      'Operate production-grade clusters with complete control and no vendor lock-in.',
-    bullets: [
+    bullets: ['High availability', 'Security', 'Compliance'],
-      'Low-latency execution',
-      'Mesh-routed connectivity',
-      'Autonomous healing across region',
-    ],
   },
   {
-    title: 'AI / ML & Agent Workloads',
+    title: 'Edge & IoT',
     description:
-      'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
+      '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: [
-      'Scales across nodes',
+      'Cryptpad • Encrypted collaboration',
-      'Supports open-source & fine-tuned models',
+      'Elements • Matrix chat',
-      'Built for agentic automation + RAG',
+      'Stallwart • Mail, calendar, contacts',
+      'Gitea • Git hosting',
+      'Nextcloud • File storage and sync',
+      'LiveKit / Jitsi • Real-time video',
+      'Single Sign-On backed by Gitea',
     ],
   },
 ]

src/pages/compute/CallToAction.tsx

@@ -14,16 +14,14 @@ 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">
-            Choose How You Want to Start
+            Get Started Today
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Run workloads using Mycelium Cloud, or host your own compute node.
+            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
-Both use the same deterministic execution fabric.
-
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/download" variant="solid" color="white">
-              Deploy Workloads
+              Get Mycelium Connector
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
@@ -32,7 +30,7 @@ Both use the same deterministic execution fabric.
               variant="outline"
               color="white"
             >
-              Host A Node
+              Read Docs
             </Button>
           </div>
         </div>

src/pages/compute/ComputeArchitecture.tsx

@@ -1,53 +1,92 @@
-import {
-  LockClosedIcon,
-  CpuChipIcon,
-  AdjustmentsHorizontalIcon,
-} from '@heroicons/react/24/solid'
 import { Container } from '../../components/Container'
-import { Eyebrow, H3, CT, CP } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const architecture = [
+const architectureSections = [
   {
-    name: 'Mesh Networking',
+    title: 'Deterministic Computing',
-    description: 'Secure connectivity across all nodes.',
+    description:
-    icon: LockClosedIcon,
+      '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.',
+    ],
   },
   {
-    name: 'Sovereign Compute',
+    title: 'Stateless Infrastructure',
-    description: 'Execution only on hardware you control.',
+    description:
-    icon: CpuChipIcon,
+      '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.',
+    ],
   },
   {
-    name: 'Deterministic Orchestration',
+    title: 'Zero-Image System',
-    description: 'Workloads deploy and update predictably.',
+    description:
-    icon: AdjustmentsHorizontalIcon,
+      '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-white py-24 sm:py-32">
+    <section className="bg-gray-50 py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>ARCHITECTURE</Eyebrow>
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
-          <H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
+            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">
-        <div className="mx-auto mt-16 max-w-5xl">
+          {architectureSections.map((section) => (
-          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
+            <div
-            {architecture.map((item) => (
+              key={section.title}
-              <div key={item.name} className="relative pl-12">
+              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"
-                <item.icon
+            >
-                  aria-hidden="true"
+              <div className="flex items-center gap-3">
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                <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">
-                />
+                  •
-                <CT className="font-semibold text-gray-900">{item.name}</CT>
+                </span>
-                <CP className="mt-1 text-gray-600">{item.description}</CP>
+                <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>
           ))}
-          </dl>
         </div>
       </Container>
     </section>
   )
 }
+

src/pages/compute/ComputeCapabilities.tsx

@@ -1,58 +0,0 @@
-import {
-  CpuChipIcon,
-  CubeIcon,
-  ServerIcon,
-} from '@heroicons/react/24/solid'
-import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
-import { Container } from '../../components/Container'
-
-const capabilities = [
-  {
-    name: 'Containers',
-    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
-    icon: CubeIcon,
-  },
-  {
-    name: 'Virtual Machines',
-    description:
-      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
-    icon: ServerIcon,
-  },
-  {
-    name: 'Native Linux Workloads',
-    description:
-      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
-    icon: CpuChipIcon,
-  },
-]
-
-export function ComputeCapabilities() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>CAPABILITIES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
-          <P className="mt-6 text-gray-600">
-            Mycelium Compute supports multiple workload types on a single
-            execution fabric.
-          </P>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
-            {capabilities.map((feature) => (
-              <div key={feature.name} className="flex flex-col text-center">
-                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
-                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
-                </div>
-                <CT className="mt-6 text-gray-900">{feature.name}</CT>
-                <CP className="mt-2 text-gray-600">{feature.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/compute/ComputeDesign.tsx

@@ -1,56 +0,0 @@
-import {
-  ShieldCheckIcon,
-  ArrowPathIcon,
-  RocketLaunchIcon,
-} from '@heroicons/react/24/solid'
-import { Container } from '../../components/Container'
-import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
-
-const features = [
-  {
-    name: 'Cryptographically verified deployments',
-    description: 'Every cluster state is signed and checksummed to guarantee truth.',
-    icon: ShieldCheckIcon,
-  },
-  {
-    name: 'Stateless execution that scales anywhere',
-    description: 'Run workloads on any node, region, or edge without manual orchestration.',
-    icon: RocketLaunchIcon,
-  },
-  {
-    name: 'Automatic healing and recovery',
-    description: 'Self-repairing processes ensure workloads stay available and consistent.',
-    icon: ArrowPathIcon,
-  },
-]
-
-export function ComputeDesign() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <Eyebrow>CORE VALUE</Eyebrow>
-          <H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
-          <P className="mt-6 text-gray-600">
-            Every workload runs exactly as declared: no drift, no hidden state, no surprises.
-          </P>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
-            {features.map((feature) => (
-              <div key={feature.name} className="relative pl-12">
-                <feature.icon
-                  aria-hidden="true"
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                />
-                <CT className="font-semibold text-gray-900">{feature.name}</CT>
-                <CP className="mt-1 text-gray-600">{feature.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/compute/ComputeFeatures.tsx

@@ -3,24 +3,52 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const featureGroups = [
   {
-    title: 'Self-Managing Infrastructure',
+    title: 'Deterministic Deployments',
     description:
-      'Scaling, healing, and failover happen automatically, no manual intervention.',
+      '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: 'Secure, Stateless Execution',
+    title: 'Self-Managing & Stateless Infrastructure',
     description:
-      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
+      '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: 'Zero-Image Delivery',
+    title: 'Smart Contract-Based Deployment',
     description:
-      'Deploy workloads using metadata instead of large container images for instant launches.',
+      '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: 'Global Placement Control',
+    title: 'Multi-Workload Compatibility with Secure Boot',
     description:
-      'Choose where workloads run, on your hardware or across the decentralized grid.',
+      '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',
+    ],
   },
 ]
 
@@ -41,7 +69,6 @@ export function ComputeFeatures() {
             the grid.
           </P>
         </div>
-
         <div className="mt-16 grid gap-8 md:grid-cols-2">
           {featureGroups.map((feature) => (
             <div
@@ -50,7 +77,7 @@ export function ComputeFeatures() {
             >
               <div>
                 <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  Feature
+                  {feature.listTitle}
                 </Small>
                 <h3 className="mt-4 text-2xl font-semibold text-gray-900">
                   {feature.title}
@@ -59,6 +86,17 @@ export function ComputeFeatures() {
                   {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>

src/pages/compute/ComputeHero.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '../../components/Button'
-import { Eyebrow, P, H3 } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
 
 export function ComputeHero() {
   return (
@@ -17,16 +17,19 @@ export function ComputeHero() {
       <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
         <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
           <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
-          <H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3>
+          <H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3>
           <P className="mt-6  text-gray-600">
-            Run workloads on sovereign, self-verifying infrastructure.
+            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
-            Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
+            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+          </P>
+          <P className="mt-6  text-gray-600">
+            From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
+            Compute that verifies itself. Expands itself. Heals itself.
           </P>
           <div className="mt-12">
             <Button href="#" variant="solid" color="cyan">
-              How it works
+              Experience Deterministic Compute
             </Button>
-            <Button href="#" variant="outline" color="cyan">Explore Docs</Button>
           </div>
         </div>
       </div>

src/pages/compute/ComputePage.tsx

@@ -1,13 +1,13 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { ComputeHero } from './ComputeHero'
-import { ComputeFeatures } from './ComputeFeatures'
-import { ComputeArchitecture } from './ComputeArchitecture'
-import { ComputeUseCases } from './ComputeUseCases'
-import { CallToAction } from './CallToAction'
-import { ComputeCapabilities } from './ComputeCapabilities'
-import { ComputeDesign } from './ComputeDesign'
 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() {
   return (
@@ -15,31 +15,27 @@ export default function ComputePage() {
       <AnimatedSection>
         <ComputeHero />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <ComputeCapabilities />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <ComputeDesign />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <ComputeArchitecture />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <ComputeFeatures />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <ComputeUseCases />
-      </AnimatedSection>
-
       <AnimatedSection>
         <ComputeOverview />
       </AnimatedSection>
-
+      <AnimatedSection>
+        <ComputeFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeZeroImage />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeDeveloperExperience />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <ComputeDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/compute/ComputeUseCases.tsx

@@ -1,21 +1,72 @@
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const useCases = [
+const primaryUseCases = [
   {
     title: 'AI / ML Training',
-    description:
+    bullets: [
-      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
+      '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',
-    description:
+    bullets: [
-      'Private, reliable, self-healing services – without cloud vendor lock-in.',
+      'Transparent deployments with verifiable execution.',
+      'Auto-scaling that allocates resources on demand.',
+      'Instant global distribution across the ThreeFold Grid.',
+      'Cryptographically secured runtime environments.',
+    ],
   },
   {
-    title: 'Distributed & Edge Compute',
+    title: 'Data Processing',
-    description:
+    bullets: [
-      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
+      '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.',
+    ],
   },
 ]
 
@@ -28,12 +79,17 @@ export function ComputeUseCases() {
             Use Cases
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6">
-           Built for Serious Workloads
+            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="mx-auto mt-16 max-w-4xl space-y-6">
+          <div className="space-y-6">
-          {useCases.map((useCase) => (
+            {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"
@@ -41,12 +97,38 @@ export function ComputeUseCases() {
                 <h3 className="text-xl font-semibold text-white">
                   {useCase.title}
                 </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-200">
+                <ul className="mt-4 space-y-3 text-sm text-gray-200">
-                {useCase.description}
+                  {useCase.bullets.map((bullet) => (
-              </p>
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
               </div>
             ))}
           </div>
+          <div className="space-y-6">
+            {computeSpecific.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
+              >
+                <h3 className="text-xl font-semibold text-white">
+                  {useCase.title}
+                </h3>
+                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
       </Container>
     </section>
   )

src/pages/compute/ComputeUseCasesArchived.tsx

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

src/pages/gpu/CallToAction.tsx

@@ -14,12 +14,11 @@ 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">
-            Choose How You Want to Start
+            Bring sovereign GPU acceleration to production.
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Use GPUs through Mycelium Cloud,
+            Work with the Mycelium team to deploy GPU workloads that remain
-or contribute GPU nodes to the mesh and run your own workloads.
+            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
@@ -30,7 +29,7 @@ or contribute GPU nodes to the mesh and run your own workloads.
               target="_blank"
               rel="noreferrer"
             >
-              Deploy GPU Workloads
+              Talk to our team
             </Button>
             <Button
               to="#gpu-architecture"
@@ -38,7 +37,7 @@ or contribute GPU nodes to the mesh and run your own workloads.
               variant="outline"
               color="white"
             >
-              Host A GPU Node
+              Review architecture
             </Button>
           </div>
         </div>

src/pages/gpu/GpuArchitecture.tsx

@@ -1,18 +1,28 @@
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const architecture = [
+const architectureSections = [
   {
-    title: 'Sovereign Compute Nodes',
+    title: 'Distributed GPU Mesh',
-    description: 'GPUs hosted on hardware you trust.',
+    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: 'Encrypted Mesh Networking',
+    title: 'Performance Characteristics',
-    description: 'Secure, private connectivity to workloads.',
+    description:
-  },
+      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
-  {
+    bullets: [
-    title: 'Reservation & Verification Layer',
+      'Edge-to-core deployment flexibility for every workload profile.',
-    description: 'Guarantees GPU access and consistency.',
+      'Adaptive intelligence optimizes allocation automatically.',
+      'Deterministic performance guarantees availability when booked.',
+      'Transparent cost tracking for every GPU cycle consumed.',
+    ],
   },
 ]
 
@@ -21,24 +31,41 @@ export function GpuArchitecture() {
     <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>ARCHITECTURE</Eyebrow>
+          <Eyebrow>
+            Technical Architecture
+          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            HOW IT WORKS
+            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">
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {architectureSections.map((section) => (
-          {architecture.map((item) => (
             <div
-              key={item.title}
+              key={section.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              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}
+                {section.title}
               </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                {item.description}
+                {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>

src/pages/gpu/GpuArchitectureArchive.tsx

@@ -1,75 +0,0 @@
-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 GpuArchitectureArchive() {
-  return (
-    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
-            Technical Architecture
-          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            A peer-to-peer mesh purpose-built for acceleration.
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
-            networking, smart contract orchestration, and transparent monitoring
-            ensure your workloads receive precisely the power they request.
-          </P>
-        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-          {architectureSections.map((section) => (
-            <div
-              key={section.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
-            >
-              <h3 className="text-xl font-semibold text-gray-900">
-                {section.title}
-              </h3>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                {section.description}
-              </p>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {section.bullets.map((bullet) => (
-                  <li
-                    key={bullet}
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/gpu/GpuCapabilities.tsx

@@ -1,58 +0,0 @@
-import {
-  SparklesIcon,
-  Cog6ToothIcon,
-  CubeTransparentIcon,
-  CpuChipIcon,
-} from '@heroicons/react/24/solid'
-import { Eyebrow, H3, CT, CP } from '../../components/Texts'
-import { Container } from '../../components/Container'
-
-const capabilities = [
-  {
-    name: 'AI / ML Inference & Training',
-    description: 'LLMs, embeddings, transformers, fine-tuning',
-    icon: SparklesIcon,
-  },
-  {
-    name: 'Acceleration in Kubernetes Workloads',
-    description: 'GPU-backed deployments on Mycelium Cloud',
-    icon: Cog6ToothIcon,
-  },
-  {
-    name: 'Rendering & Simulation',
-    description: 'Scientific visualization, VFX, real-time 3D',
-    icon: CubeTransparentIcon,
-  },
-  {
-    name: 'Agent Compute & RAG Pipelines',
-    description: 'Vector memory + model execution on sovereign hardware',
-    icon: CpuChipIcon,
-  },
-]
-
-export function GpuCapabilities() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>CAPABILITIES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
-            {capabilities.map((feature) => (
-              <div key={feature.name} className="flex flex-col text-center">
-                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
-                  <feature.icon className="size-6 text-cyan-600" aria-hidden="true" />
-                </div>
-                <CT className="mt-6 text-gray-900">{feature.name}</CT>
-                <CP className="mt-2 text-gray-600">{feature.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/gpu/GpuDesign.tsx

@@ -1,59 +0,0 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, H3, CT } from '../../components/Texts'
-import {
-  BoltIcon,
-  BanknotesIcon,
-  GlobeAltIcon,
-  ShieldCheckIcon,
-} from '@heroicons/react/24/solid'
-
-const benefits = [
-  {
-    name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
-    icon: BoltIcon,
-  },
-  {
-    name: 'Transparent cost (no markup, no surprise billing)',
-    icon: BanknotesIcon,
-  },
-  {
-    name: 'Run anywhere – cloud, on-prem, edge, home lab',
-    icon: GlobeAltIcon,
-  },
-  {
-    name: 'Your data never leaves your control',
-    icon: ShieldCheckIcon,
-  },
-]
-
-export function GpuDesign() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        {/* Header */}
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <Eyebrow>CORE VALUE</Eyebrow>
-          <H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
-
-        </div>
-
-        {/* Key Benefits */}
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
-            {benefits.map((benefit) => (
-              <div key={benefit.name} className="relative pl-12">
-                <benefit.icon
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                  aria-hidden="true"
-                />
-                <CT className="font-semibold text-gray-900">
-                  {benefit.name}
-                </CT>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/gpu/GpuHero.tsx

@@ -19,20 +19,24 @@ export function GpuHero() {
             Mycelium GPU
           </Eyebrow>
           <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Sovereign GPU Acceleration for AI and High-Performance Compute
+            Unify distributed GPU power into a sovereign acceleration fabric.
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            Access GPUs across the Mycelium mesh without waitlists, 
+            Mycelium GPU transforms fragmented hardware across the ThreeFold
-inflated pricing, or centralized control.
+            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
-Run inference, training, and compute workloads where they make sense: 
+            and high-performance workloads anywhere—from edge devices to
-cloud, edge, or on your own hardware. 
+            planetary clusters—with deterministic performance and transparent
+            cost.
+          </P>
+          <P className="mt-4 text-gray-500">
+            The energy behind intelligence, orchestrated entirely through code.
           </P>
           <div className="mt-10 flex flex-wrap gap-4">
             <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
-              How it works
+              Start with GPU Access
             </Button>
             <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
-              Explore Docs
+              Explore the Mesh
             </Button>
           </div>
         </div>

src/pages/gpu/GpuOverview.tsx

@@ -1,30 +1,48 @@
 import {
-  AdjustmentsHorizontalIcon,
+  CodeBracketSquareIcon,
-  GlobeAltIcon,
+  CubeTransparentIcon,
-  BanknotesIcon,
+  LockClosedIcon,
+  Squares2X2Icon,
 } from '@heroicons/react/24/outline'
 
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
-const coreFeatures = [
+const overviewCards = [
   {
-    name: 'Deterministic GPU Allocation',
+    label: 'Overview',
+    title: 'Unified GPU acceleration across the ThreeFold Grid',
     description:
-      'Reserve the GPU type you need and get exactly that, every time.',
+      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
-    icon: AdjustmentsHorizontalIcon,
   },
   {
-    name: 'Multi-Topology Deployment',
+    label: 'Core Concept',
+    title: 'Sovereign intelligence layer',
     description:
-      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
+      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
-    icon: GlobeAltIcon,
+  },
+]
+
+const principles = [
+  {
+    name: 'No Silos',
+    description: 'Every GPU resource is accessible through a single interface.',
+    icon: Squares2X2Icon,
   },
   {
-    name: 'Transparent Cost Structure',
+    name: 'No Intermediaries',
-    description:
+    description: 'Direct access to hardware without centralized brokers.',
-      'No inflated pricing, no hidden fees, no marketplace brokerage.',
+    icon: CubeTransparentIcon,
-    icon: BanknotesIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle is attested and cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Smart contracts and APIs automate allocation and policy.',
+    icon: CodeBracketSquareIcon,
   },
 ]
 
@@ -34,31 +52,52 @@ export function GpuOverview() {
       <Container>
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            PLATFORM OVERVIEW
+            Platform Overview
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            Core Features
+            The sovereign acceleration layer for intelligent workloads.
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
-            The Mycelium GPU layer provides predictable, sovereign acceleration
+            Mycelium GPU makes distributed acceleration feel like one machine.
-            — without arbitrary limits or hidden economics.
+            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">
-        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {overviewCards.map((card) => (
-          {coreFeatures.map((feature) => (
             <div
-              key={feature.name}
+              key={card.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]"
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                  {card.label}
+                </Small>
+                <h3 className="mt-4 text-lg font-semibold text-white">
+                  {card.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {principles.map((principle) => (
+            <div
+              key={principle.name}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
             >
               <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
-                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
+                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
               </div>
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-base font-semibold text-white">
-                {feature.name}
+                {principle.name}
               </h3>
               <p className="mt-3 text-sm leading-relaxed text-gray-300">
-                {feature.description}
+                {principle.description}
               </p>
             </div>
           ))}

src/pages/gpu/GpuPage.tsx

@@ -2,10 +2,11 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 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'
-import { GpuCapabilities } from './GpuCapabilities'
-import { GpuDesign } from './GpuDesign'
 
 export default function GpuPage() {
   return (
@@ -13,27 +14,24 @@ export default function GpuPage() {
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <GpuCapabilities />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <GpuDesign />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <GpuArchitecture />
-      </AnimatedSection>
-
       <AnimatedSection>
         <GpuOverview />
       </AnimatedSection>
-
+      <AnimatedSection>
+        <GpuArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuIntegration />
+      </AnimatedSection>
       <AnimatedSection>
         <GpuUseCases />
       </AnimatedSection>
-
+      <AnimatedSection>
+        <GpuGettingStarted />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/gpu/GpuUseCases.tsx

@@ -1,18 +1,34 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const gpuUseCases = [
+const useCases = [
   {
-    title: 'AI / ML Training & Inference',
+    title: 'AI / ML Training',
-    description: 'Scale model execution across sovereign GPU nodes.',
+    description:
+      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
   },
   {
     title: 'Rendering & Visualization',
-    description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
+    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: 'Distributed & Edge Compute',
+    title: 'General GPU Computing',
-    description: 'Place GPU power close to where data is generated.',
+    description:
+      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
+    bullets: [
+      'Scientific simulations',
+      'Financial modeling',
+      'Blockchain processing',
+      'Protein folding and discovery',
+    ],
   },
 ]
 
@@ -21,28 +37,41 @@ export function GpuUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>USE CASES</Eyebrow>
+          <Eyebrow>
+            Use Cases
+          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Built for Intelligent Workloads
+            Acceleration for every intelligent workload.
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            From sovereign AI execution to real-time rendering and edge inference,
+            From deep learning to immersive visualization, Mycelium GPU delivers
-            Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
+            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">
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {useCases.map((useCase) => (
-          {gpuUseCases.map((useCase) => (
             <div
               key={useCase.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              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-3 text-sm leading-relaxed text-gray-600">
+              <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>

src/pages/home/CallToAction.tsx

@@ -24,7 +24,7 @@ export function CallToAction() {
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/cloud" variant="solid" color="cyan">
-              Get Started
+              Start Deployment
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

src/pages/home/HomeAurora.tsx

@@ -1,65 +1,45 @@
+import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-export function HomeAurora() {
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
     <div
-      className="relative isolate overflow-hidden h-screen"
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
-        backgroundImage: "url('/images/cloud.png')",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
-      }}
     >
-      <div className="relative isolate px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl lg:px-4">
-        {/* Top cyan soft blob */}
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-        <div
+          <div className="mx-auto max-w-2xl lg:mx-0">
-          aria-hidden="true"
+            <div className="hidden sm:flex">
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-        >
+                Deploying at scale?{' '}
-          <div
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-            style={{
+                  <span aria-hidden="true" className="absolute inset-0" />
-              clipPath:
+                  Book a call  <span>&rarr;</span>
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                </a>
-            }}
-            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
-          />
               </div>
             </div>
-
+            <H1 className="mt-8">
-      <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
-        <div className="mx-auto max-w-2xl text-center">
-          <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
               The Sovereign Agentic Cloud
-          </h1>
+            </H1>
-
+            <H5 className="mt-8 text-lg text-gray-600">
-          <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
               Host nodes, deploy workloads, or build private AI systems, 
-            all on infrastructure you own and control.
+all on infrastructure you own and control.
-          </p>
+            </H5>
-
+            <div className="mt-10 flex items-center gap-x-6">
-          <div className="mt-10 flex items-center justify-center gap-x-6">
+              <Button
-            <Button variant="solid" color="cyan" href="#">
+                variant="solid"
+                className=""
+                color="cyan"
+                onClick={onGetStartedClick}
+              >
                  Start Hosting 
               </Button>
-
+              <Button to="#" variant="outline">
-            <Button href="#" variant="outline" color="gray">
+                Deploy in Cloud <span aria-hidden="true"> →</span>
-              Deploy in Cloud <span aria-hidden="true">→</span>
               </Button>
             </div>
-
-          {/* Bottom cyan soft blob */}
-          <div
-            aria-hidden="true"
-            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
-          >
-            <div
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-              className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
-            />
           </div>
         </div>
       </div>

src/pages/home/HomeAuroracopy.tsx

@@ -1,48 +0,0 @@
-import { H1, H5 } from "@/components/Texts"
-import { Button } from "@/components/Button"
-
-
-export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
-  return (
-    <div
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
-    >
-      <div className="mx-auto max-w-7xl lg:px-4">
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-2xl lg:mx-0">
-            <div className="hidden sm:flex">
-              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-                Deploying at scale?{' '}
-                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-                  <span aria-hidden="true" className="absolute inset-0" />
-                  Book a call  <span>&rarr;</span>
-                </a>
-              </div>
-            </div>
-            <H1 className="mt-8">
-              The Sovereign Agentic Cloud
-            </H1>
-            <H5 className="mt-8 text-lg text-gray-600">
-              Host nodes, deploy workloads, or build private AI systems, 
-all on infrastructure you own and control.
-            </H5>
-            <div className="mt-10 flex items-center gap-x-6">
-              <Button
-                variant="solid"
-                className=""
-                color="cyan"
-                onClick={onGetStartedClick}
-              >
-                 Start Hosting 
-              </Button>
-              <Button to="#" variant="outline">
-                Deploy in Cloud <span aria-hidden="true"> →</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/pages/home/HomeBenefits.tsx

@@ -2,34 +2,33 @@ import createGlobe from "cobe";
 import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, CP, Eyebrow } from '@/components/Texts'
+import { H2, P, CP, Eyebrow } from '@/components/Texts'
 
 
 export function HomeBenefits() {
   const features = [
-    {
-      title: "Unbreakable by Design",
-      description:
-        "No central cloud to censor or fail. The network heals itself.",
-      image: "/images/benefits/energy.webp",
-    },
     {
       title: "Sovereign by Default",
       description:
-        "Identity, compute, and data belong to you – cryptographically.",
+        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
       image: "/images/benefits/sovereign.webp",
     },
     {
       title: "Hackable & Open",
       description:
-        "Learn, build, and experiment without permission.",
+        "Open source and hackable by design. Learn, build, and experiment without permission.",
       image: "/images/benefits/autonomous.webp",
     },
- 
+    {
+      title: "Unbreakable by Design",
+      description:
+        "Distributed nodes make it resilient to attacks and failures. The network heals itself.",
+      image: "/images/benefits/energy.webp",
+    },
     {
       title: "Cost & Energy Efficient",
       description:
-        "Distributed hardware eliminates hyperscale overhead.",
+        "Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.",
       image: "/images/benefits/cost.webp",
     },
   ];
@@ -40,8 +39,12 @@ export function HomeBenefits() {
          Benefits
         </Eyebrow>
         <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Why It Matters
+          Why It Changes Everything
         </H2>
+
+        <P className=" max-w-3xl  my-4 mx-auto text-center text-gray-600">
+          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
+        </P>
       </div>
 
       <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">

src/pages/home/HomeGlobe.tsx

@@ -66,8 +66,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide ">CORES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
-                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
@@ -82,8 +82,8 @@ export function WorldMap() {
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
-                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
@@ -98,8 +98,8 @@ export function WorldMap() {
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
-                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
@@ -114,8 +114,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
               <DarkCard>
-                <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
+                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
-                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>

src/pages/home/HomeHosting.tsx

@@ -1,158 +1,65 @@
-
+import {
-import { Container } from '../../components/Container'
+  ArrowPathIcon,
-import {Eyebrow, H3, P } from '../../components/Texts'
+  CloudArrowUpIcon,
-
+  ServerIcon,
-/* ✅ Custom Icons */
+  ShieldCheckIcon,
-
+} from '@heroicons/react/24/outline'
-function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        d="M16 7
-           L23 11
-           L25 19
-           L19 25
-           L13 25
-           L7 19
-           L9 11
-           Z"
-        fill="#737373"
-      />
-      <circle cx={16} cy={16} r={2} fill="#171717" />
-      <line x1="16" y1="9"  x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <line x1="9"  y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-    </svg>
-  )
-}
-
-function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
-      <line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-      <circle cx={16} cy={8} r={2} fill="#171717" />
-      <circle cx={13} cy={17} r={1.5} fill="#171717" />
-      <circle cx={19} cy={17} r={1.5} fill="#171717" />
-      <line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-    </svg>
-  )
-}
-
-function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
-      <rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
-      <path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
-    </svg>
-  )
-}
-
-function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        d="
-          M16 8
-          l8 4
-          v6
-          c0 4 -3 7 -8 9
-          c-5 -2 -8 -5 -8 -9
-          v-6
-          l8 -4
-        "
-        fill="#737373"
-      />
-      <path
-        d="M13 18l2 2l4 -4"
-        stroke="#171717"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-/* ✅ Updated Feature List */
 
 const features = [
   {
     name: 'Kubernetes Clusters',
     description: 'Deploy and scale containerized apps across your own hardware.',
-    icon: KubernetesIcon,
+    icon: ServerIcon,
   },
   {
     name: 'AI Agents & LLM Runtimes',
     description: 'Run open-source models locally, securely, and offline.',
-    icon: AIAgentsIcon,
+    icon: ArrowPathIcon,
   },
   {
     name: 'S3-Compatible Storage',
     description: 'Your own personal over-the-network drive, encrypted end-to-end.',
-    icon: S3StorageIcon,
+    icon: CloudArrowUpIcon,
   },
   {
     name: 'Mesh VPN & Zero-Trust Networking',
     description: 'Securely connect all your devices and remote locations.',
-    icon: VPNIcon,
+    icon: ShieldCheckIcon,
   },
 ]
 
-/* ✅ Component */
-
 export function HomeHosting() {
   return (
-    <section
+    <div className="relative bg-white py-24 lg:py-32">
-      id="comingsoon"
+      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
-      aria-label="Features"
+        <Eyebrow>DEPLOY</Eyebrow>
-      className="py-20 sm:py-32 relative isolate overflow-hidden"
+        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</H3>
-      style={{
+        <P className="mx-auto mt-5 max-w-prose">
-        backgroundImage: "url('/images/bg2.jpg')",
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
-        backgroundSize: 'cover',
+          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-        backgroundPosition: 'center',
+          giving your data or control to anyone.
-        backgroundRepeat: 'no-repeat',
-      }}
-    >
-      {/* ✅ Soft overlay for readable text */}
-      <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
-
-      <Container className="relative z-10">
-        <div className="mx-auto max-w-4xl sm:text-center">
-          <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
-          <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Expanding the Network Layer
-          </H3>
-          <P className="mt-6 text-lg text-gray-600">
-            The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
-            These enhancements deepen autonomy and improve real-world usability.
         </P>
-        </div>
+        <div className="mt-16">
-
+          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
-        <ul
-          role="list"
-          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm  sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
-        >
             {features.map((feature) => (
-            <li
+              <div key={feature.name} className="relative">
-              key={feature.name}
+                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
-              className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
-            >
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
-              <feature.icon className="h-12 w-12" />
+                  </span>
-              <p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
+                  <CT as="h3" className="mt-4">
-              <p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
+                    {feature.name}
-            </li>
+                  </CT>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
             ))}
-        </ul>
+          </div>
-      </Container>
+        </div>
-    </section>
+      </div>
+    </div>
   )
 }

src/pages/home/HomeHostingDark.tsx

@@ -10,7 +10,7 @@ import { DarkCard } from '../../components/ui/cards'
 const features = [
   {
     name: 'Kubernetes Clusters',
-    description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
+    description: 'Deploy and scale containerized apps across your own hardware.',
     icon: CubeIcon,
   },
   {
@@ -37,7 +37,9 @@ export function HomeHostingDark() {
         <Eyebrow>DEPLOY</Eyebrow>
         <H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
         <P className="mx-auto mt-5 max-w-prose text-gray-400">
-          Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
+          giving your data or control to anyone.
         </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">

src/pages/home/HomePage.tsx

@@ -1,12 +1,13 @@
 import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { StackSectionDark } from './StackSectionDark'
+import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
 import { HomeSlider } from './HomeSlider'
-import { HomeHosting } from './HomeHosting'
+import { HomeHostingDark } from './HomeHostingDark'
+import { HomeComparisonTable } from './HomeComparisonTable'
 
 
 export default function HomePage() {
@@ -18,7 +19,7 @@ export default function HomePage() {
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora/>
+        <HomeAurora onGetStartedClick={handleScrollToSlider} />
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -26,20 +27,21 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHosting />
+        <StackSectionLight />
       </AnimatedSection>
 
       <AnimatedSection>
-        <StackSectionDark />
+        <HomeHostingDark   />
+      </AnimatedSection>
+
+      <AnimatedSection>
+       <HomeBenefits />
       </AnimatedSection>
 
       <AnimatedSection ref={sliderRef}>
         <HomeSlider />
       </AnimatedSection>
 
-      <AnimatedSection>
-       <HomeBenefits />
-      </AnimatedSection>
 
       <AnimatedSection>
         <CallToAction />

src/pages/home/HomeSlider.tsx

@@ -15,11 +15,11 @@ export function HomeSlider() {
           Ecosystem
         </Eyebrow>
         <H3 className="text-left text-white">
-        Mycelium Components
+          Discover the Mycelium Products
         </H3>
         <div className="mt-4 max-w-3xl">
           <P className="text-left text-neutral-400">
-           Each component can be used on its own or combined into a fully sovereign cloud.
+            From compute and networking to intelligent automation, these components  can be used on its own or combined into a fully sovereign cloud.
           </P>
         </div>
       </div>

src/pages/home/StackSection.tsx

@@ -63,7 +63,9 @@ export function StackSectionLight() {
 
           <FadeIn>
             <P color="dark" className="mt-6  text-gray-600">
-              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
+              Project Mycelium unifies compute, storage, networking, and AI into a resilient
+              ecosystem that preserves data sovereignty, powers seamless collaboration,
+              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
             </P>
           </FadeIn>
         </div>

src/pages/home/StackSectionDark.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { StackedCubes } from "@/components/ui/StackedCubes";
-import { P, Eyebrow, H3 } from "@/components/Texts";
-import { FadeIn } from "@/components/ui/FadeIn";
-
-export function StackSectionDark() {
-  return (
-    <section className="relative w-full bg-[#121212] overflow-hidden py-24 isolate">
-      {/* === Background Layer === */}
-      <div className="absolute inset-0 z-0 bg-transparent">
-        {/* Central main aura */}
-        <motion.div
-          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
-          style={{
-            background:
-              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
-            filter: "blur(140px)",
-          }}
-          animate={{
-            opacity: [0.5, 0.8, 0.5],
-            scale: [1, 1.05, 1],
-          }}
-          transition={{
-            duration: 9,
-            repeat: Infinity,
-            ease: "easeInOut",
-          }}
-        />
-
-        {/* Faint cyan mist in the back for depth */}
-        <motion.div
-          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
-          style={{
-            background:
-              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 20§§%, rgba(255,255,255,0) 30%)",
-            filter: "blur(200px)",
-          }}
-          animate={{
-            opacity: [0.2, 0.35, 0.2],
-            scale: [1, 1.1, 1],
-          }}
-          transition={{
-            duration: 12,
-            repeat: Infinity,
-            ease: "easeInOut",
-            delay: 3,
-          }}
-        />
-      </div>
-
-      {/* === Content === */}
-      <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center pt-12">
-        {/* Left Column - Text */}
-        <div className="text-center lg:text-left z-10">
-          <FadeIn>
-            <Eyebrow color="accent">Technology Layers</Eyebrow>
-            <H3 color="white" className="">
-              Mycelium Stack
-            </H3>
-          </FadeIn>
-
-          <FadeIn>
-            <P color="dark" className="mt-6  text-gray-200">
-              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
-            </P>
-          </FadeIn>
-        </div>
-
-        {/* Right Column - Animated Stack */}
-        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
-          <motion.div
-            initial={{ y: 30, opacity: 0 }}
-            whileInView={{ y: 0, opacity: 1 }}
-            transition={{ duration: 1.2, ease: "easeOut" }}
-            viewport={{ once: true }}
-          >
-            <motion.div
-              animate={{
-                y: [0, -10, 0],
-                rotateZ: [0, 0.5, -0.5, 0],
-              }}
-              transition={{
-                duration: 6,
-                repeat: Infinity,
-                ease: "easeInOut",
-              }}
-              className="relative"
-            >
-              <StackedCubes />
-            </motion.div>
-          </motion.div>
-        </div>
-      </div>
-    </section>
-  );
-}

src/pages/network/CallToAction.tsx

@@ -14,14 +14,14 @@ 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">
-            Choose How You Want to Start
+            Get Started Today
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware.
+            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/download" variant="solid" color="white">
-              Get Mycelium Network
+              Get Mycelium Connector
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +30,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Host a Node
+              Read Docs
             </Button>
           </div>
         </div>

src/pages/network/Hero.tsx

@@ -82,23 +82,15 @@ export function Hero() {
               Mycelium Network
             </h1>
             <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Encrypted Peer-to-Peer Connectivity Across the Globe
+              Unleashing the Power of Decentralized Networks
             </h2>
             <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
-              Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers. 
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
-            </p>
-            <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
-              Works Alone. Works Together.
-              Mycelium Network can be used standalone, or together with Mycelium Cloud
-              for full-stack sovereignty.
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <Button to="/download" variant="solid" color="cyan">
                 Get Mycelium Connector
               </Button>
-              <Button to="/download" variant="outline" color="cyan">
-               Explore Docs
-              </Button>
             </div>
           </div>
           <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

src/pages/network/NetworkCapabilities.tsx

@@ -1,65 +0,0 @@
-import {
-  LockClosedIcon,
-  GlobeAltIcon,
-  ArrowPathRoundedSquareIcon,
-  NoSymbolIcon,
-} from '@heroicons/react/24/solid'
-import { Container } from '../../components/Container'
-import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
-
-const capabilities = [
-  {
-    name: 'End-to-End Encrypted Mesh',
-    description: 'Every packet is encrypted and routed peer-to-peer.',
-    icon: LockClosedIcon,
-  },
-  {
-    name: 'Global IPv6 Address Space',
-    description: 'Every node, app, and service gets its own private address.',
-    icon: GlobeAltIcon,
-  },
-  {
-    name: 'Self-Healing Routing',
-    description: 'Traffic automatically finds the fastest, most resilient path.',
-    icon: ArrowPathRoundedSquareIcon,
-  },
-  {
-    name: 'No Central Control',
-    description: 'No servers to trust, no middlemen, no corporate choke-points.',
-    icon: NoSymbolIcon,
-  },
-]
-
-export function NetworkCapabilities() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>WHAT IT ENABLES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">
-            A Private Networking Layer for Everything You Run
-          </H3>
-          <P className="mt-6 text-gray-600">
-            Mycelium Network is the backbone for secure, autonomous connectivity
-            across devices, data centers, clusters, and self-hosted environments,
-            anywhere in the world.
-          </P>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
-            {capabilities.map((item) => (
-              <div key={item.name} className="flex flex-col text-center">
-                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
-                  <item.icon className="size-6 text-cyan-600" aria-hidden="true" />
-                </div>
-                <CT className="mt-6 text-gray-900">{item.name}</CT>
-                <CP className="mt-2 text-gray-600">{item.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/network/NetworkPage.tsx

@@ -1,11 +1,10 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { Hero } from './Hero'
+import { About } from './About'
 import { Features } from './Features'
 import { PrimaryFeatures } from './PrimaryFeatures'
 import { SecondaryFeatures } from './SecondaryFeatures'
 import { CallToAction } from './CallToAction'
-import { NetworkCapabilities } from './NetworkCapabilities'
-import { NetworkUsecases } from './NetworkUsecases'
 
 export default function NetworkPage() {
   return (
@@ -13,27 +12,18 @@ export default function NetworkPage() {
       <AnimatedSection>
         <Hero />
       </AnimatedSection>
-
       <AnimatedSection>
-        <NetworkCapabilities />
+        <About />
       </AnimatedSection>
-
       <AnimatedSection>
         <Features />
       </AnimatedSection>
-
       <AnimatedSection>
         <PrimaryFeatures />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <NetworkUsecases />
-      </AnimatedSection>
-
       <AnimatedSection>
         <SecondaryFeatures />
       </AnimatedSection>
-
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/network/NetworkUsecases.tsx

@@ -1,64 +0,0 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
-
-const networkUseCases = [
-  {
-    title: 'Secure Access to Self-Hosted Services',
-    description:
-      'Access your services, VMs, and clusters remotely without VPNs, public IPs, or port forwarding.',
-    ideal:
-      'Ideal for: homelabs, personal clouds, long-running self-hosted stacks',
-  },
-  {
-    title: 'Service-to-Service Networking Across Environments',
-    description:
-      'Connect applications running across home labs, cloud regions, edge nodes, and data centers all on one address space.',
-    ideal:
-      'Ideal for: dev teams, distributed apps, container + K3s workloads',
-  },
-  {
-    title: 'Resilient Connectivity Across Regions & Outages',
-    description:
-      'Connect systems across countries, datacenters, edge locations, and remote deployments — with routing that automatically heals around ISP failures, censorship, and regional outages.',
-    ideal:
-      'Ideal for: research networks, cross-border orgs, distributed compute, off-grid / rural deployments',
-  },
-]
-
-export function NetworkUsecases() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>USE CASES</Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Private Connectivity for People, Services, and Infrastructures
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
-            Mycelium Network provides a secure, autonomous communication layer
-            that works across homes, clouds, edge workloads, and global deployments.
-          </P>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl grid gap-8 lg:grid-cols-3">
-          {networkUseCases.map((useCase) => (
-            <div
-              key={useCase.title}
-              className="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>
-              <p className="mt-4 text-xs font-medium text-cyan-700">
-                {useCase.ideal}
-              </p>
-            </div>
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/network/SecondaryFeatures.tsx

@@ -194,12 +194,12 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">IN ACTIVE EVOLUTION</h2>
+          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
           <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-           Expanding the Network Layer
+            Coming Soon: The Future of Mycelium
           </p>
           <p className="mt-6 text-lg text-gray-600">
-           The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh. These enhancements deepen autonomy and improve real-world usability.
+            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
           </p>
         </div>
         <ul

src/pages/storage/CallToAction.tsx

@@ -14,12 +14,12 @@ 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">
-            Choose How You Want to Start
+            Bring sovereign storage into your stack.
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Store data in your Mycelium Cloud environment 
+            Partner with the Mycelium team to design quantum-safe, compliant
-or host your own node for full sovereignty.
+            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
@@ -30,7 +30,7 @@ or host your own node for full sovereignty.
               target="_blank"
               rel="noreferrer"
             >
-              Use Storage in Cloud
+              Talk to our team
             </Button>
             <Button
               to="#storage-developer-experience"
@@ -38,7 +38,7 @@ or host your own node for full sovereignty.
               variant="outline"
               color="white"
             >
-              Host a Node
+              Explore developer workflow
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

@@ -3,17 +3,48 @@ import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 const architecture = [
   {
-    title: 'Encrypted Storage Substrate',
+    title: 'Quantum-Safe Data Protection',
-    description: 'Keeps data private and verifiable.',
-  },
-  {
-    title: 'Mesh Routing Layer',
-    description: 'Connects clients and workloads securely, anywhere.',
-  },
-  {
-    title: 'Protocol Gateway Layer',
     description:
-      'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
+      '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.',
+    ],
   },
 ]
 
@@ -22,29 +53,41 @@ export function StorageArchitecture() {
     <section className="bg-gray-50 py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>ARCHITECTURE</Eyebrow>
+          <Eyebrow>
+            Technical Architecture
+          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            HOW IT WORKS
+            Autonomous governance for planetary-scale storage.
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            A layered design that encrypts, routes, and exposes storage through
+            The Mycelium Storage data plane is designed to protect data at the
-            multiple protocols — without duplicating data or compromising
+            cryptographic layer, operate without manual intervention, and meet
-            sovereignty.
+            jurisdictional requirements anywhere in the world.
           </P>
         </div>
-
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-        <div className="mx-auto mt-16 max-w-4xl space-y-6">
           {architecture.map((item) => (
             <div
               key={item.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              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-3 text-sm leading-relaxed text-gray-600">
+              <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>

src/pages/storage/StorageCapabilities.tsx

@@ -1,60 +0,0 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, H3, CT, CP } from '../../components/Texts'
-import {
-  ServerStackIcon,
-  GlobeAltIcon,
-  FolderOpenIcon,
-  LockClosedIcon,
-} from '@heroicons/react/24/solid'
-
-const capabilities = [
-  {
-    name: 'S3-Compatible Object Storage',
-    description: 'Works with existing SDKs & tooling.',
-    icon: ServerStackIcon,
-  },
-  {
-    name: 'IPFS & Content-Addressed Access',
-    description: 'Ideal for distributed and decentralized workloads.',
-    icon: GlobeAltIcon,
-  },
-  {
-    name: 'Filesystem Mounts (WebDAV / POSIX)',
-    description: 'Mount storage directly into workflows and apps.',
-    icon: FolderOpenIcon,
-  },
-  {
-    name: 'Encrypted Replication & Placement Control',
-    description: 'Choose where data physically lives – and who controls it.',
-    icon: LockClosedIcon,
-  },
-]
-
-export  function StorageCapabilities() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>CAPABILITIES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">
-            What You Can Use Mycelium Storage For
-          </H3>
-        </div>
-
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
-            {capabilities.map((item) => (
-              <div key={item.name} className="text-center">
-                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
-                  <item.icon className="size-6 text-cyan-600" aria-hidden="true" />
-                </div>
-                <CT className="mt-6 text-gray-900">{item.name}</CT>
-                <CP className="mt-2 text-gray-600">{item.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/storage/StorageDesign.tsx

@@ -1,60 +0,0 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, H3, P, CT } from '../../components/Texts'
-import {
-  LockClosedIcon,
-  ArrowPathIcon,
-  GlobeAsiaAustraliaIcon,
-} from '@heroicons/react/24/solid'
-
-const benefits = [
-  {
-    name: 'Encrypted and verifiable at rest and in motion',
-    icon: LockClosedIcon,
-  },
-  {
-    name: 'Self-healing replication and integrity checks',
-    icon: ArrowPathIcon,
-  },
-  {
-    name: 'Residency + governance policies you actually control',
-    icon: GlobeAsiaAustraliaIcon,
-  },
-]
-
-export function StorageDesign() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        {/* Header */}
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <Eyebrow>CORE VALUE</Eyebrow>
-          <H3 className="mt-4 text-gray-900">
-            Sovereign Storage That Heals Itself
-          </H3>
-          <P className="mt-6 text-gray-600">
-            Mycelium Storage continuously verifies integrity and restores
-            replicas automatically, so data stays available without operational
-            overhead.
-          </P>
-        </div>
-
-        {/* Benefits */}
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
-            {benefits.map((benefit) => (
-              <div key={benefit.name} className="relative pl-12">
-                <benefit.icon
-                  aria-hidden="true"
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                />
-                <CT className="font-semibold text-gray-900">
-                  {benefit.name}
-                </CT>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/storage/StorageHero.tsx

@@ -19,15 +19,20 @@ export function StorageHero() {
             Mycelium Storage
           </Eyebrow>
           <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Sovereign Storage With Self-Healing and Multi-Protocol Access
+            Quantum-safe, sovereign data plane for every workload.
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            Store, replicate, and serve data across the global mesh
+            Mycelium Storage delivers quantum-resistant protection, autonomous
-with encrypted, quantum safe, verifiable storage you control at the infrastructure layer.
+            recovery, and multi-protocol access across the ThreeFold Grid. Place
+            data exactly where you need it while keeping ownership entirely in
+            your hands.
+          </P>
+          <P className="mt-4 text-gray-500">
+            Quantum-safe. Self-healing. Universally accessible.
           </P>
           <div className="mt-10 flex flex-wrap gap-4">
             <Button to="#storage-features" as="a" variant="solid" color="cyan">
-             How It Works 
+              Explore Features
             </Button>
             <Button
               to="#storage-developer-experience"
@@ -35,7 +40,7 @@ with encrypted, quantum safe, verifiable storage you control at the infrastructu
               variant="outline"
               color="cyan"
             >
-              Explore Docs
+              View Developer Flow
             </Button>
           </div>
         </div>

src/pages/storage/StorageOverview.tsx

@@ -4,21 +4,21 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 const highlights = [
   {
     label: 'Overview',
-    title: 'Encrypted & Verifiable Storage',
+    title: 'Quantum-safe, sovereign data management',
     description:
-      'Data is secured with cryptographic identity, not cloud trust.',
+      'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
   },
   {
     label: 'Core Concept',
-    title: 'Self-Healing Replication',
+    title: 'Unified data plane across every protocol',
     description:
-      'The system repairs corruption and restores replicas automatically.',
+      'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
   },
   {
     label: 'Outcome',
-    title: 'Multi-Protocol Access',
+    title: 'Ownership without compromise',
     description:
-      'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
+      'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
   },
 ]
 
@@ -26,13 +26,12 @@ 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">
-            Core Features
+            A quantum-safe data plane that heals itself.
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
             Built on sovereign infrastructure, Mycelium Storage keeps data

src/pages/storage/StoragePage.tsx

@@ -1,11 +1,12 @@
 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'
-import { StorageCapabilities } from './StorageCapabilities'
-import { StorageDesign } from './StorageDesign'
 
 export default function StoragePage() {
   return (
@@ -13,27 +14,24 @@ export default function StoragePage() {
       <AnimatedSection>
         <StorageHero />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <StorageCapabilities />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <StorageDesign />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <StorageArchitecture />
-      </AnimatedSection>
-      
       <AnimatedSection>
         <StorageOverview />
       </AnimatedSection>
-
+      <AnimatedSection>
+        <StorageFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageDeveloperExperience />
+      </AnimatedSection>
       <AnimatedSection>
         <StorageUseCases />
       </AnimatedSection>
-
+      <AnimatedSection>
+        <StorageDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/storage/StorageUseCases.tsx

@@ -1,19 +1,81 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const storageUseCases = [
+const primaryUseCases = [
   {
-    title: 'Data Sovereignty & Compliance',
+    title: 'Data Sovereignty Applications',
-    description: 'Keep data under your control, choose residency per dataset.',
+    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: 'Distributed Application Storage',
+    title: 'Multi-Protocol Applications',
-    description: 'Serve data to services, agents, clusters, or edge workloads.',
+    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',
-    description:
+    bullets: [
-      'Serve public or private assets globally, without centralized hosting.',
+      '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.',
+    ],
   },
 ]
 
@@ -22,32 +84,71 @@ export function StorageUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>USE CASES</Eyebrow>
+          <Eyebrow>
+            Use Cases
+          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Built for Real Data Workloads
+            Sovereign storage for every data-intensive workload.
           </SectionHeader>
           <P className="mt-6 text-gray-600">
             Mycelium Storage adapts to compliance-driven enterprise data,
-            distributed application workloads, and global asset delivery
+            decentralized content distribution, and everything in between.
-            — without giving up sovereignty.
+            Choose the pattern that fits your strategy without sacrificing
+            ownership.
           </P>
         </div>
-
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-        <div className="mx-auto mt-16 max-w-4xl space-y-6">
+          {primaryUseCases.map((useCase) => (
-          {storageUseCases.map((useCase) => (
             <div
               key={useCase.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              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-3 text-sm leading-relaxed text-gray-600">
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
-                {useCase.description}
+                {useCase.bullets.map((bullet) => (
-              </p>
+                  <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>
   )