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

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