Improve card design and layout

- Made cards moderately sized with better spacing
- Added inline icons next to card titles
- Removed badges (New, Popular, tags)
- Fixed unused import warning
- Adjusted grid to be responsive (2-3-4 columns)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: devinschumacher

app/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Navbar } from "@/components/Navbar";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { 
@@ -304,18 +304,27 @@ export default function HomePage() {
           </div>
 
           {/* Tools Grid */}
-          <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {filteredTools.map((tool) => (
-              <Link key={tool.id} href={tool.href}>
-                <Card className="group h-full transition-all hover:shadow-lg hover:-translate-y-1">
-                  <CardHeader>
-                    <CardTitle className="text-lg group-hover:text-blue-600">
-                      {tool.name}
-                    </CardTitle>
-                  </CardHeader>
-                </Card>
-              </Link>
-            ))}
+          <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {filteredTools.map((tool) => {
+              const Icon = tool.icon;
+              return (
+                <Link key={tool.id} href={tool.href}>
+                  <Card className="group h-full transition-all hover:shadow-lg hover:-translate-y-1 cursor-pointer">
+                    <CardHeader>
+                      <div className="flex items-start gap-3 mb-2">
+                        <Icon className="h-6 w-6 text-primary mt-0.5" />
+                        <CardTitle className="text-lg group-hover:text-primary transition-colors">
+                          {tool.name}
+                        </CardTitle>
+                      </div>
+                      <CardDescription className="line-clamp-2">
+                        {tool.description}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                </Link>
+              );
+            })}
           </div>
 
           {filteredTools.length === 0 && (

components/ui/card.tsx

@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-2 p-8", className)}
     {...props}
   />
 ))
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "text-2xl font-bold leading-none tracking-tight",
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-base text-muted-foreground", className)}
     {...props}
   />
 ))
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-8 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -70,7 +70,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-8 pt-0", className)}
     {...props}
   />
 ))