src/components/GetStarted/EmploymentDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { InputCompOne } from "..";
 
-const EmploymentDetails: React = () => {
+const EmploymentDetails: React.FC = () => {
   return (
     <>
       <div className="w-full rounded py-3 bg-[#5C2684] px-5">

src/components/GetStarted/GetStarted.tsx

@@ -6,7 +6,7 @@ import LoanAmountComp from "./LoanAmountComp";
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
 
-  const handleNextStep: any = () => {
+  const handleNextStep = () => {
     setStep(step + 1);
   };
 

src/components/GetStarted/LoanAmountComp.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { InputCompOne } from "..";
 
-const LoanAmountComp = () => {
+const LoanAmountComp: React.FC = () => {
   return (
     <>
-      <div className="flex justify-between items-center w-full mt-8">
+      <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
         <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
           Loan Amount
         </h1>
@@ -20,19 +20,52 @@ const LoanAmountComp = () => {
           </p>
         </div>
       </div>
-      <div className="flex flex-col gap-[2.8125rem] justify-center">
+      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem]">
         <InputCompOne
-          parentClass="max-w-[29.4375rem] w-full"
+          parentClass="max-w-[471px] 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]"
           input
-          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
+          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
           placeholder="150,000"
         />
 
-        <div className="w-full border-[3px] rounded-xl"></div>
+        <div className="w-full border-[3px] rounded-xl border-black min-h-[55.25rem] py-4 px-8 max-w-[49rem]">
+          <p className="leading-[1.375rem] tracking-[3%] text-[#5C2684] w-[45.5625rem] mb-[42px]">
+            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"
+            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]"
+            input
+            inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] rounded-[.375rem] 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]">
+              <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]">
+              <span>Maximum Offer:</span>
+              <p>
+                <b>N</b>500,000
+              </p>
+            </div>
+          </div>
+
+        </div>
       </div>
     </>
   );

src/components/GetStarted/YourAreAlmostThere.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
 import EmploymentDetails from "./EmploymentDetails";
 import ReferenceDetails from "./ReferenceDetails";
 import { Button } from "..";
@@ -8,12 +8,7 @@ interface YourAreAlmostThereProps {
   handleNextStep: any;
 }
 
-const YourAreAlmostThere: React.FC = ({ handleNextStep }) => {
-  const navigate = useNavigate();
-
-  const navigation = () => {
-    navigate("");
-  };
+const YourAreAlmostThere: React.FC<YourAreAlmostThereProps> = ({ handleNextStep }) => {
   return (
     <>
       <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">

src/components/shared/InputCompOne.tsx

@@ -6,7 +6,7 @@ export interface InputCompOneProps {
   labelSpan?: string;
   labelSpanClass?: string;
   placeholder?: string;
-  value: string;
+  value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
   name: string;