feat: enhance globe component with interactive controls and global markers

src/pages/home/HomeFeatures.tsx

@@ -32,24 +32,11 @@ export function HomeFeatures() {
 
   return (
     <div className="">
-        <div className="relative bg-transparent py-24 overflow-hidden">
-      {/* --- Soft background gradients --- */}
-      <div
-          aria-hidden="true"
-          className="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
-            }}
-            className="aspect-1318/752 w-329.5 flex-none bg-linear-to-r from-[#9fd6fc] to-[#c6c4fa] opacity-40"
-          />
-        </div>
+        <div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <H2 className="">
-            The Building Blocks of <span className="font-medium text-7xl italic">Decentralized Future</span>
+            The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
           </H2>
           <P className="mt-6 ">
             From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
@@ -65,7 +52,6 @@ export function HomeFeatures() {
                 <h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
                 <p className="mt-4 text-base text-gray-800">{feature.description}</p>
                 <a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> &rarr;</span></a>
-                <div className="absolute -bottom-10 -right-10 h-50 w-50 -z-10" style={{ background: 'radial-gradient(circle, rgba(173, 239, 255, 0.6) 0%, rgba(115, 207, 255, 0.4) 100%)', filter: 'blur(80px)' }}></div>
               </div>
             ))}
           </div>

src/pages/home/HomeFeaturesDark.tsx

@@ -0,0 +1,60 @@
+import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
+import { H2, P } from '@/components/Texts'
+
+const features = [
+  {
+    name: 'Mycelium Network',
+    description:
+      "A global, end-to-end encrypted overlay that simply doesn't break.",
+    href: '/network',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Mycelium Cloud',
+    description:
+      'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
+    href: '/cloud',
+    icon: ServerStackIcon,
+  },
+  {
+    name: 'Mycelium Agents',
+    description:
+      'Your sovereign agent with private memory and permissioned data access—always under your control.',
+    href: '/agents',
+    icon: CpuChipIcon,
+  },
+]
+
+export function HomeFeaturesDark() {
+
+  return (
+    <div className="">
+            <div className="relative bg-black py-24 overflow-hidden">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+                    <H2 className="text-white">
+            The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
+          </H2>
+                    <P className="mt-6 text-gray-300">
+            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+          </P>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
+          <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
+            {features.map((feature) => (
+                            <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
+                                                <div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
+                  <feature.icon className="h-12 w-12 text-cyan-500" />
+                </div>
+                                <h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
+                                <p className="mt-4 text-base text-gray-300">{feature.description}</p>
+                                <a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> &rarr;</span></a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Globe } from "@/components/ui/Globe"
+import { motion } from "framer-motion"
+import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
+import { CountUpNumber } from '@/components/CountUpNumber'
+
+export function WorldMap() {
+  return (
+    <div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
+      {/* Background video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/10" />
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
+        {/* Title + Subtitle */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="max-w-xl"
+        >
+          <Eyebrow color="accent">Network</Eyebrow>
+          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <P className=" mt-4 text-base leading-relaxed" color="light">
+            Mycelium Cloud's advancement technology enables anyone to deploy
+            their own Internet infrastructure, anywhere.
+          </P>
+        </motion.div>
+
+        {/* Bottom Layout: Globe + Cards */}
+        <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
+          {/* Globe Left Column */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex-1 flex items-center justify-center"
+          >
+            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
+              <Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
+            </div>
+          </motion.div>
+
+          {/* Cards Right Column */}
+          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
+              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
+              <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total Central Processing Unit Cores available on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.5 }}
+              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
+              <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total number of nodes on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
+              <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.7 }}
+              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
+              <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total number of countries with active nodes.
+              </CP>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Radial fade overlay */}
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  )
+}

src/pages/home/HomePage.tsx

@@ -1,10 +1,11 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { HomeMapSection } from './HomeMap'
 import { HomeFeatures } from './HomeFeatures'
+import { HomeFeaturesDark } from './HomeFeaturesDark'
 import { HomeCloud } from './HomeCloud'
 import { HomeAgent } from './HomeAgent'
 import { StackSectionLight } from './StackSection'
+import { WorldMap } from './HomeGlobe'
 
 
 export default function HomePage() {
@@ -14,12 +15,17 @@ export default function HomePage() {
         <HomeAurora />
       </AnimatedSection>
 
+      <AnimatedSection id="next-section">
+        <WorldMap />
+      </AnimatedSection>
+
       <AnimatedSection>
         <StackSectionLight />
       </AnimatedSection>
 
+
       <AnimatedSection>
-        <HomeFeatures />
+        <HomeFeaturesDark />
       </AnimatedSection>
 
       <AnimatedSection>