From 56cb95648231912c6e599234a89a0636e3ebae2f Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 26 Feb 2024 14:07:15 +0100
Subject: [PATCH] adjusted banner card design

---
 src/components/Home/FamilyDash.jsx | 43 +++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/Home/FamilyDash.jsx b/src/components/Home/FamilyDash.jsx
index a6b11c1..918b6b0 100644
--- a/src/components/Home/FamilyDash.jsx
+++ b/src/components/Home/FamilyDash.jsx
@@ -43,12 +43,27 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
               {Object.keys(familyBannersList?.result?.result_list).map((item, index) => {
                 let content = familyBannersList?.result?.result_list[item]
+                let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center transition-all duration-300 hover:shadow-md ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                  <Link key={item} to={`/${action}`} className={`h-44 rounded-lg 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-1/2 object-cover rounded-lg" src={content.banner.image} alt='banner image' />
-                      <h1 className="my-2 text-lg font-medium tracking-wide">{content.banner.text}</h1>
-                      <p className="text-sm">{content.banner.description}</p>
+                      <img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
+                      <div className="px-2 py-1">
+                        <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{content.banner.text}</h1>
+                        <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
+                      </div>
+                      {/* Horizontal Line */}
+                      <div className="w-full h-[1px] bg-slate-300"></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>
+                        {/* Dots */}
+                        <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>
                   </Link>
                 )
@@ -60,9 +75,25 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
             <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
               {[1,2,3,4,5].map((item, index) => (
-                <Link key={index} to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-                  <div >
+                  <Link key={item} to={`/`} className={`h-44 rounded-lg 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-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
+                    <div className="px-2 py-1">
+                      <h1 className="text-lg text-black dark:text-white font-medium tracking-wide">{'Heading'}</h1>
+                      <p className="text-sm text-black dark:text-white">{'Description'}</p>
+                    </div>
+                    {/* Horizontal Line */}
+                    <div className="w-full h-[1px] bg-slate-300"></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>
+                      {/* Dots */}
+                      <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>
                 </Link>
               ))}