feat: reduce visual noise in service cards by removing unnecessary icons

src/components/home/ServicesSection.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { Card, CardContent } from '../ui/Card';
 import serviceCategories from '../../data/service_categories.json';
 import { Link } from 'react-router-dom';
@@ -19,92 +19,72 @@
 const ServicesSection: FC = () => {
   const { t } = useTranslation('common');
 
-  const getIcon = (category: string) => {
-    const iconMap: { [key: string]: keyof typeof LucideIcons } = {
-      'Business and Trade': 'Building2',
-      'Certificates and IDs': 'FileCheck',
-      Contributions: 'Wallet',
-      'Disaster and Weather': 'Cloud',
-      Education: 'GraduationCap',
-      Employment: 'Briefcase',
-      Health: 'Heart',
-      Housing: 'Home',
-      'Passport and Travel': 'Plane',
-      'Social Services': 'Users',
-      Tax: 'Receipt',
-      'Transport and Driving': 'Car',
-    };
-
-    const Icon = LucideIcons[iconMap[category] || 'FileText'];
-    return Icon ? <Icon className='h-6 w-6' /> : null;
-  };
-
   // Show only first 12 categories
   const displayedCategories = serviceCategories.categories.slice(
     0,
     12
   ) as Category[];
 
   return (
-    <section className='py-12 bg-white'>
+    <section className='py-16 bg-gray-50'>
       <div className='container mx-auto px-4'>
         <div className='text-center mb-12'>
-          <h2 className='text-2xl md:text-3xl font-bold text-gray-900 mb-4'>
+          <h2 className='text-3xl md:text-4xl font-bold text-gray-900 mb-4'>
             {t('services.governmentServices')}
           </h2>
-          <p className='text-gray-800 max-w-2xl mx-auto'>
+          <p className='text-gray-700 max-w-3xl mx-auto text-lg leading-relaxed'>
             {t('services.description')}
           </p>
         </div>
 
-        <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6'>
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
           {displayedCategories.map(category => (
             <Card
               key={category.slug}
               hoverable
-              className='border-t-4 border-primary-500'
+              className='h-full bg-white border-gray-200'
             >
-              <CardContent className='flex flex-col h-full p-6'>
-                <div className='flex gap-2'>
-                  <div className='bg-primary-100 text-primary-600 p-3 rounded-md mb-4 self-start'>
-                    {getIcon(category.category)}
-                  </div>
+              <CardContent className='p-8 flex flex-col h-full'>
+                <h3 className='text-xl font-semibold text-white mb-6 bg-primary-600 px-4 py-3 rounded-md'>
+                  {category.category}
+                </h3>
 
-                  <h3 className='text-lg font-semibold mb-4 text-gray-900'>
-                    {category.category}
-                  </h3>
-                </div>
-
-                <ul className='space-y-2 mb-6 grow'>
-                  {category.subcategories.slice(0, 3).map(subcategory => (
-                    <li key={subcategory.slug}>
+                <ul className='space-y-3 flex-grow'>
+                  {category.subcategories.slice(0, 4).map(subcategory => (
+                    <li key={subcategory.slug} className='flex items-center'>
+                      <span className='w-1.5 h-1.5 bg-gray-400 rounded-full mr-3 flex-shrink-0'></span>
                       <Link
                         to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
-                        className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
+                        className='text-gray-700 hover:text-primary-600 focus:text-primary-600 focus:outline-none transition-colors duration-200 block py-2 flex-grow leading-relaxed'
                       >
-                        <span className='w-1.5 h-1.5 bg-gray-300 rounded-full mr-2'></span>
                         {subcategory.name}
                       </Link>
                     </li>
                   ))}
                 </ul>
 
-                <Link
-                  to={`/services?category=${category.slug}`}
-                  className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center'
-                >
-                  {t('services.viewAllCategory')} {category.category}
-                  <LucideIcons.ArrowRight className='ml-1 h-4 w-4' />
-                </Link>
+                <div className='mt-auto pt-4 border-t border-gray-100'>
+                  <Link
+                    to={`/services?category=${category.slug}`}
+                    className='text-primary-600 hover:text-primary-700 focus:text-primary-700 focus:outline-none font-medium transition-all duration-200 text-base inline-flex items-center group rounded-md px-2 py-1'
+                  >
+                    {t('services.viewAllCategory')} {category.category}
+                    <ArrowRight
+                      className='ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200'
+                      aria-hidden='true'
+                    />
+                  </Link>
+                </div>
               </CardContent>
             </Card>
           ))}
         </div>
 
-        <div className='text-center mt-8'>
+        <div className='text-center mt-12'>
           <Link
             to='/services'
-            className='inline-flex items-center justify-center rounded-md font-medium transition-colors px-6 py-3 bg-primary-500 text-white hover:bg-primary-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-xs'
+            className='inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 px-8 py-4 bg-primary-600 text-white hover:bg-primary-700 focus:bg-primary-700 focus:outline-none text-base min-w-[160px]'
+            aria-label={`${t('services.viewAll')} services`}
           >
             {t('services.viewAll')}
           </Link>

src/components/ui/Card.tsx

@@ -16,9 +16,9 @@ const Card = ({
   return (
     <div
       className={cn(
-        'bg-white rounded-lg border border-gray-200 shadow-xs overflow-hidden',
+        'bg-white rounded-lg border border-gray-200 overflow-hidden',
         hoverable &&
-          'transition-all duration-300 hover:shadow-md hover:-translate-y-1',
+          'transition-all duration-200 hover:border-primary-300 hover:shadow-sm',
         className
       )}
       role='article'
@@ -75,7 +75,7 @@ const CardFooter = ({ children, className, ...props }: CardFooterProps) => {
   return (
     <div
       className={cn(
-        'p-4 md:p-6 border-t border-gray-200 bg-gray-50',
+        'p-4 md:p-6 border-t border-gray-100 bg-gray-50/30',
         className
       )}
       {...props}