Added You are almost there comp

2024-03-22 17:19:58 +01:00
parent dd6d92654c
commit e1bd0293f1
7 changed files with 257 additions and 5 deletions
@@ -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;