corrected footer and linked the click to apply

src/App.css

@@ -35,4 +35,13 @@
 .sidebar.open {
   transform: translateX(0);
   /* Show the sidebar by removing the translation */
+}
+
+.sidebar-open {
+  border: 1px solid red;
+}
+
+.sidebar-close {
+  border: 1px solid green;
+  transform: translateX(0%);
 }

src/components/Footer/Footer.tsx

@@ -1,29 +1,22 @@
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-
+import { socialsIcons } from "../../utils/data";
-import FBook from '../../assets/icons/facebook.svg'
-import Twitter from '../../assets/icons/twitter.svg'
-import Instagram from '../../assets/icons/instagram.svg'
 
 export default function Footer() {
-
+  const date = new Date().getFullYear();
-    let socialsIcons = [
-        {name: 'facebook', image: FBook},
-        {name: 'twitter', image: Twitter},
-        {name: 'instagram', image: Instagram},
-    ]
-
   return (
-    <div className='w-full h-10 absolute bottom-0 bg-sky-50/50 flex items-center'>
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
-        <div className='containerMode flex justify-between items-center flex-wrap gap-2'>
+      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
-            <p className='text-[10px]'>{new Date().getFullYear()} @ First City Monument Bank Limited</p>
+        <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
-            <div className='footer-social-icons flex justify-end items-center gap-2'>
+          {date} @ First City Monument Bank Limited
-                {socialsIcons.map((icon, index)=>(
+        </p>
-                    <Link key={index} className='w-5 h-5' to='#'>
+        <div className="footer-social-icons flex justify-end items-center gap-2">
-                        <img src={icon.image} alt={icon.name} />
+          {socialsIcons.map((icon, index) => (
-                    </Link>
+            <Link key={index} className="w-[1.875rem] h-[1.875rem]" to="#">
-                ))}
+              <img src={icon.image} alt={icon.name} />
-            </div>
+            </Link>
+          ))}
         </div>
+      </div>
     </div>
-  )
+  );
 }

src/components/GetStarted/GetStarted.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+const GetStarted: FC = () => {
+  return (
+    <div className="w-full flex items-center justify-center">
+      <div className="containerMode">
+        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
+          Let’s Get You Started
+        </h1>
+        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+            BASIC INFORMATION
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GetStarted;

src/components/GetStarted/index.ts

@@ -0,0 +1,3 @@
+import GetStarted from "./GetStarted";
+
+export { GetStarted };

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useState, ChangeEvent } from "react";
+import { useState, ChangeEvent, FC } from "react";
 import Logo from "../../assets/icons/logo.svg";
 import Button from "../shared/Button";
 import { lowerMenuItems } from "../../utils/data";
@@ -10,7 +10,15 @@ type LowerMenuItem = {
   name: string;
 };
 
-const Header = () => {
+type HiddenMenuItems = {
+  hideSidebar?: boolean;
+  hideMenu?: boolean;
+};
+
+const Header: FC<HiddenMenuItems> = ({
+  hideSidebar = false,
+  hideMenu = false,
+}) => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
@@ -23,10 +31,11 @@ const Header = () => {
   };
 
   return (
-    <div className="relative my-2 flex items-center justify-center">
+    <div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
-      {isSidebarOpen && (
+      {!hideSidebar && (
         <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
       )}
+
       <div className="containerMode flex justify-between gap-1 xl:gap-8">
         <Link to="/">
           <img
@@ -35,54 +44,62 @@ const Header = () => {
             className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
           />
         </Link>
-        <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
+
-          <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
+        {!hideMenu && (
-            {["Open An Account", "Internet Banking", "Contact Us"].map(
+          <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
-              (text: string) => (
+            <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
-                <li key={text} className="hidden sm:flex">
+              {["Open An Account", "Internet Banking", "Contact Us"].map(
-                  <a href="#">
+                (text: string) => (
-                    <Button
+                  <li key={text} className="hidden sm:flex">
-                      className={text === "Open An Account" ? "btn-active" : ""}
+                    <a href="#">
-                      text={text}
+                      <Button
-                    />
+                        className={
-                  </a>
+                          text === "Open An Account" ? "btn-active" : ""
-                </li>
+                        }
-              )
+                        text={text}
-            )}
+                      />
-            <li className="w-full lg:w-fit">
+                    </a>
-              <SearchInput onChange={handleSearchChange} value={searchValue} />
+                  </li>
-            </li>
+                )
-          </ul>
+              )}
-          <div className="flex lg:hidden">
+              <li className="w-full lg:w-fit">
-            <svg
+                <SearchInput
-             xmlns="http://www.w3.org/2000/svg"
+                  onChange={handleSearchChange}
-             viewBox="0 0 24 24"
+                  value={searchValue}
-             fill="none"
+                />
-             stroke="currentColor"
-             strokeWidth="1"
-             strokeLinecap="round"
-             strokeLinejoin="round"
-             onClick={toggleSidebar}
-              className="w-6 h-6 stroke-[#A6368C]"
-            >
-              <path
-                fillRule="evenodd"
-                d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </div>
-          <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
-            {lowerMenuItems.map((item: LowerMenuItem) => (
-              <li
-                key={item.id}
-                className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
-              >
-                {item.name}
               </li>
-            ))}
+            </ul>
-          </ul>
+            <div className="flex lg:hidden">
-        </div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                onClick={toggleSidebar}
+                className="w-6 h-6 stroke-[#A6368C]"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </div>
+            <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
+              {lowerMenuItems.map((item: LowerMenuItem) => (
+                <li
+                  key={item.id}
+                  className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
+                >
+                  {item.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
       </div>
     </div>
   );

src/components/Header/Sidebar.tsx

@@ -1,16 +1,19 @@
 const Sidebar = ({
   toggleSidebar,
-  isSidebarOpen
+  isSidebarOpen,
 }: {
   toggleSidebar: () => void;
   isSidebarOpen: boolean;
 }) => {
+  const isActive = isSidebarOpen ? "sidebar-close" : "sidebar-open";
+
   return (
-    <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
+    // <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
+    <div className={`${isActive} sidebar`}>
       {/* Sidebar content goes here */}
       <button onClick={toggleSidebar}>Close Sidebar</button>
     </div>
   );
 };
 
-export default Sidebar
+export default Sidebar;

src/components/Home/Hero/Hero.tsx

@@ -2,7 +2,7 @@ import styles from "./hero.module.css";
 const Hero = () => {
   return (
     <div
-      className={`w-full border-t-2 border-[#E3DEDA] relative mt-[.9375rem] mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
+      className={`w-full relative mt-[.9375rem] mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
     >
       <div className="containerMode flex justify-between gap-1 xl:gap-8">
         <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684]">

src/components/Home/Requirements/FeatureText.tsx

@@ -1,4 +1,8 @@
-const FeatureText = () => {
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import { RouteHandler } from "../../../router/routes";
+
+const FeatureText: FC = () => {
   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]">
@@ -23,9 +27,12 @@ const FeatureText = () => {
           <li>Insurance fee - 0.9%*loan amount*tenure (in years)</li>
         </ul>
       </div>
-      <a href="#" className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit">
+      <Link
+        to={RouteHandler.getStarted}
+        className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit"
+      >
         ***Click here to apply
-      </a>
+      </Link>
       <p className="mt-[.5625rem] font-bold cursor-default">
         Terms and conditions apply
       </p>

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Header"
 export * from "./Home"
+export * from "./GetStarted"
 export * from "./shared"
 export * from "./Footer"

src/pages/GetStartedPage.tsx

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

src/pages/HomePage.tsx

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

src/pages/index.ts

@@ -1,4 +1,5 @@
 import HomePage from "./HomePage";
 import LoginPage from "./LoginPage";
+import GetStartedPage from "./GetStartedPage";
 
-export {HomePage, LoginPage}
+export {HomePage, LoginPage, GetStartedPage}

src/router/Router.tsx

@@ -1,12 +1,13 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { HomePage, LoginPage } from "../pages";
+import { GetStartedPage, HomePage, LoginPage } from "../pages";
 
 const Routers = () => {
   return (
     <Routes>
       <Route path={RouteHandler.homepage} element={<HomePage />} />
       <Route path={RouteHandler.loginpage} element={<LoginPage />} />
+      <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
     </Routes>
   );
 };

src/router/routes.tsx

@@ -1,4 +1,5 @@
 export class RouteHandler {
     static homepage = "/"
     static loginpage = '/login'
+    static getStarted = "/get-started"
 }

src/utils/data.tsx

@@ -1,3 +1,7 @@
+import FBook from "../assets/icons/facebook.svg";
+import Twitter from "../assets/icons/twitter.svg";
+import Instagram from "../assets/icons/instagram.svg";
+
 export const top_header_data = [
   { id: 1, name: "HOME" },
   { id: 2, name: "PERSONAL" },
@@ -37,3 +41,9 @@ export const lowerMenuItems = [
     linkPath: "",
   },
 ];
+
+export const socialsIcons = [
+  { name: "facebook", image: FBook },
+  { name: "twitter", image: Twitter },
+  { name: "instagram", image: Instagram },
+];