src/components/Cards/DefaultCard.tsx

@@ -0,0 +1,42 @@
+import { Icons } from "../"
+
+type Props = {
+  title?: string,
+  descText?: string,
+  iconName?: string,
+  iconColor?: string,
+  cardClass?: string,
+  titleClass?: string,
+  descTextClass?: string,
+  onClick?: ()=>any
+}
+
+
+export default function DefaultCard({
+title,
+descText,
+iconName,
+iconColor,
+cardClass,
+titleClass,
+descTextClass,
+onClick
+}:Props) {
+  return (
+    <button 
+      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${cardClass && cardClass}`}
+      onClick={onClick}
+    >
+      <div className='w-3/4'>
+        <h1 className={`mb-1 text-[#FFF] text-lg text-left font-bold ${titleClass && titleClass}`}>{title}</h1>
+        <p className={`text-sm text-left ${descTextClass && descTextClass}`}>{descText}</p>
+      </div>
+
+      {iconName && // DISPLAYS ICON IF THERE IS ICON NAME PRESENT
+      <div className='group-hover:-translate-x-2 transition-all duration-300'>
+        <Icons name={iconName} fillColor={`${iconColor ? iconColor : '#FFF'}`} />
+      </div>
+      }
+    </button>
+  )
+}

src/components/Cards/index.tsx

@@ -0,0 +1,3 @@
+import DefaultCard from "./DefaultCard";
+
+export { DefaultCard };

src/components/Dashboard/DashboardHome.tsx

@@ -0,0 +1,58 @@
+import { DefaultCard } from "../"
+
+export default function DashboardHome() {
+  return (
+    <div className='w-full'>
+      <div className='group w-full xxs:w-96 h-32'>
+        <DefaultCard 
+          descText='You currently do not have any open application. Click on apply for a loan to get started.'
+          iconName='arrow'
+          iconColor='#FBB700'
+          cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
+          descTextClass='text-[#423131] leading-5'
+          onClick={()=>{console.log('working')}}
+        />
+      </div>
+
+      <div className='w-full mt-20 flex gap-16 flex-wrap'>
+        {/* cards display */}
+        <div className='group h-40 w-full xxs:w-80'>
+          <DefaultCard 
+            title='Apply for a loan'
+            descText='You currently do not have any open application. Click on apply for a loan to get started.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+        <div className='group h-40 w-full xxs:w-80'>
+          <DefaultCard 
+            title='Loan history'
+            descText='You currently do not have any open application. Click on apply for a loan to get started.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+        <div className='group h-40 w-full xxs:w-80'>
+          <DefaultCard 
+            title='How it works?'
+            descText='Steps to follow to complete your loan application successfully.'
+            iconName='greater-than'
+            iconColor='#FFF'
+            cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+            titleClass='text-[#FFF]'
+            descTextClass='text-[#EFEFEF] leading-5'
+            onClick={()=>{console.log('working')}}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Dashboard/index.tsx

@@ -0,0 +1,3 @@
+import DashboardHome from './DashboardHome'
+
+export { DashboardHome };

src/components/DashboardLayout/Aside.tsx

@@ -28,7 +28,7 @@ export default function Aside() {
         ))}
       </div>
       <div className="w-full flex justify-center items-center">
-        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium" onClick={()=>navigate('/login', {replace:true})}>
+        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md" onClick={()=>navigate('/login', {replace:true})}>
           Log out
         </button>
       </div>

src/components/DashboardLayout/DashboardLayout.tsx

@@ -34,7 +34,7 @@ export default function DashboardLayout({children}:{children: ReactNode}) {
       </aside>
 
       <main className={`dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden`}>
-          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/Ellipse1.png')] bg-no-repeat bg-[top_right]`}>
+          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/bg_ellipse1.png')] bg-no-repeat bg-[top_right]`}>
             <div className='h-14 w-full flex justify-end items-center gap-5'>
                 {/* <div className=''>
                 <button className='px-4 py-2 rounded-lg shadow-lg bg-white/50'>DarkMode</button>

src/components/Icons/Icons.tsx

@@ -28,6 +28,14 @@ export default function Icons({name, fillColor}:Props) {
     <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M8 10.5H7.99937C7.99937 9.99438 8.04125 10.2272 5.34156 4.82781C4.79 3.725 3.21062 3.72281 2.65812 4.82781C-0.0643752 10.2734 0.000625 10.0103 0.000625 10.5H0C0 11.8806 1.79094 13 4 13C6.20906 13 8 11.8806 8 10.5ZM4 5.5L6.25 10H1.75L4 5.5ZM19.9994 10.5C19.9994 9.99438 20.0413 10.2272 17.3416 4.82781C16.79 3.725 15.2106 3.72281 14.6581 4.82781C11.9356 10.2734 12.0006 10.0103 12.0006 10.5H12C12 11.8806 13.7909 13 16 13C18.2091 13 20 11.8806 20 10.5H19.9994ZM13.75 10L16 5.5L18.25 10H13.75ZM16.5 14H11V4.78906C11.7347 4.4675 12.2863 3.80531 12.4497 3H16.5C16.7763 3 17 2.77625 17 2.5V1.5C17 1.22375 16.7763 1 16.5 1H11.9888C11.5325 0.39625 10.8153 0 10 0C9.18469 0 8.4675 0.39625 8.01125 1H3.5C3.22375 1 3 1.22375 3 1.5V2.5C3 2.77625 3.22375 3 3.5 3H7.55031C7.71375 3.805 8.265 4.4675 9 4.78906V14H3.5C3.22375 14 3 14.2238 3 14.5V15.5C3 15.7762 3.22375 16 3.5 16H16.5C16.7763 16 17 15.7762 17 15.5V14.5C17 14.2238 16.7763 14 16.5 14Z" fill={fillColor ? fillColor : '#5C2684'}/>
     </svg>
+    :name == 'arrow'?
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.3072 1.05822L7.03885 0.34847C7.34865 0.0479466 7.8496 0.0479466 8.15611 0.34847L14.563 6.56035C14.8728 6.86087 14.8728 7.34682 14.563 7.64415L8.15611 13.8592C7.84631 14.1597 7.34536 14.1597 7.03885 13.8592L6.3072 13.1495C5.9941 12.8458 6.00069 12.3502 6.32038 12.0529L10.2917 8.38267H0.819787C0.381453 8.38267 0.0288086 8.04058 0.0288086 7.61538V6.59232C0.0288086 6.16711 0.381453 5.82503 0.819787 5.82503H10.2917L6.32038 2.15481C5.9974 1.85748 5.99081 1.36194 6.3072 1.05822Z" fill={fillColor ? fillColor : '#FBB700'}/>
+    </svg>
+    :name == 'greater-than'?
+    <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.74365 8.64502L3.10303 15.2856C2.64404 15.7446 1.90186 15.7446 1.44775 15.2856L0.344238 14.1821C-0.114746 13.7231 -0.114746 12.981 0.344238 12.5269L5.05127 7.81982L0.344238 3.11279C-0.114746 2.65381 -0.114746 1.91162 0.344238 1.45752L1.44287 0.344238C1.90186 -0.114746 2.64404 -0.114746 3.09814 0.344238L9.73877 6.98486C10.2026 7.44385 10.2026 8.18604 9.74365 8.64502Z" fill={fillColor ? fillColor : '#FFF'}/>
+    </svg>
     :
     null
     }

src/components/index.ts

@@ -5,3 +5,5 @@ export * from "./shared";
 export * from "./Footer";
 export * from "./DashboardLayout";
 export * from "./Icons";
+export * from './Dashboard'
+export * from './Cards'

src/pages/DashboardHome.tsx

@@ -1,5 +0,0 @@
-export default function DashboardHome() {
-  return (
-    <div className=''>DashboardHome</div>
-  )
-}

src/pages/DashboardHomePage.tsx

@@ -0,0 +1,9 @@
+import { DashboardHome } from "../components"
+
+export default function DashboardHomePage() {
+  return (
+    <div className=''>
+      <DashboardHome />
+    </div>
+  )
+}

src/pages/DashboardLegalsPage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardLegals() {
+export default function DashboardLegalsPage() {
   return (
     <div>DashboardLegals</div>
   )

src/pages/DashboardPaymentsPage.tsx

@@ -1,4 +1,4 @@
-export default function Dashboardpayments() {
+export default function DashboardpaymentsPage() {
   return (
     <div>Dashboardpayments</div>
   )

src/pages/DashboardProfilePage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardProfile() {
+export default function DashboardProfilePage() {
   return (
     <div>DashboardProfile</div>
   )

src/pages/DashboardVerificationPage.tsx

@@ -1,4 +1,4 @@
-export default function DashboardVerification() {
+export default function DashboardVerificationPage() {
   return (
     <div>DashboardVerification</div>
   )

src/pages/index.ts

@@ -1,10 +1,10 @@
 import HomePage from "./HomePage";
 import LoginPage from "./LoginPage";
 import GetStartedPage from "./GetStartedPage";
-import DashboardHome from "./DashboardHome";
-import DashboardLegals from "./DashboardLegals";
-import DashboardProfile from "./DashboardProfile";
-import DashboardVerification from "./DashboardVerification";
-import Dashboardpayments from "./DashboardPayments";
+import DashboardHomePage from "./DashboardHomePage";
+import DashboardLegalsPage from "./DashboardLegalsPage";
+import DashboardProfilePage from "./DashboardProfilePage";
+import DashboardVerificationPage from "./DashboardVerificationPage";
+import DashboardpaymentsPage from "./DashboardPaymentsPage";
 
-export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments}
+export {HomePage, LoginPage, GetStartedPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage}

src/router/Router.tsx

@@ -1,6 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { GetStartedPage, HomePage, LoginPage, DashboardHome,  DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages";
+import { GetStartedPage, HomePage, LoginPage, DashboardHomePage,  DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage } from "../pages";
 import { DashboardAuth } from "../components";
 
 const Routers = () => {
@@ -10,11 +10,11 @@ const Routers = () => {
       <Route path={RouteHandler.loginpage} element={<LoginPage />} />
       <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
       <Route element={<DashboardAuth />}>
-          <Route path={RouteHandler.dashboardHome} element={<DashboardHome />} />
-          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfile />} />
-          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerification />} />
-          <Route path={RouteHandler.dashboardPayments} element={<Dashboardpayments />} />
-          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegals />} />
+          <Route path={RouteHandler.dashboardHome} element={<DashboardHomePage />} />
+          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfilePage />} />
+          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerificationPage />} />
+          <Route path={RouteHandler.dashboardPayments} element={<DashboardpaymentsPage />} />
+          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegalsPage />} />
       </Route>
       <Route path='*'element={<>Error Page</>} />
     </Routes>