ok

src/components/ui/Cube.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import { CT, CP } from '@/components/Texts';
 
 interface CubeProps {
   title: string;
@@ -19,7 +20,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
-        className="relative cursor-pointer"
+        className="relative cursor-pointer pointer-events-none"
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
         style={{
@@ -39,7 +40,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
           alt="Cube"
           width={507}
           height={234}
-          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg"
+          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))'
@@ -49,15 +50,9 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
         
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <h3 
-            className="text-[#2F3178] text-sm lg:text-base font-semibold text-center px-4 drop-shadow-lg"
-            style={{ 
-              transform: 'rotate(0deg) skewX(0deg)',
-              transformOrigin: 'center'
-            }}
-          >
+          <CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
             {title}
-          </h3>
+          </CT>
         </div>
 
         {/* Description with arrow line - Desktop */}
@@ -93,9 +88,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2">
                 {descriptionTitle}
               </h4>
-              <p className="text-sm leading-relaxed font-light">
-                {description}
-              </p>
+              <CP>{description}</CP>
             </div>
           </motion.div>
         )}
@@ -113,9 +106,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2 text-center">
                 {descriptionTitle}
               </h4>
-              <p className="text-sm leading-relaxed font-light text-center">
-                {description}
-              </p>
+              <CP className="text-center">{description}</CP>
             </div>
           </motion.div>
         )}