updated layout style

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/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.dashboardHome, {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>
+    </>
   );
 };