Added social links to env and added hero text to the pages

.env

@@ -1 +1,6 @@
 DIGIFI_PORT=5173
+
+# Social Links
+FACEBOOK_URL=https://www.facebook.com
+TWITTER_URL=https://twitter.com
+INSTAGRAM_URL=https://www.instagram.com

.env.development

@@ -1 +1,6 @@
 DIGIFI_PORT=5173
+
+# Social Links
+VITE_FACEBOOK_URL=https://www.facebook.com
+VITE_TWITTER_URL=https://twitter.com
+VITE_INSTAGRAM_URL=https://www.instagram.com

.env.production

@@ -1 +1,6 @@
 DIGIFI_PORT=5173
+
+# Social Links
+FACEBOOK_URL=https://www.facebook.com
+TWITTER_URL=https://twitter.com
+INSTAGRAM_URL=https://www.instagram.com

src/components/Footer/Footer.tsx

@@ -4,14 +4,18 @@ import { socialsIcons } from "../../utils/data";
 export default function Footer() {
   const date = new Date().getFullYear();
   return (
-    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
       <div className="containerMode flex justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>
         <div className="footer-social-icons flex justify-end items-center gap-2">
           {socialsIcons.map((icon, index) => (
-            <Link key={index} className="w-[1.875rem] h-[1.875rem]" to="#">
+            <Link
+              key={index}
+              className="w-[1.875rem] h-[1.875rem]"
+              to={icon.link}
+            >
               <img src={icon.image} alt={icon.name} />
             </Link>
           ))}

src/components/GetStarted/BasicInfo.tsx

@@ -7,6 +7,7 @@ interface Option {
 }
 
 const BasicInfo: React.FC = () => {
+  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Array for marital status options
@@ -33,69 +34,164 @@ const BasicInfo: React.FC = () => {
   };
 
   const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    // Handle input events
+    if (name === "bvn") {
-    console.log(e);
+      const regex = /^[0-9]+$/;
+
+      if (regex.test(value)) {
+        if (value?.length == 10) {
+          setHideOTPComponent(false);
+          // secondInputRef.current?.focus();
+        } else setHideOTPComponent(true);
+      } else {
+        console.log("object not found");
+      }
+    }
   };
 
   return (
-    <div className="mt-8">
+    <>
-      <div className="flex flex-col gap-3">
+      <div className="mt-8 max-w-[31.5rem]">
-        <InputCompOne
+        <div className="flex flex-col gap-3">
-          label="Title"
+          <InputCompOne
-          name="title"
+            label="Title"
-          parentInputClass="max-w-[224px] w-full"
+            name="title"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            parentInputClass="max-w-[224px] w-full"
-          select
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          selectClass="w-full h-[36px]"
+            select
-          selectOptions={titleOptions}
+            selectClass="w-full h-[36px] rounded-[12px]"
-          value=""
+            selectOptions={titleOptions}
-          onChange={handleChange}
+            value=""
-          onInput={handleInput}
+            onChange={handleChange}
-          ref={inputRef}
+            ref={inputRef}
-        />
+          />
-        <InputCompOne
+          <InputCompOne
-          label="Marital Status"
+            label="Marital Status"
-          name="marital"
+            name="marital"
-          parentInputClass="max-w-[224px] w-full"
+            parentInputClass="max-w-[224px] w-full"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          select
+            select
-          selectClass="w-full h-[36px]"
+            selectClass="w-full h-[36px] rounded-[12px]"
-          selectOptions={maritalStatusOptions}
+            selectOptions={maritalStatusOptions}
-          value=""
+            value=""
-          onChange={handleChange}
+            onChange={handleChange}
-          onInput={handleInput}
+            onInput={handleInput}
-          ref={inputRef}
+            ref={inputRef}
-        />
+          />
-        <InputCompOne
+          <InputCompOne
-          label="Direct Sales Agent ID"
+            label="Direct Sales Agent ID"
-          name="agentId"
+            name="agentId"
-          parentInputClass="max-w-[224px] w-full"
+            parentInputClass="max-w-[224px] w-full"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-          select
+            select
-          selectClass="w-full h-[36px]"
+            selectClass="w-full h-[36px] rounded-[12px]"
-          selectOptions={[{ value: "", label: "Select" }]}
+            selectOptions={[{ value: "", label: "Select" }]}
-          value=""
+            value=""
-          onChange={handleChange}
+            onChange={handleChange}
-          onInput={handleInput}
+            onInput={handleInput}
-          ref={inputRef}
+            ref={inputRef}
-        />
+          />
-        <InputCompOne
+          <InputCompOne
-          label="BVN"
+            label="BVN"
-          name="bvn"
+            name="bvn"
-          parentInputClass="max-w-[224px] w-full"
+            parentInputClass=" w-full"
-          labelSpan="( To get your BVN, dial *565*0# )"
+            labelSpan="( To get your BVN, dial *565*0# )"
-          labelSpanClass="text-[11px] text-[#7a7373]"
+            labelSpanClass="text-[11px] text-[#7a7373]"
-          placeholder="Enter your BVN"
+            placeholder="Enter your BVN"
-          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
-          input
+            input
-          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
+            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
-          value=""
+            value=""
-          onChange={handleChange}
+            onChange={handleChange}
-          onInput={handleInput}
+            onInput={handleInput}
-          ref={inputRef}
+            ref={inputRef}
-        />
+          />
+        </div>
       </div>
-    </div>
+      {!hideOTPComponent ? (
+        <div className="flex justify-between items-center g4">
+          <div className="mt-8 max-w-[31.5rem] w-full">
+            <div className="flex flex-col gap-3">
+              <InputCompOne
+                label="First Name"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+              <InputCompOne
+                label="Phone Number"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+              <InputCompOne
+                label="Email Address"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+            </div>
+          </div>
+          <div className="mt-8 max-w-[31.5rem] w-full">
+            <div className="flex flex-col gap-3">
+              <InputCompOne
+                label="Surname"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+              <InputCompOne
+                label="Date of Birth"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+              <InputCompOne
+                label="Second Name"
+                name="title"
+                parentInputClass="w-full"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+                input
+                inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
+                value=""
+                onChange={handleChange}
+                onInput={handleInput}
+                ref={inputRef}
+              />
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 };
 

src/components/Home/Hero/PersonalHero.tsx

@@ -7,7 +7,7 @@ interface PersonalHeroProps {
   body?: string;
   buttonLink?: string;
   buttonText?: string;
-};
+}
 const PersonalHero: React.FC<PersonalHeroProps> = ({
   heading,
   body,
@@ -16,15 +16,17 @@ const PersonalHero: React.FC<PersonalHeroProps> = ({
 }) => {
   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}`}
+      className={`w-full max-[28.125rem] 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">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
         <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>
+        <p className="p-[.3125rem] pr-5 font-medium table w-[25.375rem]">{body}</p>
         <Link to={buttonLink}>
-          <button>{buttonText}</button>
+          <button className="bg-[#A6368C] text-white text-[.9375rem] w-[10.9375rem] py-[.4375rem] px-[.625rem]">
+            {buttonText} &nbsp;
+          </button>
         </Link>
       </div>
     </div>

src/components/Home/Requirements/FeatureText.tsx

@@ -27,7 +27,7 @@ const FeatureText = () => {
         </ul>
       </div>
       <Link
-        to={RouteHandler.getStarted}
+        to={RouteHandler.letsGetStarted}
         className="text-[#5C2684] mt-[1.5625rem] w-fit"
       >
         *** <span className="hover:underline">Click here to apply</span>

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -26,7 +26,7 @@ const LetsGetStarted: React.FC = () => {
       if (regex.test(value)) {
         if (value?.length == 10) {
           setHideOTPComponent(false);
-          secondInputRef.current?.focus();
+        //   secondInputRef.current?.focus();
         } else setHideOTPComponent(true);
       } else {
         console.log("object not found");

src/components/shared/InputCompOne.tsx

@@ -39,7 +39,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       name,
       tabIndex,
       selectValue,
-      input = true,
+      input = false,
       select = false,
       selectOptions = [],
       inputType = "text",

src/pages/BusinessBankingPage.tsx

@@ -5,7 +5,12 @@ import { PersonalHero } from "../components";
 const BusinessBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-      <PersonalHero />
+      <PersonalHero
+        heading="Business Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Business Banking
     </HomeLayout>
   );

src/pages/CooperateBankingPage.tsx

@@ -1,14 +1,19 @@
-import React from 'react'
+import React from "react";
-import { HomeLayout } from '../layouts'
+import { HomeLayout } from "../layouts";
-import { PersonalHero } from '../components'
+import { PersonalHero } from "../components";
 
 const CooperateBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-        <PersonalHero />
+      <PersonalHero
+        heading="Cooperate Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Cooperate Banking
     </HomeLayout>
-  )
+  );
-}
+};
 
-export default CooperateBankingPage
+export default CooperateBankingPage;

src/pages/GetStartedPage.tsx

@@ -1,13 +1,17 @@
 import React from "react";
 import { GetStarted as Main, Header, Footer } from "../components";
 
-const GetStartedPage :React.FC = () => {
+const GetStartedPage: React.FC = () => {
   return (
-    <>
+    <div className="relative">
       <Header hideSidebar={true} hideMenu={true} />
-      <Main />
+      <div className="flex flex-col min-h-[85vh] justify-between">
-      <Footer />
+        <Main />
-    </>
+        <div className="self-end w-full">
+          <Footer />
+        </div>
+      </div>
+    </div>
   );
 };
 

src/pages/PersonalBankingPage.tsx

@@ -1,14 +1,19 @@
-import React from 'react'
+import React from "react";
-import { HomeLayout } from '../layouts'
+import { HomeLayout } from "../layouts";
-import { PersonalHero } from '../components'
+import { PersonalHero } from "../components";
 
 const PersonalBankingPage: React.FC = () => {
   return (
     <HomeLayout>
-      <PersonalHero />
+      <PersonalHero
+        heading="Personal Or Business Account"
+        body="Open a personal or business account in minutes, tailored to your unique needs."
+        buttonLink="#"
+        buttonText="Click here"
+      />
       Personal Banking
     </HomeLayout>
-  )
+  );
-}
+};
 
-export default PersonalBankingPage
+export default PersonalBankingPage;

src/utils/data.tsx

@@ -9,6 +9,8 @@ import YoutubeWhite from "../assets/images/socials/youtube.svg";
 import InstagramWhite from "../assets/images/socials/instagram.svg";
 import { RouteHandler } from "../router/routes";
 
+let process = import.meta.env;
+
 export const top_header_data = [
   { id: 1, name: "HOME", href: RouteHandler.homepage },
   { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
@@ -398,9 +400,9 @@ export const _lowerMenuItems = [
 ];
 
 export const socialsIcons = [
-  { name: "facebook", image: FBook },
+  { name: "facebook", image: FBook, link: import.meta.env.VITE_FACEBOOK_URL },
-  { name: "twitter", image: Twitter },
+  { name: "twitter", image: Twitter, link: import.meta.env.VITE_TWITTER_URL },
-  { name: "instagram", image: Instagram },
+  { name: "instagram", image: Instagram, link: import.meta.env.VITE_INSTAGRAM_URL },
 ];
 
 export const footerItems = [