From 3e0431a6bd583ba4c9cea3647a668b4b99d2b1e7 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 15 Oct 2025 07:45:54 +0000
Subject: [PATCH] Enable navigation to home page via footer logo and filter
 media outlets by category

Update Footer component to navigate to home page on logo click. Modify MainContent to filter and display media outlets by "People", "Topics", and "Companies" categories, with a two-column layout. Adjust MediaOutlet page to display articles in a two-column layout when not in grid view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/IfFFLfD
---
 client/src/components/Footer.tsx      |  6 ++++-
 client/src/components/MainContent.tsx | 34 ++++++++++++++++++++++++---
 client/src/pages/MediaOutlet.tsx      |  4 ++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 7c54cd7..0297b52 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -1,6 +1,9 @@
 import logoWhite from "@assets/logo_white_1759167910147.png";
+import { useLocation } from "wouter";
 
 export default function Footer() {
+  const [, setLocation] = useLocation();
+  
   return (
     <footer className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 z-40">
         <div className="max-w-7xl mx-auto px-4 py-4">
@@ -10,8 +13,9 @@ export default function Footer() {
               <img 
                 src={logoWhite} 
                 alt="SAPIENS" 
-                className="h-5"
+                className="h-5 cursor-pointer hover:opacity-80 transition-opacity"
                 data-testid="footer-logo"
+                onClick={() => setLocation("/")}
               />
             </div>
             <div className="flex items-center">
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index aa0179b..ec8715b 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -20,6 +20,7 @@ export default function MainContent() {
   const { user } = useAuth();
   const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
   const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
     queryKey: ["/api/media-outlets"],
@@ -170,11 +171,32 @@ export default function MainContent() {
               </div>
             ))}
           </div>
+        ) : selectedCategory ? (
+          <div>
+            <div className="flex items-center mb-4">
+              <h2 className="text-2xl font-bold text-gray-900 cursor-pointer hover:text-blue-600">
+                {selectedCategory} 
+                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory(selectedCategory).length})</span>
+              </h2>
+              <button 
+                onClick={() => setSelectedCategory(null)}
+                className="ml-4 text-sm text-blue-600 hover:text-blue-800"
+              >
+                View All Categories
+              </button>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {getOutletsByCategory(selectedCategory).map(renderOutletCard)}
+            </div>
+          </div>
         ) : (
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* People Section */}
             <div data-testid="section-people">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("People")}
+              >
                 People 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
               </h2>
@@ -185,7 +207,10 @@ export default function MainContent() {
 
             {/* Topics Section */}
             <div data-testid="section-topics">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("Topics")}
+              >
                 Topics 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
               </h2>
@@ -196,7 +221,10 @@ export default function MainContent() {
 
             {/* Companies Section */}
             <div data-testid="section-companies">
-              <h2 className="text-xl font-bold text-gray-900 mb-2">
+              <h2 
+                className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
+                onClick={() => setSelectedCategory("Companies")}
+              >
                 Companies 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
               </h2>
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 7bc977f..96420c9 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -343,7 +343,7 @@ export default function MediaOutlet() {
           </div>
 
           {articlesLoading ? (
-            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}>
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse">
                   <div className="h-40 bg-gray-200 rounded mb-4"></div>
@@ -353,7 +353,7 @@ export default function MediaOutlet() {
               ))}
             </div>
           ) : articles.length > 0 ? (
-            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 md:grid-cols-2"}`}>
               {articles.map((article) => (
                 <ArticleCard 
                   key={article.id}