From e1bd0293f1571329596df95b52a8deb78339a1b0 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Fri, 22 Mar 2024 17:19:58 +0100
Subject: [PATCH 1/3] Added You are almost there comp

---
 src/App.css                                   |   4 +-
 src/components/GetStarted/BasicInfo.tsx       |   4 +-
 .../GetStarted/EmploymentDetails.tsx          |  99 ++++++++++++++
 src/components/GetStarted/GetStarted.tsx      |   3 +-
 .../{InputSection.tsx => IntroDetails.tsx}    |   0
 .../GetStarted/ReferenceDetails.tsx           | 126 ++++++++++++++++++
 .../GetStarted/YourAreAlmostThere.tsx         |  26 ++++
 7 files changed, 257 insertions(+), 5 deletions(-)
 create mode 100644 src/components/GetStarted/EmploymentDetails.tsx
 rename src/components/GetStarted/{InputSection.tsx => IntroDetails.tsx} (100%)
 create mode 100644 src/components/GetStarted/ReferenceDetails.tsx
 create mode 100644 src/components/GetStarted/YourAreAlmostThere.tsx

diff --git a/src/App.css b/src/App.css
index 90517c2..0fc9006 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 .btn-primary {
-  background: #5A2C82;
+  background: #5A2C82 !important;
   color: #FFFFFF;
   display: block;
   text-decoration: none;
@@ -8,7 +8,7 @@
 }
 
 .btn-active {
-  background: #D10056;
+  background: #D10056 !important;
 }
 
 .btn-R {
diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx
index 5151404..93c335e 100644
--- a/src/components/GetStarted/BasicInfo.tsx
+++ b/src/components/GetStarted/BasicInfo.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import InputSection from "./InputSection";
+import InputDetails from "./IntroDetails";
 import OTPSection from "./OtpSection";
 import SpouseDetails from "./SpouseDetails";
 import { Button } from "..";
@@ -65,7 +65,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
         Let’s Get You Started
       </h1>
       <form>
-        <InputSection
+        <InputDetails
           inputValues={inputValues}
           handleChange={handleChange}
           handleInput={handleInput}
diff --git a/src/components/GetStarted/EmploymentDetails.tsx b/src/components/GetStarted/EmploymentDetails.tsx
new file mode 100644
index 0000000..362174f
--- /dev/null
+++ b/src/components/GetStarted/EmploymentDetails.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const EmploymentDetails: React = () => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          EMPLOYMENT DETAILS
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <InputCompOne
+          parentClass="max-w-[17.9375rem] w-full"
+          label="Job Title"
+          name="jobTitle"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+        />
+        <div className="flex items-center gap-[3.6875rem]">
+          <InputCompOne
+            parentClass="max-w-[23.1875rem] w-full"
+            label="Employer’s Name"
+            name="employerName"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+          <InputCompOne
+            parentClass="max-w-[23.1875rem] w-full"
+            label="Employer’s Official Email"
+            name="employerOfficialEmail"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+        </div>
+        <div className="flex items-center gap-[9rem]">
+          <InputCompOne
+            parentClass="max-w-[17.9375rem] w-full"
+            label="Resumption Date"
+            name="resumptionDate"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+          <InputCompOne
+            parentClass="max-w-[17.9375rem] w-full"
+            label="Employee ID."
+            name="employeeID"
+            labelSpan="Upload your work ID"
+            labelSpanClass="text-[11px] text-[#7a7373]"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+        </div>
+        <div className="flex items-center gap-[3.6875rem]">
+          <InputCompOne
+            parentClass="max-w-[23.1875rem] w-full"
+            label="Salary ( Gross annual income )"
+            name="salaryGross"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+          <InputCompOne
+            parentClass="max-w-[23.1875rem] w-full"
+            label="Salary ( Net monthly Income )"
+            name="salaryNet"
+            parentInputClass="w-full"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          />
+        </div>
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Salary Payment Date"
+          name="salary-payment-date"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+        />
+      </div>
+    </>
+  );
+};
+
+export default EmploymentDetails;
diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx
index 3aaf3b7..f6a8472 100644
--- a/src/components/GetStarted/GetStarted.tsx
+++ b/src/components/GetStarted/GetStarted.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import BasicInfo from "./BasicInfo";
+import YourAreAlmostThere from "./YourAreAlmostThere";
 
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
@@ -38,7 +39,7 @@ const GetStarted = () => {
               handleNextStep={handleNextStep}
             />
           )}
-          {step === 2 && "lol"}
+          {step === 2 && <YourAreAlmostThere />}
         </main>
       </div>
     </div>
diff --git a/src/components/GetStarted/InputSection.tsx b/src/components/GetStarted/IntroDetails.tsx
similarity index 100%
rename from src/components/GetStarted/InputSection.tsx
rename to src/components/GetStarted/IntroDetails.tsx
diff --git a/src/components/GetStarted/ReferenceDetails.tsx b/src/components/GetStarted/ReferenceDetails.tsx
new file mode 100644
index 0000000..9987185
--- /dev/null
+++ b/src/components/GetStarted/ReferenceDetails.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const ReferenceDetails: 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">
+          REFERENCE DETAILS ( Must be 18 years and above )
+        </p>
+      </div>
+      <div className="">
+        <div className="flex flex-col gap-[3.4375rem]">
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-[6.5625rem]">
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Name"
+                name="referenceName"
+                labelSpan="1st reference"
+                labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Relationship with He/She"
+                name="referenceRelationship"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+            </div>
+            <div className="flex items-center gap-[6.5625rem]">
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Phone Number"
+                name="referencePhoneNumber"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Email Address"
+                name="referenceEmail"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+            </div>
+            <InputCompOne
+              parentClass="max-w-[20.3125rem] w-full"
+              label="BVN"
+              name="ReferenceBvn"
+              parentInputClass="w-full"
+              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+              input
+              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-[6.5625rem]">
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Name"
+                name="referenceName2"
+                labelSpan="2nd reference"
+                labelSpanClass="text-[12px] text-[#5C2684] ml-[4px]"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Relationship with He/She"
+                name="referenceRelationship2"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+            </div>
+            <div className="flex items-center gap-[6.5625rem]">
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Phone Number"
+                name="referencePhoneNumber2"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+              <InputCompOne
+                parentClass="max-w-[20.3125rem] w-full"
+                label="Email Address"
+                name="referenceEmail2"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+                input
+                inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+              />
+            </div>
+            <InputCompOne
+              parentClass="max-w-[20.3125rem] w-full"
+              label="BVN"
+              name="ReferenceBvn2"
+              parentInputClass="w-full"
+              labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+              input
+              inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ReferenceDetails;
diff --git a/src/components/GetStarted/YourAreAlmostThere.tsx b/src/components/GetStarted/YourAreAlmostThere.tsx
new file mode 100644
index 0000000..08a93b9
--- /dev/null
+++ b/src/components/GetStarted/YourAreAlmostThere.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import EmploymentDetails from "./EmploymentDetails";
+import ReferenceDetails from "./ReferenceDetails";
+import { Button } from "..";
+
+const YourAreAlmostThere: React.FC = () => {
+  return (
+    <>
+      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+        You’re almost there
+      </h1>
+      <form action="" className="flex flex-col gap-6">
+        <EmploymentDetails />
+        <ReferenceDetails />
+        <Button
+          className="my-8 max-w-[20.3125rem] btn-R bg-[#5A2C82]"
+          text="Continue"
+          type="button"
+          //   onClick={handleNextStep}
+        />
+      </form>
+    </>
+  );
+};
+
+export default YourAreAlmostThere;

From 08af493d65f2f103ac598524275e447930725c21 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Fri, 22 Mar 2024 18:16:18 +0100
Subject: [PATCH 2/3] Added You're almost done page

---
 src/components/GetStarted/GetStarted.tsx         |  4 +++-
 src/components/GetStarted/YourAreAlmostThere.tsx | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx
index f6a8472..93d248f 100644
--- a/src/components/GetStarted/GetStarted.tsx
+++ b/src/components/GetStarted/GetStarted.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import BasicInfo from "./BasicInfo";
 import YourAreAlmostThere from "./YourAreAlmostThere";
+import LoanAmountComp from "./LoanAmountComp";
 
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
@@ -39,7 +40,8 @@ const GetStarted = () => {
               handleNextStep={handleNextStep}
             />
           )}
-          {step === 2 && <YourAreAlmostThere />}
+          {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
+          {step === 3 && <LoanAmountComp />}
         </main>
       </div>
     </div>
diff --git a/src/components/GetStarted/YourAreAlmostThere.tsx b/src/components/GetStarted/YourAreAlmostThere.tsx
index 08a93b9..ad540e9 100644
--- a/src/components/GetStarted/YourAreAlmostThere.tsx
+++ b/src/components/GetStarted/YourAreAlmostThere.tsx
@@ -1,9 +1,19 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import EmploymentDetails from "./EmploymentDetails";
 import ReferenceDetails from "./ReferenceDetails";
 import { Button } from "..";
 
-const YourAreAlmostThere: React.FC = () => {
+interface YourAreAlmostThereProps {
+  handleNextStep: any;
+}
+
+const YourAreAlmostThere: React.FC = ({ handleNextStep }) => {
+  const navigate = useNavigate();
+
+  const navigation = () => {
+    navigate("");
+  };
   return (
     <>
       <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
@@ -16,7 +26,7 @@ const YourAreAlmostThere: React.FC = () => {
           className="my-8 max-w-[20.3125rem] btn-R bg-[#5A2C82]"
           text="Continue"
           type="button"
-          //   onClick={handleNextStep}
+          onClick={handleNextStep}
         />
       </form>
     </>

From 05dfb50f6205bafad7523c638d73adcf21ed2c7d Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Fri, 22 Mar 2024 18:27:50 +0100
Subject: [PATCH 3/3] You're added comp

---
 src/components/GetStarted/LoanAmountComp.tsx | 41 ++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/GetStarted/LoanAmountComp.tsx

diff --git a/src/components/GetStarted/LoanAmountComp.tsx b/src/components/GetStarted/LoanAmountComp.tsx
new file mode 100644
index 0000000..a283dbb
--- /dev/null
+++ b/src/components/GetStarted/LoanAmountComp.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const LoanAmountComp = () => {
+  return (
+    <>
+      <div className="flex justify-between items-center w-full mt-8">
+        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+          Loan Amount
+        </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>
+      <div className="flex flex-col gap-[2.8125rem] justify-center">
+        <InputCompOne
+          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]"
+          input
+          inputClass="w-full h-[3.1875rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem] placeholder:text-green-600 placeholder:font-bold px-4"
+          placeholder="150,000"
+        />
+
+        <div className="w-full border-[3px] rounded-xl"></div>
+      </div>
+    </>
+  );
+};
+
+export default LoanAmountComp;