75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { InputCompOne } from "..";
|
|
|
|
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]">
|
|
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 ml-[2.5rem]">
|
|
<InputCompOne
|
|
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] rounded-[.375rem] 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]">
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoanAmountComp;
|