feat(ui): add theme-aware gradient colors to magic card

- Integrate next-themes for dynamic color switching
- Add light/dark theme specific gradient colors
- Implement state management for theme-based color updates
- Use pink gradient for dark theme and blue gradient for light theme
- Improve visual consistency across different theme modes

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

@@ -2,9 +2,10 @@
 
 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"
+import { useTheme } from "next-themes"
 
 interface MagicCardProps {
 	children?: React.ReactNode
@@ -29,6 +30,7 @@ export function MagicCard({
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
 	
+
 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
 			if (cardRef.current) {
@@ -76,6 +78,21 @@ export function MagicCard({
 		mouseY.set(-gradientSize)
 	}, [gradientSize, mouseX, mouseY])
 
+	const { theme } = useTheme() // "light" | "dark"
+
+	const [fromColor, setFromColor] = useState(gradientFrom)
+	const [toColor, setToColor] = useState(gradientTo)
+
+	useEffect(() => {
+		if (theme === "dark") {
+			setFromColor("#ffb3c1")  // fallback for dark
+			setToColor("#ff75a0")
+		} else {
+			setFromColor("#1e9df1")  // fallback for light
+			setToColor("#8ed0f9")
+		}
+	}, [theme])
+
 	return (
 		<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
 			<motion.div
@@ -83,8 +100,8 @@ export function MagicCard({
 				style={{
 					background: useMotionTemplate`
           radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-          ${gradientFrom}, 
+          ${fromColor}, 
-          ${gradientTo}, 
+          ${toColor}, 
           var(--border) 100%
           )
           `,