Added personal image to the pages

src/components/Home/Hero/PersonalHero.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styles from "./hero.module.css";
+import { Link } from "react-router-dom";
+
+interface PersonalHeroProps {
+  heading?: string;
+  body?: string;
+  buttonLink?: string;
+  buttonText?: string;
+};
+const PersonalHero: React.FC<PersonalHeroProps> = ({
+  heading,
+  body,
+  buttonLink = "#",
+  buttonText,
+}) => {
+  return (
+    <div
+      className={`w-full relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
+    >
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
+          {heading}
+        </h1>
+        <p>{body}</p>
+        <Link to={buttonLink}>
+          <button>{buttonText}</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalHero;

src/components/Home/Hero/hero.module.css

@@ -6,4 +6,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.personalHeroBg{
+    background: url(../../../assets/images/personal-page.jpg) no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

src/components/Home/Hero/index.ts

@@ -1,3 +1,4 @@
 import Hero from "./Hero";
+import PersonalHero from "./PersonalHero";
 
-export { Hero };
+export { Hero, PersonalHero };

src/components/Home/index.ts

@@ -1,4 +1,4 @@
-import { Hero } from "./Hero";
+import { Hero, PersonalHero } from "./Hero";
 import { Requirements } from "./Requirements";
 
-export {Hero, Requirements}
+export {Hero, Requirements, PersonalHero}

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

src/components/shared/InputCompOne.tsx

@@ -22,6 +22,7 @@ export interface InputCompOneProps {
   selectClass?: string;
   parentSelectClass?: string;
   parentClass?: string;
+  maxLength?: number;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -47,6 +48,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       selectClass,
       parentSelectClass,
       parentClass,
+      maxLength,
     },
     forwardedRef
   ) => {
@@ -70,6 +72,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               tabIndex={tabIndex}
               ref={forwardedRef}
               className={inputClass}
+              maxLength={maxLength}
             />
           </div>
         )}

src/pages/BusinessBankingPage.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import { HomeLayout } from "../layouts";
+import { PersonalHero } from "../components";
 
 const BusinessBankingPage: React.FC = () => {
-  return <HomeLayout>Business Banking</HomeLayout>;
+  return (
+    <HomeLayout>
+      <PersonalHero />
+      Business Banking
+    </HomeLayout>
+  );
 };
 
 export default BusinessBankingPage;

src/pages/CooperateBankingPage.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { HomeLayout } from '../layouts'
+import { PersonalHero } from '../components'
 
 const CooperateBankingPage: React.FC = () => {
   return (
     <HomeLayout>
+        <PersonalHero />
       Cooperate Banking
     </HomeLayout>
   )

src/pages/PersonalBankingPage.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { HomeLayout } from '../layouts'
+import { PersonalHero } from '../components'
 
 const PersonalBankingPage: React.FC = () => {
   return (
     <HomeLayout>
+      <PersonalHero />
       Personal Banking
     </HomeLayout>
   )