fix(web): update hover text color in IconCard and improve MagicCard mouse event handling

web/src/app/icons/components/icon-search.tsx

@@ -551,7 +551,7 @@ function IconCard({
 						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
 					/>
 				</div>
-				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
+				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
 					{name.replace(/-/g, " ")}
 				</span>
 			</Link>

web/src/components/magicui/magic-card.tsx

@@ -2,7 +2,7 @@
 
 import { motion, useMotionTemplate, useMotionValue } from "motion/react"
 import type React from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -28,6 +28,7 @@ export function MagicCard({
 	const cardRef = useRef<HTMLDivElement>(null)
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
+	const [isMounted, setIsMounted] = useState(false)
 
 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
@@ -60,6 +61,14 @@ export function MagicCard({
 	}, [handleMouseMove, mouseX, gradientSize, mouseY])
 
 	useEffect(() => {
+		setIsMounted(true)
+		mouseX.set(-gradientSize)
+		mouseY.set(-gradientSize)
+	}, [gradientSize, mouseX, mouseY])
+
+	useEffect(() => {
+		if (!isMounted) return
+
 		document.addEventListener("mousemove", handleMouseMove)
 		document.addEventListener("mouseout", handleMouseOut)
 		document.addEventListener("mouseenter", handleMouseEnter)
@@ -69,22 +78,17 @@ export function MagicCard({
 			document.removeEventListener("mouseout", handleMouseOut)
 			document.removeEventListener("mouseenter", handleMouseEnter)
 		}
-	}, [handleMouseEnter, handleMouseMove, handleMouseOut])
+	}, [isMounted, handleMouseEnter, handleMouseMove, handleMouseOut])
-
-	useEffect(() => {
-		mouseX.set(-gradientSize)
-		mouseY.set(-gradientSize)
-	}, [gradientSize, mouseX, mouseY])
 
 	return (
-		<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
+		<div className={cn("group relative rounded-[inherit]", className)}>
 			<motion.div
 				className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
 				style={{
 					background: useMotionTemplate`
           radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-          ${gradientFrom}, 
+          ${gradientFrom},
-          ${gradientTo}, 
+          ${gradientTo},
           var(--border) 100%
           )
           `,
@@ -100,7 +104,7 @@ export function MagicCard({
 					opacity: gradientOpacity,
 				}}
 			/>
-			<div className="relative">{children}</div>
+			<div ref={cardRef} className="relative">{children}</div>
 		</div>
 	)
 }