reduced family resources banner

src/components/Home/FamilyDash.jsx

@@ -92,15 +92,6 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
                           <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
                         </div>
-
-                        {/* <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                          <div className="flex justify-center gap-1">
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                          </div>
-                        </div> */}
                       </div>
                     </div>
                   </Link>
@@ -116,23 +107,29 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
               {tab_categories.data.map((item) => {
                 if(item.enabled){
                 return (
-                  <Link key={item.uid} to={item?.action} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item.uid} to={item?.action} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-[12rem] object-cover rounded-t-xl" src={item?.banner} alt='banner image' />
+                      <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
+                        <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />
+                      </div>
                       <div className="flex flex-col justify-between">
-                        <div className="px-2 py-1 border-b border-slate-300 min-h-[5rem] flex flex-col gap-1">
+                        <div className="px-2 py-1 border-b border-transparent min-h-[2rem] flex justify-between items-center gap-1">
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
-                          {/* <p className="text-sm text-black dark:text-white">{'Description'}</p> */}
-                        </div>
-
-                        <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
                           <div className="flex justify-center gap-1">
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                           </div>
                         </div>
+
+                        {/* <div className="px-2 py-1 flex justify-between items-center">
+                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
+                          <div className="flex justify-center gap-1">
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          </div>
+                        </div> */}
                       </div>
                     </div>
                   </Link>