Added Applicants Attestation Page

src/components/GetStarted/ApplicantsAttestation.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import CreditAccount from "./CreditAccount";
+import DebitAccount from "./DebitAccount";
+
+const ApplicantsAttestation: React.FC = () => {
+  return (
+    <>
+      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
+        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem] max-w-[34rem]">
+          Applicant’s Attestation and Debit Instruction
+        </h1>
+        <div className="flex flex-col gap-[.4375rem]">
+          <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>
+      <CreditAccount />
+      <DebitAccount />
+    </>
+  );
+};
+
+export default ApplicantsAttestation;

src/components/GetStarted/CreditAccount.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const CreditAccount: React.FC = () => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          CREDIT ACCOUNT ( Your account to receive your loan )
+        </p>
+      </div>
+      <InputCompOne
+        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]"
+      />
+    </>
+  );
+};
+
+export default CreditAccount;

src/components/GetStarted/DebitAccount.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Button, InputCompOne } from "..";
+
+const DebitAccount: React.FC = () => {
+  return (
+    <div className="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="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]"
+      />
+
+      <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}
+        //   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"
+      />
+    </div>
+  );
+};
+
+export default DebitAccount;

src/components/GetStarted/GetStarted.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import BasicInfo from "./BasicInfo";
 import YourAreAlmostThere from "./YourAreAlmostThere";
 import LoanAmountComp from "./LoanAmountComp";
+import ApplicantsAttestation from "./ApplicantsAttestation";
 
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
@@ -41,7 +42,8 @@ const GetStarted = () => {
             />
           )}
           {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
-          {step === 3 && <LoanAmountComp />}
+          {step === 3 && <LoanAmountComp handleNextStep={handleNextStep} />}
+          {step === 4 && <ApplicantsAttestation />}
         </main>
       </div>
     </div>

src/components/GetStarted/LoanAmountComp.tsx

@@ -1,12 +1,16 @@
 import React from "react";
-import { InputCompOne } from "..";
+import { Button, InputCompOne } from "..";
 
 interface SliderProps {
-    handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    value: number;
+  value: number;
-  }
+}
 
-const LoanAmountComp: React.FC = () => {
+interface LoanAmountProps {
+  handleNextStep: any;
+}
+
+const LoanAmountComp: React.FC<LoanAmountProps> = ({ handleNextStep }) => {
   const [value, setValue] = React.useState(6);
 
   const handleSliderChange = (e: any) => {
@@ -15,11 +19,11 @@ const LoanAmountComp: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
+      <div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
-        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+        <h1 className="font-semibold text-[38px] text-[#5C2684] my-[8px]">
           Loan Amount
         </h1>
-        <div className="flex flex-col gap-[.4375rem]">
+        <div className="flex flex-col gap-[7px]">
           <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
             For more enquiries and support
           </p>
@@ -31,44 +35,44 @@ const LoanAmountComp: React.FC = () => {
           </p>
         </div>
       </div>
-      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem] mb-[2.5rem]">
+      <div className="flex flex-col gap-[45px] justify-center ml-[40px] mb-[40px]">
         <InputCompOne
-          parentClass="max-w-[471px] w-full"
+          parentClass="max-w-[29.4375rem] w-full"
           label="Your Monthly Salary*"
           name="salary"
           parentInputClass="w-full"
-          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
           input
-          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
+          inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-4"
           placeholder="150,000"
         />
 
-        <div className="w-full border-[3px] rounded-xl border-black min-h-[55.25rem] py-4 px-8 max-w-[49rem]">
+        <div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
-          <p className="leading-[1.375rem] tracking-[3%] text-[#5C2684] w-[45.5625rem] mb-[42px]">
+          <p className="leading-[22px] tracking-[3%] text-[#5C2684] w-[729px] mb-[2.625rem]">
             The maximum amount you can apply for on this offer is based on the
             information you shared with us in your loan application. We have
             made this offer to suit your monthly remuneration and to enable you
             pay your loan on-time
           </p>
           <InputCompOne
-            parentClass="max-w-[733px] w-full mb-3"
+            parentClass="max-w-[45.8125rem] w-full mb-3"
             label="How much do you want to apply for?"
             name="loan"
             parentInputClass="w-full"
-            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
             input
-            inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-9"
+            inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-9"
             placeholder="350,000"
           />
           <div className="flex items-center justify-between w-full">
-            <div className=" h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
+            <div className=" h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
               <span>Minimum Offer:</span>
               <p>
                 <b>N</b>100,000
               </p>
             </div>
 
-            <div className="h-[4.25rem] flex flex-col py-1 px-[.8125rem] shadow-md text-[#5C2684]">
+            <div className="h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
               <span>Maximum Offer:</span>
               <p>
                 <b>N</b>500,000
@@ -79,13 +83,16 @@ const LoanAmountComp: React.FC = () => {
           <Slider handleSliderChange={handleSliderChange} value={value} />
 
           <div className="w-full flex items-center justify-center flex-col">
-            <div className="w-[17.4375rem] h-[8.125rem] mb-[4.75rem] flex items-center justify-center flex-col">
+            <div className="w-[279px] h-[130px] mb-[76px] flex items-center justify-center flex-col">
               <p className="text-[#FBB700]">Your Monthly Repayment</p>
               <p>N</p>
             </div>
-            <button className="max-w-[28.875rem] w-full bg-[#5C2684] rounded text-white h-11">
+            <Button
-              Submit
+              className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
-            </button>
+              text="Submit"
+              type="button"
+              onClick={handleNextStep}
+            />
           </div>
         </div>
       </div>
@@ -95,7 +102,7 @@ const LoanAmountComp: React.FC = () => {
 
 export default LoanAmountComp;
 
-const Slider: React.FC<SliderProps>  = ({ handleSliderChange, value }) => {
+const Slider: React.FC<SliderProps> = ({ handleSliderChange, value }) => {
   return (
     <div className="flex flex-col items-start mt-11 mb-16">
       <p className="text-lg font-semibold">For how many months?</p>