2024-03-25 12:09:09 +00:00
23 changed files with 743 additions and 313 deletions
@@ -18,6 +18,26 @@
  background-color: #5A2C82;
 }

+.btn-W {
+  background: white !important;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #FBB700;
+  line-height: 25px;
+  align-items: center !important;
+}
+
+.btn-Y {
+  background: #FBB700 !important;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
+  /* color: white; */
+  line-height: 25px;
+  align-items: center !important;
+}
+
 .sidebar {
  position: fixed;
  top: 0;
@@ -0,0 +1,51 @@
+import { Button, InputCompOne, Stepper } from "..";
+import { useNavigate } from "react-router-dom";
+import { RouteHandler } from "../../router/routes";
+
+export default function DashboardFormInit() {
+  let navigate = useNavigate();
+
+  const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={0} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          label="How Much Do You Want To Apply For?"
+          labelClass="font-bold text-[1.125rem]"
+          input
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          placeholder="350,000"
+        />
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          label="For How Many Months?"
+          labelClass="font-bold text-[1.125rem]"
+          input
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          placeholder="12 Months"
+        />
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          label="Direct sales agent ID ( Optional )"
+          labelClass="font-bold text-[1.125rem]"
+          input
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          placeholder="Agent ID"
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={navigateToProfile}
+        />
+      </div>
+    </div>
+  );
+}
@@ -1,58 +1,24 @@
-import { DefaultCard } from "../"
+import React, { FC } from "react";
+import DashboardHomeIntro from "./DashboardHomeIntro";
+import DashboardFormInit from "./DashboardFormInit";
+
+interface DashboardHomeProps {}
+
+const DashboardHome: FC<DashboardHomeProps> = () => {
+  const [step, setStep] = React.useState(1);
+
+  const handleNextStep = () => {
+    if (step < 2) {
+      setStep(step + 1);
+    }
+  };

-export default function DashboardHome() {
  return (
-    <div className='w-full'>
-      <div className='group w-full lg: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 lg: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 lg: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 lg: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 className="w-full">
+      {step === 1 && <DashboardHomeIntro handleNextStep={handleNextStep} />}
+      {step === 2 && <DashboardFormInit />}
    </div>
-  )
-}
+  );
+};
+
+export default DashboardHome;
@@ -0,0 +1,154 @@
+import React, { FC } from "react";
+import NairaBag from "../../assets/images/dashboard/naira-bag.png";
+import { Button } from "../";
+
+export interface DashBoardCardProps {
+  title?: string;
+  desc?: string;
+  descSpan?: string;
+  descSpanClass?: string;
+  onClick?: any;
+  cardClass?: string;
+  titleClass?: string;
+  descClass?: string;
+  btnTitle?: string;
+  btnTextClass?: string;
+  image?: any;
+  imgClass?: string;
+}
+
+export const DashBoardCard: React.FC<DashBoardCardProps> = ({
+  title,
+  desc,
+  onClick,
+  cardClass,
+  titleClass,
+  descClass,
+  descSpan,
+  descSpanClass,
+  btnTitle,
+  btnTextClass,
+  image,
+  imgClass,
+}) => {
+  return (
+    <div
+      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 flex flex-col gap-[2.3125rem]">
+        {title && (
+          <h1
+            className={`mb-1 text-[#FFF] text-lg text-left font-bold ${
+              titleClass && titleClass
+            }`}
+          >
+            {title}
+          </h1>
+        )}
+        {desc && (
+          <p className={`text-lg text-left ${descClass && descClass}`}>
+            {desc}{" "}
+            {descSpan && (
+              <span className={`${descSpanClass && descSpanClass}`}>
+                {descSpan}
+              </span>
+            )}
+          </p>
+        )}
+        {btnTitle && (
+          <Button className={btnTextClass} text={btnTitle} onClick={onClick} />
+        )}
+      </div>
+      {image && <img className={imgClass} src={image} alt="card-image" />}
+    </div>
+  );
+};
+
+interface DashboardHomeIntroProps {
+  handleNextStep: any;
+}
+
+const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep }) => {
+  return (
+    <>
+      <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</h1>
+      <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+        <DashBoardCard
+          cardClass="bg-[#5C2684] relative"
+          desc="Begin your application and get up to "
+          descSpan="5 million naira loan."
+          descClass="leading-[1.5625rem] text-lg text-white"
+          descSpanClass="font-bold"
+          btnTitle="Apply here"
+          btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+          image={NairaBag}
+          imgClass="translate-y-4 -rotate-6"
+          onClick={handleNextStep}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DashboardHomeIntro;
+
+//  {/* <div className="group w-full lg: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">
+//         <div className="group h-40 w-full lg: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 lg: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 lg: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> */}
@@ -0,0 +1,68 @@
+import { Button, InputCompOne, Stepper } from "..";
+
+export default function DashboardProfile() {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={1} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Select your gender"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Male"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Residential address"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Somewhere in lagos"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Marital status"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Single"
+          />{" "}
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Select your state"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Lagos"
+          />
+        </div>
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          label="Email address"
+          labelClass="font-bold text-[1.125rem]"
+          input
+          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          placeholder="johndoe@gmail.com"   
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          // onClick={navigateToProfile}
+        />
+      </div>
+    </div>
+  );
+}
@@ -1,3 +1,4 @@
 import DashboardHome from './DashboardHome'
+import DashboardProfile from './DashboardProfile';

-export { DashboardHome };
+export { DashboardHome, DashboardProfile };
@@ -1,116 +0,0 @@
-import {useState} from 'react'
-import { Link, useLocation, useNavigate } from "react-router-dom";
-
-import { Icons } from "../index";
-
-type Props = {
-  asideDisplay?: () => void
-}
-
-export default function Aside({asideDisplay}:Props) {
-
-  const {pathname} = useLocation()
-
-  const navigate = useNavigate()
-
-  const [openNestedLink, setOpenNestedLink] = useState<{name:string|null}>({name: ''})
-
-  const handleOpenNestedLink = (e:any) => {
-    if(!e || !e.target){
-      return setOpenNestedLink({name: ''})
-    }
-   if(openNestedLink.name && openNestedLink.name == e.target.name){
-      setOpenNestedLink({name: ''})
-    }else{
-      setOpenNestedLink({name: e.target.name})
-    }
-  }
-
-  return (
-    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
-      <div className="flex justify-center items-center text-sm">
-        <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
-          AC
-        </p>
-      </div>
-      <div className="mt-10 h-full overflow-y-auto bg-inherit">
-        {asideLinks.map((link, index) => {
-          if(link.nestedLink?.length){
-            let allNestedLinks = link.nestedLink.map(item => item.link)
-            return (
-              <div key={index} className='w-full relative bg-inherit overflow-hidden'>
-                <button
-                    name={link.name} 
-                    onClick={(e)=>handleOpenNestedLink(e)}
-                    className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg border-2 flex justify-between items-center z-10 bg-inherit ${allNestedLinks.includes(pathname) ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`} 
-                >
-                  {link.name}
-                  <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
-                    <Icons 
-                      name='greater-than' 
-                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
-                    />
-                  </div>
-                </button>
-                <div className={`transition-all duration-300 w-full z-1 ${openNestedLink.name == link.name ? 'relative top-0' : 'absolute -top-[500px]'}`}>
-                  {link.nestedLink.map((nextLink, index) => (
-                    <Link
-                      onClick={()=>{asideDisplay && asideDisplay()}}
-                      key={index}
-                      to={nextLink.link ? nextLink.link : '#'}
-                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium border-l-2 ${pathname == nextLink.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
-                    >
-                    <Icons name={nextLink.icon} fillColor={`${pathname == nextLink.link ? '#5C2684' : '#585858'}`} />
-                    {nextLink.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            )
-          }else{
-            return(
-              <Link
-                onClick={()=>{asideDisplay && asideDisplay()}}
-                key={index}
-                to={link.link ? link.link : '#'}
-                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
-              >
-              <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
-              {link.name}
-              </Link>
-            )
-          }
-        })}
-      </div>
-      <div className="w-full flex justify-center items-center">
-        <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>
-    </div>
-  );
-}
-
-
-type AsideLinksType = {
-    name: string,
-    link?: string,
-    icon: string,
-    nestedLink:{
-      name: string,
-      link: string,
-      icon: string,
-    }[]
-}[]
-const asideLinks:AsideLinksType = [
-    {name: 'Home', link: '/dashboard/home', icon: 'home', nestedLink:[]},
-    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile', nestedLink:[]},
-    {name: 'Verification', link: '/dashboard/verification', icon: 'verification', nestedLink:[]},
-    {name: 'Payments', link: '/dashboard/payments', icon: 'payments', nestedLink:[]},
-    {name: 'Legals', link: '/dashboard/legals', icon: 'legals', nestedLink:[]},
-    {name: 'Nested Link', icon: 'home', nestedLink:[
-        {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'}, 
-        {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
-      ]
-    },
-]
@@ -1,92 +0,0 @@
-import { ReactNode, useState, useEffect } from 'react'
-
-import Aside from './Aside'
-
-export default function DashboardLayout({children}:{children: ReactNode}) {
-
-  const [showAside, setShowAside] = useState<boolean>(false)
-
-  const asideDisplay = ():void => {
-    setShowAside(prev => !prev)
-  }
-
-  useEffect(() => {
-    const handleResize = () => {
-        return setShowAside(false)
-        // setWidthSize(window.innerWidth)
-    }
-    window.addEventListener('resize', handleResize)
-  
-    // return () => {
-    //   window.removeEventListener('resize', screenResized)
-    // }
-  }, [])
-  
-
-  return (
-    <div className='w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black'>
-      <aside className='w-[300px] bg-white hidden md:block border-r-2 border-[#E6E6E6]'>
-        <Aside />
-      </aside>
-
-      <aside className={`w-[300px] md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${showAside ? 'left-0' : '-left-[200%]'}`}>
-        <Aside asideDisplay={asideDisplay}/>
-      </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/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>
-                </div> */}
-                {/* MENU HAND BURGER */}
-                <div className='w-full'>Welcome Austin Catherine</div>
-                <div
-                className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
-                onClick={asideDisplay}
-                >
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                    showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
-                    }`}
-                ></div>
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
-                    showAside
-                        ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
-                        : "top-1/2 -translate-y-1/2"
-                    }`}
-                ></div>
-                <div
-                    className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                    showAside
-                        ? "top-1/2 -translate-y-1/2 -rotate-45"
-                        : "bottom-0"
-                    }`}
-                ></div>
-                </div>
-            </div>
-          </header>
-          <div className='flex p-5 relative'>
-            <div className='w-full p-5'>
-              {children}
-            </div>
-
-            {/* <div className={`pl-5 w-[300px] min-w-[300px] hidden lg:block`}>
-              <div className='sticky top-16'>
-                <div className='w-full min-h-72 bg-white/50 shadow-lg rounded-lg p-5'>
-                  <p className='text-base font-semibold tracking-wide pb-2' title='Answered question is marked green'>Answered Question</p>
-                  <div className='grid grid-cols-8 gap-2'>
-                    {Array.from({length: 50}, (_, i) => i + 1).map((item, index) => (
-                      <span key={index} className={`w-6 h-6 text-sm rounded-full flex justify-center items-center shadow-lg cursor-pointer ${index%2 == 0 ? 'bg-emerald-600' : ''}`}>{item}</span>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div> */}
-          </div>
-      </main>
-    </div>
-  )
-}
-
@@ -8,7 +8,9 @@ const GetStarted = () => {
  const [step, setStep] = React.useState(1);

  const handleNextStep = () => {
-    setStep(step + 1);
+    if (step < 4) {
+      setStep(step + 1);
+    }
  };

  // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
@@ -1,45 +1,114 @@
+import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
 type Props = {
-    name:string,
-    fillColor?:string
-}
+  name: string;
+  fillColor?: string;
+};

-export default function Icons({name, fillColor}:Props) {
+export default function Icons({ name, fillColor }: Props) {
  return (
    <>
-    {name == 'home' ?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14.1667 14.9875V19.9875H17.5C18.8807 19.9875 20 18.8682 20 17.4875V9.88673C20.0002 9.4538 19.832 9.03778 19.5308 8.72673L12.4492 1.07087C11.1996 -0.281086 9.09074 -0.364094 7.73879 0.885437C7.67457 0.944812 7.6127 1.00665 7.55336 1.07087L0.48418 8.72423C0.173945 9.03657 -0.000117128 9.45899 5.9134e-08 9.89923V17.4875C5.9134e-08 18.8682 1.1193 19.9875 2.5 19.9875H5.83332V14.9875C5.84891 12.7152 7.68355 10.8596 9.89867 10.8061C12.1879 10.7509 14.1492 12.6381 14.1667 14.9875Z" fill={fillColor ? fillColor : '#5C2684'}/>
-        <path d="M10 12.4875C8.6193 12.4875 7.5 13.6068 7.5 14.9875V19.9875H12.5V14.9875C12.5 13.6068 11.3807 12.4875 10 12.4875Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'profile'?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z" fill={fillColor ? fillColor : '#5C2684'}/>
-        <path d="M10 11.6667C5.85977 11.6713 2.50461 15.0265 2.5 19.1667C2.5 19.6269 2.87309 20 3.33332 20H16.6666C17.1269 20 17.5 19.6269 17.5 19.1667C17.4954 15.0265 14.1402 11.6713 10 11.6667Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'verification'?
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.728 6.8281L18.1812 5.28145C17.814 4.91432 17.2203 4.91432 16.857 5.28145L7.50177 14.6356L3.15031 10.2807C2.78313 9.91359 2.1894 9.91359 1.82613 10.2807L0.275384 11.8313C-0.0917946 12.1984 -0.0917946 12.7921 0.275384 13.1592L6.83772 19.7246C7.2049 20.0918 7.79864 20.0918 8.16191 19.7246L19.7241 8.15603C20.0913 7.78499 20.0913 7.19133 19.728 6.8281ZM7.06037 10.9681C7.30256 11.2142 7.70098 11.2142 7.94316 10.9681L16.068 2.8365C16.3101 2.59044 16.3101 2.19597 16.068 1.95382L14.3024 0.184543C14.0602 -0.0615144 13.6618 -0.0615144 13.4196 0.184543L7.50177 6.10164L5.33776 3.93399C5.09558 3.68794 4.69715 3.68794 4.45497 3.93399L2.68548 5.70327C2.4433 5.94932 2.4433 6.3438 2.68548 6.58595L7.06037 10.9681Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'payments'?
-    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 14.2857C0 15.2321 0.746528 16 1.66667 16H18.3333C19.2535 16 20 15.2321 20 14.2857V8H0V14.2857ZM6.66667 11.8571C6.66667 11.6214 6.85417 11.4286 7.08333 11.4286H11.8056C12.0347 11.4286 12.2222 11.6214 12.2222 11.8571V13.2857C12.2222 13.5214 12.0347 13.7143 11.8056 13.7143H7.08333C6.85417 13.7143 6.66667 13.5214 6.66667 13.2857V11.8571ZM2.22222 11.8571C2.22222 11.6214 2.40972 11.4286 2.63889 11.4286H5.13889C5.36806 11.4286 5.55556 11.6214 5.55556 11.8571V13.2857C5.55556 13.5214 5.36806 13.7143 5.13889 13.7143H2.63889C2.40972 13.7143 2.22222 13.5214 2.22222 13.2857V11.8571ZM20 1.71429V3.42857H0V1.71429C0 0.767857 0.746528 0 1.66667 0H18.3333C19.2535 0 20 0.767857 20 1.71429Z" fill={fillColor ? fillColor : '#5C2684'}/>
-    </svg>
-    :name == 'legals'?
-    <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
-    }
+      {name == "home" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.1667 14.9875V19.9875H17.5C18.8807 19.9875 20 18.8682 20 17.4875V9.88673C20.0002 9.4538 19.832 9.03778 19.5308 8.72673L12.4492 1.07087C11.1996 -0.281086 9.09074 -0.364094 7.73879 0.885437C7.67457 0.944812 7.6127 1.00665 7.55336 1.07087L0.48418 8.72423C0.173945 9.03657 -0.000117128 9.45899 5.9134e-08 9.89923V17.4875C5.9134e-08 18.8682 1.1193 19.9875 2.5 19.9875H5.83332V14.9875C5.84891 12.7152 7.68355 10.8596 9.89867 10.8061C12.1879 10.7509 14.1492 12.6381 14.1667 14.9875Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+          <path
+            d="M10 12.4875C8.6193 12.4875 7.5 13.6068 7.5 14.9875V19.9875H12.5V14.9875C12.5 13.6068 11.3807 12.4875 10 12.4875Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "profile" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+          <path
+            d="M10 11.6667C5.85977 11.6713 2.50461 15.0265 2.5 19.1667C2.5 19.6269 2.87309 20 3.33332 20H16.6666C17.1269 20 17.5 19.6269 17.5 19.1667C17.4954 15.0265 14.1402 11.6713 10 11.6667Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "verification" ? (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19.728 6.8281L18.1812 5.28145C17.814 4.91432 17.2203 4.91432 16.857 5.28145L7.50177 14.6356L3.15031 10.2807C2.78313 9.91359 2.1894 9.91359 1.82613 10.2807L0.275384 11.8313C-0.0917946 12.1984 -0.0917946 12.7921 0.275384 13.1592L6.83772 19.7246C7.2049 20.0918 7.79864 20.0918 8.16191 19.7246L19.7241 8.15603C20.0913 7.78499 20.0913 7.19133 19.728 6.8281ZM7.06037 10.9681C7.30256 11.2142 7.70098 11.2142 7.94316 10.9681L16.068 2.8365C16.3101 2.59044 16.3101 2.19597 16.068 1.95382L14.3024 0.184543C14.0602 -0.0615144 13.6618 -0.0615144 13.4196 0.184543L7.50177 6.10164L5.33776 3.93399C5.09558 3.68794 4.69715 3.68794 4.45497 3.93399L2.68548 5.70327C2.4433 5.94932 2.4433 6.3438 2.68548 6.58595L7.06037 10.9681Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "payments" ? (
+        <svg
+          width="20"
+          height="16"
+          viewBox="0 0 20 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 14.2857C0 15.2321 0.746528 16 1.66667 16H18.3333C19.2535 16 20 15.2321 20 14.2857V8H0V14.2857ZM6.66667 11.8571C6.66667 11.6214 6.85417 11.4286 7.08333 11.4286H11.8056C12.0347 11.4286 12.2222 11.6214 12.2222 11.8571V13.2857C12.2222 13.5214 12.0347 13.7143 11.8056 13.7143H7.08333C6.85417 13.7143 6.66667 13.5214 6.66667 13.2857V11.8571ZM2.22222 11.8571C2.22222 11.6214 2.40972 11.4286 2.63889 11.4286H5.13889C5.36806 11.4286 5.55556 11.6214 5.55556 11.8571V13.2857C5.55556 13.5214 5.36806 13.7143 5.13889 13.7143H2.63889C2.40972 13.7143 2.22222 13.5214 2.22222 13.2857V11.8571ZM20 1.71429V3.42857H0V1.71429C0 0.767857 0.746528 0 1.66667 0H18.3333C19.2535 0 20 0.767857 20 1.71429Z"
+            fill={fillColor ? fillColor : "#5C2684"}
+          />
+        </svg>
+      ) : name == "legals" ? (
+        <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>
+      ) : name == "dash-icon" ? (
+        <img src={dashIcon} alt="dash-icon" />
+      ) : null}
    </>
-  )
+  );
 }
-
@@ -3,7 +3,7 @@ export * from "./Home";
 export * from "./GetStarted";
 export * from "./shared";
 export * from "./Footer";
-export * from "./DashboardLayout";
+// export * from "./DashboardLayout";
 export * from "./Icons";
 export * from "./Dashboard";
 export * from "./Cards";
@@ -0,0 +1,25 @@
+import React from "react";
+
+interface StepperProps {
+  step: number;
+}
+
+const Stepper: React.FC<StepperProps> = ({ step = 0 }) => {
+  //   const [activeStep, setActiveStep] = useState(step);
+
+  return (
+    <div className="flex justify-between items-center gap-5">
+      {[...Array(6)].map((_, index) => (
+        <div
+          key={index}
+          className={`w-[1.875rem] border-[.1875rem] rounded-sm ${(step === index
+            ? "border-[#E8B4FF]"
+            : "border-[#5C2684]")}`}
+          //   onClick={() => setActiveStep(index)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Stepper;
@@ -1,5 +1,6 @@
 import Button from "./Button";
 import InputCompOne from "./InputCompOne";
 import FloatLabelInput from "./FloatLabelInput";
+import Stepper from "./Stepper";

-export { Button, FloatLabelInput, InputCompOne };
+export { Button, FloatLabelInput, InputCompOne, Stepper };
@@ -16,7 +16,4 @@ body {
  .containerMode {
    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
  }
-  .dash-bg-image{
-    background: url('../src/assets/images/dashboard/bg_ellipse1.png') right top no-repeat, url('../src/assets/images/dashboard/bg_ellipse2.png') -8% bottom no-repeat;;
-  }
 }
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+import { Icons } from "../../components";
+
+type Props = {
+  asideDisplay?: () => void;
+};
+
+export default function Aside({ asideDisplay }: Props) {
+  const { pathname } = useLocation();
+
+  const navigate = useNavigate();
+
+  const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
+    { name: "" }
+  );
+
+  const handleOpenNestedLink = (e: any) => {
+    if (!e || !e.target) {
+      return setOpenNestedLink({ name: "" });
+    }
+    if (openNestedLink.name && openNestedLink.name == e.target.name) {
+      setOpenNestedLink({ name: "" });
+    } else {
+      setOpenNestedLink({ name: e.target.name });
+    }
+  };
+
+  return (
+    <div className="py-5 px-10 flex flex-col h-full bg-inherit">
+      <Link to="/">
+        <img src={Logo} alt="Logo" className="w-[72px] h-[63px]" />
+      </Link>
+      <div className="mt-10 h-full overflow-y-auto bg-inherit">
+        {asideLinks.map((link, index) => {
+          if (link.nestedLink?.length) {
+            let allNestedLinks = link.nestedLink.map((item) => item.link);
+            return (
+              <div
+                key={index}
+                className="w-full relative bg-inherit overflow-hidden"
+              >
+                <button
+                  name={link.name}
+                  onClick={(e) => handleOpenNestedLink(e)}
+                  className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
+                    allNestedLinks.includes(pathname)
+                      ? " text-[#5C2684]"
+                      : " text-[#585858]"
+                  }`}
+                >
+                  {link.name}
+                  {/* <div className={`mr-2 ${openNestedLink.name == link.name ? '-rotate-90' : 'rotate-90'} transition-all duration-300`}>
+                    <Icons
+                      name='greater-than' 
+                      fillColor={`${openNestedLink.name == link.name ? '#5C2684' : '#585858'}`} 
+                    />
+                  </div> */}
+                </button>
+                <div
+                  className={`transition-all duration-300 w-full z-1 ${
+                    openNestedLink.name == link.name
+                      ? "relative top-0"
+                      : "absolute -top-[500px]"
+                  }`}
+                >
+                  {link.nestedLink.map((nextLink, index) => (
+                    <Link
+                      onClick={() => {
+                        asideDisplay && asideDisplay();
+                      }}
+                      key={index}
+                      to={nextLink.link ? nextLink.link : "#"}
+                      className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
+                        pathname == nextLink.link
+                          ? " text-[#5C2684]"
+                          : "text-[#585858]"
+                      }`}
+                    >
+                      <Icons
+                        name={nextLink.icon}
+                        fillColor={`${
+                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                        }`}
+                      />
+                      {nextLink.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            );
+          } else {
+            return (
+              <Link
+                onClick={() => {
+                  asideDisplay && asideDisplay();
+                }}
+                key={index}
+                to={link.link ? link.link : "#"}
+                className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
+                  pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
+                }`}
+              >
+                <Icons
+                  name={link.icon}
+                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                />
+                {link.name}
+              </Link>
+            );
+          }
+        })}
+      </div>
+      <div className="w-full flex justify-center items-center flex-col gap-3">
+        <button
+          className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md w-full"
+          onClick={() => navigate("/login", { replace: true })}
+        >
+          Log out
+        </button>
+
+      
+        <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
+          <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
+            For more enquiries and support
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Call: 09099000000
+          </p>
+          <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
+            Email: fcmbloan@support.com
+          </p>
+        </div>
+      
+      </div>
+    </div>
+  );
+}
+
+type AsideLinksType = {
+  name: string;
+  link?: string;
+  icon: string;
+  nestedLink?: {
+    name: string;
+    link: string;
+    icon: string;
+  }[];
+}[];
+
+const asideLinks: AsideLinksType = [
+  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
+  {
+    name: "Your Profile",
+    link: "/dashboard/profile",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Employment Details",
+    link: "/dashboard/verification",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Reference Details",
+    link: "/dashboard/payments",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  {
+    name: "Agreements",
+    link: "/dashboard/legals",
+    icon: "dash-icon",
+    nestedLink: [],
+  },
+  // {name: 'Nested Link', icon: 'home', nestedLink:[
+  //     {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'},
+  //     {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'}
+  //   ]
+  // },
+];
@@ -1,3 +1,4 @@
+
 import DashboardLayout from "./DashboardLayout";
 import { Outlet } from "react-router-dom";

@@ -0,0 +1,84 @@
+import { ReactNode, useState, useEffect } from "react";
+
+import Aside from "./Aside";
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const [showAside, setShowAside] = useState<boolean>(false);
+  const asideDisplay = (): void => {
+    setShowAside((prev) => !prev);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      return setShowAside(false);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // Assume this interface for ChildProps
+  // interface ChildProps {
+  //   customProp?: string;
+  // }
+
+  // const enhanceChildren = React.Children.map(children, (child) => {
+  //   if (React.isValidElement<ChildProps>(child)) {
+  //     return React.cloneElement(child, { customProp: "Hello, World!" });
+  //   }
+  //   return child;
+  // });
+
+  return (
+    <div className="w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black">
+      <aside className="max-w-[18.75rem] w-full bg-white hidden md:block border-r-2 border-[#E6E6E6]">
+        <Aside />
+      </aside>
+      <aside
+        className={`max-w-[18.75rem] w-full md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${
+          showAside ? "left-0" : "-left-[200%]"
+        }`}
+      >
+        <Aside asideDisplay={asideDisplay} />
+      </aside>
+      <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+        <div className="flex p-5 relative">
+          <div className="w-full p-5">{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+// {/* <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+// <div className='h-14 w-full flex justify-end items-center gap-5'>
+
+//     {/* MENU HAND BURGER */}
+//     <div className='w-full'>Welcome Austin Catherine</div>
+//     <div
+//     className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+//     onClick={asideDisplay}
+//     >
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+//             : "top-1/2 -translate-y-1/2"
+//         }`}
+//     ></div>
+//     <div
+//         className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+//         showAside
+//             ? "top-1/2 -translate-y-1/2 -rotate-45"
+//             : "bottom-0"
+//         }`}
+//     ></div>
+//     </div>
+// </div>
+// </header> */}
@@ -1,4 +1,7 @@
 import HomeLayout from "./HomeLayout";
 import LetsGetStartedLayout from "./LetsGetStartedLayout";
 import GetStartedLayout from "./GetStartedLayout";
-export { HomeLayout, LetsGetStartedLayout, GetStartedLayout };
+import DashboardLayout from "./DashboardLayout/DashboardLayout";
+import { DashboardAuth } from "./DashboardLayout";
+
+export { HomeLayout, LetsGetStartedLayout, GetStartedLayout, DashboardLayout, DashboardAuth };
@@ -1,5 +1,9 @@
+import { DashboardProfile } from "../components";
+
 export default function DashboardProfilePage() {
  return (
-    <div>DashboardProfile</div>
-  )
+    <>
+      <DashboardProfile />
+    </>
+  );
 }
@@ -15,7 +15,7 @@ import {
  PersonalBankingPage,
  LetsGetStatedPage,
 } from "../pages";
-import { DashboardAuth } from "../components";
+import { DashboardAuth } from "../layouts";

 const Routers = () => {
  return (