dd stacks

src/components/Archives/Cubec.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { CT, CP } from '@/components/Texts';
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+}
+
+
+export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer pointer-events-none"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* Image Cube */}
+        <Image
+          src="/images/cube.png"
+          alt="Cube"
+          width={507}
+          height={234}
+          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg pointer-events-auto"
+          style={{
+            filter: isActive
+              ? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
+              : 'brightness(0.9) drop-shadow(0 10px 15px rgba(144, 137, 252, 0.2))',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
+            {title}
+          </CT>
+        </div>
+
+        {/* Description with arrow line - Desktop */}
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
+          >
+            {/* Arrow line */}
+            <svg
+              className="absolute left-0 top-1/2 -translate-y-1/2"
+              width="120"
+              height="2"
+              viewBox="0 0 120 2"
+              fill="none"
+            >
+              <line
+                x1="0"
+                y1="1"
+                x2="120"
+                y2="1"
+                stroke="currentColor"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <CP color="custom">{description}</CP>
+            </div>
+          </motion.div>
+        )}
+
+        {/* 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 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2 text-center">
+                {descriptionTitle}
+              </h4>
+              <CP className="text-center" color="custom">{description}</CP>
+            </div>
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+}

src/components/StackSection.tsx

@@ -44,7 +44,7 @@ export function StackSectionPreview() {
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
               transition={{ duration: 0.8, delay: 0.6 }}
             >
-              <P className="mx-auto mt-8 max-w-3xl" color="custom">
+              <P className="mx-auto mt-8 max-w-3xl" color="light">
                 Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
               </P>
             </motion.div>

src/components/ui/Cube.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 import { motion } from "framer-motion";
-import { CT, CP } from '@/components/Texts';
 
 interface CubeProps {
   title: string;
@@ -15,12 +13,40 @@ interface CubeProps {
   onLeave: () => void;
 }
 
+const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="507"
+    height="234"
+    fill="none"
+    viewBox="0 0 507 234"
+    {...props}
+  >
+    <path
+      fill={`url(#cube-gradient-${index})`}
+      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+    />
+    <defs>
+      <linearGradient
+        id={`cube-gradient-${index}`}
+        x1="185.298"
+        x2="185.298"
+        y1="-27.5515"
+        y2="206.448"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="1" stopColor="#3F3B3E" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
 
 export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) {
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
-        className="relative cursor-pointer pointer-events-none"
+        className="relative cursor-pointer"
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
         style={{
@@ -34,25 +60,26 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
           ease: "easeOut",
         }}
       >
-        {/* Image Cube */}
+        {/* SVG Cube */}
-        <Image
+        <CubeSvg 
-          src="/images/cube.png"
+          index={index}
-          alt="Cube"
+          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-50"
-          width={507}
-          height={234}
-          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg pointer-events-auto"
           style={{
-            filter: isActive
+            filter: isActive ? 'brightness(1.2) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))' : 'brightness(0.9)',
-              ? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
-              : 'brightness(0.9) drop-shadow(0 10px 15px rgba(144, 137, 252, 0.2))',
           }}
         />
         
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
+          <h3 
+            className="text-white text-sm lg:text-base font-medium text-center px-4 drop-shadow-lg"
+            style={{ 
+              transform: 'rotate(0deg) skewX(0deg)',
+              transformOrigin: 'center'
+            }}
+          >
             {title}
-          </CT>
+          </h3>
         </div>
 
         {/* Description with arrow line - Desktop */}
@@ -77,18 +104,20 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
                 y1="1"
                 x2="120"
                 y2="1"
-                stroke="currentColor"
+                stroke="white"
                 strokeWidth="1"
                 opacity="0.6"
               />
             </svg>
             
             {/* Description text */}
-            <div className="ml-32 w-80 text-[#2F3178]">
+            <div className="ml-32 w-80">
-              <h4 className="text-base font-semibold mb-2">
+              <h4 className="text-white text-base font-semibold mb-2">
                 {descriptionTitle}
               </h4>
-              <CP color="custom">{description}</CP>
+              <p className="text-white text-sm leading-relaxed font-light">
+                {description}
+              </p>
             </div>
           </motion.div>
         )}
@@ -102,11 +131,13 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
             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 text-[#2F3178]">
+            <div className="w-64 sm:w-80 px-4">
-              <h4 className="text-base font-semibold mb-2 text-center">
+              <h4 className="text-white text-base font-semibold mb-2 text-center">
                 {descriptionTitle}
               </h4>
-              <CP className="text-center" color="custom">{description}</CP>
+              <p className="text-white text-sm leading-relaxed font-light text-center">
+                {description}
+              </p>
             </div>
           </motion.div>
         )}

src/components/ui/StackedCubes.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { Cube } from "@/components/ui/Cube";
+import { Cube } from "@/components/ui/Cube"
 
 const stackData = [
   {