src/components/Dashboards/AccountDashboard.jsx

@@ -2,9 +2,11 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 const AccountDashboard = ({ className, bannerList }) => {
-  const getUpperBanner = bannerList?.slice(0, 3);
+  // 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}) => {
+  let getImage = ({ banner_location, banner }) => {
     if (banner_location == "LOCAL") {
       return require(`../../assets/images/${banner}`);
     } else {
@@ -12,7 +14,7 @@ const AccountDashboard = ({ className, bannerList }) => {
     }
   };
 
-  console.log(getUpperBanner);
+  console.log(getLowerBanner);
   return (
     <div
       className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -21,15 +23,14 @@ const AccountDashboard = ({ className, bannerList }) => {
     >
       <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
         {getUpperBanner?.map((props, idx) => {
-
           let image = getImage(props);
 
-          let { short_title, short_description, button_text, link_path } =
+          let { short_title, short_description, short_button_text, link_path } =
             props;
 
           return (
             <TopBanner
-              btn={button_text}
+              btn={short_button_text}
               image={image}
               title={short_title}
               desc={short_description}
@@ -40,8 +41,23 @@ const AccountDashboard = ({ className, bannerList }) => {
         })}
       </div>
       <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
-        <LowerBanner />
-        <LowerBanner />
+        {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>
   );
@@ -60,7 +76,7 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
         />
       </Link>
       <div className="h-[7rem] rounded-b-xl bg-white">
-        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
+        <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>
@@ -80,30 +96,38 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
         </div>
       </div>
     </div>
-  );  
+  );
 };
 
-const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) => {
-  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>
@@ -113,3 +137,66 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) =>
     </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>
   );
 }