fix: visual enhancements for services and widgets sections

public/locales/en/common.json

@@ -11,7 +11,7 @@
     "governmentServices": "Government Services",
     "description": "Access official government services quickly and easily. Find what you need for citizenship, business, education, and more.",
     "viewAll": "View All Services",
-    "viewAllCategory": "View All"
+    "viewAllCategory": "View more"
   },
   "weather": {
     "title": "Weather Updates"

src/components/home/InfoWidgets.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { Card, CardHeader, CardContent } from '../ui/Card';
+import { Card, CardContent } from '../ui/Card';
 import { WeatherData, ForexRate } from '../../types';
 import { useTranslation } from 'react-i18next';
 import CriticalHotlinesWidget from '../widgets/CriticalHotlinesWidget';
@@ -19,7 +19,7 @@ const InfoWidgets: React.FC = () => {
   // Function to get weather icon component
   const getWeatherIcon = (iconName: string) => {
     const Icon = LucideIcons[iconName as keyof typeof LucideIcons];
-    return Icon ? <Icon className='h-8 w-8' /> : null;
+    return Icon ? <Icon className='h-16 w-16' /> : null;
   };
 
   // Fetch weather data
@@ -79,16 +79,23 @@ const InfoWidgets: React.FC = () => {
   return (
     <section className='py-12 bg-gray-50'>
       <div className='container mx-auto px-4'>
-        <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
+        <div className='grid lg:grid-cols-2 gap-12'>
           {/* Weather Widget */}
-          <Card>
-            <CardHeader className='bg-primary-50'>
+          <div className='@container'>
+            <div className='mb-4 flex flex-col sm:flex-row items-center justify-between gap-4 border p-4 sm:p-2 sm:pl-6 bg-blue-50 rounded-xl border-gray-400 shadow-sm'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.Cloud className='h-5 w-5 mr-2 text-primary-600' />
                 {t('weather.title')}
               </h3>
-            </CardHeader>
-            <CardContent className='@container'>
+              <a
+                href='/data/weather'
+                className='text-white w-full justify-center sm:justify-start sm:w-fit text-sm hover:underline flex items-center gap-1 bg-blue-600 hover:bg-blue-700 font-semibold px-4 py-2 rounded-md'
+              >
+                <span>Detailed Forecast</span>
+                <LucideIcons.ArrowRight size={16} />
+              </a>
+            </div>
+            <div>
               {isLoadingWeather ? (
                 <div className='flex justify-center items-center h-40'>
                   <LucideIcons.Loader className='h-8 w-8 animate-spin text-primary-600' />
@@ -99,57 +106,58 @@ const InfoWidgets: React.FC = () => {
                   <p>{weatherError}</p>
                 </div>
               ) : (
-                <div className='grid grid-cols-2 @md:grid-cols-4 gap-4'>
+                <div className='grid @md:grid-cols-2 @xl:grid-cols-4 gap-4'>
                   {weatherData.map(location => (
-                    <div
+                    <Card
                       key={location.location}
-                      className='flex flex-col items-center p-3 rounded-lg border border-gray-100 bg-white uppercase'
+                      className='shadow-sm bg-white border-gray-400'
                     >
-                      <div className='text-accent-500 mb-1'>
-                        {getWeatherIcon(location.icon)}
-                      </div>
-                      <div className='font-semibold text-lg'>
-                        {location.location}
-                      </div>
-                      <div className='text-2xl font-bold'>
-                        {location.temperature}°C
-                      </div>
-                      <div className='text-sm text-gray-800 text-center'>
-                        {location.condition}
-                      </div>
-                    </div>
+                      <CardContent className='flex flex-col items-center p-3 rounded-lg uppercase'>
+                        <div className='font-semibold text-lg tracking-wide'>
+                          {location.location}
+                        </div>
+                        <div className='text-accent-500 mb-1 pt-2'>
+                          {getWeatherIcon(location.icon)}
+                        </div>
+                        <div className='text-4xl font-medium'>
+                          {location.temperature}°C
+                        </div>
+                        <div className='text-xs text-gray-700 text-center pt-4 tracking-wide font-semibold'>
+                          {location.condition}
+                        </div>
+                      </CardContent>
+                    </Card>
                   ))}
                 </div>
               )}
-              <div className='text-right mt-4'>
-                <a
-                  href='/data/weather'
-                  className='text-primary-600 text-sm hover:underline'
-                >
-                  Detailed Forecast
-                </a>
-              </div>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
 
           {/* Forex Widget */}
-          <Card>
-            <CardHeader className='bg-primary-50'>
+          <div>
+            <div className='mb-4 flex flex-col sm:flex-row items-center justify-between gap-4 border p-4 sm:p-2 sm:pl-6 bg-blue-50 rounded-xl border-gray-400 shadow-sm'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.BarChart3 className='h-5 w-5 mr-2 text-primary-600' />
                 {t('forex.title')}
               </h3>
-            </CardHeader>
-            <CardContent>
-              <div className='overflow-x-auto'>
-                <table className='min-w-full divide-y divide-gray-200'>
+              <a
+                href='/data/forex'
+                className='text-white w-full justify-center sm:justify-start sm:w-fit text-sm hover:underline flex items-center gap-1 bg-blue-600 hover:bg-blue-700 font-semibold px-4 py-2 rounded-md'
+              >
+                <span>More Currencies</span>
+                <LucideIcons.ArrowRight size={16} />
+              </a>
+            </div>
+            <div>
+              <div className='overflow-x-auto border border-gray-400 rounded-xl shadow-sm'>
+                <table className='divide-y divide-gray-200 table-fixed w-full'>
                   <thead className='bg-gray-50'>
                     <tr>
-                      <th className='px-3 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider'>
+                      <th className='pl-6 py-4 text-left text-xs font-semibold text-gray-800 uppercase tracking-wider'>
                         Currency
                       </th>
-                      <th className='px-3 py-3 text-right text-xs font-medium text-gray-800 uppercase tracking-wider'>
-                        ₱ Rate
+                      <th className='pr-6 py-4 text-right text-xs font-semibold text-gray-800 uppercase tracking-wider'>
+                        Peso Rate
                       </th>
                     </tr>
                   </thead>
@@ -182,38 +190,30 @@ const InfoWidgets: React.FC = () => {
                     ) : (
                       forexRates.map(rate => (
                         <tr key={rate.code} className='hover:bg-gray-50'>
-                          <td className='px-3 py-2 whitespace-nowrap'>
+                          <td className='pl-6 py-2'>
                             <div className='flex items-center'>
-                              <div className='font-medium text-gray-900'>
+                              <div className='font-medium text-accent-500'>
                                 {rate.code}
                               </div>
-                              <div className='text-gray-800 text-sm ml-2'>
+                              <div className='text-gray-800 text-sm ml-2 text-ellipsis whitespace-nowrap overflow-hidden'>
                                 {rate.currency}
                               </div>
                             </div>
                           </td>
-                          <td className='px-3 py-2 whitespace-nowrap text-right text-sm font-medium'>
-                            ₱{rate.rate.toFixed(2)}
+                          <td className='pr-6 py-2 tracking-wider whitespace-nowrap text-right text-sm font-medium'>
+                            {rate.rate.toFixed(2)}
                           </td>
                         </tr>
                       ))
                     )}
                   </tbody>
                 </table>
               </div>
-              <div className='text-right mt-4'>
-                <a
-                  href='/data/forex'
-                  className='text-primary-600 text-sm hover:underline'
-                >
-                  More Currencies
-                </a>
-              </div>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
 
           {/* Emergency Hotlines Widget */}
-          <div className='lg:col-span-1'>
+          <div>
             <CriticalHotlinesWidget maxItems={4} />
           </div>
         </div>

src/components/home/ServicesSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
-import { Card, CardContent } from '../ui/Card';
+import { Card, CardContent, CardHeader } from '../ui/Card';
 import serviceCategories from '../../data/service_categories.json';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -62,40 +62,42 @@ const ServicesSection: React.FC = () => {
             <Card
               key={category.slug}
               hoverable
-              className='border-t-4 border-primary-500'
+              className='hover:border-primary-500 border-primary-200 group border-t-4 flex flex-col h-full'
             >
-              <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>
-
-                  <h3 className='text-lg font-semibold mb-4 text-gray-900'>
-                    {category.category}
-                  </h3>
+              <CardHeader className='flex gap-3 items-center p-4 md:p-4'>
+                <div className='bg-primary-50 text-primary-600 p-3 rounded-md self-start transition-colors group-hover:bg-primary-500 group-hover:text-white'>
+                  {getIcon(category.category)}
                 </div>
+                <h3 className='text-lg font-semibold text-gray-900'>
+                  {category.category}
+                </h3>
+              </CardHeader>
 
-                <ul className='space-y-2 mb-6 flex-grow'>
-                  {category.subcategories.slice(0, 3).map(subcategory => (
-                    <li key={subcategory.slug}>
-                      <Link
-                        to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
-                        className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
-                      >
-                        <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>
+              <CardContent className='h-full flex flex-col justify-between p-0 md:p-0'>
+                <div>
+                  <ul className='flex-grow divide-y border-b'>
+                    {category.subcategories.slice(0, 3).map(subcategory => (
+                      <li key={subcategory.slug}>
+                        <Link
+                          to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
+                          className='flex items-center justify-between gap-2 text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center px-4 py-2 hover:bg-primary-50'
+                        >
+                          {subcategory.name}
+                          <LucideIcons.ChevronRightIcon className='ml-1 h-4 w-4 text-black/20' />
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <Link
+                    to={`/services?category=${category.slug}`}
+                    className='mt-auto justify-between text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center px-4 py-2 w-full hover:bg-primary-500 hover:text-white'
+                  >
+                    {t('services.viewAllCategory')}
+                    <LucideIcons.ChevronRightIcon className='ml-1 h-4 w-4' />
+                  </Link>
+                </div>
               </CardContent>
             </Card>
           ))}
@@ -104,9 +106,12 @@ const ServicesSection: React.FC = () => {
         <div className='text-center mt-8'>
           <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-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-sm'
+            className='inline-flex group gap-3 items-center justify-center rounded-xl font-semibold transition-colors px-8 py-4 bg-primary-500 text-white hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-sm'
           >
             {t('services.viewAll')}
+            <div className='group-hover:translate-x-1 transition-all'>
+              <LucideIcons.ArrowRight size={18} />
+            </div>
           </Link>
         </div>
       </div>

src/components/ui/Card.tsx

@@ -16,9 +16,8 @@ const Card = ({
   return (
     <div
       className={cn(
-        'bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden',
-        hoverable &&
-          'transition-all duration-300 hover:shadow-md hover:-translate-y-1',
+        'bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden',
+        hoverable && 'transition-all duration-300',
         className
       )}
       role='article'