ok

src/components/ui/StackedCubes.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Cube } from "@/components/ui/Cube";
+
+const stackData = [
+  {
+    id: "agent",
+    title: "Agent Layer",
+    descriptionTitle: "Personal Agents - Secure & Sovereign",
+    description:
+      "Personal AI agents operate as secure digital twins, providing tailored intelligent assistance. They interact with existing chat, MCP agents, and coding tools while maintaining sovereignty and ecosystem compatibility.",
+    position: "top",
+  },
+  {
+    id: "ai",
+    title: "AI Layer",
+    descriptionTitle: "AI Agents & AI Brains + Mycelium Code & Compute Sandboxes",
+    description:
+      "Intelligence core combining LLMs with specialized AI agents. Mycelium-powered sandboxes provide secure environments for development, testing, and compilation with active memory systems and unbreakable network architecture.",
+    position: "middle",
+  },
+  {
+    id: "cloud",
+    title: "Cloud Layer",
+    descriptionTitle: "Mycelium Compute & Storage - Decentralized Infrastructure Layer",
+    description:
+      "Foundation runs bare metal Zero OS enabling autonomous cloud. Decentralized infrastructure supports Web2, Web3, AI workloads with superior scalability. Built on twenty years cloud experience.",
+    position: "bottom",
+  },
+];
+
+export function StackedCubes() {
+  const [active, setActive] = useState<string | null>("agent");
+
+  return (
+    <div 
+      className="relative w-full flex items-center justify-center lg:justify-start min-h-[600px] sm:min-h-[700px] lg:min-h-[600px]"
+      onMouseLeave={() => setActive("agent")}
+    >
+      <motion.div
+        className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
+        animate={{ y: ["-8px", "8px"] }}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+      >
+        {stackData.map((layer, index) => (
+          <div
+            key={layer.id}
+            className="absolute"
+            style={{
+              top: `${index * 100}px`,
+              zIndex: active === layer.id ? 20 : 10 - index,
+            }}
+          >
+            <Cube
+              title={layer.title}
+              descriptionTitle={layer.descriptionTitle}
+              description={layer.description}
+              isActive={active === layer.id}
+              index={index}
+              onHover={() => setActive(layer.id)}
+              onLeave={() => {}}
+            />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}