Design Finish Stage 1

1. Finish 3 pages design

src/components/MultiRingCircularProgress.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { PieChart, Pie, Cell } from "recharts";
+
+interface Ring {
+  color: string;
+  value: number;
+}
+
+interface Card {
+  percent: number;
+  rings: Ring[];
+}
+
+interface MultiRingCircularProgressProps {
+  card: Card;
+}
+
+export default function MultiRingCircularProgress({ card }: 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
+  }));
+
+  return (
+    <div className="flex items-center justify-center pointer-events-none hover:scale-115 transition-all duration-300">
+      <PieChart width={400} height={400}>
+        {ringData.map((ring, index) => (
+          <Pie
+            key={index}
+            data={[{ value: ring.value }, { value: 100 - ring.value }]}
+            dataKey="value"
+            startAngle={90}
+            endAngle={-270}
+            cornerRadius={50}
+            cx="50%"
+            cy="50%"
+            innerRadius={ring.innerRadius}
+            outerRadius={ring.outerRadius}
+            paddingAngle={0}
+            isAnimationActive={false}
+          >
+            <Cell fill={ring.color} />
+            <Cell fill="#f2f3f5" />
+          </Pie>
+        ))}
+        <text
+          x={200}
+          y={204}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: "1.3rem", fontWeight: "bold" }}
+        >
+          {percent}%
+        </text>
+      </PieChart>
+    </div>
+  );
+}