matched the image height in family banner to full member banner

src/components/Dashboards/AccountDashboard.jsx

@@ -1,6 +1,20 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
-const AccountDashboard = ({ className }) => {
+const AccountDashboard = ({ className, bannerList }) => {
+  // getting the upper three banners for the home layout
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2);
+  const getLowerBanner = bannerList?.filter((value, idx) => idx > 2);
+
+  let getImage = ({ banner_location, banner }) => {
+    if (banner_location == "LOCAL") {
+      return require(`../../assets/images/${banner}`);
+    } else {
+      return banner;
+    }
+  };
+
+  console.log(getLowerBanner);
   return (
     <div
       className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -8,13 +22,42 @@ const AccountDashboard = ({ className }) => {
       }`}
     >
       <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
-        <TopBanner />
-        <TopBanner />
-        <TopBanner />
+        {getUpperBanner?.map((props, idx) => {
+          let image = getImage(props);
+
+          let { short_title, short_description, short_button_text, link_path } =
+            props;
+
+          return (
+            <TopBanner
+              btn={short_button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
       </div>
-      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
-        <LowerBanner />
-        <LowerBanner />
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
+        {getLowerBanner?.map((props, idx) => {
+          let image = getImage(props);
+
+          let { short_title, short_description, short_button_text, link_path } =
+            props;
+
+          return (
+            <LowerBanner
+              btn={short_button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
       </div>
     </div>
   );
@@ -22,24 +65,29 @@ const AccountDashboard = ({ className }) => {
 
 export default AccountDashboard;
 
-const TopBanner = () => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
     <div className="flex flex-col shadow-md rounded-xl">
-      <div className="h-[12rem] rounded-t-xl">
+      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
         <img
-          src={Image}
+          src={image}
           alt="banner-img"
-          className="w-full h-full rounded-t-xl"
+          className="w-full h-full rounded-t-xl object-cover"
         />
-      </div>
+      </Link>
       <div className="h-[7rem] rounded-b-xl bg-white">
-        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
-          <h3 className="font-bold text-lg">Banner Title</h3>
-          <p>Banner description text will come follow</p>
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
+          <Link to={link_path} className="font-bold text-lg">
+            {title}
+          </Link>
+          <Link to={link_path} className="text-sm">
+            {desc}
+          </Link>
         </div>
         <div className="flex justify-between w-full px-2 items-center">
-          <span className="text-slate-300 font-semibold">follow up text</span>
+          <Link to={link_path} className="text-slate-300 font-semibold">
+            {btn}
+          </Link>
           <button className="flex items-center justify-center gap-2">
             <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
             <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
@@ -51,27 +99,35 @@ const TopBanner = () => {
   );
 };
 
-const LowerBanner = () => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
-    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
+    <div
+      key={key}
+      className="flex flex-col bg-white shadow-md h-full rounded-xl"
+    >
       <div className="w-full flex justify-between border-b border-slate-300 p-2">
         <div className="h-[130px] flex justify-between items-center">
-          <div className="px-2">
-            <h3 className="text-lg font-bold">Banner Title</h3>
-            <p className="text-sm">Banner description text will come follow</p>
+          <div className="px-2 flex flex-col gap-2">
+            <Link to={link_path} className="text-lg font-bold">
+              {title}
+            </Link>
+            <p to={link_path} className="text-sm">
+              {desc}
+            </p>
           </div>
         </div>
-        <div className="w-[150px] h-[100px]">
+        <Link to={link_path} className="w-[150px] h-[100px]">
           <img
-            src={Image}
+            src={image}
             alt="banner-img"
             className="w-full h-full rounded-xl"
           />
-        </div>
+        </Link>
       </div>
       <div className="flex justify-between w-full px-2 items-center">
-        <span className="text-slate-300 font-semibold">follow up text</span>
+        <Link to={link_path} className="text-slate-300 font-semibold">
+          {btn}
+        </Link>
         <button className="flex items-center justify-center gap-2">
           <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
           <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
@@ -81,3 +137,66 @@ const LowerBanner = () => {
     </div>
   );
 };
+
+const BannerSection = ({ banners, variant }) => {
+  const getImage = ({ banner_location, banner }) => {
+    return banner_location === "LOCAL"
+      ? require(`../../assets/images/${banner}`)
+      : banner;
+  };
+
+  return (
+    <>
+      {banners?.map((props, idx) => {
+        const { short_title, short_description, short_button_text, link_path } =
+          props;
+        const image = getImage(props);
+
+        return (
+          <div
+            key={idx}
+            className={`flex flex-col shadow-md rounded-xl ${
+              variant === "top" ? "" : "bg-white"
+            }`}
+          >
+            <div className={`${variant === "top" ? "rounded-t-xl" : ""}`}>
+              <Link to={link_path}>
+                <img
+                  src={image}
+                  alt="banner-img"
+                  className="w-full h-full rounded-t-xl object-cover"
+                />
+              </Link>
+            </div>
+            <div
+              className={`${
+                variant === "top"
+                  ? "rounded-b-xl bg-white"
+                  : "border-b border-slate-300"
+              } h-[7rem]`}
+            >
+              <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
+                <Link to={link_path} className="font-bold text-lg">
+                  {short_title}
+                </Link>
+                <Link to={link_path} className="text-sm">
+                  {short_description}
+                </Link>
+              </div>
+              <div className="flex justify-between w-full px-2 items-center">
+                <Link to={link_path} className="text-slate-300 font-semibold">
+                  {short_button_text}
+                </Link>
+                <button className="flex items-center justify-center gap-2">
+                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};

src/components/Dashboards/FamilyParentDashboard.jsx

@@ -93,11 +93,6 @@ export default function FamilyParentDashboard({ className, bannerList, nextDueTa
           </Link>
         </div>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Dashboards/HomeDashboard.jsx

@@ -93,11 +93,6 @@ export default function HomeDashboard({ className, bannerList, nextDueTask }) {
           </Link>
         </div>
       </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
     </div>
   );
 }

src/components/Home/FamilyDash.jsx

@@ -18,6 +18,8 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   
   const { familyBannersList } = useSelector((state) => state.familyBannersList);
 
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
   let [reloadBanner, setReloadBanner] = useState(0)
 
   // DO NOT UNCOMMENT THE CODE BELOW
@@ -58,6 +60,20 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
+        {/* Header */}
+        <div className="text-white mb-4 p-2 w-full rounded-xl grid grid-cols-1 sm:grid-cols-2 bg-sky-blue place-content-center">
+          <div className="w-full flex gap-4">
+            <p className="text-lg font-normal">Welcome</p>
+            <div className="self-center">
+              <h1 className="m-0 text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+              <p className="-mt-1 text-sm">Email</p>
+            </div>
+          </div>
+          <div className="w-full text-sm flex justify-end items-end">
+            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+          </div>
+        </div>
+
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
           {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
@@ -67,23 +83,25 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                 let content = familyBannersList?.result_list[item]
                 let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <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`}>
+                  <Link key={item} to={`/${action}`} className={`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-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-[#083e21] dark:text-white font-normal 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>
+                      <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
+                      <div className="h-[7rem] flex flex-col justify-between">
+                        <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] flex flex-col gap-2">
+                          <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>
+                        {/* 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 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>
                     </div>
@@ -93,27 +111,29 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             </div>
           }
           
-          <div className="my-4">
+          <div className="mb-4">
             <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={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`}>
+                  <Link key={item} to={`/`} className={`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-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
-                    <div className="px-2 py-1">
-                      <h1 className="text-lg text-[#083e21] 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>
+                    <img className="w-full h-[12rem] object-cover object-left rounded-t-xl" src={''} alt='banner image' />
+                    <div className="h-[7rem] flex flex-col justify-between">
+                      <div className="px-2 py-1 border-b border-slate-300 h-[5.4rem] flex flex-col gap-2">
+                        <h1 className="text-lg text-[#083e21] dark:text-white font-bold 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 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>
                   </div>

src/components/Home/FullAccountDash.jsx

@@ -59,13 +59,11 @@ export default function FullAccountDash(props) {
     }
   };
 
-  console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
-
   return (
     <>
       <div className="home-page-wrapper">
         {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
-          <AccountDashboard className="mb-4" />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
         )}
         {renderDashboard()}