complete footer and home layout page created

src/components/Footer/BottomFooterOne.tsx

@@ -1,10 +1,69 @@
+import { footerCustomerLinks, footerSocialLinks } from "../../utils/data";
 
-const BottomFooterOne = () => {
-  return (
-    <footer className="pt-[1.25rem] pb-[1.875rem]">
-      <div className="containerMode flex flex-col"></div>
-    </footer>
-  )
+interface FooterLinksProps {
+  href: string;
+  icon?: string;
+  text?: string;
 }
 
-export default BottomFooterOne
+const BottomFooterOne = () => {
+  const date: number = new Date().getFullYear();
+
+  return (
+    <footer className="pt-[1.25rem] pb-[1.875rem]">
+      <div className="containerMode flex flex-col gap-2 w-full">
+        <div className="flex flex-wrap flex-[100] justify-between w-full gap-2">
+          <SocialIconButtons />
+          <CustomerLinks />
+        </div>
+        <p className="text-[.8125rem] text-[#333] leading-[1.42857]">
+          © <span>{date}</span> First City Monument Bank (Licensed by the
+          Central Bank of Nigeria)
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default BottomFooterOne;
+
+const SocialIconButtons = () => {
+  const icons = footerSocialLinks.map(
+    ({ href, icon }: FooterLinksProps, idx: number) => (
+      <li key={idx}>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-[#592B81] py-[.3125rem] px-[.625rem] text-white w-[2.625rem] h-[2.625rem] flex items-center justify-center rounded-[3.125rem]"
+        >
+          {icon && <img src={icon} alt="icon" />}
+        </a>
+      </li>
+    )
+  );
+
+  return <ul className="flex flex-[33.333] items-center gap-1">{icons}</ul>;
+};
+
+const CustomerLinks = () => {
+  const links = footerCustomerLinks.map(
+    ({ href, text }: FooterLinksProps, idx: number) => (
+      <li key={idx} className="list-none">
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="py-[.75rem] text-[.8125rem] uppercase text-[#606161] flex items-center justify-center"
+        >
+          {text}
+        </a>
+      </li>
+    )
+  );
+  return (
+    <div className="flex-[66.667] flex items-center flex-wrap">
+      {links}
+    </div>
+  );
+};

src/components/Footer/MidFooter.tsx

@@ -5,7 +5,7 @@ const MidFooter = () => {
     <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="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>
+        <p className="text-[20px] font-extralight">my bank and I</p>
       </div>
     </div>
   </div>

src/components/Footer/TopFooterOneMenu.tsx

@@ -16,7 +16,7 @@ const TopFooterOneMenu: React.FC<TopFooterOneMenuProps> = ({
         {subItems.map(({ href = "#", text }) => (
           <li
             key={text}
-            className="text-[.6875rem] text-[#5e2785] hover:underline"
+            className="text-[.6875rem] text-[#5e2785] hover:underline w-fit"
           >
             {href ? <Link to={href}>{text}</Link> : <span>{text}</span>}
           </li>

src/components/Footer/index.tsx

@@ -1,5 +1,6 @@
 import Footer from "./Footer";
 import TopFooterOne from "./TopFooterOne";
 import MidFooter from "./MidFooter";
+import BottomFooterOne from "./BottomFooterOne";
 
-export { Footer, TopFooterOne, MidFooter };
+export { Footer, TopFooterOne, MidFooter, BottomFooterOne };