refactor: simplify navigation structure and update homepage content

- Removed Cloud dropdown menu and flattened navigation to direct links (Network, Cloud, Pods, Agents, Node)
- Reordered navigation items for better flow and renamed "Nodes" to "Node" for consistency
- Updated homepage hero and CTA sections with clearer messaging focused on digital sovereignty and infrastructure control
- Added new bento grid images for visual refresh

src/components/Footer.tsx

@@ -15,23 +15,20 @@ export function Footer() {
               </div>
             </div>
             <nav className="mt-10 flex gap-8">
-              <Link to="/" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Home
+              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Network
               </Link>
               <Link to="/cloud" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Cloud
               </Link>
-              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Network
+              <Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Pods
               </Link>
               <Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Agents
               </Link>
-              <Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Pods
-              </Link>
-              <Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Nodes
+              <Link to="/node" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Node
               </Link>
             </nav>
           </div>

src/components/Header.tsx

@@ -1,32 +1,14 @@
 import { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { Dropdown } from './ui/Dropdown'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/logo_1.png'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 
-const cloudNavItems = [
-  { name: 'Cloud', href: '/cloud' },
-  { name: 'Compute', href: '/compute' },
-  { name: 'Storage', href: '/storage' },
-  { name: 'GPU', href: '/gpu' },
-]
-
 export function Header() {
-  const location = useLocation()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
-  const getCurrentPageName = () => {
-    const currentPath = location.pathname;
-    if (currentPath.startsWith('/compute')) return 'Compute';
-    if (currentPath.startsWith('/storage')) return 'Storage';
-    if (currentPath.startsWith('/gpu')) return 'GPU';
-    return 'Cloud';
-  };
-
   return (
     <header className="bg-white">
       <nav className="border-b border-gray-100">
@@ -36,22 +18,6 @@ export function Header() {
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
-              <Dropdown
-                buttonContent={
-                  <>
-                    {['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
-                      <>
-                        <span className="text-gray-500">Cloud {' >'} </span>
-                        <span>{getCurrentPageName()}</span>
-                      </>
-                    ) : (
-                      'Cloud'
-                    )}
-                    <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-                  </>
-                }
-                items={cloudNavItems}
-              />
               <Link
                 to="/network"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
@@ -59,10 +25,10 @@ export function Header() {
                 Network
               </Link>
               <Link
-                to="/agents"
+                to="/cloud"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
               >
-                Agents
+                Cloud
               </Link>
               <Link
                 to="/pods"
@@ -71,10 +37,16 @@ export function Header() {
                 Pods
               </Link>
               <Link
-                to="/nodes"
+                to="/agents"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
               >
-                Nodes
+                Agents
+              </Link>
+              <Link
+                to="/node"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Node
               </Link>
             </div>
           </div>
@@ -130,16 +102,6 @@ export function Header() {
           <div className="mt-6 flow-root">
             <div className="-my-6 divide-y divide-gray-500/10">
               <div className="space-y-2 py-6">
-                {cloudNavItems.map((item) => (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    {item.name}
-                  </Link>
-                ))}
                 <Link
                   to="/network"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
@@ -148,11 +110,11 @@ export function Header() {
                   Network
                 </Link>
                 <Link
-                  to="/agents"
+                  to="/cloud"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                   onClick={() => setMobileMenuOpen(false)}
                 >
-                  Agents
+                  Cloud
                 </Link>
                 <Link
                   to="/pods"
@@ -162,11 +124,18 @@ export function Header() {
                   Pods
                 </Link>
                 <Link
-                  to="/nodes"
+                  to="/agents"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                   onClick={() => setMobileMenuOpen(false)}
                 >
-                  Nodes
+                  Agents
+                </Link>
+                <Link
+                  to="/node"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Node
                 </Link>
               </div>
               <div className="py-6">

src/components/HeaderDark.tsx

@@ -1,32 +1,14 @@
 import { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { Dropdown } from './ui/Dropdown'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/logo_1.png'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 
-const cloudNavItems = [
-  { name: 'Cloud', href: '/cloud' },
-  { name: 'Compute', href: '/compute' },
-  { name: 'Storage', href: '/storage' },
-  { name: 'GPU', href: '/gpu' },
-]
-
 export function HeaderDark() {
-  const location = useLocation()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
-  const getCurrentPageName = () => {
-    const currentPath = location.pathname;
-    if (currentPath.startsWith('/compute')) return 'Compute';
-    if (currentPath.startsWith('/storage')) return 'Storage';
-    if (currentPath.startsWith('/gpu')) return 'GPU';
-    return 'Cloud';
-  };
-
   return (
     <header className="bg-[#111111]">
       <nav className="border-b border-gray-800">
@@ -36,28 +18,24 @@ export function HeaderDark() {
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
-              <Dropdown
-                buttonContent={
-                  <>
-                    {['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
-                      <>
-                        <span className="text-gray-400">Cloud {' >'} </span>
-                        <span className="text-white">{getCurrentPageName()}</span>
-                      </>
-                    ) : (
-                      <span className="text-white">Cloud</span>
-                    )}
-                    <ChevronDownIcon className="h-5 w-5 text-white" aria-hidden="true" />
-                  </>
-                }
-                items={cloudNavItems}
-              />
               <Link
                 to="/network"
                 className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
               >
                 Network
               </Link>
+              <Link
+                to="/cloud"
+                className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
+              >
+                Cloud
+              </Link>
+              <Link
+                to="/pods"
+                className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
+              >
+                Pods
+              </Link>
               <Link
                 to="/agents"
                 className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
@@ -65,10 +43,10 @@ export function HeaderDark() {
                 Agents
               </Link>
               <Link
-                to="/pods"
+                to="/node"
                 className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
               >
-                Pods
+                Node
               </Link>
             </div>
           </div>
@@ -124,16 +102,6 @@ export function HeaderDark() {
           <div className="mt-6 flow-root">
             <div className="-my-6 divide-y divide-gray-500/20">
               <div className="space-y-2 py-6">
-                {cloudNavItems.map((item) => (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    {item.name}
-                  </Link>
-                ))}
                 <Link
                   to="/network"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
@@ -141,6 +109,20 @@ export function HeaderDark() {
                 >
                   Network
                 </Link>
+                <Link
+                  to="/cloud"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Cloud
+                </Link>
+                <Link
+                  to="/pods"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Pods
+                </Link>
                 <Link
                   to="/agents"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
@@ -149,11 +131,11 @@ export function HeaderDark() {
                   Agents
                 </Link>
                 <Link
-                  to="/pods"
+                  to="/node"
                   className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
                   onClick={() => setMobileMenuOpen(false)}
                 >
-                  Pods
+                  Node
                 </Link>
               </div>
               <div className="py-6">

src/pages/home/CallToAction.tsx

@@ -37,38 +37,35 @@ export function CallToAction() {
         </svg>
 
         <Container className="relative">
-          <div className="mx-auto max-w-2xl text-center">
+          <div className="mx-auto max-w-3xl text-center">
             <H3 className=" text-white ">
-              A Living Network
-            </H3> 
+              Use the Mycelium Stack Your Way
+            </H3>
 
             <P className="mt-6 text-gray-300">
-              Mycelium isn’t a platform.
-              It’s the soil where a new internet grows — open, resilient, and alive.
+              Deploy infrastructure, run workloads, connect environments, and build distributed AI systems, all on one network designed for autonomy and control.
             </P>
 
             <P className="mt-4 text-gray-300">
-              The self-sovereign network powering the next internet.
+              Start wherever you are. Scale on your own terms.
             </P>
 
-            <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-              <Button to="/cloud" variant="solid" color="cyan">
-                Join Mycelium
+            <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
+              <Button to="/network" variant="solid" color="cyan">
+                Join the Network
               </Button>
 
               <Button
-                to="https://threefold.info/mycelium_network/docs/"
-                as="a"
-                target="_blank"
+                to="/cloud"
                 variant="outline"
                 color="white"
               >
-                Join Early Cloud Access
+                Deploy in Cloud
               </Button>
 
-              <Button to="#" variant="solid" color="cyan">
-                Join the Waitlist
-              </Button>
+              <a href="/node" className="text-cyan-400 hover:text-cyan-300 transition-colors">
+                Host a Node &rarr;
+              </a>
             </div>
           </div>
         </Container>

src/pages/home/HomeArchitecture.tsx

@@ -11,7 +11,7 @@ const deterministicCards = [
     eyebrow: "Why It Matters",
     title: "Built for a Sovereign Digital World",
     description:
-      "The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.",
+      "The modern internet still runs on centralized platforms that own the servers, shape the rules, and extract the data. Mycelium gives you a way out. You operate the infrastructure. You keep the data. You decide the boundaries.",
     animation: null,
     colSpan: "lg:col-span-3",
     rowSpan: "lg:row-span-1",
@@ -35,18 +35,29 @@ const deterministicCards = [
     description:
       "You own your data. Run services and AI models on your own devices, ensuring privacy and control.",
     animation: <NoExtraction className="lg:-mt-12" />, // ✅ NEW
-    colSpan: "lg:col-span-3",
+    colSpan: "lg:col-span-2",
     rowSpan: "lg:row-span-1",
     rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl",
     innerRounded: "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
   },
   {
     id: "healing",
-    title: "No single point of control.",
+    title: "No single point of failure.",
     description:
       "No single entity can dictate or censor your online experience.",
     animation: <NoControl />, // ✅ NEW
-    colSpan: "lg:col-span-3",
+    colSpan: "lg:col-span-2",
+    rowSpan: "lg:row-span-1",
+    rounded: "",
+    innerRounded: "",
+  },
+  {
+    id: "control",
+    title: "No single point of control.",
+    description:
+      "Infrastructure that moves with its operators, not a corporation.",
+    animation: <NoControl />, // ✅ NEW
+    colSpan: "lg:col-span-2",
     rowSpan: "lg:row-span-1",
     rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl",
     innerRounded: "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",

src/pages/home/HomeAudience.tsx

@@ -72,7 +72,10 @@ export function HomeAudience() {
 
             <P className="text-gray-800 mt-4">
               The internet wasn’t built for sovereignty. Today, data, AI models, and identity
-              live on centralized clouds — owned by a few. Mycelium brings infrastructure back
+              live on centralized clouds and owned by a few.
+            </P>
+             <P className="text-gray-800 mt-4">
+            Mycelium brings infrastructure back
               to people, communities, and nations: private, resilient, and cryptographically yours.
             </P>
 

src/pages/home/HomeAurora.tsx

@@ -6,7 +6,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
     <div className="px-4">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white  overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white  overflow-hidden bg-size-[65%] bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/hero11.webp')" }}
       >
         {/* Inner padding */}
@@ -27,11 +27,15 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
             </H1>
 
             <H4 className="mt-8">
-              The Living Network of the Next Internet
+              Private, distributed infrastructure built 
+for digital sovereignty
+
+
             </H4>
 
             <H5 className="mt-8 text-lg text-gray-600">
-              A new internet is emerging — private, distributed, and self-sovereign. Mycelium is the living network that makes it possible. A peer-to-peer foundation where people, data, and intelligence connect directly — without intermediaries, without compromise.
+              
+Run your apps, data, and intelligence on infrastructure that belongs to you
             </H5>
 
             <div className="mt-10 flex items-center gap-x-6">

src/pages/home/HomeMap.tsx

@@ -2,6 +2,13 @@
 import WorldMap from "@/components/ui/world-map";
 import { Eyebrow, H3, P } from "@/components/Texts";
 
+const stats = [
+  { id: 1, name: 'CORES', value: '54,958', description: 'Total Central Processing Unit cores available on the grid.' },
+  { id: 2, name: 'NODES', value: '1,493', description: 'Total number of nodes on the grid.' },
+  { id: 3, name: 'SSD CAPACITY', value: '5,388,956', description: 'Total GB of storage (SSD, HDD, & RAM) on the grid.' },
+  { id: 4, name: 'COUNTRIES', value: '44', description: 'Total number of countries with active nodes.' },
+]
+
 export function HomeMap() {
   return (
     <div className="bg-[#121212] w-full">
@@ -9,20 +16,22 @@ export function HomeMap() {
       <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
-      <div className="max-w-7xl mx-auto text-center py-12 border border-t-0 border-b-0 border-gray-800">
-        <Eyebrow>Mycelium Nodes</Eyebrow>
+      <div className="max-w-7xl mx-auto text-center pt-12 border border-t-0 border-b-0 border-gray-800">
+        <Eyebrow>PROJECT MYCELIUM IS LIVE. </Eyebrow>
         <H3 className="text-white">Host a Node, Grow the Network</H3>
         <P className="text-sm md:text-lg text-gray-200 max-w-3xl mx-auto py-4">
-          Mycelium runs on real nodes — hosted by people, communities, and enterprises across the world.
-          Each one adds capacity, resilience, and sovereignty to the network — and earns rewards in return.
+         Mycelium runs on nodes hosted by people and organizations around the world.
+Each node adds compute, storage, and bandwidth, expanding the network’s capacity and resilience.
+        </P>
+        <P className="text-sm md:text-lg text-gray-200 max-w-3xl mx-auto py-4">
+You can share your idle resources and earn rewards when they are used.
+Configure it once. Your node takes over from there.
         </P>
-        <p className="text-sm md:text-base text-gray-200 max-w-3xl mx-auto py-4">
-          Plug in once. It runs 24/7 — powering the network and earning autonomously.
-        </p>
-      </div>
 
+      </div>
+     <div className="max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800 ">
       {/* ✅ Match same side margins */}
-      <div className="max-w-7xl mx-auto px-6 border border-t-0 border-b-0 border-gray-800">
+      <div className="max-w-5xl mx-auto px-6 ">
         <WorldMap
           dots={[
             { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } }, // Alaska → LA
@@ -34,6 +43,33 @@ export function HomeMap() {
           ]}
         />
       </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 border border-t-0 border-b-0 border-gray-800 pb-12">
+
+        <dl className="pt-6 grid grid-cols-1 gap-0.5 overflow-hidden rounded-md text-center sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <div
+              key={stat.id}
+              className="flex flex-col bg-white/1 p-8"
+            >
+              <dt className="text-sm/6 font-semibold text-gray-300">
+                {stat.name}
+              </dt>
+
+              <dd className="order-first text-3xl font-semibold tracking-tight text-white">
+                {stat.value}
+              </dd>
+
+              <p className="mt-2 text-sm text-gray-400">
+                {stat.description}
+              </p>
+            </div>
+          ))}
+        </dl>
+
+      </div>
+
       {/* ✅ Bottom horizontal line with spacing */}
       <div className="w-full border-b border-gray-800" />
       <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>

src/pages/home/HomeTab.tsx

@@ -3,125 +3,136 @@
 import { Link } from "react-router-dom";
 import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
 
-const bentoCards = [
-  {
-    id: 'network',
-    title: 'Mycelium Network',
-    eyebrow: 'Network',
-    description: 'Encrypted peer-to-peer mesh networking across the globe.',
-    image: '/images/bento-network.png',
-    link: '/network',
-    colSpan: 'lg:col-span-3',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'lg:rounded-tl-4xl max-lg:rounded-t-4xl',
-    innerRounded: 'lg:rounded-tl-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]'
-  },
-  {
-    id: 'agents',
-    title: 'Mycelium Agents',
-    eyebrow: 'Agents',
-    description: 'Private, programmable AI systems that run on your hardware.',
-    image: '/images/bento-agent.jpg',
-    link: '/agents',
-    colSpan: 'lg:col-span-3',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'lg:rounded-tr-4xl',
-    innerRounded: 'lg:rounded-tr-[calc(2rem+1px)]'
-  },
-  {
-    id: 'cloud',
-    title: 'Mycelium Cloud',
-    eyebrow: 'Cloud',
-    description: 'Deploy Kubernetes clusters on sovereign infrastructure.',
-    image: '/images/bento-cloud.jpg',
-    link: '/cloud',
-    colSpan: 'lg:col-span-6',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'rounded-lg',
-    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
-  },
-  {
-    id: 'compute',
-    title: 'Mycelium Compute',
-    eyebrow: 'Compute',
-    description: 'The Compute resource layers powering the stack.',
-    image: '/images/bento-compute.png',
-    link: '/compute',
-    colSpan: 'lg:col-span-2',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'lg:rounded-bl-4xl',
-    innerRounded: 'lg:rounded-bl-[calc(2rem+1px)]'
-  },
-  {
-    id: 'storage',
-    title: 'Mycelium Storage',
-    eyebrow: 'Storage',
-    description: 'The Storage resource layers powering the stack.',
-    image: '/images/bento-storage.png',
-    link: '/storage',
-    colSpan: 'lg:col-span-2',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'rounded-lg',
-    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
-  },
-  {
-    id: 'gpu',
-    title: 'Mycelium GPU',
-    eyebrow: 'GPU',
-    description: 'The GPU resource layers powering the stack.',
-    image: '/images/bento-gpu.jpg',
-    link: '/gpu',
-    colSpan: 'lg:col-span-2',
-    rowSpan: 'lg:row-span-1',
-    rounded: 'lg:rounded-br-4xl max-lg:rounded-b-4xl',
-    innerRounded: 'lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]'
-  },
-];
-
 export function HomeTab() {
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
-      {/* ✅ Top spacer + full-width line */}
+      {/* Top section separators */}
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
       <div className="w-full border-t border-l border-r border-gray-100" />
 
-      
-      {/* ✅ Section with vertical borders */}
-      <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-100">
-        <Eyebrow className="pt-12 ">Components</Eyebrow>
+      {/* Main content */}
+      <div className="mx-auto bg-white max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-100">
+        <Eyebrow className="pt-12">Components</Eyebrow>
         <H3 className="mt-2">Explore the Stack</H3>
         <P className="mt-6 max-w-4xl">
-         Mycelium unifies everything the next generation internet needs — communication, cloud, and intelligence — into one seamless, privacy-first network anyone can join.
-From encrypted peer-to-peer communication to decentralized cloud and sovereign AI — everything runs on one seamless system.
-
+          Mycelium’s technology stack gives you everything you need to build and run applications 
+          on a distributed network, from connectivity and compute to personal environments and AI.
         </P>
 
-        <div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
-          {bentoCards.map((card) => (
-            <Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}>
-              <div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} />
-              <div className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}>
-                <img
-                  alt={card.title}
-                  src={card.image}
-                  className="h-50 object-cover object-center"
-                />
-                <div className="px-8 pt-4 pb-6">
-                  <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
-                  <CT  className="mt-2 text-lg  lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
-                  <CP className="mt-1 max-w-lg  text-gray-600">
-                    {card.description}
-                  </CP>
+        {/* BENTO GRID LAYOUT — EXACT MATCH */}
+        <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2 pb-12">
+
+          {/* ------------------ LEFT TALL CARD ------------------ */}
+          <Link to="/network" className="relative lg:row-span-2 cursor-pointer">
+            <div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
+
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
+                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Network</CT>
+                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Peer-to-peer connectivity between users, nodes, and devices. The foundation for secure 
+                  communication and collaboration.
+                </CP>
+              </div>
+
+              {/* Tall image container */}
+              <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
+                <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden 
+                                rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] 
+                                border-gray-700 bg-gray-900 shadow-2xl">
+                  <img 
+                    src="/images/bento-network.jpg"
+                    className="size-full object-cover object-top"
+                  />
                 </div>
               </div>
-              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
-            </Link>
-          ))}
+            </div>
+
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
+          </Link>
+
+          {/* ------------------ MIDDLE TOP ------------------ */}
+          <Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
+            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
+
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
+                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Pods</CT>
+                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Personal digital environments that never reset and stay under your control. Build, deploy, 
+                  and connect on your own terms.
+                </CP>
+              </div>
+
+              <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 sm:px-10 lg:pb-2">
+                <img
+                  src="/images/bento-gpu.jpg"
+                  className="w-full max-lg:max-w-xs"
+                />
+              </div>
+            </div>
+
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
+          </Link>
+
+          {/* ------------------ MIDDLE BOTTOM ------------------ */}
+          <Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
+            <div className="absolute inset-px rounded-lg bg-white" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+
+              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
+                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Agents</CT>
+                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Peer-to-peer AI that serves you, not your data. Train, deploy, and own your AI end-to-end.
+                </CP>
+              </div>
+
+              <div className="@container flex flex-1 items-center justify-center max-lg:py-6 lg:pb-2">
+                <img
+                  src="/images/bento-agent.jpg"
+                  className="h-[min(200px,40cqw)] object-cover"
+                />
+              </div>
+            </div>
+
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
+          </Link>
+
+          {/* ------------------ RIGHT TALL ------------------ */}
+          <Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
+            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
+
+              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>
+                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Cloud</CT>
+                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Decentralized compute, storage, and orchestration. A full cloud service without a central operator.
+                </CP>
+              </div>
+
+              <div className="relative min-h-120 w-full grow">
+                <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden 
+                                rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
+                  <img
+                    src="/images/cloud/reserve.png"
+                    className="size-full object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+          </Link>
+
         </div>
       </div>
 
-      {/* ✅ Bottom full-width line + spacer */}
+      {/* Bottom separators */}
       <div className="w-full border-b border-gray-100" />
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
     </section>