DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Added Applicants Attestation Page

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2024-03-23 06:23:50 +01:00
parent b8f9958517
commit e2b3978ab6
5 changed files with 158 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GetStarted/LoanAmountComp.tsx
+31 -24
View File
@@ -1,12 +1,16 @@
import React from "react";
import { InputCompOne } from "..";
import { Button, InputCompOne } from "..";
interface SliderProps {
handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
value: number;
}
handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
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]">
<h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
<div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
<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]">
<p className="leading-[1.375rem] tracking-[3%] text-[#5C2684] w-[45.5625rem] mb-[42px]">
<div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
<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">
Submit
</button>
<Button
className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
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>