dd stacks

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 */}
-        <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"
+        {/* SVG Cube */}
+        <CubeSvg 
+          index={index}
+          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-50"
           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))',
+            filter: isActive ? 'brightness(1.2) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))' : 'brightness(0.9)',
           }}
         />
         
         {/* 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]">
-              <h4 className="text-base font-semibold mb-2">
+            <div className="ml-32 w-80">
+              <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]">
-              <h4 className="text-base font-semibold mb-2 text-center">
+            <div className="w-64 sm:w-80 px-4">
+              <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>
         )}