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

package-lock.json

@@ -28,6 +28,7 @@
         "framer-motion": "^10.18.0",
         "lucide-react": "^0.544.0",
         "motion": "^12.23.24",
+        "next-themes": "^0.4.6",
         "popmotion": "^11.0.5",
         "react": "^18.3.1",
         "react-countup": "^6.5.3",
@@ -9417,6 +9418,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.26",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz",

package.json

@@ -30,6 +30,7 @@
     "framer-motion": "^10.18.0",
     "lucide-react": "^0.544.0",
     "motion": "^12.23.24",
+    "next-themes": "^0.4.6",
     "popmotion": "^11.0.5",
     "react": "^18.3.1",
     "react-countup": "^6.5.3",

src/App.css

@@ -14,6 +14,8 @@
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }

src/components/ui/GridBlink.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function GridBlink() {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const maxActive = 3; // ✅ limit active squares
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+
+    const squares = Array.from(svg.querySelectorAll<SVGRectElement>(".blink-square"));
+
+    function scheduleBlink() {
+      // ✅ only blink if we have too few active
+      const currentlyActive = squares.filter(sq => sq.classList.contains("active"));
+      if (currentlyActive.length < maxActive) {
+        const sq = squares[Math.floor(Math.random() * squares.length)];
+        sq.classList.add("active");
+
+        const duration = 800 + Math.random() * 1000; // ✅ slower fade-out
+        setTimeout(() => {
+          sq.classList.remove("active");
+        }, duration);
+      }
+
+      // ✅ slower scheduling
+      setTimeout(scheduleBlink, 300 + Math.random() * 600);
+    }
+
+    scheduleBlink();
+  }, []);
+
+  const rows = 20;
+  const cols = 32;
+  const size = 40;
+
+  return (
+    <svg
+      ref={svgRef}
+      className="pointer-events-none absolute inset-0 z-0"
+      style={{ width: "100%", height: "100%" }}
+    >
+      {Array.from({ length: rows * cols }).map((_, i) => {
+        const x = (i % cols) * size;
+        const y = Math.floor(i / cols) * size;
+        return (
+          <rect
+            key={i}
+            className="blink-square"
+            x={x}
+            y={y}
+            width={size}
+            height={size}
+            fill="transparent"
+            stroke="#efefef"
+            strokeWidth="1"
+          />
+        );
+      })}
+    </svg>
+  );
+}

src/components/ui/spotlight.tsx

@@ -0,0 +1,63 @@
+
+import { cn } from "@/lib/utils";
+
+type SpotlightProps = {
+  className?: string;
+  fill?: string;
+};
+
+export const Spotlight = ({ className, fill }: SpotlightProps) => {
+  return (
+    <svg
+      className={cn(
+        "animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-100 mix-blend-screen",
+        className
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 3787 2842"
+      fill="none"
+    >
+      <g filter="url(#filter)">
+        <ellipse
+          cx="1924.71"
+          cy="273.501"
+          rx="1924.71"
+          ry="273.501"
+          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+          fill={fill || "url(#spotlightGradient)"}
+          fillOpacity="1"
+        />
+      </g>
+
+      <defs>
+        {/* ✅ Cyan radial gradient */}
+        <radialGradient
+          id="spotlightGradient"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(2200 1600) rotate(90) scale(1800 2800)"
+        >
+          <stop offset="0%" stopColor="#00eaff" stopOpacity="0.95" />
+          <stop offset="40%" stopColor="#00eaff" stopOpacity="0.35" />
+          <stop offset="100%" stopColor="#00eaff" stopOpacity="0" />
+        </radialGradient>
+
+        <filter
+          id="filter"
+          x="0.860352"
+          y="0.838989"
+          width="3785.16"
+          height="2840.26"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur" />
+        </filter>
+      </defs>
+    </svg>
+  );
+};

src/components/ui/world-map.tsx

@@ -14,152 +14,111 @@ interface MapProps {
 
 export default function WorldMap({
   dots = [],
-  lineColor = "#06b6d4",
+  lineColor = "#06b6d4", // cyan-500
 }: MapProps) {
   const svgRef = useRef<SVGSVGElement>(null);
-  const map = new DottedMap({ height: 100, grid: "diagonal" });
 
+  //  ✅ Force dark-dotted map theme
+  const map = new DottedMap({ height: 100, grid: "diagonal" });
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: "#FFFFFF40", // Hardcoded for dark theme
+    color: "#06b6d480", // cyan-500 at 50% opacity
     shape: "circle",
-    backgroundColor: "black", // Hardcoded for dark theme
+    backgroundColor: "#111111",
   });
 
+  //  ✅ Point projection stays the same
   const projectPoint = (lat: number, lng: number) => {
     const x = (lng + 180) * (800 / 360);
     const y = (90 - lat) * (400 / 180);
     return { x, y };
   };
 
-  const createCurvedPath = (
+  const createCurvedPath = (start: any, end: any) => {
-    start: { x: number; y: number },
-    end: { x: number; y: number }
-  ) => {
     const midX = (start.x + end.x) / 2;
     const midY = Math.min(start.y, end.y) - 50;
     return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
   };
 
   return (
-    <div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg  relative font-sans">
+    <div className="w-full aspect-[2/1] bg-[#111111] rounded-lg relative font-sans">
       <img
         src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
-        className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
+        className="h-full w-full pointer-events-none select-none opacity-[0.6]"
         alt="world map"
-        height="495"
-        width="1056"
         draggable={false}
       />
+
+      {/* ✅ Lines + points */}
       <svg
         ref={svgRef}
         viewBox="0 0 800 400"
         className="w-full h-full absolute inset-0 pointer-events-none select-none"
       >
+        {/* ✅ animated curved travel lines */}
         {dots.map((dot, i) => {
           const startPoint = projectPoint(dot.start.lat, dot.start.lng);
           const endPoint = projectPoint(dot.end.lat, dot.end.lng);
+
           return (
-            <g key={`path-group-${i}`}>
             <motion.path
+              key={`path-${i}`}
               d={createCurvedPath(startPoint, endPoint)}
               fill="none"
               stroke="url(#path-gradient)"
               strokeWidth="1"
-                initial={{
+              initial={{ pathLength: 0 }}
-                  pathLength: 0,
+              animate={{ pathLength: 1 }}
-                }}
-                animate={{
-                  pathLength: 1,
-                }}
               transition={{
                 duration: 1,
                 delay: 0.5 * i,
                 ease: "easeOut",
               }}
-                key={`start-upper-${i}`}
+            />
-              ></motion.path>
-            </g>
           );
         })}
 
+        {/* ✅ glowing path gradient */}
         <defs>
           <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="white" stopOpacity="0" />
+            <stop offset="0%" stopColor="black" stopOpacity="0" />
             <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
             <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
-            <stop offset="100%" stopColor="white" stopOpacity="0" />
+            <stop offset="100%" stopColor="black" stopOpacity="0" />
           </linearGradient>
         </defs>
 
-        {dots.map((dot, i) => (
+        {/* ✅ start & end points with pulsing cyan glow */}
-          <g key={`points-group-${i}`}>
+        {dots.map((dot, i) => {
-            <g key={`start-${i}`}>
+          const s = projectPoint(dot.start.lat, dot.start.lng);
-              <circle
+          const e = projectPoint(dot.end.lat, dot.end.lng);
-                cx={projectPoint(dot.start.lat, dot.start.lng).x}
+
-                cy={projectPoint(dot.start.lat, dot.start.lng).y}
+          return (
-                r="2"
+            <g key={`points-${i}`}>
-                fill={lineColor}
+              {[s, e].map((p, idx) => (
-              />
+                <g key={idx}>
-              <circle
+                  <circle cx={p.x} cy={p.y} r="2" fill={lineColor} />
-                cx={projectPoint(dot.start.lat, dot.start.lng).x}
+                  <circle cx={p.x} cy={p.y} r="2" fill={lineColor} opacity="0.5">
-                cy={projectPoint(dot.start.lat, dot.start.lng).y}
-                r="2"
-                fill={lineColor}
-                opacity="0.5"
-              >
                     <animate
                       attributeName="r"
                       from="2"
-                  to="8"
+                      to="7"
-                  dur="1.5s"
+                      dur="1.4s"
-                  begin="0s"
                       repeatCount="indefinite"
                     />
                     <animate
                       attributeName="opacity"
-                  from="0.5"
+                      from="0.6"
                       to="0"
-                  dur="1.5s"
+                      dur="1.4s"
-                  begin="0s"
                       repeatCount="indefinite"
                     />
                   </circle>
                 </g>
-            <g key={`end-${i}`}>
-              <circle
-                cx={projectPoint(dot.end.lat, dot.end.lng).x}
-                cy={projectPoint(dot.end.lat, dot.end.lng).y}
-                r="2"
-                fill={lineColor}
-              />
-              <circle
-                cx={projectPoint(dot.end.lat, dot.end.lng).x}
-                cy={projectPoint(dot.end.lat, dot.end.lng).y}
-                r="2"
-                fill={lineColor}
-                opacity="0.5"
-              >
-                <animate
-                  attributeName="r"
-                  from="2"
-                  to="8"
-                  dur="1.5s"
-                  begin="0s"
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="opacity"
-                  from="0.5"
-                  to="0"
-                  dur="1.5s"
-                  begin="0s"
-                  repeatCount="indefinite"
-                />
-              </circle>
-            </g>
-          </g>
               ))}
+            </g>
+          );
+        })}
       </svg>
     </div>
   );

src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from 'next-themes'
 import './styles/tailwind.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <App />
+    </ThemeProvider>
   </StrictMode>,
 )

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,
+              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.
-              all on infrastructure you own and control.
             </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} />
+        <HomeBlink onGetStartedClick={handleScrollToSlider} />
-      </AnimatedSection>
-
-      <AnimatedSection id="next-section">
-        <WorldMap />
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHosting />
+        <HomeWhy />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <StackSectionDark />
       </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>
+        <Eyebrow className="pt-12 ">Components</Eyebrow>
-        <H3 className="mt-2">Mycelium Components</H3>
+        <H3 className="mt-2">Explore the Stack</H3>
-        <P className="mt-6 max-w-lg">
+        <P className="mt-6 max-w-4xl">
-          Each component can be used on its own or combined into a fully sovereign cloud.
+         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>
+  )
+}

src/styles/tailwind.css

@@ -221,3 +221,10 @@
     @apply bg-background text-foreground;
   }
 }
+
+.blink-square.active {
+  fill: #79f4ff;
+  opacity: 0.15;
+  filter: drop-shadow(0 0 6px #90f6ff);
+  transition: opacity 1s ease-out;
+}

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",