feat: add dark theme support and update homepage content

- Integrated next-themes for dark mode theming with default dark theme
- Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects
- Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery

src/pages/home/CallToAction.tsx

@@ -14,17 +14,20 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center ">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Use the Mycelium Stack Your Way
+             A Living Network
+
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Run workloads, connect environments, host nodes, and build agentic systems, all on one sovereign, self-healing network. 
+            Mycelium isn’t a platform.
+It’s the soil where a new internet grows — open, resilient, and alive.
+ 
           </p>
           <p className="mt-4 text-lg text-gray-300">
-            Start wherever you are. Scale however you choose.
+            The self-sovereign network powering the next internet.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/cloud" variant="solid" color="cyan">
-              Get Started
+              Join Mycelium
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
@@ -33,7 +36,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Explore Docs
+             Join Early Cloud Access
             </Button>
           </div>
         </div>

src/pages/home/HomeAudience.tsx

@@ -0,0 +1,118 @@
+"use client";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { H3, P } from "@/components/Texts";
+import { Button } from "@/components/Button";
+
+const rotating = [
+  "Communities",
+  "Integrators",
+  "Builders",
+  "Enterprises",
+  "Institutions",
+  "Creators",
+  "Researchers",
+  "Individuals",
+];
+
+// ✅ Use local image files (1–8)
+const gallery = [
+  "/images/audience/1.jpg",
+  "/images/audience/2.jpg",
+  "/images/audience/3.jpg",
+  "/images/audience/4.jpg",
+  "/images/audience/5.jpg",
+  "/images/audience/6.jpg",
+  "/images/audience/7.jpg",
+  "/images/audience/8.jpg",
+];
+
+export function HomeAudience() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((prev) => (prev + 1) % rotating.length);
+    }, 3200);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div>
+      {/* ✅ Top horizontal line + container border */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      {/* ✅ Main content */}
+      <div className="mx-auto max-w-7xl bg-white border border-t-0 border-b-0 border-gray-100">
+        <div className="grid grid-cols-1 lg:grid-cols-2">
+
+          {/* ✅ LEFT — Text & rotating headline */}
+          <div className="px-6 py-14 sm:px-10 lg:px-14 flex flex-col justify-center">
+            <H3 className="text-black">
+              Sovereign Infrastructure for{" "}
+              <span className="inline-block text-black font-semibold relative ml-2 h-[1.2em]">
+                <AnimatePresence mode="wait">
+                  <motion.span
+                    key={rotating[index]}
+                    initial={{ opacity: 0, y: 8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -8 }}
+                    transition={{ duration: 0.35 }}
+                    className="absolute left-0 top-0"
+                  >
+                    {rotating[index]}
+                  </motion.span>
+                </AnimatePresence>
+
+                {/* Invisible placeholder to avoid layout jump */}
+                <span className="opacity-0">{rotating[index]}</span>
+              </span>
+            </H3>
+
+            <P className="text-gray-800 mt-4">
+              The internet wasn’t built for sovereignty. Today, data, AI models, and identity
+              live on centralized clouds — owned by a few. Mycelium brings infrastructure back
+              to people, communities, and nations: private, resilient, and cryptographically yours.
+            </P>
+
+            <div className="mt-10 flex items-center gap-x-6">
+                <Button
+                  href="#"
+                  variant="solid"
+                  color="cyan"
+                  className=""
+                >
+                  Get started
+                </Button>
+              <a href="#" className="text-sm font-semibold text-black">
+                Live demo <span aria-hidden="true">→</span>
+              </a>
+            </div>
+          </div>
+
+          {/* ✅ RIGHT — Landscape image gallery synced with title */}
+          <div className="relative h-64 sm:h-96 lg:h-full w-full overflow-hidden">
+            <AnimatePresence mode="wait">
+              <motion.img
+                key={gallery[index]}
+                src={gallery[index]}
+                alt=""
+                initial={{ opacity: 0, scale: 1.02 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 1.02 }}
+                transition={{ duration: 0.6 }}
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            </AnimatePresence>
+          </div>
+
+        </div>
+      </div>
+
+      {/* ✅ Bottom border */}
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
+    </div>
+  );
+}

src/pages/home/HomeAurora.tsx

@@ -1,4 +1,4 @@
-import { H1, H5 } from "@/components/Texts"
+import { H1, H4, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
 export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
@@ -23,12 +23,15 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
             </div>
 
             <H1 className="mt-8">
-              The Sovereign Agentic Cloud
+              MYCELIUM
             </H1>
 
+            <H4 className="mt-8">
+              The Living Network of the Next Internet
+            </H4>
+
             <H5 className="mt-8 text-lg text-gray-600">
-              Host nodes, deploy workloads, or build private AI systems,
-              all on infrastructure you own and control.
+              A new internet is emerging — private, distributed, and self-sovereign. Mycelium is the living network that makes it possible. A peer-to-peer foundation where people, data, and intelligence connect directly — without intermediaries, without compromise.
             </H5>
 
             <div className="mt-10 flex items-center gap-x-6">

src/pages/home/HomeBlink.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Spotlight } from "@/components/ui/spotlight";
+import { GridBlink } from "@/components/ui/GridBlink";
+import { H1, H4, H5 } from "@/components/Texts";
+
+export function HomeBlink({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+  return (
+    <div className="px-4">
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden py-24 lg:py-32">
+
+        {/* ✅ Animated blinking grid */}
+        <GridBlink />
+
+        {/* ✅ Cyan Spotlight */}
+        <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" />
+
+        <div className="relative z-10 mx-auto w-full max-w-7xl p-4 md:pt-0">
+          <H1 className="text-black text-center font-bold">
+            MYCELIUM
+          </H1>
+          <H4 className="text-center mt-4">The Living Network of the Next Internet</H4>
+
+          <H5 className="mx-auto mt-6 max-w-4xl text-center font-normal text-neutral-500">
+            A new internet is emerging — private, distributed, and self-sovereign.
+            Mycelium is the living network that makes it possible.
+            A peer-to-peer foundation where people, data, and intelligence connect
+            directly — without intermediaries, without compromise.
+          </H5>
+
+          <div className="mt-8 flex justify-center gap-6">
+            <Button variant="solid" color="cyan" onClick={onGetStartedClick}>
+              Enter the Network
+            </Button>
+            <Button variant="outline" color="gray" onClick={onGetStartedClick}>
+              Explore Docs
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/home/HomeMap.tsx

@@ -0,0 +1,42 @@
+"use client";
+import WorldMap from "@/components/ui/world-map";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+export function HomeMap() {
+  return (
+    <div className="bg-[#121212] w-full">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="max-w-7xl mx-auto text-center py-12 border border-t-0 border-b-0 border-gray-800">
+        <Eyebrow>Mycelium Nodes</Eyebrow>
+        <H3 className="text-white">Host a Node, Grow the Network</H3>
+        <P className="text-sm md:text-lg text-gray-200 max-w-3xl mx-auto py-4">
+          Mycelium runs on real nodes — hosted by people, communities, and enterprises across the world.
+          Each one adds capacity, resilience, and sovereignty to the network — and earns rewards in return.
+        </P>
+        <p className="text-sm md:text-base text-gray-200 max-w-3xl mx-auto py-4">
+          Plug in once. It runs 24/7 — powering the network and earning autonomously.
+        </p>
+      </div>
+
+      {/* ✅ Match same side margins */}
+      <div className="max-w-7xl mx-auto px-6 border border-t-0 border-b-0 border-gray-800">
+        <WorldMap
+          dots={[
+            { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } }, // Alaska → LA
+            { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: -15.7975, lng: -47.8919 } }, // Alaska → Brasília
+            { start: { lat: -15.7975, lng: -47.8919 }, end: { lat: 38.7223, lng: -9.1393 } }, // Brasília → Lisbon
+            { start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 28.6139, lng: 77.209 } }, // London → New Delhi
+            { start: { lat: 28.6139, lng: 77.209 }, end: { lat: 43.1332, lng: 131.9113 } }, // New Delhi → Vladivostok
+            { start: { lat: 28.6139, lng: 77.209 }, end: { lat: -1.2921, lng: 36.8219 } }, // New Delhi → Nairobi
+          ]}
+        />
+      </div>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    </div>
+  );
+}

src/pages/home/HomePage.tsx

@@ -1,13 +1,13 @@
 
 import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { StackSectionDark } from './StackSectionDark'
-import { WorldMap } from './HomeGlobe'
 import { CallToAction } from './CallToAction'
-import { HomeHosting } from './HomeHosting'
-import { HomeAurora } from './HomeAurora'
 import { HomeTab } from './HomeTab'
-import { HomeBenefits } from './HomeBenefits'
+import { HomeWhy} from './HomeWhy'
+import { HomeMap } from './HomeMap' 
+import { HomeAudience } from './HomeAudience'
+import { HomeBlink } from './HomeBlink'
+
 
 
 export default function HomePage() {
@@ -19,26 +19,23 @@ export default function HomePage() {
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora onGetStartedClick={handleScrollToSlider} />
-      </AnimatedSection>
-
-      <AnimatedSection id="next-section">
-        <WorldMap />
+        <HomeBlink onGetStartedClick={handleScrollToSlider} />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHosting />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <StackSectionDark />
+        <HomeWhy />
       </AnimatedSection>
 
       <AnimatedSection>
         <HomeTab />
       </AnimatedSection>
+
       <AnimatedSection>
-        <HomeBenefits />
+        <HomeMap />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <HomeAudience />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/home/HomeSpotlight.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Spotlight } from "@/components/ui/spotlight";
+import { cn } from "@/lib/utils";
+import { H1, H4, H5 } from "@/components/Texts";
+
+export function HomeSpotlight({
+  onGetStartedClick,
+}: {
+  onGetStartedClick: () => void;
+}) {
+  return (
+    <div className="px-4">
+      {/* Boxed container */}
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden py-24 lg:py-32">
+
+        {/* ✅ Grid background */}
+        <div
+          className={cn(
+            "pointer-events-none absolute inset-0 select-none [background-size:40px_40px]",
+            "[background-image:linear-gradient(to_right,#f4f4f4_1px,transparent_1px),linear-gradient(to_bottom,#f4f4f4_1px,transparent_1px)]"
+          )}
+        />
+
+        {/* ✅ Cyan Spotlight */}
+        <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" />
+
+        {/* ✅ Foreground content */}
+        <div className="relative z-10 mx-auto w-full max-w-7xl p-4 md:pt-0">
+          <H1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-black bg-clip-text text-center font-bold text-transparent ">
+            MYCELIUM
+          </H1>
+          <H4 className="text-center mt-4">The Living Network of the Next Internet</H4>
+
+          <H5 className="mx-auto mt-6 max-w-4xl text-center font-normal text-neutral-500">
+            A new internet is emerging — private, distributed, and self-sovereign.
+            Mycelium is the living network that makes it possible.
+            A peer-to-peer foundation where people, data, and intelligence connect
+            directly — without intermediaries, without compromise.
+          </H5>
+
+          <div className="mt-8 flex justify-center gap-6">
+            <Button variant="solid" color="cyan" onClick={onGetStartedClick}>
+              Enter the Network
+            </Button>
+            <Button variant="outline" color="gray" onClick={onGetStartedClick}>
+              Explore Docs
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/home/HomeTab.tsx

@@ -89,10 +89,12 @@ export function HomeTab() {
       
       {/* ✅ Section with vertical borders */}
       <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-100">
-        <Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
-        <H3 className="mt-2">Mycelium Components</H3>
-        <P className="mt-6 max-w-lg">
-          Each component can be used on its own or combined into a fully sovereign cloud.
+        <Eyebrow className="pt-12 ">Components</Eyebrow>
+        <H3 className="mt-2">Explore the Stack</H3>
+        <P className="mt-6 max-w-4xl">
+         Mycelium unifies everything the next generation internet needs — communication, cloud, and intelligence — into one seamless, privacy-first network anyone can join.
+From encrypted peer-to-peer communication to decentralized cloud and sovereign AI — everything runs on one seamless system.
+
         </P>
 
         <div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">

src/pages/home/HomeWhy.tsx

@@ -0,0 +1,72 @@
+import {
+  GlobeAltIcon,
+  KeyIcon,
+  ServerStackIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
+import { DarkCard } from '@/components/ui/cards'
+
+const features = [
+  {
+    name: 'No central servers.',
+    description: 'Your devices form a distributed network, eliminating reliance on centralized data centers.',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'No data extraction.',
+    description: 'You own your data. Run services and AI models on your own devices, ensuring privacy and control.',
+    icon: KeyIcon,
+  },
+  {
+    name: 'No single point of control.',
+    description: 'A decentralized architecture means no single entity can dictate or censor your online experience.',
+    icon: ServerStackIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Create a secure, private network between your devices, accessible from anywhere.',
+    icon: ShieldCheckIcon,
+  },
+]
+
+export function HomeWhy() {
+  return (
+    <div className="relative bg-[#121212]">
+       {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className=" py-12  mx-auto bg-[#111111] max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8 border border-t-0 border-b-0 border-gray-800">
+        <Eyebrow>Why It Matters</Eyebrow>
+        <H3 className="mt-2 text-gray-200">Why Mycelium?</H3>
+        <P className="mx-auto mt-5 max-w-prose text-gray-400">
+          The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.
+
+        </P>
+        <div className="mt-16">
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <DarkCard className="flex h-full flex-col pt-8">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-md bg-cyan-600 hover:bg-cyan-500 p-2 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4 text-gray-200">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-2 text-gray-400">
+                    {feature.description}
+                  </CP>
+                </DarkCard>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+        {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    </div>
+  )
+}