Added personal image to the pages

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -8,7 +8,8 @@ const LetsGetStarted: React.FC = () => {
   });
 
   const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+  const secondInputRef = React.useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let { name, value } = e.target as HTMLInputElement;
@@ -25,6 +26,7 @@ const LetsGetStarted: React.FC = () => {
       if (regex.test(value)) {
         if (value?.length == 10) {
           setHideOTPComponent(false);
+          secondInputRef.current?.focus();
         } else setHideOTPComponent(true);
       } else {
         console.log("object not found");
@@ -32,6 +34,8 @@ const LetsGetStarted: React.FC = () => {
     }
   };
 
+  console.log(secondInputRef)
+
   return (
     <div className="w-full">
       <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
@@ -55,7 +59,8 @@ const LetsGetStarted: React.FC = () => {
             value={pinValues.bvn}
             onChange={handleChange}
             onInput={handleInput}
-            ref={inputRef}
+            ref={firstInputRef}
+            maxLength={10}
           />
           {!hideOTPComponent ? (
             <InputCompOne
@@ -72,7 +77,7 @@ const LetsGetStarted: React.FC = () => {
               value={pinValues.otp}
               onChange={handleChange}
               onInput={handleInput}
-              ref={inputRef}
+              ref={secondInputRef}
             />
           ) : null}
           <button