feat: add mobile-friendly cube descriptions with click interaction

src/components/ui/Cube.tsx

@@ -11,6 +11,7 @@ interface CubeProps {
   index: number;
   onHover: () => void;
   onLeave: () => void;
+  onClick: () => void;
 }
 
 const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
@@ -42,13 +43,14 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
   </svg>
 );
 
-export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) {
+export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
         className="relative cursor-pointer"
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
+        onClick={onClick}
         style={{
           zIndex: 10 - index,
         }}
@@ -123,25 +125,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
         )}
 
         {/* Description for Mobile - Below cube */}
-        {isActive && (
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 10 }}
-            transition={{ duration: 0.3 }}
-            className="lg:hidden absolute top-full left-1/2 -translate-x-1/2 mt-8 z-50"
-          >
-            <div className="w-64 sm:w-80 px-4">
-              <h4 className="text-white text-base font-semibold mb-2 text-center">
-                {descriptionTitle}
-              </h4>
-              <p className="text-white text-sm leading-relaxed font-light text-center">
-                {description}
-              </p>
-            </div>
-          </motion.div>
-        )}
-      </motion.div>
+              </motion.div>
     </div>
   );
 }