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>
   )

src/components/ui/CountUpNumber.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import CountUp from 'react-countup'
+import { SectionHeader } from '@/components/Texts'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+  color?: 'light' | 'primary' | 'secondary'
+}
+
+export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
+  return (
+    <SectionHeader color={color} className={className}>
+      <CountUp end={end} duration={2.75} separator="," />
+    </SectionHeader>
+  )
+}

src/components/ui/FadeIn.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { motion, type Transition } from 'framer-motion'
+import React from 'react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
+
+type FadeInProps = {
+  children: React.ReactNode
+  transition?: Transition
+  className?: string
+}
+
+export function FadeIn({ children, transition, className }: FadeInProps) {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
+      transition={transition || { duration: 0.5 }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+

src/components/ui/Globe2.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import createGlobe from 'cobe'
+
+export function Globe({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    let phi = 0
+
+    if (!canvasRef.current) return
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 0,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        state.phi = phi
+        phi += 0.01
+      },
+    })
+
+    return () => {
+      globe.destroy()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+    />
+  )
+}

src/components/ui/bento-grid.tsx

@@ -1,6 +1,5 @@
 import { cn } from "@/lib/utils";
 import { CT, CP } from "@/components/Texts";
-import Image from 'next/image';
 import React from 'react';
 import { motion } from 'framer-motion';
 
@@ -55,11 +54,9 @@ export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps
               className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
             />
           ) : img ? (
-            <Image
+            <img
               src={img}
               alt={title as string}
-              width={300}
-              height={300}
               className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
             />
           ) : null}

src/components/ui/layout-text-flip.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
 
 export const LayoutTextFlip = ({
@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
 
       <motion.span
         layout
-        className="relative w-fit overflow-hidden px-2 py-2 font-neuton font-medium italic tracking-tight"
+        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
       >
         <AnimatePresence mode="popLayout">
           <motion.span

src/components/ui/world-map.tsx

@@ -4,8 +4,6 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import DottedMap from "dotted-map";
 
-import { useTheme } from "next-themes";
-
 interface MapProps {
   dots?: Array<{
     start: { lat: number; lng: number; label?: string };
@@ -21,13 +19,11 @@ export default function WorldMap({
   const svgRef = useRef<SVGSVGElement>(null);
   const map = new DottedMap({ height: 100, grid: "diagonal" });
 
-  const { theme } = useTheme();
-
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: theme === "dark" ? "#FFFFFF40" : "#00000040",
+    color: "#FFFFFF40", // Hardcoded for dark theme
     shape: "circle",
-    backgroundColor: theme === "dark" ? "black" : "white",
+    backgroundColor: "black", // Hardcoded for dark theme
   });
 
   const projectPoint = (lat: number, lng: number) => {