feat: enhance UI with glowing effects and visual improvements

- Added new MagicCard component for interactive hover effects with gradient lighting
- Enhanced CubeLight component with cyan glow effects and improved visual styling
- Added new GlowingEffect component for dynamic lighting animations
- Updated StackedCubesLight with ambient gradient background and smoother transitions
- Added tracking-wide property to CP text component for better readability
- Added new networkhero.png image asset

src/components/ui/CubeLight.tsx

@@ -26,8 +26,11 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
     <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"
+      stroke="rgba(0,255,255,0.25)"
+      strokeWidth="0.5"
     />
     <defs>
+      {/* Cyan-white soft gradient */}
       <linearGradient
         id={`cube-gradient-${index}`}
         x1="185.298"
@@ -36,14 +39,24 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
         y2="206.448"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#E5E7EB" />
-        <stop offset="1" stopColor="#9CA3AF" />
+        <stop offset="0%" stopColor="#DFFFFF" stopOpacity="0.75" />
+        <stop offset="40%" stopColor="#A5F4FF" stopOpacity="0.8" />
+        <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.9" />
       </linearGradient>
     </defs>
   </svg>
 );
 
-export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
+export function CubeLight({
+  title,
+  descriptionTitle,
+  description,
+  isActive,
+  index,
+  onHover,
+  onLeave,
+  onClick,
+}: CubeProps) {
   return (
     <div className="relative flex flex-col items-center">
       <motion.div
@@ -62,22 +75,34 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
           ease: "easeOut",
         }}
       >
+        {/* Glow aura behind cube */}
+        <div
+          className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
+            isActive
+              ? "bg-cyan-400/40 opacity-70"
+              : "bg-cyan-200/20 opacity-40"
+          }`}
+        />
+
         {/* SVG Cube */}
-        <CubeSvg 
+        <CubeSvg
           index={index}
-          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
+          className="w-48 sm:w-64 lg:w-80 h-auto relative"
           style={{
-            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
+            filter: isActive
+              ? "drop-shadow(0 0 25px rgba(0,255,255,0.4)) brightness(1.1)"
+              : "drop-shadow(0 0 10px rgba(0,255,255,0.15)) brightness(1)",
+            transition: "all 0.4s ease",
           }}
         />
-        
+
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
-          <h3 
-            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
-            style={{ 
-              transform: 'rotate(0deg) skewX(0deg)',
-              transformOrigin: 'center'
+          <h3
+            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
+            style={{
+              textShadow:
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(0,255,255,0.5)",
             }}
           >
             {title}
@@ -106,26 +131,24 @@ export function CubeLight({ title, descriptionTitle, description, isActive, inde
                 y1="1"
                 x2="120"
                 y2="1"
-                stroke="black"
+                stroke="rgba(0,255,255,0.6)"
                 strokeWidth="1"
-                opacity="0.6"
+                opacity="0.8"
               />
             </svg>
-            
+
             {/* Description text */}
             <div className="ml-32 w-80">
-              <h4 className="text-black text-base font-semibold mb-2">
+              <h4 className="text-black text-base font-semibold mb-2 drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
                 {descriptionTitle}
               </h4>
-              <p className="text-gray-800 text-sm leading-relaxed font-light">
+              <p className="text-gray-800 text-sm leading-relaxed font-light drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
                 {description}
               </p>
             </div>
           </motion.div>
         )}
-
-        {/* Description for Mobile - Below cube */}
-              </motion.div>
+      </motion.div>
     </div>
   );
 }