added otp to letsGetStarted

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,10 +1,104 @@
 import React from "react";
+import { InputCompOne } from "..";
+
+const LetsGetStarted: React.FC = () => {
+  const [pinValues, setPinValues] = React.useState({
+    bvn: "",
+    otp: "",
+  });
+
+  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let {
+      target: { name, value },
+    } = e;
+
+    setPinValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    let {
+      target: { name, value },
+    } = e;
+
+    if (name === "bvn") {
+      const regex = /^[0-9]+$/;
+
+      if (regex.test(value)) {
+        if (value?.length == 10) {
+          setHideOTPComponent(false);
+        } else setHideOTPComponent(true);
+      } else {
+        console.log("object not found");
+      }
+    }
+    console.log(e.target.value.length);
+  };
 
-const LetsGetStarted = () => {
   return (
     <div className="w-full">
-      <div className="containerMode flex justify-between gap-1 xl:gap-8">
-        123
+      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+        <div className="my-[4rem] flex items-center justify-center w-full">
+          <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+            Let’s Get You Started
+          </h1>
+        </div>
+        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+          <InputCompOne
+            parentClass="flex flex-col gap-2"
+            label="Enter Your BVN "
+            name="bvn"
+            parentInputClass="w-full"
+            labelSpan="( To get your BVN, dial *565*0# )"
+            labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+            placeholder="Enter your BVN"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+            input
+            inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+            value={pinValues.bvn}
+            onChange={handleChange}
+            onInput={handleInput}
+            ref={inputRef}
+          />
+          {!hideOTPComponent ? (
+            <InputCompOne
+              parentClass="flex flex-col gap-2"
+              label="Enter OTP "
+              name="otp"
+              parentInputClass="w-full"
+              labelSpan="( Please check your BVN phone number for verification pin )"
+              labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+              placeholder="Enter your OTP"
+              labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+              input
+              inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+              value={pinValues.otp}
+              onChange={handleChange}
+              onInput={handleInput}
+              ref={inputRef}
+            />
+          ) : null}
+          <button
+            className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+            disabled={!pinValues.otp}
+          >
+            Enter
+          </button>
+
+          {hideOTPComponent ? (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Every personal information attached to your BVN is safe and
+              secure. It is only important for us to verify your information and
+              also give you access to your application profile/account.
+            </p>
+          ) : (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Did not receive OTP? Click to resend
+            </p>
+          )}
+        </form>
       </div>
     </div>
   );

src/components/shared/InputCompOne.tsx

@@ -21,6 +21,7 @@ export interface InputCompOneProps {
   parentInputClass?: string;
   selectClass?: string;
   parentSelectClass?: string;
+  parentClass?: string;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -45,11 +46,12 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       parentInputClass,
       selectClass,
       parentSelectClass,
+      parentClass,
     },
     forwardedRef
   ) => {
     return (
-      <div>
+      <div className={parentClass}>
         {label && (
           <label htmlFor="" className={labelClass}>
             {label}

src/layouts/LetsGetStartedLayout.tsx

@@ -5,7 +5,7 @@ import layoutImage from "../assets/images/test1-reverse.png";
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
-      <div className="grid md:grid-cols-2">
+      <div className="grid md:grid-cols-2 h-[770px]">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}