added pages for top header nav links

src/components/Header/TopHeader.tsx

@@ -1,5 +1,7 @@
 import { top_header_data } from "../../utils/data";
+import { Link } from "react-router-dom";
 import styles from "./header.module.css";
+import { RouteHandler } from "../../router/routes";
 
 const TopHeader = () => {
   return (
@@ -7,28 +9,36 @@ const TopHeader = () => {
       <div className="flex flex-col sm:hidden bg-[#5c2684]">
         <ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
           {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
-            <li key={text} className="w-full"> 
-              <a href="#" className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}>
+            <li key={text} className="w-full">
+              <a
+                href="#"
+                className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}
+              >
                 {text}
               </a>
             </li>
           ))}
           <li className="w-full flex items-center justify-center">
-              <a href="#" className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}>
+            <a
+              href="#"
+              className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}
+            >
               <p className="uppercase">Today's Share price:</p>
-            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
-              </a>
-            </li>
+              <span className="text-[#F8B51F] text-base md:text-lg">
+                $ 4.00
+              </span>
+            </a>
+          </li>
         </ul>
       </div>
       <div className={styles.top_header}>
         <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
           <ul className="flex items-center py-[0.4rem] flex-wrap">
-            {top_header_data.map(({ id, name }) => (
+            {top_header_data.map(({ id, name, href }) => (
               <li key={id}>
-                <a href="#" className={`py-[11px] px-[15px]`}>
+                <Link to={href} className={`py-[11px] px-[15px]`}>
                   {name}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>

src/pages/BusinessBankingPage.tsx

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

src/pages/CooperateBankingPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const CooperateBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      Cooperate Banking
+    </HomeLayout>
+  )
+}
+
+export default CooperateBankingPage

src/pages/PersonalBankingPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const PersonalBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      Personal Banking
+    </HomeLayout>
+  )
+}
+
+export default PersonalBankingPage

src/pages/TermsAndConditionPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { HomeLayout } from "../layouts";
 import { TsAndCs } from "../components";
 
-const TermsAndConditionPage = () => {
+const TermsAndConditionPage: React.FC = () => {
   return (
     <HomeLayout>
       <TsAndCs />

src/pages/index.ts

@@ -7,6 +7,9 @@ import DashboardProfilePage from "./DashboardProfilePage";
 import DashboardVerificationPage from "./DashboardVerificationPage";
 import DashboardpaymentsPage from "./DashboardPaymentsPage";
 import TermsAndConditionPage from "./TermsAndConditionPage";
+import PersonalBankingPage from "./PersonalBankingPage";
+import BusinessBankingPage from "./BusinessBankingPage";
+import CooperateBankingPage from "./CooperateBankingPage";
 
 export {
   HomePage,
@@ -18,4 +21,7 @@ export {
   DashboardVerificationPage,
   DashboardpaymentsPage,
   TermsAndConditionPage,
+  PersonalBankingPage,
+  BusinessBankingPage,
+  CooperateBankingPage
 };

src/router/Router.tsx

@@ -10,6 +10,9 @@ import {
   DashboardVerificationPage,
   DashboardpaymentsPage,
   TermsAndConditionPage,
+  BusinessBankingPage,
+  CooperateBankingPage,
+  PersonalBankingPage,
 } from "../pages";
 import { DashboardAuth } from "../components";
 
@@ -23,6 +26,10 @@ const Routers = () => {
         path={RouteHandler.termsAndConditions}
         element={<TermsAndConditionPage />}
       />
+      <Route path={RouteHandler.businessBanking} element={<BusinessBankingPage />} />
+      <Route path={RouteHandler.cooperateBanking} element={<CooperateBankingPage />} />
+      <Route path={RouteHandler.personalBanking} element={<PersonalBankingPage />} />
+
       <Route element={<DashboardAuth />}>
         <Route
           path={RouteHandler.dashboardHome}

src/router/routes.tsx

@@ -1,6 +1,9 @@
 export class RouteHandler {
   static homepage = "/";
   static loginpage = "/login";
+  static personalBanking = "/personal-banking";
+  static businessBanking = "/business-banking";
+  static cooperateBanking = "/cooperate-banking";
   static getStarted = "/get-started";
   static dashboardHome = "/dashboard/home";
   static dashboardProfile = "/dashboard/profile";

src/utils/data.tsx

@@ -7,12 +7,13 @@ import XWhite from "../assets/images/socials/twitterx.svg";
 import WhatsappWhite from "../assets/images/socials/whatsapp.svg";
 import YoutubeWhite from "../assets/images/socials/youtube.svg";
 import InstagramWhite from "../assets/images/socials/instagram.svg";
+import { RouteHandler } from "../router/routes";
 
 export const top_header_data = [
-  { id: 1, name: "HOME" },
-  { id: 2, name: "PERSONAL" },
-  { id: 3, name: "BUSINESS" },
-  { id: 4, name: "CORPORATE" },
+  { id: 1, name: "HOME", href: RouteHandler.homepage },
+  { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
+  { id: 3, name: "BUSINESS", href: RouteHandler.businessBanking },
+  { id: 4, name: "CORPORATE", href: RouteHandler.cooperateBanking },
 ];
 
 export const lowerMenuItems = [