feat: implement dark theme with white logo and updated text effects

- Added white logo variant and updated header to use dark theme styling
- Split text hover effect component into two variants (cursor-following and auto-animated)
- Updated button and dropdown components to support transparent backgrounds and white text styling

google5dd3a8b700455c0e.html

@@ -1 +0,0 @@
-google-site-verification: google5dd3a8b700455c0e.html

index.html

@@ -4,10 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="google-site-verification" content="rRrZkMEhdC4yFe_BrENEzYmy2bRfD-VE6RTRiDJNLkg" />
+    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
-    <title>Project Mycelium - Built for Digital Sovereignty</title>
+    <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
-    <meta name="description" content="Discover Project Mycelium. A sovereign peer-to-peer network for private communication, storage, and compute. Build and run your digital environment on infrastructure you control." />
-    <meta name="keywords" content="Project Mycelium, Mycelium, digital sovereignty, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />

public/images/mediakit/logo_dark/logomark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>

public/images/mediakit/logo_light/logomark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>

src/App.tsx

@@ -1,6 +1,6 @@
-import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { HashRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './components/Layout';
-import { lazy, Suspense, useEffect } from 'react';
+import { lazy, Suspense } from 'react';
 
 const HomePage = lazy(() => import('./pages/home/HomePage'));
 const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
@@ -11,32 +11,10 @@ const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
 const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
 const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
-const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
-const MediaPage = lazy(() => import('./pages/mediakit/MediaPage'));
-
-function ScrollToTop() {
-  const { pathname, hash } = useLocation();
-
-  useEffect(() => {
-    if (hash) {
-      const id = hash.replace('#', '');
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        return;
-      }
-    }
-
-    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
-  }, [pathname, hash]);
-
-  return null;
-}
 
 function App() {
   return (
     <HashRouter>
-      <ScrollToTop />
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Layout />}>
@@ -49,8 +27,6 @@ function App() {
             <Route path="storage" element={<StoragePage />} />
                         <Route path="gpu" element={<GpuPage />} />
             <Route path="pods" element={<PodsPage />} />
-            <Route path="nodes" element={<NodesPage />} />
-            <Route path="mediakit" element={<MediaPage />} />
           </Route>
         </Routes>
       </Suspense>

src/assets/fonts/Mulish/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/fonts/Mulish/README.txt

@@ -1,79 +0,0 @@
-Mulish Variable Font
-====================
-
-This download contains Mulish as both variable fonts and static fonts.
-
-Mulish is a variable font with this axis:
-  wght
-
-This means all the styles are contained in these files:
-  Mulish/Mulish-VariableFont_wght.ttf
-  Mulish/Mulish-Italic-VariableFont_wght.ttf
-
-If your app fully supports variable fonts, you can now pick intermediate styles
-that aren’t available as static fonts. Not all apps support variable fonts, and
-in those cases you can use the static font files for Mulish:
-  Mulish/static/Mulish-ExtraLight.ttf
-  Mulish/static/Mulish-Light.ttf
-  Mulish/static/Mulish-Regular.ttf
-  Mulish/static/Mulish-Medium.ttf
-  Mulish/static/Mulish-SemiBold.ttf
-  Mulish/static/Mulish-Bold.ttf
-  Mulish/static/Mulish-ExtraBold.ttf
-  Mulish/static/Mulish-Black.ttf
-  Mulish/static/Mulish-ExtraLightItalic.ttf
-  Mulish/static/Mulish-LightItalic.ttf
-  Mulish/static/Mulish-Italic.ttf
-  Mulish/static/Mulish-MediumItalic.ttf
-  Mulish/static/Mulish-SemiBoldItalic.ttf
-  Mulish/static/Mulish-BoldItalic.ttf
-  Mulish/static/Mulish-ExtraBoldItalic.ttf
-  Mulish/static/Mulish-BlackItalic.ttf
-
-Get started
------------
-
-1. Install the font files you want to use
-
-2. Use your app's font picker to view the font family and all the
-available styles
-
-Learn more about variable fonts
--------------------------------
-
-  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
-  https://variablefonts.typenetwork.com
-  https://medium.com/variable-fonts
-
-In desktop apps
-
-  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
-  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
-
-Online
-
-  https://developers.google.com/fonts/docs/getting_started
-  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
-  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
-
-Installing fonts
-
-  MacOS: https://support.apple.com/en-us/HT201749
-  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
-  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
-
-Android Apps
-
-  https://developers.google.com/fonts/docs/android
-  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
-
-License
--------
-Please read the full license text (OFL.txt) to understand the permissions,
-restrictions and requirements for usage, redistribution, and modification.
-
-You can use them in your products & projects – print or digital,
-commercial or otherwise.
-
-This isn't legal advice, please consider consulting a lawyer and see the full
-license for all details.

src/components/Button.tsx

@@ -3,30 +3,23 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'inline-flex justify-center rounded-full py-2 px-5 text-sm md:text-base font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
   outline:
-    'inline-flex justify-center bg-transparent font-semibold rounded-full  border border-2 py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-sm md:text-base transition-colors',
+    'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
-  link:
-    'inline-flex items-center text-sm md:text-base font-semibold transition-colors',
 }
 
 const variantStyles = {
   solid: {
-    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 active:text-white/80 before:transition-colors',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
-    cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
+    cyan: 'border-cyan-500 text-cyan-500',
-    gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
+    gray: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
-    white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
+    white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
-  },
-  link: {
-    cyan: 'text-cyan-400 underline hover:text-cyan-300',
-    white: 'text-white underline hover:text-cyan-300',
-    dark: 'text-gray-900 underline hover:text-cyan-400',
   },
 }
 
@@ -37,11 +30,7 @@ type ButtonProps = (
     }
   | {
       variant: 'outline'
-      color?: keyof typeof variantStyles.outline
+      color?: (keyof typeof variantStyles.outline) | 'cyan'
-    }
-  | {
-      variant: 'link'
-      color?: keyof typeof variantStyles.link
     }
 ) &
   (
@@ -54,33 +43,16 @@ type ButtonProps = (
   )
 
 export function Button({ className, as, ...props }: ButtonProps) {
-  // Set safe defaults per variant so color always matches a valid palette key
+  props.variant ??= 'solid'
-  if (!props.variant) {
+  props.color ??= 'gray'
-    props.variant = 'solid'
-  }
-
-  if (!props.color) {
-    if (props.variant === 'solid') {
-      props.color = 'gray'
-    } else if (props.variant === 'outline') {
-      props.color = 'gray'
-    } else if (props.variant === 'link') {
-      props.color = 'cyan'
-    }
-  }
-
-  const variant = props.variant
-  const color = props.color as string
 
   className = clsx(
-    baseStyles[variant],
+    baseStyles[props.variant],
-    variant === 'outline'
+    props.variant === 'outline'
-      ? variantStyles.outline[color as keyof typeof variantStyles.outline]
+      ? variantStyles.outline[props.color]
-      : variant === 'solid'
+      : props.variant === 'solid'
-        ? variantStyles.solid[color as keyof typeof variantStyles.solid]
+        ? variantStyles.solid[props.color]
-        : variant === 'link'
+        : undefined,
-          ? variantStyles.link[color as keyof typeof variantStyles.link]
-          : undefined,
     className,
   )
 

src/components/Footer.tsx

@@ -8,30 +8,27 @@ export function Footer() {
         <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
           <div>
             <div className="flex items-center text-gray-900">
-              <img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
+              <img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-15 w-15 flex-none" />
-              <div className="">
+              <div className="ml-4">
-                <p className="text-base lg:text-lg font-semibold">Project Mycelium</p>
+                <p className="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Built for Digital Sovereignty</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
               </div>
             </div>
             <nav className="mt-10 flex gap-8">
-              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+              <Link to="/" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Network
+                Home
               </Link>
               <Link to="/cloud" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Cloud
               </Link>
-              <Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Pods
+                Network
               </Link>
               <Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Agents
               </Link>
-              <Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+              <Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Nodes
+                Pods
-              </Link>
-              <Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
-                Media Kit
               </Link>
             </nav>
           </div>
@@ -52,11 +49,11 @@ export function Footer() {
             </div>
           </div>
         </div>
-        <div className="flex flex-col items-center border-t border-gray-100 py-8 md:flex-row-reverse md:justify-between md:pt-6">
+        <div className="flex flex-col items-center border-t border-gray-100 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
             &copy; Copyright{' '}
-            <a href="https://ourworld.tf/" target="_blank" rel="noopener noreferrer" className="font-semibold hover:text-cyan-500 transition-colors">
+            <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
-              OurWorld
+              ThreeFold
             </a>{' '}
             {new Date().getFullYear()}. All rights reserved.
           </p>

src/components/Header.tsx

@@ -1,14 +1,32 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+import { Dropdown } from './ui/Dropdown'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/mainlogo.svg'
+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">
@@ -18,24 +36,28 @@ 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"
               >
                 Network
               </Link>
-              <Link
-                to="/cloud"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Cloud
-              </Link>
-              <Link
-                to="/pods"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Pods
-              </Link>
               <Link
                 to="/agents"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
@@ -43,10 +65,10 @@ export function Header() {
                 Agents
               </Link>
               <Link
-                to="/nodes"
+                to="/pods"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
               >
-                Nodes
+                Pods
               </Link>
             </div>
           </div>
@@ -102,6 +124,16 @@ 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"
@@ -109,20 +141,6 @@ export function Header() {
                 >
                   Network
                 </Link>
-                <Link
-                  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)}
-                >
-                  Cloud
-                </Link>
-                <Link
-                  to="/pods"
-                  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)}
-                >
-                  Pods
-                </Link>
                 <Link
                   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"
@@ -131,11 +149,11 @@ export function Header() {
                   Agents
                 </Link>
                 <Link
-                  to="/nodes"
+                  to="/pods"
                   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
+                  Pods
                 </Link>
               </div>
               <div className="py-6">

src/components/HeaderDark.tsx

@@ -1,41 +1,64 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+import { Dropdown } from './ui/Dropdown'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/mainlogo.svg'
+import pmyceliumLogo from '../images/logos/logowhite.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">
+      <nav className="">
         <Container className="flex bg-transparent 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" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
+              <Dropdown
+                buttonClassName="bg-transparent"
+                buttonContent={
+                  <>
+                    {['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
+                      <>
+                        <span className="text-white bg-[#111111]">Cloud {' >'} </span>
+                        <span className="text-white bg-[#111111]">{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"
@@ -43,10 +66,10 @@ export function HeaderDark() {
                 Agents
               </Link>
               <Link
-                to="/nodes"
+                to="/pods"
                 className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
               >
-                Nodes
+                Pods
               </Link>
             </div>
           </div>
@@ -102,6 +125,16 @@ 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"
@@ -109,20 +142,6 @@ 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"
@@ -131,11 +150,11 @@ export function HeaderDark() {
                   Agents
                 </Link>
                 <Link
-                  to="/nodes"
+                  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)}
                 >
-                  Nodes
+                  Pods
                 </Link>
               </div>
               <div className="py-6">

src/components/HomeHeadline.tsx

@@ -1,9 +1,9 @@
-import { TextHoverEffect } from "@/components/ui/text-hover-effect";
+import { TextHoverEffects } from "@/components/ui/text-hover-effects";
  
 export function HomeHeadline() {
   return (
     <div className="flex items-center justify-center  h-auto max-h-[200px]">
-      <TextHoverEffect text="MYCELIUM" />
+      <TextHoverEffects text="MYCELIUM" />
     </div>
   );
 }

src/components/HomeHeadlineDark.tsx

@@ -0,0 +1,9 @@
+import { TextHoverEffect } from "@/components/ui/text-hover-effect";
+ 
+export function HomeHeadlineDark() {
+  return (
+    <div className="flex items-center justify-center  h-auto max-h-[200px]">
+      <TextHoverEffect text="MYCELIUM" />
+    </div>
+  );
+}

src/components/Layout.tsx

@@ -1,47 +1,13 @@
-import { useEffect } from 'react'
 import { Outlet } from 'react-router-dom'
 import { Footer } from './Footer'
-import { Header } from './Header'
+import { HeaderDark } from './HeaderDark'
 
 export function Layout() {
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    if (document.getElementById('mailerlite-universal')) return
-
-    const script = document.createElement('script')
-    script.id = 'mailerlite-universal'
-    script.innerHTML = `
-      (function(m,a,i,l,e,r){
-        m['MailerLiteObject']=e;
-        function f(){
-          var c={a:arguments,q:[]};
-          var r=this.push(c);
-          return "number"!=typeof r?r:f.bind(c.q);
-        }
-        f.q=f.q||[];
-        m[e]=m[e]||f.bind(f.q);
-        m[e].q=m[e].q||f.q;
-        r=a.createElement(i);
-        var _=a.getElementsByTagName(i)[0];
-        r.async=1;
-        r.src=l+'?v'+(~~(new Date().getTime()/1000000));
-        _.parentNode.insertBefore(r,_);
-      })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
-      window.ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
-    `
-
-    document.body.appendChild(script)
-
-    return () => {
-      script.remove()
-    }
-  }, [])
 
   return (
     <div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
       <div className="relative z-10">
-        <Header />
+        <HeaderDark />
         <main>
           <Outlet />
         </main>

src/components/Texts.tsx

@@ -12,8 +12,8 @@ const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
   light: 'text-gray-50',
-  accent: 'text-cyan-400',
+  accent: 'text-cyan-500',
-  cyan: 'text-cyan-400',
+  cyan: 'text-cyan-50',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',
@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
   'text-base/7 leading-normal tracking-normal'
 )
 
-export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
+export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
-export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')