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/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">