improve home page

ui/src/components/AgentCard.tsx

@@ -0,0 +1,36 @@
+export type AgentOverviewCardProps = {
+    title: string;
+    icon: {
+        ref: React.ReactNode;
+        color: string;
+        bgColor: string;
+    };
+};
+
+export function AgentOverviewCard({
+    props,
+}: {
+    props: AgentOverviewCardProps;
+}) {
+    return (
+        <div className="bg-[#111111] border border-[#262626] rounded-lg p-6">
+            <div className="flex items-center justify-between">
+                <div>
+                    <p className="text-sm text-gray-400 uppercase tracking-wider">
+                        {props.title}
+                    </p>
+                    <p className="text-2xl font-bold text-white">0</p>
+                </div>
+                <div
+                    className="w-12 h-12 rounded-lg flex items-center justify-center"
+                    style={{
+                        color: props.icon.color,
+                        backgroundColor: props.icon.bgColor,
+                    }}
+                >
+                    {props.icon.ref}
+                </div>
+            </div>
+        </div>
+    );
+}