style: padding adjustments and minor ui changes

src/components/home/GovernmentSection.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Card, CardContent } from '../ui/Card';
+import { Card } from '../ui/Card';
 import { useTranslation } from 'react-i18next';
 
 const GovernmentSection: FC = () => {
@@ -23,6 +23,8 @@ const GovernmentSection: FC = () => {
           <path d='M12 17.8L5.8 21 7 14.1 2 9.3l7-1L12 2l3 6.3 7 1-5 4.8 1.2 6.9-6.2-3.2z'></path>
         </svg>
       ),
+      image:
+        'https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1200,h_630/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/iohofxdjvly3h69yfiwv/San%20Miguel%20%2B%20Malaca%C3%B1ang%20Palace%20Guided%20Walking%20Tour%20in%20Manila%2C%20Philippines.jpg',
       link: '/government/executive',
     },
     {
@@ -43,6 +45,8 @@ const GovernmentSection: FC = () => {
           <path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'></path>
         </svg>
       ),
+      image:
+        'https://www.bworldonline.com/wp-content/uploads/2021/08/Congress-072417-PCOO.jpg',
       link: '/government/legislative',
     },
     {
@@ -65,12 +69,14 @@ const GovernmentSection: FC = () => {
           <path d='M5 16h14'></path>
         </svg>
       ),
+      image:
+        'https://sc.judiciary.gov.ph/wp-content/uploads/2023/05/SC-Facade-768x312.png',
       link: '/government/judiciary',
     },
   ];
 
   return (
-    <section className='py-12 bg-white'>
+    <section className='py-12 lg:px-24 bg-white'>
       <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'>
@@ -84,31 +90,40 @@ const GovernmentSection: FC = () => {
         <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
           {branches.map(branch => (
             <Card key={branch.id} hoverable className='text-center'>
-              <CardContent className='p-6'>
-                <div className='flex justify-center mb-4'>{branch.icon}</div>
-                <h3 className='text-xl font-semibold mb-2 text-gray-900'>
-                  {branch.title}
-                </h3>
-                <p className='text-gray-800 mb-4'>{branch.description}</p>
-                <a
-                  href={branch.link}
-                  className='text-primary-600 hover:text-primary-700 font-medium inline-flex items-center transition-colors'
-                >
-                  {t('government.learnMore')}
-                  <svg
-                    className='ml-1 h-4 w-4'
-                    viewBox='0 0 24 24'
-                    fill='none'
-                    stroke='currentColor'
-                    strokeWidth='2'
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
+              <div>
+                <div className='relative'>
+                  <img
+                    src={branch.image}
+                    alt={branch.title}
+                    className='w-full h-56 object-cover'
+                  />
+                  <div className='absolute inset-0 bg-gradient-to-t from-white to-transparent pointer-events-none'></div>
+                </div>
+                <div className='p-6'>
+                  <h3 className='text-xl font-semibold mb-2 text-gray-900'>
+                    {branch.title}
+                  </h3>
+                  <p className='text-gray-800 mb-4'>{branch.description}</p>
+                  <a
+                    href={branch.link}
+                    className='text-primary-600 hover:text-primary-700 font-medium inline-flex items-center transition-colors'
                   >
-                    <line x1='5' y1='12' x2='19' y2='12'></line>
-                    <polyline points='12 5 19 12 12 19'></polyline>
-                  </svg>
-                </a>
-              </CardContent>
+                    {t('government.learnMore')}
+                    <svg
+                      className='ml-1 h-4 w-4'
+                      viewBox='0 0 24 24'
+                      fill='none'
+                      stroke='currentColor'
+                      strokeWidth='2'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                    >
+                      <line x1='5' y1='12' x2='19' y2='12'></line>
+                      <polyline points='12 5 19 12 12 19'></polyline>
+                    </svg>
+                  </a>
+                </div>
+              </div>
             </Card>
           ))}
         </div>

src/components/home/Hero.tsx

@@ -68,7 +68,7 @@ const Hero: FC = () => {
   ];
 
   return (
-    <div className='bg-linear-to-r from-primary-600 to-primary-700 text-white py-12 md:py-24'>
+    <div className='bg-linear-to-r from-primary-600 to-primary-700 text-white py-12 lg:py-24 lg:px-24'>
       <div className='container mx-auto px-4'>
         <div className='grid grid-cols-1 lg:grid-cols-2 gap-8 items-center'>
           {/* Left section with title and search */}
@@ -99,7 +99,7 @@ const Hero: FC = () => {
           </div>
 
           {/* Right section with quick access services */}
-          <div className='bg-white/10 backdrop-blur-xs rounded-xl p-6 shadow-lg animate-slide-in'>
+          <div className='backdrop-blur-xs rounded-xl p-6 shadow-lg animate-slide-in'>
             <h2 className='text-2xl font-semibold mb-4'>
               {t('services.title')}
             </h2>
@@ -108,9 +108,9 @@ const Hero: FC = () => {
                 to={`/services?category=${findCategorySlug(
                   'Certificates and IDs'
                 )}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -130,9 +130,9 @@ const Hero: FC = () => {
                 to={`/services?category=${findCategorySlug(
                   'Business and Trade'
                 )}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -157,9 +157,9 @@ const Hero: FC = () => {
               </Link>
               <Link
                 to={`/services?category=${findCategorySlug('Education')}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-200 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'
@@ -177,9 +177,9 @@ const Hero: FC = () => {
               </Link>
               <Link
                 to={`/services?category=${findCategorySlug('Health')}`}
-                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-500 flex flex-col items-center text-center'
+                className='bg-white/10 hover:bg-white/20 rounded-lg p-4 transition-all duration-500 flex gap-2 items-center text-center'
               >
-                <div className='bg-primary-500 p-3 rounded-full mb-3'>
+                <div className='bg-primary-500 p-3 rounded-full'>
                   <svg
                     className='h-6 w-6 text-white'
                     viewBox='0 0 24 24'

src/components/home/InfoWidgets.tsx

@@ -18,7 +18,9 @@ const InfoWidgets: FC = () => {
 
   // Function to get weather icon component
   const getWeatherIcon = (iconName: string) => {
-    const Icon = LucideIcons[iconName as keyof typeof LucideIcons];
+    const Icon = LucideIcons[
+      iconName as keyof typeof LucideIcons
+    ] as React.ComponentType<{ className?: string }>;
     return Icon ? <Icon className='h-8 w-8' /> : null;
   };
 
@@ -77,7 +79,7 @@ const InfoWidgets: FC = () => {
   }, []);
 
   return (
-    <section className='py-12 bg-gray-50'>
+    <section className='py-12 lg:px-24 bg-gray-50'>
       <div className='container mx-auto px-4'>
         <div className='text-center mb-12'>
           <h2 className='text-3xl font-bold text-gray-900 mb-4'>
@@ -89,7 +91,7 @@ const InfoWidgets: FC = () => {
         </div>
         <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
           {/* Weather Widget */}
-          <Card>
+          <Card className='shadow-md'>
             <CardHeader className='bg-primary-50'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.Cloud className='h-5 w-5 mr-2 text-primary-600' />
@@ -154,7 +156,7 @@ const InfoWidgets: FC = () => {
           </Card>
 
           {/* Forex Widget */}
-          <Card>
+          <Card className='shadow-md'>
             <CardHeader className='bg-primary-50'>
               <h3 className='text-xl font-semibold text-gray-900 flex items-center'>
                 <LucideIcons.BarChart3 className='h-5 w-5 mr-2 text-primary-600' />

src/components/home/JoinUsStrip.tsx

@@ -25,9 +25,6 @@ const JoinUsStrip: FC = () => {
         <div className='flex flex-col sm:flex-row items-center justify-between gap-2'>
           <div className='flex items-center gap-3'>
             <div className='flex items-center gap-2'>
-              <div className='p-1.5 bg-yellow-300/30 rounded-full'>
-                <UsersIcon className='h-4 w-4 text-yellow-200' />
-              </div>
               <span className='font-bold text-sm'>
                 {t('joinUs.stripTitle')}
               </span>

src/components/home/NewsSection.tsx

@@ -9,7 +9,7 @@ const NewsSection: FC = () => {
   const { t } = useTranslation('common');
 
   return (
-    <section className='py-12 bg-gray-50'>
+    <section className='py-12 lg:px-24 bg-gray-50'>
       <div className='container mx-auto px-4'>
         <div className='flex justify-between items-center mb-8'>
           <h2 className='text-2xl md:text-3xl font-bold text-gray-900'>

src/components/home/PromotionBanner.tsx

@@ -7,7 +7,7 @@ const PromotionBanner: FC = () => {
   const { t } = useTranslation('common');
 
   return (
-    <section className='bg-accent-500 py-12 text-white'>
+    <section className='bg-accent-500 py-12 lg:px-24 text-white'>
       <div className='container mx-auto px-4'>
         <div className='md:flex items-center justify-between'>
           <div>

src/components/home/ServicesSection.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { Card, CardContent } from '../ui/Card';
+import { Card } from '../ui/Card';
 import serviceCategories from '../../data/service_categories.json';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -35,7 +35,9 @@ const ServicesSection: FC = () => {
       'Transport and Driving': 'Car',
     };
 
-    const Icon = LucideIcons[iconMap[category] || 'FileText'];
+    const Icon = LucideIcons[
+      iconMap[category] || 'FileText'
+    ] as React.ComponentType<{ className?: string }>;
     return Icon ? <Icon className='h-6 w-6' /> : null;
   };
 
@@ -46,7 +48,7 @@ const ServicesSection: FC = () => {
   ) as Category[];
 
   return (
-    <section className='py-12 bg-white'>
+    <section className='py-12 lg:px-24 bg-white'>
       <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'>
@@ -57,46 +59,45 @@ const ServicesSection: FC = () => {
           </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 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6'>
           {displayedCategories.map(category => (
             <Card
               key={category.slug}
               hoverable
-              className='border-t-4 border-primary-500'
+              className='border border-primary-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'>
+              <div className='flex items-center justify-between gap-2 bg-gradient-to-tr from-primary-400 to-primary-500 px-4 py-4'>
+                <div className='flex items-center gap-2'>
+                  <div className=' text-white rounded-full'>
                     {getIcon(category.category)}
                   </div>
 
-                  <h3 className='text-lg font-semibold mb-4 text-gray-900'>
+                  <h3 className='text-lg font-semibold text-neutral-100'>
                     {category.category}
                   </h3>
                 </div>
 
-                <ul className='space-y-2 mb-6 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'
+                  className='flex items-center gap-2 text-white'
                 >
-                  {t('services.viewAllCategory')} {category.category}
-                  <LucideIcons.ArrowRight className='ml-1 h-4 w-4' />
+                  <p className='text-sm text-primary-100'>View All</p>
+                  <LucideIcons.ArrowRight className='bg-primary-50 text-primary-500 rounded-full p-2 h-10 w-10' />
                 </Link>
-              </CardContent>
+              </div>
+              <ul className='space-y-2 mb-6 grow p-6'>
+                {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>
             </Card>
           ))}
         </div>

src/components/layout/Footer.tsx

@@ -49,7 +49,7 @@ const Footer: FC = () => {
 
   return (
     <footer className='bg-gray-900 text-white'>
-      <div className='container mx-auto px-4 pt-12 pb-8'>
+      <div className='container mx-auto px-4 pt-12 pb-8 lg:px-24'>
         <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8'>
           <div className='col-span-1 md:col-span-2'>
             <div className='flex items-center mb-4'>

src/components/search/MeilisearchInstantSearch.css

@@ -33,6 +33,7 @@
 /* Ensure SearchBox input has good contrast and size */
 .ais-SearchBox-input {
   font-size: 1rem;
+  border-radius: 100px;
   /* Ensure space for right action buttons; left aligns like normal when typing */
   padding: 0.75rem 5rem 0.75rem 1rem;
 }