Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master

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 {

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}

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;

src/components/GetStarted/GetStarted.tsx

@@ -1,5 +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);
@@ -38,7 +40,8 @@ const GetStarted = () => {
               handleNextStep={handleNextStep}
             />
           )}
-          {step === 2 && "lol"}
+          {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
+          {step === 3 && <LoanAmountComp />}
         </main>
       </div>
     </div>

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;

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;

src/components/GetStarted/YourAreAlmostThere.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import EmploymentDetails from "./EmploymentDetails";
+import ReferenceDetails from "./ReferenceDetails";
+import { Button } from "..";
+
+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]">
+        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;