From f597c207fab767477eb4b7c5bcf4263a556503c5 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Mon, 26 Feb 2024 16:34:08 +0100
Subject: [PATCH 1/2] Banner Area Layout

---
 .../Dashboards/AccountDashboard.jsx           | 86 +++++++++++++++++--
 1 file changed, 77 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx
index 182b23f..5d88408 100644
--- a/src/components/Dashboards/AccountDashboard.jsx
+++ b/src/components/Dashboards/AccountDashboard.jsx
@@ -1,15 +1,83 @@
-import React from 'react'
+import React from "react";
 
-const AccountDashboard = ({className}) => {
+const AccountDashboard = ({ className }) => {
   return (
-    <div className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-[#ffed00] ${
+    <div
+      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
         className || ""
-      }`}>
-      <div className="w-full h-full flex items-center justify-center text-5xl text-center">
-        Account Dashboard
+      }`}
+    >
+      <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
+        <TopBanner />
+        <TopBanner />
+        <TopBanner />
+      </div>
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
+        <LowerBanner />
+        <LowerBanner />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default AccountDashboard
+export default AccountDashboard;
+
+const TopBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col shadow-md rounded-xl">
+      <div className="h-[12rem] rounded-t-xl">
+        <img
+          src={Image}
+          alt="banner-img"
+          className="w-full h-full rounded-t-xl"
+        />
+      </div>
+      <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>
+        <div className="flex justify-between w-full px-2 items-center">
+          <span className="text-slate-300 font-semibold">follow up text</span>
+          <button className="flex items-center justify-center gap-2">
+            <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+            <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+            <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LowerBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div 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>
+        </div>
+        <div className="w-[150px] h-[100px]">
+          <img
+            src={Image}
+            alt="banner-img"
+            className="w-full h-full rounded-xl"
+          />
+        </div>
+      </div>
+      <div className="flex justify-between w-full px-2 items-center">
+        <span className="text-slate-300 font-semibold">follow up text</span>
+        <button className="flex items-center justify-center gap-2">
+          <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+          <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+          <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
+        </button>
+      </div>
+    </div>
+  );
+};

From dd802ab22efc45a6025058eaaf1fa1ecafdcb5ab Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Mon, 26 Feb 2024 16:38:57 +0100
Subject: [PATCH 2/2] increase size of dots

---
 src/components/Dashboards/AccountDashboard.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx
index 5d88408..8c84348 100644
--- a/src/components/Dashboards/AccountDashboard.jsx
+++ b/src/components/Dashboards/AccountDashboard.jsx
@@ -41,9 +41,9 @@ const TopBanner = () => {
         <div className="flex justify-between w-full px-2 items-center">
           <span className="text-slate-300 font-semibold">follow up text</span>
           <button className="flex items-center justify-center gap-2">
-            <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
-            <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
-            <div className="w-[2px] h-[2px] 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>
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
           </button>
         </div>
       </div>
@@ -73,9 +73,9 @@ const LowerBanner = () => {
       <div className="flex justify-between w-full px-2 items-center">
         <span className="text-slate-300 font-semibold">follow up text</span>
         <button className="flex items-center justify-center gap-2">
-          <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
-          <div className="w-[2px] h-[2px] bg-slate-400 rounded-full"></div>
-          <div className="w-[2px] h-[2px] 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>
+          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
         </button>
       </div>
     </div>