Make media outlets clickable to view their detailed pages

Update MainContent.tsx to wrap media outlet cards in a Link component from 'wouter', directing users to a new page based on the outlet's slug.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/6XTzcDL

client/src/components/MainContent.tsx

@@ -6,6 +6,7 @@ import { useAuth } from "@/hooks/useAuth";
 import Footer from "@/components/Footer";
 import { useState } from "react";
 import { ArrowUpDown } from "lucide-react";
+import { Link } from "wouter";
 
 const categories = [
   { id: "people", name: "People", key: "People" },
@@ -47,8 +48,8 @@ export default function MainContent() {
   };
 
   const renderOutletCard = (outlet: MediaOutlet) => (
+    <Link key={outlet.id} href={`/media/${outlet.slug}`} data-testid={`link-outlet-${outlet.id}`}>
       <Card 
-      key={outlet.id} 
         className="hover:shadow-md transition-shadow cursor-pointer bg-white"
         data-testid={`card-outlet-${outlet.id}`}
       >
@@ -81,6 +82,7 @@ export default function MainContent() {
           </div>
         </CardContent>
       </Card>
+    </Link>
   );
 
   return (