added props to docker compose file

docker-compose.yml

@@ -14,5 +14,7 @@ services:
       - "5173" 
     environment:
       - PORT=${DIGIFI_PORT}
+    tty: true
+    stdin_open: true
 volumes:
   src:

package.json

@@ -15,6 +15,7 @@
     "formik": "2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "6.3.0",
     "react-select": "^5.8.0",

src/components/Dashboard/DashboardFormInit.tsx

@@ -1,11 +1,16 @@
 import { Button, InputCompOne, Stepper } from "..";
-import { useNavigate } from "react-router-dom";
-import { RouteHandler } from "../../router/routes";
+// import { useNavigate } from "react-router-dom";
+// import { RouteHandler } from "../../router/routes";
 
-export default function DashboardFormInit() {
-  let navigate = useNavigate();
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardFormInit({handleNextStep}:Props) {
+
+  // let navigate = useNavigate();
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
 
-  const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
   return (
     <div className="w-full">
       <div className="w-full flex justify-center">
@@ -26,15 +31,18 @@ export default function DashboardFormInit() {
           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"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={duration}
+          // onChange={()=>{}}
         />
         <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]"
+          floatLabel='Enter agent ID'
           input
           inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
           placeholder="Agent ID"
@@ -43,9 +51,23 @@ export default function DashboardFormInit() {
           className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
           text="Next"
           type="button"
-          onClick={navigateToProfile}
+          onClick={handleNextStep}
         />
       </div>
     </div>
   );
 }
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const duration: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "6", label: "6 Months" },
+  { value: "12", label: "12 Months" },
+  { value: "18", label: "18 Months" },
+  { value: "24", label: "24 Months" },
+];

src/components/Dashboard/DashboardHome.tsx

@@ -1,6 +1,10 @@
 import React, { FC } from "react";
 import DashboardHomeIntro from "./DashboardHomeIntro";
 import DashboardFormInit from "./DashboardFormInit";
+import DashboardHomeDetail from "./home/DashboardHomeDetail";
+import DashboardHomeEmploymentInfo from "./home/DashboardHomeEmploymentInfo";
+import DashboardHomeRefereeInfo from "./home/DashboardHomeRefereeInfo";
+import DashboardHomeAttestation from "./home/DashboardHomeAttestation";
 
 interface DashboardHomeProps {}
 
@@ -8,15 +12,20 @@ const DashboardHome: FC<DashboardHomeProps> = () => {
   const [step, setStep] = React.useState(1);
 
   const handleNextStep = () => {
-    if (step < 2) {
+    if (step < 7) {
       setStep(step + 1);
     }
   };
 
   return (
     <div className="w-full">
-      {step === 1 && <DashboardHomeIntro handleNextStep={handleNextStep} />}
-      {step === 2 && <DashboardFormInit />}
+      {step === 1 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
+      {step === 2 && <DashboardFormInit handleNextStep={handleNextStep} />}
+      {step === 3 && <DashboardHomeDetail handleNextStep={handleNextStep} />}
+      {step === 4 && <DashboardHomeEmploymentInfo handleNextStep={handleNextStep} />}
+      {step === 5 && <DashboardHomeRefereeInfo handleNextStep={handleNextStep} />}
+      {step === 6 && <DashboardHomeAttestation handleNextStep={handleNextStep} />}
+      {step === 7 && <DashboardHomeIntro step={step} handleNextStep={handleNextStep} />}
     </div>
   );
 };

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -69,26 +69,49 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
 
 interface DashboardHomeIntroProps {
   handleNextStep: any;
+  step?:number|string
 }
 
-const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep }) => {
+const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
   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>
+    {step == 1 ?
+      <>
+        <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>
+      </>
+      :
+      <>
+        <h1 className="font-bold my-5 text-2xl">Welcome Back, Olanrewaju</h1>
+        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+          <DashBoardCard
+            cardClass="bg-[#5C2684] relative"
+            desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
+            // descSpan="5 million naira loan."
+            descClass="leading-[1.5625rem] text-lg text-white"
+            // descSpanClass="font-bold"
+            btnTitle="View and accept"
+            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>
+    </>
+    }
     </>
   );
 };

src/components/Dashboard/DashboardProfile.tsx

@@ -1,21 +1,34 @@
-import { Button, InputCompOne, Stepper } from "..";
+import { InputCompOne } from "..";
+
+import { useNavigate } from "react-router-dom";
+import { RouteHandler } from "../../router/routes";
 
 export default function DashboardProfile() {
+    let navigate = useNavigate();
+  const navigateToProfile = () => navigate(RouteHandler.dashboardHome);
   return (
     <div className="w-full">
-      <div className="w-full flex justify-center">
-        <Stepper step={1} />
+      <div className='my-[2rem] flex items-center'>
+        <button onClick={navigateToProfile} className='w-6 h-6 text-lg flex justify-center items-center rounded-full bg-gray-500'>&lt;</button>
       </div>
-      <div className="mt-[3.25rem] flex flex-col gap-9">
-        <div className="flex items-center gap-[4.125rem]">
+      <div className="max-w-[25.875rem] w-full p-4 rounded-xl flex flex-col gap-1 bg-[#FBB700]/30">
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Select your gender"
+            label="Full name"
             labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Male"
+            placeholder="John James"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Phone number"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="07000000000"
           />
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
@@ -26,17 +39,6 @@ export default function DashboardProfile() {
             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"
@@ -46,22 +48,24 @@ export default function DashboardProfile() {
             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}
-        />
+          <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"   
+          />
+            <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            label="Date of birth"
+            labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="12/10/1994"   
+          />
       </div>
     </div>
   );

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -0,0 +1,46 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+// import { useNavigate } from "react-router-dom";
+// import { RouteHandler } from '../../../router/routes';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeAttestation({handleNextStep}:Props) {
+  //     let navigate = useNavigate();
+  // const navigateToProfile = () => navigate(RouteHandler.dashboardProfile);
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={4} />
+      </div>
+      <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
+      <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
+      <div className="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"
+            floatLabel="Disbursement account number"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="0102547896"
+          />
+        </div>
+        <div className='max-w-[25.875rem] flex gap-4 items-start'>
+            <input type='checkbox' className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' />
+            <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
+                premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
+            </p>
+        </div>
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Apply"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -0,0 +1,105 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeDetail({handleNextStep}:Props) {
+  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]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={gender}
+            // onChange={()=>{}}
+          />
+          <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]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={maritalStatus}
+            // onChange={()=>{}}
+          />
+          <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]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={state}
+            // onChange={()=>{}}
+          />
+        </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={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const gender: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "others", label: "Prefer not to say" },
+];
+
+const maritalStatus: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "single", label: "Single" },
+  { value: "married", label: "Married" },
+  { value: "divorced", label: "Divorced" },
+];
+
+const state: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "abia", label: "Abia" },
+  { value: "imo", label: "Imo" },
+  { value: "lagos", label: "Lagos" },
+];

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -0,0 +1,162 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={2} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Job Title"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Software Engineer"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Employer name"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="Mr. Mark John"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Job Sector"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={jobSection}
+            // onChange={()=>{}}
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Select your industry"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={industry}
+            // onChange={()=>{}}
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Date of resumption"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="12/12/2015"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Employers official email"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="example@gmail.com"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Annual Income"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="1,200,000"
+          />
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Net monthly salary"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="100,000"
+          />
+        </div>
+        <div className="flex items-center gap-[4.125rem]">
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Salary payment date"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="30th of every month"
+          />{" "}
+          <InputCompOne
+            parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+            name="applyIshInput"
+            floatLabel="Employee ID"
+            // labelClass="font-bold text-[1.125rem]"
+            input
+            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            placeholder="LS/001/005"
+          />
+        </div>
+        <InputCompOne
+          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+          name="applyIshInput"
+          floatLabel="Highest level of education"
+          // labelClass="font-bold text-[1.125rem]"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={qualification}
+          // onChange={()=>{}}
+        />
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}
+
+
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const jobSection: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "private (non academic)", label: "Private (non academic)" },
+];
+
+const industry: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "engineering", label: "Engineering" },
+];
+
+const qualification: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
+];

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -0,0 +1,126 @@
+import { Button, InputCompOne, Stepper } from '../../shared/index';
+
+type Props = {
+  handleNextStep:()=>any
+}
+
+export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
+  return (
+    <div className="w-full">
+      <div className="w-full flex justify-center">
+        <Stepper step={3} />
+      </div>
+      <div className="mt-[3.25rem] flex flex-col gap-9">
+        <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
+        <div className="flex items-center gap-[4.125rem]">
+          <div className='w-full max-w-[25.875rem]'>
+            <p className='text-red-500 text-base'>Reference one</p>
+            <div className='w-full flex flex-col gap-9'>
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="Full name"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="John James"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="Relationship"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="Sister"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="Phone number"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="07000000000"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="Email address"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="demo@gamil.com"
+                />
+                <InputCompOne
+                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                    name="applyIshInput"
+                    floatLabel="BVN"
+                    // labelClass="font-bold text-[1.125rem]"
+                    input
+                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                    placeholder="2228457896"
+                />
+            </div>
+          </div>
+            <div className='w-full max-w-[25.875rem]'>
+              <p className='text-red-500 text-base'>Reference two</p>
+              <div className='w-full flex flex-col gap-9'>
+                <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Full name"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="John James"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Relationship"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Sister"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Phone number"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="07000000000"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Email address"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="demo@gamil.com"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="BVN"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="2228457896"
+                    />
+              </div>
+            </div>
+        </div>
+        <Button
+          className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
+          text="Next"
+          type="button"
+          onClick={handleNextStep}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Footer/Footer.tsx

@@ -5,8 +5,8 @@ export default function Footer() {
   const date = new Date().getFullYear();
 
   return (
-    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
-      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
+      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>

src/components/GetStarted/ApplicantsAttestation.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import CreditAccount from "./CreditAccount";
 import DebitAccount from "./DebitAccount";
 
 const ApplicantsAttestation: React.FC = () => {
@@ -21,7 +20,6 @@ const ApplicantsAttestation: React.FC = () => {
           </p>
         </div>
       </div>
-      <CreditAccount />
       <DebitAccount />
     </>
   );

src/components/GetStarted/BVN.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
+import { InputCompOne } from "../shared";
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  bvn: Yup.string()
+  .required("BVN is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(11, "must be 11 digits")
+  .max(11, "must be 11 digits")
+});
+
+// initial values for formik
+let initialValues = {
+  bvn: ''
+};
+
+type Props = {
+    handleNextStep:()=>any
+}
+
+const BVN = ({handleNextStep}:Props) => {
+
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (values:any) => {
+    console.log('values', values)
+  };
+
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={handleSubmit}
+    >
+    {(props:any) => (
+      <Form className="">
+        <div className="w-full">
+          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+            <div className="my-[4rem] flex items-center justify-center w-full">
+              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+                Let’s Get You Started
+              </h1>
+            </div>
+            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem]">
+              <InputCompOne
+                parentClass="flex flex-col gap-2"
+                label="Enter Your BVN "
+                name="bvn"
+                parentInputClass="w-full"
+                labelSpan="( To get your BVN, dial *565*0# )"
+                labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                placeholder="Enter your BVN"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                input
+                inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                value={props.values.bvn}
+                onChange={props.handleChange}
+                ref={firstInputRef}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+              />
+              <button
+                type='submit'
+                className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+                onClick={handleNextStep}
+              >
+                Enter
+              </button>
+              <p className="text-[#5C2684] mt-[1.5625rem] max-w-[31.625rem]">
+                ***Every personal information attached to your BVN is safe and secured. It is only inportant for us to verify your information and also give you access to your application profile/account
+              </p>
+            </div>
+          </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
+  );
+};
+
+export default BVN;

src/components/GetStarted/BasicInfo.tsx

@@ -32,7 +32,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   setInputValues,
   handleNextStep,
 }) => {
-  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
+  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.FormEvent<HTMLInputElement>) => {

src/components/GetStarted/DebitAccount.tsx

@@ -1,67 +1,90 @@
 import React from "react";
+import {useNavigate} from 'react-router-dom'
 import { Button, InputCompOne } from "..";
+import { RouteHandler } from "../../router/routes";
 
 const DebitAccount: React.FC = () => {
+  const navigate = useNavigate()
   return (
-    <div className="flex flex-col gap-9">
-      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+    <>
+      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
         <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-          DEBIT ACCOUNT ( Your salary account for monthly repayment )
+          CREDIT ACCOUNT ( Your account to receive your loan )
         </p>
       </div>
       <InputCompOne
-        parentClass="max-w-[471px] w-full ml-5"
-        label="Bank Name"
-        name="bankName"
+        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+        label="Disbursement Account Number "
+        name="disbursementAccountNumber"
+        labelSpan="( Your FCMB Account )"
+        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
         parentInputClass="w-full"
         labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
         input
         inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
       />
 
-      <div className="flex items-center gap-[59px]">
+      <div className="mt-9 flex flex-col gap-9">
+        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+            DEBIT ACCOUNT ( Your salary account for monthly repayment )
+          </p>
+        </div>
         <InputCompOne
           parentClass="max-w-[471px] w-full ml-5"
-          label="Account Number"
-          name="accountNumber"
+          label="Bank Name"
+          name="bankName"
           parentInputClass="w-full"
           labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
           input
           inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
         />
-        <InputCompOne
-          parentClass="max-w-[471px] w-full ml-5"
-          label="Account Name"
-          name="accountName"
-          parentInputClass="w-full"
-          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          input
-          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-        />
-      </div>
 
-      <div className="max-w-[578px] flex items-center">
-        <input
-          type="checkbox"
-        //   checked={true}
-        defaultChecked
-        //   onChange={onChange}
-          className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
-          style={{ backgroundColor: "#5C2684" }}
+        <div className="flex items-center gap-[59px]">
+          <InputCompOne
+            parentClass="max-w-[471px] w-full ml-5"
+            label="Account Number"
+            name="accountNumber"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            input
+            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+          />
+          <InputCompOne
+            parentClass="max-w-[471px] w-full ml-5"
+            label="Account Name"
+            name="accountName"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            input
+            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+          />
+        </div>
+
+        <div className="max-w-[578px] flex items-center">
+          <input
+            type="checkbox"
+          //   checked={true}
+          defaultChecked
+          //   onChange={onChange}
+            className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
+            style={{ backgroundColor: "#5C2684" }}
+          />
+          <label className="ml-2 text-gray-700">
+            I have read, understood and accept the{" "}
+            <span className="text-[#4545CB]">applicant's attestation</span> and
+            all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
+            for FCMB premium salary loan.
+          </label>
+        </div>
+        <Button
+          className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
+          text="Apply"
+          type="button"
+          onClick={()=>navigate(RouteHandler.letsGetStarted, {replace:true})}
         />
-        <label className="ml-2 text-gray-700">
-          I have read, understood and accept the{" "}
-          <span className="text-[#4545CB]">applicant's attestation</span> and
-          all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
-          for FCMB premium salary loan.
-        </label>
       </div>
-      <Button
-        className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
-        text="Apply"
-        type="button"
-      />
-    </div>
+    </>
   );
 };
 

src/components/GetStarted/GetStarted.tsx

@@ -4,14 +4,14 @@ import YourAreAlmostThere from "./YourAreAlmostThere";
 import LoanAmountComp from "./LoanAmountComp";
 import ApplicantsAttestation from "./ApplicantsAttestation";
 
-const GetStarted = () => {
-  const [step, setStep] = React.useState(1);
+const GetStarted = ({handleNextStep, step}:{handleNextStep:any, step:string|number|any}) => {
+  // const [step, setStep] = React.useState(1);
 
-  const handleNextStep = () => {
-    if (step < 4) {
-      setStep(step + 1);
-    }
-  };
+  // const handleNextStep = () => {
+  //   if (step < 5) {
+  //     setStep(step + 1);
+  //   }
+  // };
 
   // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
   //   setStep(step - 1);
@@ -36,16 +36,16 @@ const GetStarted = () => {
       <div className="containerMode">
         {/* Main */}
         <main>
-          {step === 1 && (
+          {step === 2 && (
             <BasicInfo
               inputValues={inputValues}
               setInputValues={setInputValues}
               handleNextStep={handleNextStep}
             />
           )}
-          {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
-          {step === 3 && <LoanAmountComp handleNextStep={handleNextStep} />}
-          {step === 4 && <ApplicantsAttestation />}
+          {step === 3 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
+          {step === 4 && <LoanAmountComp handleNextStep={handleNextStep} />}
+          {step === 5 && <ApplicantsAttestation />}
         </main>
       </div>
     </div>

src/components/Icons/Icons.tsx

@@ -1,10 +1,13 @@
+import { FaCaretDown } from "react-icons/fa";
+
 import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
 type Props = {
   name: string;
   fillColor?: string;
+  className?:string;
 };
 
-export default function Icons({ name, fillColor }: Props) {
+export default function Icons({ name, fillColor, className }: Props) {
   return (
     <>
       {name == "home" ? (
@@ -106,7 +109,9 @@ export default function Icons({ name, fillColor }: Props) {
             fill={fillColor ? fillColor : "#FFF"}
           />
         </svg>
-      ) : name == "dash-icon" ? (
+      ) :name == 'arrow-down'?
+          <FaCaretDown className={`text-xl ${className && className}`} />
+        :name == "dash-icon" ? (
         <img src={dashIcon} alt="dash-icon" />
       ) : null}
     </>

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,21 +1,62 @@
 import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
 import { InputCompOne } from "..";
+import {useNavigate} from 'react-router-dom'
+import { RouteHandler } from "../../router/routes";
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  bvn: Yup.string()
+  .required("BVN is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(11, "must be 11 digits")
+  .max(11, "must be 11 digits"),
+  otp: Yup.string()
+  .required("OTP is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(5, "must be 5 digits")
+  .max(5, "must be 5 digits"),
+  // .test("no-e", "must be 11 characters", (value:any) => {
+  //   if (value.length < 11) {
+  //     return false;
+  //   }
+  //   return true;
+  // })
+});
+
+// initial values for formik
+let initialValues = {
+  bvn: '',
+  otp: '',
+};
 
 const LetsGetStarted: React.FC = () => {
-  const [pinValues, setPinValues] = React.useState({
-    bvn: "",
-    otp: "",
-  });
+  const navigate = useNavigate()
+  // const [pinValues, setPinValues] = React.useState({
+  //   bvn: "",
+  //   otp: "",
+  // });
 
   const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
   const firstInputRef = React.useRef<HTMLInputElement>(null);
   const secondInputRef = React.useRef<HTMLInputElement>(null);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let { name, value } = e.target as HTMLInputElement;
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   let { name, value } = e.target as HTMLInputElement;
 
-    setPinValues((prev) => ({ ...prev, [name]: value }));
-  };
+  //   setPinValues((prev) => ({ ...prev, [name]: value }));
+  // };
 
   const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
     let { name, value } = e.target as HTMLInputElement;
@@ -24,7 +65,7 @@ const LetsGetStarted: React.FC = () => {
       const regex = /^[0-9]+$/;
 
       if (regex.test(value)) {
-        if (value?.length == 10) {
+        if (value?.length == 11) {
           setHideOTPComponent(false);
         //   secondInputRef.current?.focus();
         } else setHideOTPComponent(true);
@@ -34,73 +75,90 @@ const LetsGetStarted: React.FC = () => {
     }
   };
 
-  console.log(secondInputRef)
+  const handleSubmit = (values:any) => {
+    console.log('values', values)
+    navigate(RouteHandler.dashboardHome, {replace:true})
+  };
 
   return (
-    <div className="w-full">
-      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
-        <div className="my-[4rem] flex items-center justify-center w-full">
-          <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
-            Let’s Get You Started
-          </h1>
-        </div>
-        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-          <InputCompOne
-            parentClass="flex flex-col gap-2"
-            label="Enter Your BVN "
-            name="bvn"
-            parentInputClass="w-full"
-            labelSpan="( To get your BVN, dial *565*0# )"
-            labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-            placeholder="Enter your BVN"
-            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-            input
-            inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-            value={pinValues.bvn}
-            onChange={handleChange}
-            onInput={handleInput}
-            ref={firstInputRef}
-            maxLength={10}
-          />
-          {!hideOTPComponent ? (
-            <InputCompOne
-              parentClass="flex flex-col gap-2"
-              label="Enter OTP "
-              name="otp"
-              parentInputClass="w-full"
-              labelSpan="( Please check your BVN phone number for verification pin )"
-              labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-              placeholder="Enter your OTP"
-              labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-              input
-              inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-              value={pinValues.otp}
-              onChange={handleChange}
-              onInput={handleInput}
-              ref={secondInputRef}
-            />
-          ) : null}
-          <button
-            className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
-            disabled={!pinValues.otp}
-          >
-            Enter
-          </button>
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={handleSubmit}
+    >
+    {(props:any) => (
+      <Form className="">
+        <div className="w-full">
+          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+            <div className="my-[4rem] flex items-center justify-center w-full">
+              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+                Let’s Get You Started
+              </h1>
+            </div>
+            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+              <InputCompOne
+                parentClass="flex flex-col gap-2"
+                label="Enter Your BVN "
+                name="bvn"
+                parentInputClass="w-full"
+                labelSpan="( To get your BVN, dial *565*0# )"
+                labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                placeholder="Enter your BVN"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                input
+                inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                value={props.values.bvn}
+                onChange={props.handleChange}
+                onInput={handleInput}
+                ref={firstInputRef}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+              />
+              {!hideOTPComponent && (
+                <InputCompOne
+                  parentClass="flex flex-col gap-2"
+                  label="Enter OTP "
+                  name="otp"
+                  parentInputClass="w-full"
+                  labelSpan="( Please check your BVN phone number for verification pin )"
+                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                  placeholder="Enter your OTP"
+                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                  input
+                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                  value={props.values.otp}
+                  onChange={props.handleChange}
+                  onInput={handleInput}
+                  ref={secondInputRef}
+                  maxLength={11}
+                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
+                />
+              )}
+              <button
+                type='submit'
+                className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+                disabled={!props.values.otp}
+              >
+                Enter
+              </button>
 
-          {hideOTPComponent ? (
-            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-              ***Every personal information attached to your BVN is safe and
-              secure. It is only important for us to verify your information and
-              also give you access to your application profile/account.
-            </p>
-          ) : (
-            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-              ***Did not receive OTP? Click to resend
-            </p>
-          )}
-        </form>
-      </div>
-    </div>
+              {hideOTPComponent ? (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Every personal information attached to your BVN is safe and
+                  secure. It is only important for us to verify your information and
+                  also give you access to your application profile/account.
+                </p>
+              ) : (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Did not receive OTP? Click to resend
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
   );
 };
 

src/components/shared/InputCompOne.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef } from "react";
+import { Icons } from "../Icons";
 
 export interface InputCompOneProps {
-  label: string;
-  labelClass: string;
+  label?: string;
+  labelClass?: string;
   labelSpan?: string;
   labelSpanClass?: string;
+  floatLabel?: string;
   placeholder?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -20,9 +22,9 @@ export interface InputCompOneProps {
   inputClass?: string;
   parentInputClass?: string;
   selectClass?: string;
-  parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
+  error?: string;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -32,6 +34,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       labelClass,
       labelSpan,
       labelSpanClass,
+      floatLabel,
       placeholder,
       value,
       onChange,
@@ -46,22 +49,23 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       inputClass,
       parentInputClass,
       selectClass,
-      parentSelectClass,
       parentClass,
       maxLength,
+      error,
     },
     forwardedRef
   ) => {
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor="" className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+            {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
-          <div className={parentInputClass}>
+          <div className={`relative ${parentInputClass}`}>
             <input
               type={inputType}
               placeholder={placeholder}
@@ -71,18 +75,26 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               tabIndex={tabIndex}
               ref={forwardedRef}
-              className={inputClass}
+              className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
+              id={label ? label : floatLabel}
             />
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
           </div>
         )}
         {select && (
-          <div className={parentSelectClass}>
+          <div className={`relative ${parentInputClass}`}>
             <select
               name={name}
-              id=""
+              id={label ? label : floatLabel}
               value={selectValue}
-              className={selectClass}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              // onChange={onChange}
             >
               {selectOptions.map(({ value, label }) => (
                 <option key={value} value={value}>
@@ -90,6 +102,16 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
                 </option>
               ))}
             </select>
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
+            {/* select custon arrow */}
+            <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+              <Icons name='arrow-down' />
+            </div>
           </div>
         )}
       </div>

src/index.css

@@ -14,6 +14,7 @@ body {
 
 @layer components {
   .containerMode {
-    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
+    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
+    @apply container mx-auto px-5 max-w-[1500px]
   }
 }

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -43,6 +43,37 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
         <Aside asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+
+        <header className={`p-5 md:hidden 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>
         <div className="flex p-5 relative">
           <div className="w-full p-5">{children}</div>
         </div>

src/layouts/GetStartedLayout.tsx

@@ -7,13 +7,15 @@ interface GetStartedLayoutProps {
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
   return (
-    <div className="relative">
-      <Header hideSidebar={true} hideMenu={true} />
-      <div className="flex flex-col min-h-[85vh] justify-between">
+    <div className="containerMode mb-[5.4375rem]">
+      <div className='sticky top-0 bg-white'>
+        <Header hideSidebar={true} hideMenu={true} />
+      </div>
+      <div className="flex flex-col min-h-[70vh] justify-between">
         {children}
-        <div className="self-end w-full">
-          <Footer />
-        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-white w-full">
+        <Footer />
       </div>
     </div>
   );

src/layouts/LetsGetStartedLayout.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Footer, LetsGetStartedNav } from "../components";
-import layoutImage from "../assets/images/test1-reverse.png";
+// import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <div className="grid md:grid-cols-2 h-[770px]">
+    <div className='containerMode mb-[5.4375rem]'>
+      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full">
-          <img src={layoutImage} alt="" className="w-full h-full" />
+        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
+          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </>
+    </div>
   );
 };
 

src/pages/GetStartedPage.tsx

@@ -1,12 +1,28 @@
 import React from "react";
 import { GetStarted as Main } from "../components";
-import { GetStartedLayout } from "../layouts";
+import { GetStartedLayout, LetsGetStartedLayout } from "../layouts";
+import BVN from "../components/GetStarted/BVN";
 
 const GetStartedPage: React.FC = () => {
+  const [step, setStep] = React.useState(1);
+
+  const handleNextStep = () => {
+    if (step < 5) {
+      setStep(step + 1);
+    }
+  };
   return (
-    <GetStartedLayout>
-      <Main />
-    </GetStartedLayout>
+    <>
+    {step == 1 ?
+      <LetsGetStartedLayout>
+        <BVN handleNextStep={handleNextStep} />
+      </LetsGetStartedLayout>
+    :
+      <GetStartedLayout>
+        <Main step={step} handleNextStep={handleNextStep} />
+      </GetStartedLayout>
+    }
+    </>
   );
 };