feat: add UI components for card stack, world map and evervault card with theme support

src/pages/home/HomeAurora.tsx

@@ -16,7 +16,7 @@ export function HomeAurora() {
           duration: 1,
           ease: "easeInOut",
         }}
-        className="relative mb-20 -top-5 flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
+        className="relative mb-20  flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
       >
         <div className="text-center text-gray-800">
           <H1>Decentralized Autonomous <span className="font-neuton text-bold lg:text-8xl italic">Agentic Cloud.</span></H1>

src/pages/home/HomeFeatures.tsx

@@ -0,0 +1,56 @@
+import { InboxIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
+import { H2, P } from '@/components/Texts'
+import { CardStack } from '@/components/ui/card-stack'
+
+const features = [
+  {
+    name: 'Network Layer',
+    description:
+      "A global, end-to-end encrypted overlay that simply doesn't break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.",
+    href: '#',
+    icon: UsersIcon,
+  },
+  {
+    name: 'Cloud Layer',
+    description:
+      'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
+    href: '#',
+    icon: TrashIcon,
+  },
+  {
+    name: 'Agent Layer',
+    description:
+      'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
+    href: '#',
+    icon: InboxIcon,
+  },
+]
+
+export function HomeFeatures() {
+  const cards = features.map((feature, index) => ({
+    id: index,
+    name: feature.name,
+    description: feature.description,
+    icon: <feature.icon aria-hidden="true" className="size-6 text-white" />,
+  }));
+
+  return (
+    <div className="bg-white py-24">
+      <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 Mycelium <span className="font-neuton font-bold italic">Stack</span>
+          </H2>
+          <P className="mt-6 ">
+            Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+          </P>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-32 lg:max-w-7xl">
+          <div className="flex items-center justify-center w-full">
+            <CardStack items={cards} offset={80} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeMap.tsx

@@ -0,0 +1,69 @@
+"use client";
+import WorldMap from "@/components/ui/world-map";
+import { motion } from "motion/react";
+import { H2, P } from "@/components/Texts";
+
+export function HomeMapSection() {
+  return (
+    <div className=" py-24 dark:bg-black bg-white w-full">
+      <div className="max-w-7xl mx-auto text-center">
+        <H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
+          Mycelium Network is{" "}
+          <span className="text-black font-neuton text-bold italic">
+            {"Live.".split("").map((word, idx) => (
+              <motion.span
+                key={idx}
+                className="inline-block"
+                initial={{ x: -10, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                transition={{ duration: 0.5, delay: idx * 0.04 }}
+              >
+                {word}
+              </motion.span>
+            ))}
+          </span>
+        </H2>
+        <P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
+          Mycelium Network's advancement technology enables anyone to deploy
+            their own Internet infrastructure, anywhere.
+        </P>
+      </div>
+      <div className="max-w-5xl mx-auto">
+        <WorldMap
+        dots={[
+          {
+            start: {
+              lat: 64.2008,
+              lng: -149.4937,
+            }, // Alaska (Fairbanks)
+            end: {
+              lat: 34.0522,
+              lng: -118.2437,
+            }, // Los Angeles
+          },
+          {
+            start: { lat: 64.2008, lng: -149.4937 }, // Alaska (Fairbanks)
+            end: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
+          },
+          {
+            start: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
+            end: { lat: 38.7223, lng: -9.1393 }, // Lisbon
+          },
+          {
+            start: { lat: 51.5074, lng: -0.1278 }, // London
+            end: { lat: 28.6139, lng: 77.209 }, // New Delhi
+          },
+          {
+            start: { lat: 28.6139, lng: 77.209 }, // New Delhi
+            end: { lat: 43.1332, lng: 131.9113 }, // Vladivostok
+          },
+          {
+            start: { lat: 28.6139, lng: 77.209 }, // New Delhi
+            end: { lat: -1.2921, lng: 36.8219 }, // Nairobi
+          },
+        ]}
+      />
+      </div>
+    </div>
+  );
+}

src/pages/home/HomePage.tsx

@@ -5,6 +5,8 @@ import { StackSection } from './StackSection'
 import { HomeHeroLight2 } from './HomeHeroLight2'
 import { HomeHeroDark } from './HomeHeroDark'
 import { HomeAurora } from './HomeAurora'
+import { HomeMapSection } from './HomeMap'
+import { HomeFeatures } from './HomeFeatures'
 
 export default function HomePage() {
   return (
@@ -14,7 +16,11 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
-        <WorldMapSection />
+        <HomeFeatures />
+      </AnimatedSection>
+
+      <AnimatedSection >
+        <HomeMapSection />
       </AnimatedSection>
 
       <AnimatedSection>