digifi-www/src/components/GetStarted/ReferenceDetails.tsx

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;