Added layout to lets get started bvn

src/components/Footer/BottomFooterOne.tsx

@@ -62,7 +62,7 @@ const CustomerLinks = () => {
     )
   );
   return (
-    <div className="flex-[66.667] flex items-center flex-wrap gap-2">
+    <div className="flex-[66.667] flex items-center flex-nowrap md:flex-wrap gap-2">
       {links}
     </div>
   );

src/components/Header/HeaderMenuItem.tsx

@@ -3,9 +3,10 @@ import { LowerMenuItem } from "./Header";
 
 interface MenuItemProps {
   item: LowerMenuItem;
+  subItemClass: string;
 }
 
-const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
+const HeaderMenuItem: React.FC<MenuItemProps> = ({ item, subItemClass }) => {
   const [showSubMenu, setShowSubMenu] = useState<boolean>(false);
 
   const toggleSubMenu = () => {
@@ -14,15 +15,15 @@ const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
 
   return (
     <li
-      className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
+      className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt] ${subItemClass && "flex gap-4"}`}
       onMouseEnter={toggleSubMenu}
       onMouseLeave={toggleSubMenu}
     >
       <a href={item.linkPath}>{item.name}</a>
       {showSubMenu && item.subItems && (
-        <ul className="absolute bg-white shadow-md p-4 z-20">
+        <ul className={`absolute bg-white shadow-md p-4 z-20 ${setShowSubMenu && subItemClass}`}>
           {item.subItems.map((subItem, index) => (
-            <HeaderMenuItem key={index} item={subItem} />
+            <HeaderMenuItem key={index} item={subItem} subItemClass="relative" />
           ))}
         </ul>
       )}

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const LetsGetStarted = () => {
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        123
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStarted;

src/components/LetsGetStated/LetsGetStartedNav.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+
+
+const LetsGetStartedNav: React.FC = () => {
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <Link to="/">
+          <img
+            src={Logo}
+            alt="Logo"
+            className="w-[52px] h-[43px] xl:w-[72px] xl:h-[63px]"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStartedNav;

src/components/LetsGetStated/index.ts

@@ -0,0 +1,4 @@
+import LetsGetStarted from "./LetsGetStarted";
+import LetsGetStartedNav from "./LetsGetStartedNav";
+
+export { LetsGetStarted, LetsGetStartedNav };

src/components/index.ts

@@ -7,4 +7,5 @@ export * from "./DashboardLayout";
 export * from "./Icons";
 export * from "./Dashboard";
 export * from "./Cards";
+export * from "./LetsGetStated";
 export * from "./TsAndCs";

src/layouts/LetsGetStartedLayout.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Footer, LetsGetStartedNav } from "../components";
+import layoutImage from "../assets/images/test1-reverse.png";
+
+const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <div className="grid md:grid-cols-2">
+        <div className="w-full flex flex-col my-3">
+          <LetsGetStartedNav />
+          {children}
+        </div>
+        <div className="w-full">
+          <img src={layoutImage} alt="" className="w-full h-full" />
+        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
+        <Footer />
+      </div>
+    </>
+  );
+};
+
+export default LetsGetStartedLayout;

src/layouts/index.ts

@@ -1,3 +1,3 @@
 import HomeLayout from "./HomeLayout";
-
-export { HomeLayout };
+import LetsGetStartedLayout from "./LetsGetStartedLayout";
+export { HomeLayout, LetsGetStartedLayout };

src/pages/LetsGetStatedPage.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { LetsGetStartedLayout } from "../layouts";
+import { LetsGetStarted } from "../components";
+
+const LetsGetStatedPage: React.FC = () => {
+  return (
+    <LetsGetStartedLayout>
+      <LetsGetStarted />
+    </LetsGetStartedLayout>
+  );
+};
+
+export default LetsGetStatedPage;

src/pages/index.ts

@@ -10,6 +10,7 @@ import TermsAndConditionPage from "./TermsAndConditionPage";
 import PersonalBankingPage from "./PersonalBankingPage";
 import BusinessBankingPage from "./BusinessBankingPage";
 import CooperateBankingPage from "./CooperateBankingPage";
+import LetsGetStatedPage from "./LetsGetStatedPage";
 
 export {
   HomePage,
@@ -23,5 +24,6 @@ export {
   TermsAndConditionPage,
   PersonalBankingPage,
   BusinessBankingPage,
-  CooperateBankingPage
+  CooperateBankingPage,
+  LetsGetStatedPage
 };

src/router/Router.tsx

@@ -13,6 +13,7 @@ import {
   BusinessBankingPage,
   CooperateBankingPage,
   PersonalBankingPage,
+  LetsGetStatedPage,
 } from "../pages";
 import { DashboardAuth } from "../components";
 
@@ -26,10 +27,24 @@ 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
+        path={RouteHandler.businessBanking}
+        element={<BusinessBankingPage />}
+      />
+      <Route
+        path={RouteHandler.cooperateBanking}
+        element={<CooperateBankingPage />}
+      />
+      <Route
+        path={RouteHandler.personalBanking}
+        element={<PersonalBankingPage />}
+      />
+      <Route
+        path={RouteHandler.letsGetStarted}
+        element={<LetsGetStatedPage />}
+      />
 
+      {/* Dashboard */}
       <Route element={<DashboardAuth />}>
         <Route
           path={RouteHandler.dashboardHome}

src/router/routes.tsx

@@ -4,6 +4,7 @@ export class RouteHandler {
   static personalBanking = "/personal-banking";
   static businessBanking = "/business-banking";
   static cooperateBanking = "/cooperate-banking";
+  static letsGetStarted = "/lets-get-started";
   static getStarted = "/get-started";
   static dashboardHome = "/dashboard/home";
   static dashboardProfile = "/dashboard/profile";