feat: add mobile-friendly cube descriptions with click interaction

src/components/ui/StackedCubes.tsx

@@ -33,14 +33,22 @@ const stackData = [
 
 export function StackedCubes() {
   const [active, setActive] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>(null);
+
+  const handleCubeClick = (id: string) => {
+    setSelectedForMobile(prev => (prev === id ? null : id));
+  };
+
+  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
 
   return (
+    <div className="flex flex-col items-center">
     <div 
-      className="relative w-full flex items-center justify-center lg:justify-start min-h-[400px] sm:min-h-[500px] lg:min-h-[400px]"
+      className="relative w-full flex items-center justify-center lg:justify-start min-h-[300px] sm:min-h-[400px] lg:min-h-[400px]"
       onMouseLeave={() => setActive("agent")}
     >
       <motion.div
-        className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
+        className="relative ml-0 sm:ml-4 lg:ml-8 h-[300px] sm:h-[400px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
         animate={{ y: ["-8px", "8px"] }}
         transition={{
           duration: 4,
@@ -54,7 +62,7 @@ export function StackedCubes() {
             key={layer.id}
             className="absolute"
             style={{
-              top: `${index * 140}px`,
+              top: `calc(${index * 30}% - ${index * 10}px)`,
               zIndex: active === layer.id ? 20 : 10 - index,
             }}
           >
@@ -66,10 +74,22 @@ export function StackedCubes() {
               index={index}
               onHover={() => setActive(layer.id)}
               onLeave={() => {}}
+              onClick={() => handleCubeClick(layer.id)}
             />
           </div>
         ))}
       </motion.div>
     </div>
+    {selectedMobileLayer && (
+      <div className="lg:hidden w-full max-w-md p-6 mt-8 bg-gray-800/50 rounded-lg">
+        <h4 className="text-white text-lg font-semibold mb-2 text-center">
+          {selectedMobileLayer.descriptionTitle}
+        </h4>
+        <p className="text-gray-300 text-sm leading-relaxed text-center">
+          {selectedMobileLayer.description}
+        </p>
+      </div>
+    )}
+    </div>
   );
 }