Updated the design step 1 is finsih now I'll check it with mohammed

src/components/MultiRingCircularProgress.tsx

@@ -13,20 +13,33 @@ interface Card {
 
 interface MultiRingCircularProgressProps {
   card: Card;
+  hoveredIndex: number | null;
+  onHover: (index: number | null) => void;
+  cardId: string;
 }
 
-export default function MultiRingCircularProgress({ card }: MultiRingCircularProgressProps) {
+export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) {
   const { percent, rings } = card;
-  
+
   // Create ring data with proper outer and inner radius calculations
   const ringData = rings.map((ring, index) => ({
     ...ring,
-    outerRadius: 120 - (index * 18), // Decrease by 18px for each ring
-    innerRadius: 105 - (index * 18), // Decrease by 18px for each ring
+    outerRadius: 125 - (index * 20), // Decrease by 20px for each ring
+    innerRadius: 110 - (index * 20), // Decrease by 20px for each ring
   }));
 
+  // When a ring is hovered, other rings become gray
+  const getHoverColor = (ring: Ring, index: number) => {
+    if (hoveredIndex === null) return ring.color;
+    if (hoveredIndex === index) return ring.color;
+    return "#d3d3d3"; // gray for non-hovered rings
+  };
+
   return (
-    <div className="flex items-center justify-center pointer-events-none hover:scale-115 transition-all duration-300">
+    <div 
+      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer"
+      onMouseLeave={() => onHover(null)}
+    >
       <PieChart width={400} height={400}>
         {ringData.map((ring, index) => (
           <Pie
@@ -41,9 +54,15 @@ export default function MultiRingCircularProgress({ card }: MultiRingCircularPro
             innerRadius={ring.innerRadius}
             outerRadius={ring.outerRadius}
             paddingAngle={0}
-            isAnimationActive={false}
+            isAnimationActive={true}
+            scale={1.5}
+            onMouseEnter={() => onHover(index)}
+            onMouseLeave={() => onHover(null)}
+            fill={getHoverColor(ring, index)}
           >
-            <Cell fill={ring.color} />
+            <Cell
+              fill={getHoverColor(ring, index)}
+            />
             <Cell fill="#f2f3f5" />
           </Pie>
         ))}