Initial commit: Developer Tools MVP with visual editor

- Complete React app with 7 developer tools
- JSON Tool with visual structured editor
- Serialize Tool with visual structured editor
- URL, Base64, CSV/JSON, Beautifier, Diff tools
- Responsive navigation with dropdown menu
- Dark/light mode toggle
- Mobile-responsive design with sticky header
- All tools working with copy/paste functionality

src/components/ToolCard.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+
+const ToolCard = ({ icon: Icon, title, description, path, tags }) => {
+  return (
+    <Link to={path} className="block">
+      <div className="tool-card group cursor-pointer">
+        <div className="flex items-start space-x-4">
+          <div className="flex-shrink-0">
+            <Icon className="h-8 w-8 text-primary-600" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-primary-600 transition-colors">
+              {title}
+            </h3>
+            <p className="text-gray-600 dark:text-gray-300 mt-1">
+              {description}
+            </p>
+            {tags && (
+              <div className="flex flex-wrap gap-2 mt-3">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="flex-shrink-0">
+            <ArrowRight className="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors" />
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ToolCard;