fix for production build

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>
   );
 };