Upload components/ToolCard.js with huggingface_hub

components/ToolCard.js

@@ -0,0 +1,18 @@
+export default function ToolCard({ tool, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      className={`p-6 rounded-lg shadow-md cursor-pointer transition-all hover:shadow-lg ${tool.color}`}
+    >
+      <div className="flex items-center space-x-4">
+        <div className={`p-3 rounded-full ${tool.color.replace('text', 'bg').replace('600', '500/20')}`}>
+          {tool.icon}
+        </div>
+        <h3 className="text-lg font-semibold">{tool.name}</h3>
+      </div>
+      <p className="mt-2 text-sm text-gray-600">
+        {tool.description || 'AI-powered tool to enhance your productivity'}
+      </p>
+    </div>
+  )
+}