chore: remove Next.js dependencies and update UI components with standard React

src/components/Header.tsx

@@ -12,112 +12,111 @@ function NavLinks() {
   let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   let timeoutRef = useRef<number | null>(null)
 
-
   return (
-    <div className="flex items-center gap-x-5">
-      <Link to="/" aria-label="Home">
-        <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
-      </Link>
-      <div className="flex items-center gap-x-5 border-l border-white/10 pl-5">
-        {[
-          ['Home', '/'],
-          ['Cloud', '/cloud'],
-          ['Network', '/network'],
-          ['Agents', '/agents'],
-        ].map(([label, href], index) => (
-          <Link
-            key={label}
-            to={href}
-            className={clsx(
-              'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
+    <>
+      {[
+        ['Home', '/'],
+        ['Cloud', '/cloud'],
+        ['Network', '/network'],
+        ['Agents', '/agents'],
+      ].map(([label, href], index) => (
+        <Link
+          key={label}
+          to={href}
+          className={clsx(
+            'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
+          )}
+          onMouseEnter={() => {
+            if (timeoutRef.current) {
+              window.clearTimeout(timeoutRef.current)
+            }
+            setHoveredIndex(index)
+          }}
+          onMouseLeave={() => {
+            timeoutRef.current = window.setTimeout(() => {
+              setHoveredIndex(null)
+            }, 200)
+          }}
+        >
+          <AnimatePresence>
+            {hoveredIndex === index && (
+              <motion.span
+                className="absolute inset-0 rounded-lg bg-white/10"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15 },
+                }}
+              />
             )}
-            onMouseEnter={() => {
-              if (timeoutRef.current) {
-                window.clearTimeout(timeoutRef.current)
-              }
-              setHoveredIndex(index)
-            }}
-            onMouseLeave={() => {
-              timeoutRef.current = window.setTimeout(() => {
-                setHoveredIndex(null)
-              }, 200)
-            }}
-          >
-            <AnimatePresence>
-              {hoveredIndex === index && (
-                <motion.span
-                  className="absolute inset-0 rounded-lg bg-white/10"
-                  layoutId="hoverBackground"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1, transition: { duration: 0.15 } }}
-                  exit={{
-                    opacity: 0,
-                    transition: { duration: 0.15 },
-                  }}
-                />
-              )}
-            </AnimatePresence>
-            <span className="relative z-10">{label}</span>
-          </Link>
-        ))}
-      </div>
-       <div className="flex items-center gap-8">
-            <div className="flex items-center gap-6 max-lg:hidden">
-              <Button
-                to="https://threefold.info/mycelium_network/docs/"
-                variant="outline"
-                as="a"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Docs
-              </Button>
-              <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
-              </Button>
-            </div>
-          </div>
-    </div>
+          </AnimatePresence>
+          <span className="relative z-10">{label}</span>
+        </Link>
+      ))}
+    </>
   )
 }
 
-
 export function Header() {
-  const [isVisible, setIsVisible] = useState(true);
-  const [lastScrollY, setLastScrollY] = useState(0);
-
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
 
   const controlHeader = () => {
     if (typeof window !== 'undefined') {
-      if (window.scrollY > lastScrollY && window.scrollY > 100) { // Hides when scrolling down past 100px
-        setIsVisible(false);
-      } else { // Shows when scrolling up
-        setIsVisible(true);
+      if (window.scrollY > lastScrollY && window.scrollY > 100) {
+        // Hides when scrolling down past 100px
+        setIsVisible(false)
+      } else {
+        // Shows when scrolling up
+        setIsVisible(true)
       }
-      setLastScrollY(window.scrollY);
+      setLastScrollY(window.scrollY)
     }
-  };
-
+  }
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', controlHeader);
+      window.addEventListener('scroll', controlHeader)
       return () => {
-        window.removeEventListener('scroll', controlHeader);
-      };
+        window.removeEventListener('scroll', controlHeader)
+      }
     }
-  }, [lastScrollY]);
-
+  }, [lastScrollY])
 
   return (
-    <motion.header 
-      className="fixed top-4 left-0 right-0 z-50 flex justify-center"
+    <motion.header
+      className="fixed top-0 left-0 right-0 z-50 bg-white/10 shadow-lg ring-1 ring-white/10 backdrop-blur-sm"
       initial={{ y: 0, opacity: 1 }}
       animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
       transition={{ duration: 0.3, ease: 'easeInOut' }}
     >
-      <div className="rounded-full bg-white/10 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
-        <NavLinks />
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex items-center gap-x-5">
+          <Link to="/" aria-label="Home">
+            <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+          </Link>
+        </div>
+        <div className="flex items-center gap-x-5">
+          <NavLinks />
+        </div>
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-6 max-lg:hidden">
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              variant="outline"
+              as="a"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Docs
+            </Button>
+            <Button to="/download" variant="solid" color="cyan">
+              Get Mycelium
+            </Button>
+          </div>
+        </div>
       </div>
     </motion.header>
   )