src/components/Footer/BottomFooterOne.tsx

@@ -0,0 +1,10 @@
+
+const BottomFooterOne = () => {
+  return (
+    <footer className="pt-[1.25rem] pb-[1.875rem]">
+      <div className="containerMode flex flex-col"></div>
+    </footer>
+  )
+}
+
+export default BottomFooterOne

src/components/Footer/MidFooter.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import styles from "./footer.module.css"
 
 const MidFooter = () => {
   return (
     <div className={`h-[2.3125rem] text-[1.25rem] ${styles.lower_footer}`}>
     <div className="containerMode flex justify-end p-[.375rem] w-full text-white font-medium text-[.6875rem] md:text-[1.25rem]">
-      <div className="hidden sm:flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
+      <div className="flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
         <p className="capitalize text-[20px] font-extralight">My Bank and I</p>
       </div>
     </div>

src/components/Footer/TopFooterOne.tsx

@@ -1,15 +1,31 @@
-import { FC } from "react";
+import { footerItems } from "../../utils/data";
 import TopFooterOneMenu from "./TopFooterOneMenu";
 
-const TopFooterOne = (): FC => {
+export interface TopFooterOneMenuProps {
+  category: string;
+  subItems: {
+    text: string;
+    href?: string;
+  }[];
+}
+
+const TopFooterOne = () => {
+  const footerListItems: TopFooterOneMenuProps[] = footerItems;
+
   return (
     <footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5">
       <div className="containerMode w-full flex flex-col gap-[1.875rem]">
         <h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default">
           sitemap
         </h4>
-        <div className="grid grid-cols-2 md:grid-cols-6">
-          <TopFooterOneMenu />
+        <div className="grid grid-cols-2 md:grid-cols-6 gap-2 md:gap-0">
+          {footerListItems.map(({ category, subItems }, index) => (
+            <TopFooterOneMenu
+              key={`${category}-${index}`}
+              category={category}
+              subItems={subItems}
+            />
+          ))}
         </div>
       </div>
     </footer>

src/components/Footer/TopFooterOneMenu.tsx

@@ -1,29 +1,28 @@
-import { FC } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
-import { footerItems } from "../../utils/data";
+import { TopFooterOneMenuProps } from "./TopFooterOne";
 
-interface TopFooterOneMenuProps {
-  category: string;
-  subItems: {
-    text: string;
-    href?: string;
-  }[];
-}
 
-const TopFooterOneMenu = (): FC => {
-  return footerItems.map(
-    ({ category, subItems }): TopFooterOneMenuProps => (
-      <ul className="flex gap-2 flex-col">
-        <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">{category}</li>
-        <ul className="flex flex-col gap-1">
-          {subItems.map(({ href, text }) => (
-            <Link to="#" className="text-[.6875rem] text-[#5e2785] hover:underline">
-              {text}
-            </Link>
-          ))}
-        </ul>
+const TopFooterOneMenu: React.FC<TopFooterOneMenuProps> = ({
+  category,
+  subItems,
+}) => {
+  return (
+    <ul className="flex gap-2 flex-col">
+      <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">
+        {category}
+      </li>
+      <ul className="flex flex-col gap-1">
+        {subItems.map(({ href = "#", text }) => (
+          <li
+            key={text}
+            className="text-[.6875rem] text-[#5e2785] hover:underline"
+          >
+            {href ? <Link to={href}>{text}</Link> : <span>{text}</span>}
+          </li>
+        ))}
       </ul>
-    )
+    </ul>
   );
 };
 

src/components/GetStarted/BasicInfo.tsx

@@ -1,7 +1,42 @@
-import { FC } from "react";
-import { InputCompOne } from "..";
+import React, { useRef } from "react";
+import InputCompOne from "../shared/InputCompOne";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const BasicInfo: React.FC = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Array for marital status options
+  const maritalStatusOptions: Option[] = [
+    { value: "", label: "Select" },
+    { value: "single", label: "Single" },
+    { value: "married", label: "Married" },
+    { value: "divorced", label: "Divorced" },
+    { value: "widowed", label: "Widowed" },
+  ];
+
+  // Array for title options
+  const titleOptions: Option[] = [
+    { value: "", label: "Select" },
+    { value: "ms", label: "Ms" },
+    { value: "mr", label: "Mr" },
+    { value: "miss", label: "Miss" },
+    { value: "mrs", label: "Mrs" },
+  ];
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Handle input value changes
+    console.log(e.target.value);
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    // Handle input events
+    console.log(e);
+  };
 
-const BasicInfo = (): FC => {
   return (
     <div className="mt-8">
       <div className="flex flex-col gap-3">
@@ -12,28 +47,11 @@ const BasicInfo = (): FC => {
           labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
           select
           selectClass="w-full h-[36px]"
-          selectOptions={[
-            {
-              value: "",
-              label: "Select",
-            },
-            {
-              value: "ms",
-              label: "Ms",
-            },
-            {
-              value: "mr",
-              label: "Mr",
-            },
-            {
-              value: "miss",
-              label: "Miss",
-            },
-            {
-              value: "mrs",
-              label: "Mrs",
-            },
-          ]}
+          selectOptions={titleOptions}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
         />
         <InputCompOne
           label="Marital Status"
@@ -42,42 +60,24 @@ const BasicInfo = (): FC => {
           labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
           select
           selectClass="w-full h-[36px]"
-          selectOptions={[
-            {
-              value: "",
-              label: "Select",
-            },
-            {
-              value: "ms",
-              label: "Ms",
-            },
-            {
-              value: "mr",
-              label: "Mr",
-            },
-            {
-              value: "miss",
-              label: "Miss",
-            },
-            {
-              value: "mrs",
-              label: "Mrs",
-            },
-          ]}
+          selectOptions={maritalStatusOptions}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
         />
         <InputCompOne
           label="Direct Sales Agent ID"
-          name="title"
+          name="agentId"
           parentInputClass="max-w-[224px] w-full"
           labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
           select
           selectClass="w-full h-[36px]"
-          selectOptions={[
-            {
-              value: "",
-              label: "Select",
-            },
-          ]}
+          selectOptions={[{ value: "", label: "Select" }]}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
         />
         <InputCompOne
           label="BVN"
@@ -89,6 +89,10 @@ const BasicInfo = (): FC => {
           labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
           input
           inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
         />
       </div>
     </div>

src/components/GetStarted/GetStarted.tsx

@@ -1,7 +1,6 @@
-import { FC } from "react";
 import BasicInfo from "./BasicInfo";
 
-const GetStarted: FC = () => {
+const GetStarted = () => {
   return (
     <div className="w-full flex items-center justify-center">
       <div className="containerMode">

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useState, ChangeEvent, FC } from "react";
+import React, { useState, ChangeEvent } from "react";
 import Logo from "../../assets/icons/logo.svg";
 import Button from "../shared/Button";
 import { lowerMenuItems } from "../../utils/data";
@@ -15,7 +15,7 @@ type HiddenMenuItems = {
   hideMenu?: boolean;
 };
 
-const Header: FC<HiddenMenuItems> = ({
+const Header: React.FC<HiddenMenuItems> = ({
   hideSidebar = false,
   hideMenu = false,
 }) => {

src/components/Home/Requirements/FeatureText.tsx

@@ -1,8 +1,7 @@
-import { FC } from "react";
 import { Link } from "react-router-dom";
 import { RouteHandler } from "../../../router/routes";
 
-const FeatureText: FC = () => {
+const FeatureText = () => {
   return (
     <div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col">
       <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem] cursor-default">

src/components/shared/Button.tsx

@@ -1,10 +1,12 @@
-import { FC } from "react";
-type ButtonProps = {
-  className?: string;
-  text: string;
-};
+import React from "react";
 
-const Button = ({ text, className }: ButtonProps): FC => {
+interface ButtonProps {
+  text: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, className }) => {
   return (
     <button
       className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}

src/components/shared/InputCompOne.tsx

@@ -1,93 +1,95 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-interface InputCompOneProps {
+export interface InputCompOneProps {
   label: string;
   labelClass: string;
+  labelSpan?: string;
+  labelSpanClass?: string;
   placeholder?: string;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+  onInput: (e: React.FormEvent<HTMLInputElement>) => void;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
-  labelSpan?: string;
-  labelSpanClass?: string;
-  parentInputClass?: string;
-  inputClass?: string;
-  parentSelectClass?: string;
-  selectClass?: string;
   input?: boolean;
   select?: boolean;
-  inputType?: string;
   selectOptions?: { value: string; label: string }[];
-  icon?: string | React.ReactNode; // Type for the icon
+  inputType?: string;
+  inputClass?: string;
+  parentInputClass?: string;
+  selectClass?: string;
+  parentSelectClass?: string;
 }
 
-const InputCompOne: React.FC<InputCompOneProps> = ({
-  label,
-  labelClass,
-  labelSpan,
-  labelSpanClass,
-  placeholder = "Placeholder",
-  value,
-  onChange,
-  onInput,
-  name,
-  tabIndex,
-  ref,
-  selectValue,
-  input,
-  select,
-  inputType = "text",
-  selectOptions,
-  icon,
-  selectClass,
-  inputClass,
-  parentInputClass,
-  parentSelectClass,
-}) => {
-  return (
-    <div className={parentInputClass}>
-      {label && (
-        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
-          {label}
-          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
-        </label>
-      )}
-      {input && (
-        <div className="flex items-center">
-          <input
-            type={inputType}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onInput={onInput}
-            name={name}
-            tabIndex={tabIndex}
-            ref={ref}
-            className={inputClass}
-          />
-          {icon && (
-            <div className="">
-              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
-            </div>
-          )}
-        </div>
-      )}
-      {select && (
-        <div className={parentSelectClass}>
-          <select name={name} id="" value={selectValue} className={selectClass}>
-            {selectOptions?.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-    </div>
-  );
-};
+const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
+  (
+    {
+      label,
+      labelClass,
+      labelSpan,
+      labelSpanClass,
+      placeholder,
+      value,
+      onChange,
+      onInput,
+      name,
+      tabIndex,
+      selectValue,
+      input = true,
+      select = false,
+      selectOptions = [],
+      inputType = "text",
+      inputClass,
+      parentInputClass,
+      selectClass,
+      parentSelectClass,
+    },
+    forwardedRef
+  ) => {
+    return (
+      <div>
+        {label && (
+          <label htmlFor="" className={labelClass}>
+            {label}
+            {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+          </label>
+        )}
+        {input && (
+          <div className={parentInputClass}>
+            <input
+              type={inputType}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onInput={onInput}
+              name={name}
+              tabIndex={tabIndex}
+              ref={forwardedRef}
+              className={inputClass}
+            />
+          </div>
+        )}
+        {select && (
+          <div className={parentSelectClass}>
+            <select
+              name={name}
+              id=""
+              value={selectValue}
+              className={selectClass}
+            >
+              {selectOptions.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 export default InputCompOne;

src/pages/GetStartedPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { GetStarted as Main, Header, Footer } from "../components";
 
-const GetStartedPage: React.FC = () => {
+const GetStartedPage :React.FC = () => {
   return (
     <>
       <Header hideSidebar={true} hideMenu={true} />

src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React from "react";
 import {
   Hero,
   Header,
@@ -8,7 +8,7 @@ import {
   MidFooter,
 } from "../components";
 
-const HomePage: FC = () => {
+const HomePage: React.FC = () => {
   return (
     <>
       <TopHeader />
@@ -16,7 +16,7 @@ const HomePage: FC = () => {
       <Hero />
       <Requirements />
       <TopFooterOne />
-      <MidFooter /> 
+      <MidFooter />
     </>
   );
 };