From 4a00fd5c1ba75a930d85c1a59fc942b95beabe86 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 17:39:02 +0000
Subject: [PATCH] Reduce spacing and padding across the platform's user
 interface

Adjusted various padding, margin, and spacing properties in Footer and MainContent components to minimize whitespace.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/LZrXNFV
---
 client/src/components/Footer.tsx      | 14 ++++-----
 client/src/components/MainContent.tsx | 42 +++++++++++++--------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index f6b6bcf..3d23b8c 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -3,10 +3,10 @@ import logoBlack from "@assets/logo_black_1759165229646.png";
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-50 border-t border-gray-200 mt-16">
-        <div className="max-w-7xl mx-auto px-6 py-8">
+    <footer className="bg-gray-50 border-t border-gray-200 mt-6">
+        <div className="max-w-7xl mx-auto px-4 py-4">
           {/* Logo and Social Icons */}
-          <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-between mb-3">
             <div className="flex items-center">
               <img 
                 src={logoBlack} 
@@ -15,18 +15,18 @@ export default function Footer() {
                 data-testid="footer-logo"
               />
             </div>
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
               <Facebook className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-facebook" />
               <X className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-x" />
             </div>
           </div>
 
           {/* Copyright and Links */}
-          <div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-6 border-t border-gray-200">
-            <p className="text-xs text-gray-600 mb-4 md:mb-0" data-testid="copyright-text">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-3 border-t border-gray-200">
+            <p className="text-xs text-gray-600 mb-2 md:mb-0" data-testid="copyright-text">
               © 2007-2025 - SAPIENS Media Limited. All Rights Reserved.
             </p>
-            <div className="flex space-x-6">
+            <div className="flex space-x-3">
               <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-terms">Terms And Conditions</a>
               <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-privacy">Privacy Policy</a>
               <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-risk">Risk Warning</a>
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index ff66bbf..f13dfb7 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -39,9 +39,9 @@ export default function MainContent() {
       className="hover:shadow-md transition-shadow cursor-pointer bg-white"
       data-testid={`card-outlet-${outlet.id}`}
     >
-      <CardContent className="p-4">
-        <div className="flex items-center space-x-3">
-          <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
+      <CardContent className="p-2">
+        <div className="flex items-center space-x-2">
+          <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
             {outlet.imageUrl ? (
               <img 
                 src={outlet.imageUrl} 
@@ -49,7 +49,7 @@ export default function MainContent() {
                 className="w-full h-full object-cover"
               />
             ) : (
-              <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
+              <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
                 <span className="text-gray-600 text-sm font-medium">
                   {outlet.name.charAt(0)}
                 </span>
@@ -73,18 +73,18 @@ export default function MainContent() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-6 py-8">
+      <div className="max-w-7xl mx-auto px-4 py-4">
         {isLoading ? (
-          <div className="space-y-12">
+          <div className="space-y-6">
             {categories.map((category) => (
               <div key={category.id}>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">{category.name}</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                <h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
                   {Array.from({ length: 8 }).map((_, i) => (
                     <Card key={i} className="animate-pulse">
-                      <CardContent className="p-4">
-                        <div className="flex items-center space-x-3">
-                          <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
+                      <CardContent className="p-2">
+                        <div className="flex items-center space-x-2">
+                          <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
                           <div className="flex-1">
                             <div className="h-4 bg-gray-200 rounded mb-2"></div>
                             <div className="h-3 bg-gray-200 rounded w-2/3"></div>
@@ -98,36 +98,36 @@ export default function MainContent() {
             ))}
           </div>
         ) : (
-          <div className="space-y-12">
+          <div className="space-y-6">
             {/* People Section */}
             <div data-testid="section-people">
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <h2 className="text-xl font-bold text-gray-900 mb-2">
                 People 
-                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("People").length})</span>
+                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
                 {getOutletsByCategory("People").map(renderOutletCard)}
               </div>
             </div>
 
             {/* Topics Section */}
             <div data-testid="section-topics">
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <h2 className="text-xl font-bold text-gray-900 mb-2">
                 Topics 
-                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Topics").length})</span>
+                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
                 {getOutletsByCategory("Topics").map(renderOutletCard)}
               </div>
             </div>
 
             {/* Companies Section */}
             <div data-testid="section-companies">
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <h2 className="text-xl font-bold text-gray-900 mb-2">
                 Companies 
-                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Companies").length})</span>
+                <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
                 {getOutletsByCategory("Companies").map(renderOutletCard)}
               </div>
             </div>