bugs fixed

package-lock.json

@@ -19,20 +19,24 @@
         "bootstrap": "5.3.3",
         "chart.js": "^4.4.3",
         "dotenv": "^16.4.5",
-        "framer-motion": "^11.1.5",
+        "framer-motion": "^11.5.4",
         "js-cookie": "^3.0.5",
+        "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-apexcharts": "^1.4.1",
         "react-beautiful-dnd": "^13.1.1",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
+        "react-leaflet": "^4.2.1",
         "react-quill": "^0.0.2",
         "react-redux": "^9.1.1",
         "react-router-dom": "^6.22.3",
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
+        "swiper": "^11.1.12",
         "uuid": "^10.0.0",
         "vanilla-tilt": "^1.8.1",
         "xlsx": "^0.18.5",
@@ -2018,6 +2022,16 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
@@ -2835,6 +2849,14 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3730,6 +3752,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -3832,9 +3865,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.1.5",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.5.tgz",
-      "integrity": "sha512-ogK5fc0GBUT3AjzMXPx7f74m5V1ByRqkKQARBVHpdkYTNDxb/WriANYD+5JBo1wklQQJ1HayDZtmofQLqZFcbw==",
+      "version": "11.5.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
+      "integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -4659,6 +4692,11 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5251,6 +5289,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -5306,6 +5360,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-quill": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
@@ -6005,6 +6072,24 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.12.tgz",
+      "integrity": "sha512-PUkCToYAZMB4kP7z+YfPnkMHOMwMO71g8vUhz2o5INGIgIMb6Sb0XiP6cEJFsiFTd7FRDn5XCbg+KVKPDZqXLw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

package.json

@@ -21,20 +21,24 @@
     "bootstrap": "5.3.3",
     "chart.js": "^4.4.3",
     "dotenv": "^16.4.5",
-    "framer-motion": "^11.1.5",
+    "framer-motion": "^11.5.4",
     "js-cookie": "^3.0.5",
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.1.0",
+    "react-leaflet": "^4.2.1",
     "react-quill": "^0.0.2",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
+    "swiper": "^11.1.12",
     "uuid": "^10.0.0",
     "vanilla-tilt": "^1.8.1",
     "xlsx": "^0.18.5",

src/App.css

@@ -8,7 +8,7 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  padding: 0; 
+  padding: 0;
   /* font-family: "League Spartan", sans-serif !important; */
   /* font-family: "Poppins", sans-serif !important; */
   /* font-family: "Lato", sans-serif !important; */
@@ -22,36 +22,52 @@
 }
 
 .activee {
-  text-decoration: none; /* Remove underline */
-  font-weight: bold; /* Optionally change font weight for active link */
-  background: linear-gradient(
-    to right,
-    #7a45fb,
-    /* #764aaf67, */
-    #de41b5
-  ); /* Gradient background */
-  -webkit-background-clip: text; /* Clip text to the background area */
-  -webkit-text-fill-color: transparent; /* Fill text with the background color */
+  text-decoration: none;
+  /* Remove underline */
+  font-weight: bold;
+  /* Optionally change font weight for active link */
+  background: linear-gradient(to right,
+      #7a45fb,
+      /* #764aaf67, */
+      #de41b5);
+  /* Gradient background */
+  -webkit-background-clip: text;
+  /* Clip text to the background area */
+  -webkit-text-fill-color: transparent;
+  /* Fill text with the background color */
   transition: all 0.3s ease-in-out;
 }
 
 .active {
-  /* background-color: #210A33; */
+  /* background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
+  color: #fff;
+  font-weight: 600 !important; */
+  background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
+  color: #fff;
+  font-weight: 600 !important;
+  border-radius: 4px;
+  padding-left: 4px;
+}
+
+.custom-active {
+  background: transparent;
   color: #fff;
-  /* background-color: black; */
   font-weight: 600 !important;
 }
-a.single.active{
+
+a.single.active {
   border-left: 2px solid #fff;
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
 }
+
 .chakra-accordion__item.css-1t7rcca:has(.active) {
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
   border-left: 2px solid #fff;
 }
-.chakra-accordion__item .link:hover{
+
+/* .chakra-accordion__item .link:hover{
   background:transparent !important;
-}
+} */
 .link {
   text-decoration: none;
   transition: all 0.2s ease-in-out;
@@ -70,12 +86,22 @@ a.single.active{
   /* background-color: #ced8e6a2 !important; */
 }
 
+.header-icon .active:hover {
+  background-color: transparent !important;
+  /* color: #fff; */
+  /* background-color: #ced8e6a2 !important; */
+}
+
+
+
 .web-text-small {
   font-size: 12px !important;
 }
+
 .web-text-xxsmall {
   font-size: 9px !important;
 }
+
 .web-text-xsmall {
   font-size: 11px !important;
 }
@@ -109,15 +135,18 @@ a.single.active{
 }
 
 .greeting {
-  text-decoration: none; /* Remove underline */
-  font-weight: bold; /* Optionally change font weight for active link */
-  background: linear-gradient(
-    to right,
-    #7a45fb,
-    #de41b5
-  ); /* Gradient background */
-  -webkit-background-clip: text; /* Clip text to the background area */
-  -webkit-text-fill-color: transparent; /* Fill text with the background color */
+  text-decoration: none;
+  /* Remove underline */
+  font-weight: bold;
+  /* Optionally change font weight for active link */
+  background: linear-gradient(to right,
+      #7a45fb,
+      #de41b5);
+  /* Gradient background */
+  -webkit-background-clip: text;
+  /* Clip text to the background area */
+  -webkit-text-fill-color: transparent;
+  /* Fill text with the background color */
   transition: all 0.3s ease-in-out;
 }
 
@@ -138,15 +167,14 @@ a.single.active{
   color: #000;
   font-weight: 700;
   right: 110px;
-  background-image: radial-gradient(
-    circle,
-    #ffffff,
-    #eee2f2,
-    #e7c3dc,
-    #e5a3ba,
-    #de858e
-  );
+  background-image: radial-gradient(circle,
+      #ffffff,
+      #eee2f2,
+      #e7c3dc,
+      #e5a3ba,
+      #de858e);
 }
+
 .team-slider .swiper-button-prev:after {
   position: absolute;
   top: 185px;
@@ -160,14 +188,12 @@ a.single.active{
   color: #000;
   font-weight: 700;
   left: 110px;
-  background-image: radial-gradient(
-    circle,
-    #ffffff,
-    #eee2f2,
-    #e7c3dc,
-    #e5a3ba,
-    #de858e
-  );
+  background-image: radial-gradient(circle,
+      #ffffff,
+      #eee2f2,
+      #e7c3dc,
+      #e5a3ba,
+      #de858e);
 }
 
 .text-animate {
@@ -176,7 +202,7 @@ a.single.active{
   animation-iteration-count: 1;
 }
 
-.table-scroll::-webkit-scrollbar{
+.table-scroll::-webkit-scrollbar {
   width: 2px !important;
   height: 10px !important;
 }
@@ -216,6 +242,7 @@ a.single.active{
   right: 0;
   opacity: 0.1;
 }
+
 .goog-te-banner-frame {
   display: none;
 }
@@ -223,9 +250,11 @@ a.single.active{
 .goog-te-banner-frame.skiptranslate {
   display: none !important;
 }
+
 .goog-logo-link {
   display: none !important;
 }
+
 .goog-te-gadget {
   color: transparent !important;
 }
@@ -236,14 +265,17 @@ a.single.active{
     color: #DE858E;
     /* margin-bottom: -40px; */
   }
+
   30% {
     letter-spacing: 10px;
     /* margin-bottom: -40px; */
   }
+
   85% {
     letter-spacing: 8px;
     /* margin-bottom: -40px; */
   }
+
   100% {
     /* margin-bottom: 20px; */
   }
@@ -257,6 +289,7 @@ a.single.active{
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -268,6 +301,7 @@ a.single.active{
   width: 64px;
   height: 10px;
 }
+
 .lds-ellipsis div {
   position: absolute;
   width: 10px;
@@ -276,42 +310,52 @@ a.single.active{
   background: #fff;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
+
 .lds-ellipsis div:nth-child(1) {
   left: 6px;
   animation: lds-ellipsis1 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(2) {
   left: 6px;
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(3) {
   left: 26px;
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(4) {
   left: 45px;
   animation: lds-ellipsis3 0.6s infinite;
 }
+
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
   }
+
   100% {
     transform: scale(1);
   }
 }
+
 @keyframes lds-ellipsis3 {
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
   }
 }
+
 @keyframes lds-ellipsis2 {
   0% {
     transform: translate(0, 0);
   }
+
   100% {
     transform: translate(19px, 0);
   }
@@ -360,7 +404,7 @@ a.single.active{
 
 
 
-/* From Uiverse.io by Nawsome */ 
+/* From Uiverse.io by Nawsome */
 .switch {
   display: block;
   background-color: black;
@@ -376,20 +420,20 @@ a.single.active{
   display: none;
 }
 
-.switch input:checked + .button {
+.switch input:checked+.button {
   transform: translateZ(20px) rotateX(25deg);
   box-shadow: 0 -10px 20px #ff1818;
 }
 
-.switch input:checked + .button .light {
+.switch input:checked+.button .light {
   animation: flicker 0.2s infinite 0.3s;
 }
 
-.switch input:checked + .button .shine {
+.switch input:checked+.button .shine {
   opacity: 1;
 }
 
-.switch input:checked + .button .shadow {
+.switch input:checked+.button .shadow {
   opacity: 0;
 }
 

src/App.jsx

@@ -14,6 +14,19 @@ import Login from "./Pages/Login";
 import GlobalStateContext from "./Contexts/GlobalStateContext";
 import Cookies from "js-cookie";
 import NoInternetScreen from "./Pages/NoInternetScreen";
+import WelcomeToOptifii from "./Pages/Onboarding/WelcomeToOptifii";
+import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
+import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
+import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
+import LoginEkyc from "./Pages/Onboarding/LoginEkyc";
+import MinimumKyc from "./Pages/Onboarding/MinimumKyc";
+import FullKyc from "./Pages/Onboarding/FullKyc";
+import FullKycLocation from "./Pages/Onboarding/FullKycLocation";
+import FullKycQandA from "./Pages/Onboarding/FullKycQandA";
+import FullKycFaceVerification from "./Pages/Onboarding/FullKycFaceVerification";
+import FullKycAadharVerification from "./Pages/Onboarding/FullKycAadharVerification";
+import FullKycPanVerification from "./Pages/Onboarding/FullKycPanVerification";
+import RegisterOtp from "./Pages/Onboarding/RegisterOtp";
 
 const App = () => {
   // const { isAuthenticate } = useSelector((state) => state?.auth);
@@ -51,7 +64,22 @@ const App = () => {
   return (
     <Router>
       <Routes>
-        <Route path="/login" element={<Login />} />
+        {/* <Route path="/login" element={<Login />} /> */}
+        <Route path="/" element={<WelcomeToOptifii />} />
+        <Route path="/login-phone-number" element={<LoginPhoneNumber />} />
+        <Route path="/login-email-address" element={<LoginEmailAddress />} />
+        <Route path="/login-otp" element={<LoginEmailOtp />} />
+        <Route path="/register-otp" element={<RegisterOtp />} />
+        <Route path="/ekyc" element={<LoginEkyc />} />
+        <Route path="/minimum-kyc" element={<MinimumKyc />} />
+        <Route path="/maximum-kyc" element={<FullKyc />} />
+        <Route path="/full-kyc-location" element={<FullKycLocation />} />
+        <Route path="/full-kyc-q&a" element={<FullKycQandA />} />
+        <Route path="/full-kyc-face-verification" element={<FullKycFaceVerification />} />
+        <Route path="/full-kyc-aadhar-verification" element={<FullKycAadharVerification />} />
+        <Route path="/full-kyc-pan-verification" element={<FullKycPanVerification />} />
+
+
         <Route
           path="/*"
           element={
@@ -59,7 +87,7 @@ const App = () => {
               isAuthenticate || isAuthenticatedInCookie  === "true" ? (
                 <DefaultLayout isOnline={isOnline} />
               ) : (
-                <Login />
+                <LoginEmailAddress />
               )
             // ) : (
             //   <NoInternetScreen />
@@ -67,6 +95,9 @@ const App = () => {
           }
         />
 
+
+
+
         <Route path="*" element={<NotFound />} />
       </Routes>
     </Router>

src/Components/Buttons/Button01.jsx

@@ -1,25 +0,0 @@
-import Loader01 from "../Loaders/Loader01";
-
-const Button01 = ({ title, onClick, type, backgroundColor, hover, isLoading }) => {
-  return (
-    <button
-      style={{
-        backgroundColor: backgroundColor,
-        outline: "none",
-        border: "none",
-        height: 50,
-        transition: "opacity 0.3s", // Add transition for smooth hover effect
-      }}
-      type={type}
-      onClick={onClick ? onClick : null}
-      className=" rounded-3 p-2 w-100 text-white p-3 fs-6 fw-bold border-none"
-      onMouseEnter={(e) => (e.target.style.backgroundColor = hover)}
-      onMouseLeave={(e) => (e.target.style.backgroundColor = backgroundColor)}
-    >
-      {isLoading ? <Loader01/> : title}
-       
-    </button>
-  );
-};
-
-export default Button01;

src/Components/Buttons/Button02.jsx

@@ -1,47 +0,0 @@
-
-import { RiLogoutCircleLine } from "react-icons/ri";
-
-const Button02 = ({ title, onClick, type, gradientColors, height, width, open }) => {
-  const [startColor, endColor] = gradientColors;
-  return (
-    <button
-      style={{
-        background: `linear-gradient(to right, ${startColor}, ${endColor})`, // Apply linear gradient background
-        outline: "none",
-        border: "none",
-        height: height,
-        width: width,
-        opacity:0.9,
-        boxShadow:"rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset"
-      }}
-      type={type}
-      onClick={onClick ? onClick : null}
-      className=" rounded-4 text-white fs-6 fw-bold border-none text-center overflow-hidden d-flex align-items-center gap-2 justify-content-center"
-      // Add hover style
-      onMouseEnter={(e) =>
-        (e.target.style.opacity = 1)
-      }
-      onMouseLeave={(e) =>
-        (e.target.style.opacity = 0.9)
-      }
-    >
-      <RiLogoutCircleLine style={{
-        opacity: open ? 0 : 1,
-        transform: "translateX(14px)",
-        display: open ? 'none' : '', 
-        transition: 'All 1s  ease-in-out'
-      }} className="fs-4" /> 
-
-      <span 
-      style={{
-        transform: open ? 'translateX(0px)' : 'translateX(-100px)', 
-        fontSize: open ? '' : '6px',
-        // display: open ? '' : 'none', 
-        transition: 'All 0.5s  ease-in-out'
-      }}
-      >{title}</span>
-    </button>
-  );
-};
-
-export default Button02;

src/Components/Buttons/PrimaryButton.jsx

@@ -0,0 +1,30 @@
+import { Button } from '@chakra-ui/button'
+import React from 'react'
+
+const PrimaryButton = ({title, onClick, ...props}) => {
+  return (
+    
+    <Button
+    {...props}
+    _hover={{
+      // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+      opacity: 0.8,
+    }}
+    bgGradient="linear(to-r, #3725EA, #5E0FCD)"
+    fontSize={"xs"}
+    px={8}
+    fontWeight={500}
+    size={"sm"}
+    color={"#fff"}
+    variant="solid"
+    transition={"0.5s all"}
+    _active={{
+      // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
+      opacity: 1,
+    }}
+    onClick={onClick}
+  >{title}</Button>
+  )
+}
+
+export default PrimaryButton

src/Components/Buttons/SecondaryButton.jsx

@@ -0,0 +1,21 @@
+import { Button } from '@chakra-ui/button'
+import React from 'react'
+
+const SecondaryButton = ({title, onClick, ...props}) => {
+  return (
+    
+    <Button
+    {...props}
+    fontSize={"xs"}
+    px={8}
+    fontWeight={600}
+    size={"sm"}
+    variant="outline"
+    transition={"0.5s all"}
+    colorScheme='purple'
+    onClick={onClick}
+  >{title}</Button>
+  )
+}
+
+export default SecondaryButton

src/Components/DataTable/NormalTable.jsx

@@ -14,7 +14,7 @@ import {
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";
 
-const DataTable = ({
+const NormalTable = ({
   data,
   isLoading,
   tableHeadRow,
@@ -22,7 +22,6 @@ const DataTable = ({
   centered,
   total,
 }) => {
-  console.log(data);
 
   const columnWidth =
     data && data[0]
@@ -122,4 +121,4 @@ const DataTable = ({
   );
 };
 
-export default DataTable;
+export default NormalTable;

src/Components/Doughnut/BarCharts.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+
+// Register components in Chart.js
+ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
+
+const BarChart = () => {
+  // Data for the bar chart
+  const data = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+      {
+        label: 'Sales',
+        data: [10, 40, 20, 50, 25, 45, 30, 10, 30, 50, 25, 60],
+        backgroundColor: '#7f3ad8',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 1,
+        borderRadius: 8,
+        width:"10px",
+      },
+    ],
+  };
+
+  // Options for the bar chart
+  const options = {
+    scales: {
+      x: {
+        barPercentage: 0.4, // Decrease this value to make bars narrower
+        categoryPercentage: 0.6, // Adjust this to control the space between categories
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          // Add 'k' to the labels
+          callback: function (value) {
+            return value + 'k';
+          },
+        },
+      },
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          // Customize the tooltip label
+          label: function (context) {
+            return context.raw + 'k';
+          },
+        },
+      },
+    },
+  };
+
+  return <Bar data={data} options={options} />;
+};
+
+export default BarChart;

src/Components/HeaderMain.jsx

@@ -1,10 +1,4 @@
-import {
-  AddIcon,
-  ArrowBackIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  SearchIcon,
-} from "@chakra-ui/icons";
+import React, { useContext, useState } from "react";
 import {
   Avatar,
   Box,
@@ -22,54 +16,65 @@ import {
   PopoverTrigger,
   Portal,
   Text,
-  useColorMode,
+  useDisclosure,
 } from "@chakra-ui/react";
-import React, { useContext, useState } from "react";
+import { NavLink } from 'react-router-dom';
+import { MdOutlineHeadsetMic, MdNotificationsNone } from "react-icons/md";
+import { RiWallet3Line } from "react-icons/ri";
+import { SearchIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
 import { Link, useNavigate } from "react-router-dom";
-import * as XLSX from "xlsx";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import mainLogo from "../assets/optifii_logo.svg";
-import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
-import { RiWallet3Line } from "react-icons/ri";
-import { MdNotificationsNone } from "react-icons/md";
-import { MdOutlineHeadsetMic } from "react-icons/md";
+import PrimaryButton from "./Buttons/PrimaryButton";
+import Notifications from "../Pages/Notifications/Notifications";
+import { FaRegUser } from "react-icons/fa6";
+import { BiLogOut } from "react-icons/bi";
+import Cookies from "js-cookie"; // Import the Cookies library
 
 const HeaderMain = ({
-  logOutHandler,
   slideDirecttion,
   isDrawerOpen,
   toggleDrawer,
 }) => {
   const navigate = useNavigate();
-  const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
+  const { image, setIsAuthenticate } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
 
-  const openDrawerOnClick = () => {};
+
+  const logOutHandler = () => {
+    setIsAuthenticate(false);
+    Cookies.remove("isAuthenticated");
+    localStorage.removeItem("refreshToken");
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshTokenExp");
+    navigate("/");
+  };
+
+  // For controlling the modal
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <Box
       w={"100%"}
-      h={{base:"8%", lg:"8%"}}
+      h={{ base: "8%", xl: "9%" }}
       position={"relative"}
-      className={` pt-2 pb-2  fw-400 border-bottom d-flex ${
-        slideDirecttion ? " ps-2" : ""
-      }  justify-content-between align-items-center`}
+      className={`pt-2 pb-2 fw-400 border-bottom d-flex ${slideDirecttion ? "ps-2" : ""
+        } justify-content-between align-items-center`}
       zIndex={999}
     >
       <Box display={"flex"} alignItems={"center"}>
-        <Box w={"230px"} display={"flex"} alignItems={"center"} justifyContent={"space-between"}>
-          <Box
-            className={`d-flex  ${
-              true ? "justify-content-start" : "justify-content-center"
-            }  p-4 pt-0 pb-0 position-relative `}
-          >
+        <Box
+          w={"230px"}
+          display={"flex"}
+          alignItems={"center"}
+          justifyContent={"space-between"}
+        >
+          <Box className={`d-flex ${true ? "justify-content-start" : "justify-content-center"} p-4 pt-0 pb-0 position-relative`}>
             <Image
-              style={{
-                width: 95,
-              }}
+              style={{ width: 95 }}
               src={mainLogo}
               alt="Logo"
-              onClick={() => navigate("/")}
+              // onClick={() => navigate("/")}
               cursor={"pointer"}
             />
           </Box>
@@ -77,19 +82,9 @@ const HeaderMain = ({
             colorScheme={"forestGreen"}
             rounded={"lg"}
             onClick={toggleDrawer}
-            style={{
-              width: "28px",
-              height: "28px",
-              minWidth: "28px",
-              zIndex: 99,
-              backgroundColor: "#6311CB29",
-            }}
+            style={{ width: "28px", height: "28px", minWidth: "28px", zIndex: 99, backgroundColor: "#6311CB29" }}
           >
-            {isDrawerOpen ? (
-              <ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
-            ) : (
-              <ArrowRightIcon className="web-text-small "  color={"#6311CB"} />
-            )}
+            {isDrawerOpen ? <ArrowLeftIcon className="web-text-small" color={"#6311CB"} /> : <ArrowRightIcon className="web-text-small" color={"#6311CB"} />}
           </Button>
         </Box>
 
@@ -109,52 +104,83 @@ const HeaderMain = ({
       </Box>
       <Box display={"flex"} justifyContent={"space-between"}>
         <Box display={"flex"} gap={2}>
-          <Box display={"flex"} gap={2} alignItems={'center'} me={10}>
-            <Button size={'sm'} bg={"none"} p={0}>
-              <MdOutlineHeadsetMic fontSize={"18px"} />
-            </Button>
-            <Button size={'sm'} bg={"none"} p={0}>
-              <RiWallet3Line fontSize={"18px"} />
-            </Button>
-            <Button size={'sm'} bg={"none"} p={0}>
+          <Box className="header-icon" display={"flex"} gap={2} alignItems={"center"} me={10}>
+            <NavLink
+              to="/contact-us"
+              style={({ isActive }) => ({
+                borderBottom: isActive ? '1px solid #3725EA' : 'none',
+              })}
+            >
+              <Button size={"sm"} bg={"none"} p={0}>
+                <MdOutlineHeadsetMic fontSize={"18px"} />
+              </Button>
+            </NavLink>
+            <NavLink
+              to="/your-wallet"
+              style={({ isActive }) => ({
+                borderBottom: isActive ? '1px solid #3725EA' : 'none',
+              })}
+            >
+              <Button size={"sm"} bg={"none"} p={0}>
+                <RiWallet3Line fontSize={"18px"} />
+              </Button>
+            </NavLink>
+            <Button size={"sm"} bg={"none"} p={0} onClick={onOpen}>
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
           </Box>
-          <Box me={4} gap={2} className="d-flex justify-content-center ">
-            <Popover placement="bottom">
+          <Box me={4} gap={2} className="d-flex justify-content-center">
+            <Popover placement="bottom-start">
               <Portal>
-                <PopoverContent maxW="200px" className="">
+                <PopoverContent mt={6} maxW="450px">
                   <PopoverArrow />
-                  <PopoverBody className="web-text-medium pointer link">
-                    Profile
-                  </PopoverBody>
-                  <Link to={"/help-and-support"}>
-                    <PopoverBody className="web-text-medium pointer ">
-                      Help & Support
-                    </PopoverBody>
-                  </Link>
-                  <PopoverFooter
-                    onClick={logOutHandler}
-                    className="web-text-medium pointer link"
+                  <PopoverBody
+                    py={6}
+                    gap={2}
+                    display={"flex"}
+                    justifyContent={"center"}
+                    flexDirection={"column"}
+                    alignItems={"center"}
                   >
-                    Log Out
+                    <Avatar size="2xl" name="Segun Adebayo" src={image} />
+                    <Text as={"span"} fontSize={"md"} fontWeight={600}>
+                      Kartikey Gautam
+                    </Text>
+                    <PrimaryButton onClick={() => navigate("/profile")} title={"View Profile"} />
+                  </PopoverBody>
+                  <PopoverFooter border={"none"} pt={0} mb={4}>
+                    <HStack pl={6} spacing={1} cursor={"pointer"} w="fit-content" >
+                      <FaRegUser size={"16"} color="#666666" />
+                      <Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
+                        View as Admin
+                      </Text>
+                    </HStack>
+                    <HStack
+                      mt={2}
+                      pl={6}
+                      spacing={1}
+                      onClick={logOutHandler}
+                      cursor={"pointer"}
+                      w="fit-content" 
+                    >
+                      <BiLogOut size={"16"} color="#666666" />
+                      <Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
+                        Logout
+                      </Text>
+                    </HStack>
                   </PopoverFooter>
                 </PopoverContent>
               </Portal>
+
               <PopoverTrigger>
-                <Box className="d-flex pointer  align-items-center">
-                  <Avatar size="sm" boxSize={37} bg={"#210a33"} />
-                  <Box
-                    style={{
-                      display: "flex",
-                    }}
-                    className=" overflow-hidden ms-3  flex-column "
-                  >
-                    <Text as={"span"} className="web-text-small">
-                      Hello, Developers
+                <Box className="d-flex pointer align-items-center">
+                  <Avatar src={image} size={"sm"} bg={"#210a33"} />
+                  <Box style={{ display: "flex" }} className="overflow-hidden ms-3 flex-column">
+                    <Text fontWeight={600} as={"span"} fontSize={"md"}>
+                      Kartikey Gautam
                     </Text>
-                    <Text as={"span"} className="web-text-xsmall">
-                      mailto:wdi@tanami.com
+                    <Text as={"span"} fontSize={"xs"}>
+                      Website Development India
                     </Text>
                   </Box>
                 </Box>
@@ -163,6 +189,9 @@ const HeaderMain = ({
           </Box>
         </Box>
       </Box>
+
+      {/* Include the Notifications modal */}
+      <Notifications isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };

src/Components/MiniHeader.jsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 
 const MiniHeader = ({ title, subTitle, backButton }) => {
   const navigate = useNavigate();
-  const [firstPart, secondPart] = title.split(/ (.+)/);
+  const [firstPart, secondPart] = title && title?.split(/ (.+)/);
 
   return ( 
     <HStack gap={3} mb={4}>

src/Components/PayCards/Platinium.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from 'react'
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import bg from "../../assets/platinium_bg.png";
+import RuPay from "../../assets/rupayImg.png";
+import VanillaTilt from 'vanilla-tilt';
+import { Box, Text, VStack } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import { Button } from '@chakra-ui/button';
+
+
+
+import chip from "../../assets/chip.svg";
+import chip_rays from "../../assets/chip_rays.svg";
+
+
+
+
+
+import platinum from "../../assets/Platinum.svg";
+
+const Platinium = () => {
+    const tiltRef = useRef(null);  useEffect(() => {
+      const node = tiltRef.current;
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 5,
+          speed: 400,
+          glare: true,
+          "max-glare": 0.5,
+        });
+      }
+      return () => {
+        if (node && node.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      };
+    }, []);
+
+
+  return (
+    <VStack
+      ref={tiltRef} // Attach tilt to this ref
+      // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+    //   bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+    bgImage={bg}
+    bgPosition={"center"} // Position the background image (e.g., center)
+    bgSize={"cover"} // Optional: Cover the entire area
+      alignItems={"start"}
+      justifyContent={"space-between"}
+      height={"100%"}
+      w={240}
+      h={"372px"}
+      rounded={"xl"}
+      p={4}
+      boxShadow={"md"}
+      position={"relative"}
+    >
+      <Box
+        width={"100%"}
+        cursor={"grab"}
+        display={"flex"}
+        justifyContent={"space-between"}
+      >
+        <Image w={20} src={logo_card} />
+        <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+      </Box>
+
+      <VStack
+        width={"100%"}
+        display={"flex"}
+        alignItems={"start"}
+        justifyContent={"space-between"}
+      >
+        <Text as={'span'} fontWeight={500} color={"#fff"} fontSize={"sm"}>
+        Kartikey Gautam
+        </Text>
+        <Text opacity={0.7} fontWeight={500} as={'span'} color={"#fff"} fontSize={"xs"}>
+        Website Developers India Pvt Ltd
+        </Text>
+      </VStack>
+
+      <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
+        <Image w={12}  src={platinum} />
+        <Image w={24} src={RuPay} me={0.5} />
+      </Box>
+
+      <Box
+        position={"absolute"}
+        top={14}
+        right={3}
+        display={'flex'}
+        gap={2}
+      >
+        <Image src={chip} />
+        <Image src={chip_rays} />
+        
+      </Box>
+    </VStack>
+  )
+}
+
+export default Platinium

src/Components/PayCards/PlatiniumGift.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react'
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import bg from "../../assets/platinium_bg.png";
+import RuPay from "../../assets/rupayImg.png";
+import VanillaTilt from 'vanilla-tilt';
+import { Box, Text, VStack } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import splashPattern from '../../assets/splash_pattern.svg'
+import gift from '../../assets/gift.svg'
+import { Button } from '@chakra-ui/button';
+
+
+
+import chip from "../../assets/chip.svg";
+import chip_rays from "../../assets/chip_rays.svg";
+
+
+
+
+
+import platinum from "../../assets/Platinum.svg";
+
+const PlatiniumGift = () => {
+    const tiltRef = useRef(null);  useEffect(() => {
+      const node = tiltRef.current;
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 5,
+          speed: 400,
+          glare: true,
+          "max-glare": 0.5,
+        });
+      }
+      return () => {
+        if (node && node.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      };
+    }, []);
+
+
+  return (
+    <VStack
+      ref={tiltRef} // Attach tilt to this ref
+      // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+    //   bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+    bgImage={bg}
+    bgPosition={"center"} // Position the background image (e.g., center)
+    bgSize={"cover"} // Optional: Cover the entire area
+      alignItems={"start"}
+      justifyContent={"space-between"}
+      height={"100%"}
+      w={240}
+      h={"372px"}
+      rounded={"xl"}
+      p={4}
+      boxShadow={"md"}
+      position={"relative"}
+    >
+      <Box
+        width={"100%"}
+        cursor={"grab"}
+        display={"flex"}
+        justifyContent={"space-between"}
+      >
+        <Image w={20} src={logo_card} />
+        <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+      </Box>
+
+      <VStack
+        width={"100%"}
+        display={"flex"}
+        alignItems={"start"}
+        justifyContent={"space-between"}
+        zIndex={9}
+        gap={1}
+        transform={'translateY(-75px)'}
+      >
+        <Text as={'span'} color={"#fff"} fontWeight={500} fontSize={"sm"}>
+        Kartikey Gautam
+        </Text>
+        <Text opacity={0.7} as={'span'} color={"#fff"} fontWeight={500} fontSize={"xs"}>
+        Website Developers India Pvt Ltd
+        </Text>
+      </VStack>
+
+      <Box 
+        zIndex={9} width={"100%"} display={"flex"} justifyContent={"space-between"}>
+        <Image  w={12} src={platinum} />
+        <Image w={24} src={RuPay} me={0.5} />
+      </Box>
+
+      <Text
+        position={"absolute"}
+        top={14}
+        left={4}
+        display={'flex'}
+        gap={2}
+        color={'#fff'}
+        fontSize={'xs'}
+      >
+        Gift Card
+      </Text>
+      <Image h={"300px"} position={'absolute'} bottom={-10} left={0} src={splashPattern} />
+
+      {/* <Image h={"300px"} position={'absolute'} bottom={20} left={0} src={splashPattern} /> */}
+
+
+
+      <Image w={90}  position={'absolute'} bottom={"46px"} left={0} src={gift} />
+    </VStack>
+  )
+}
+
+export default PlatiniumGift

src/Components/PayCards/RupayCard.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react'
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import RuPay from "../../assets/rupayImg.png";
+import VanillaTilt from 'vanilla-tilt';
+import { Box, Text, VStack } from '@chakra-ui/layout';
+import { Image } from '@chakra-ui/image';
+import { Button } from '@chakra-ui/button';
+
+const RupayCard = () => {
+    const tiltRef = useRef(null);  useEffect(() => {
+      const node = tiltRef.current;
+      if (node) {
+        VanillaTilt.init(node, {
+          max: 5,
+          speed: 400,
+          glare: true,
+          "max-glare": 0.5,
+        });
+      }
+      return () => {
+        if (node && node.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      };
+    }, []);
+
+
+  return (
+    <VStack
+      ref={tiltRef} // Attach tilt to this ref
+      // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+      bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+      alignItems={"start"}
+      justifyContent={"space-between"}
+      height={"100%"}
+      w={240}
+      h={"372px"}
+      rounded={"xl"}
+      p={4}
+      boxShadow={"md"}
+      position={"relative"}
+    >
+      <Box
+        width={"100%"}
+        cursor={"grab"}
+        display={"flex"}
+        justifyContent={"space-between"}
+      >
+        <Image w={20} src={logo_card} />
+        <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+      </Box>
+
+      <VStack
+        width={"100%"}
+        display={"flex"}
+        alignItems={"start"}
+        justifyContent={"space-between"}
+      >
+        <Text color={"#fff"} fontSize={"sm"}>
+          1234 5678 1234 5678
+        </Text>
+        <Button
+          size={"sm"}
+          rounded={"full"}
+          bg={"#ffffff30"}
+          fontSize={"sm"}
+          px={6}
+          border={"1px solid #fff"}
+          _hover={{ opacity: 0.8 }}
+          _active={{ opacity: 1 }}
+          color={"#fff"}
+          fontWeight={500}
+        >
+          Tap to view details
+        </Button>
+      </VStack>
+
+      <Box width={"100%"} display={"flex"} justifyContent={"end"}>
+        {/* <Image w={32} src={logo_card} /> */}
+        <Image w={24} src={RuPay} me={0.5} />
+      </Box>
+
+      <Text
+        position={"absolute"}
+        top={24}
+        right={-6}
+        transform="rotate(270deg)"
+        fontSize={"xs"}
+        color={"#9E9E9E"}
+      >
+        Valid in india
+      </Text>
+    </VStack>
+  )
+}
+
+export default RupayCard

src/Components/SuccessPendingModal/LoginModal.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+    Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, Button, Image,
+    VStack,
+    Link
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { CiMobile3 } from "react-icons/ci";
+import { FcGoogle } from "react-icons/fc";
+import bell from "../../assets/bell.svg"
+import { Navigate, useNavigate } from 'react-router-dom';
+
+// Define motion components
+const MotionBox = motion(Box);
+const MotionImage = motion(Image); // Motion component for Image
+
+const LoginModal = ({ isOpen, onClose }) => {
+
+    const navigate = useNavigate();
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader></ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <HStack justifyContent={"center"} mb={2}>
+                            <Image
+                                src={bell}
+                                alt="bell"
+                                w={10}
+                                h={12}
+                            ></Image>
+                        </HStack>
+                        <Text
+                            color={"#100F14"}
+                            fontSize={"xl"}
+                            fontWeight={"600"}
+                            textAlign={"center"}
+                            mb={2}
+                        >
+                            Register to get free access
+                            to all our recourses
+                        </Text>
+                        <Text
+                            color={"#100F14"}
+                            fontSize={"sm"}
+                            fontWeight={"500"}
+                            textAlign={"center"}
+                        >
+                            Sign up to see more
+                        </Text>
+                        <VStack>
+                            <Button
+                                onClick={() => navigate("/login-email-address")}
+                                _hover={{ opacity: 0.8 }}
+                                borderRadius={"full"}
+                                bg={"#100F14"}
+                                color={"#fff"}
+                                border={"1px solid #9794AA"}
+                                fontSize={"sm"}
+                                fontWeight={"500"}
+                                w={"100%"}
+                                px={4}
+                                py={6}
+                            >Continue with email</Button>
+                            <Button
+                                onClick={() => navigate("/login-phone-number")}
+                                _hover={{ opacity: 0.8 }}
+                                borderRadius={"full"}
+                                color={"#100F14"}
+                                bg={"transparent"}
+                                border={"1px solid #9794AA"}
+                                fontSize={"sm"}
+                                fontWeight={"500"}
+                                w={"100%"}
+                                px={4}
+                                py={6}
+                            >
+                                <CiMobile3 style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
+                                Mobile number
+                            </Button>
+                            <Button
+                                _hover={{ opacity: 0.8 }}
+                                borderRadius={"full"}
+                                color={"#100F14"}
+                                bg={"transparent"}
+                                border={"1px solid #9794AA"}
+                                fontSize={"sm"}
+                                fontWeight={"500"}
+                                w={"100%"}
+                                px={4}
+                                py={6}
+                            >
+                                <FcGoogle style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
+                                Continue with Google
+                            </Button>
+                        </VStack>
+
+                        <Text
+                            color={"#686677"}
+                            fontSize={"xs"}
+                            fontWeight={500}
+                            textAlign={"center"}
+                            mt={4}
+                            mb={0}
+                        >
+                            By continuing, you agree to the <Link
+                                color={"#100F14"}
+                                textDecoration={"underline"}
+                                fontWeight={600}
+                            >Terms of Service </Link>
+                        </Text>
+                        <Text
+                            color={"#686677"}
+                            fontSize={"xs"}
+                            fontWeight={500}
+                            textAlign={"center"}
+                        >
+                            and acknowledge you’ve read our <Link
+                                color={"#100F14"}
+                                textDecoration={"underline"}
+                                fontWeight={600}
+                            >Privacy Policy.</Link>
+                        </Text>
+                        <Text
+                            color={"#686677"}
+                            fontSize={"sm"}
+                            fontWeight={500}
+                            textAlign={"center"}
+                            mt={4}
+                        >
+                            Already a member?
+                            <Button
+                                onClick={() => navigate("/ekyc")}
+                                _hover={{ opacity: 0.8 }}
+                                px={0}
+                                fontSize={"sm"}
+                                color={"#100F14"}
+                                textDecoration={"underline"}
+                                fontWeight={600}
+                                bg={"transparent"}
+                            >Log in</Button>
+                        </Text>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+}
+
+export default LoginModal;

src/Components/SuccessPendingModal/PendingModal.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+    Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent,
+    useDisclosure, Button, Image
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import PendingSvg from '../../assets/pending.svg'; // Assuming the pending.svg is in your assets folder
+
+// Define motion components
+const MotionBox = motion(Box);
+const MotionImage = motion(Image); // Motion component for Image
+
+const PendingModal = ({ isOpen, onClose }) => {
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader></ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <MotionBox
+                            textAlign="center"
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
+                            mb={8}
+                        >
+                            <HStack justifyContent={"center"} mb={8}>
+                                <MotionImage
+                                    src={PendingSvg}
+                                    alt="Pending SVG"
+                                    boxSize="100px"
+                                    initial={{ scale: 0.8, rotate: 0 }}
+                                    animate={{ scale: 1, rotate: 360 }}
+                                    transition={{ duration: 1.9, type: "spring", bounce: 0.5 }}
+                                />
+                            </HStack>
+
+                            <Text
+                                color={"#100F14"}
+                                fontSize={"md"}
+                                fontWeight={"600"}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                               Your KYC is in pending stage. Please wait while verification is completed.
+                            </Text>
+                        </MotionBox>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+}
+
+export default PendingModal;

src/Components/SuccessPendingModal/SuccessModal.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+    Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent,
+    useDisclosure, Button
+} from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+
+// Define motion components
+const MotionBox = motion(Box);
+const MotionSvg = motion("svg");
+const MotionCircle = motion.circle;
+const MotionPolyline = motion.polyline;
+
+const SuccessModal = ({isOpen,onClose}) => {
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader></ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        <MotionBox
+                            textAlign="center"
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            transition={{ duration: 0.5, type: "spring", stiffness: 300 }}
+                            mb={8}
+                        >
+                            {/* svg with Framer Motion animation */}
+                            <HStack justifyContent={"center"} mb={8}>
+                                <MotionSvg
+                                    version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 130.2 130.2"
+                                    width="100px"
+                                    height="100px"
+                                    initial={{ scale: 0.8 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ duration: 0.6, type: "spring", bounce: 0.5 }}
+                                >
+                                    <MotionCircle
+                                        cx="65.1"
+                                        cy="65.1"
+                                        r="62.1"
+                                        fill="#65F37C"
+                                        stroke="#159F2B"
+                                        strokeWidth="0"
+                                        strokeDasharray="1000"
+                                        strokeDashoffset="1000"
+                                        initial={{ strokeDashoffset: 1000 }}
+                                        animate={{ strokeDashoffset: 0 }}
+                                        transition={{ duration: 1 }}
+                                    />
+                                    <MotionPolyline
+                                        points="100.2,40.2 51.5,88.8 29.8,67.5"
+                                        fill="none"
+                                        stroke="#159F2B"
+                                        strokeWidth="6"
+                                        strokeLinecap="round"
+                                        strokeMiterlimit="10"
+                                        strokeDasharray="1000"
+                                        strokeDashoffset="-100"
+                                        initial={{ strokeDashoffset: 1000 }}
+                                        animate={{ strokeDashoffset: 0 }}
+                                        transition={{ duration: 0.7, delay: 1 }}
+                                    />
+                                </MotionSvg>
+                            </HStack>
+
+                            <Text
+                                color={"#100F14"}
+                                fontSize={"md"}
+                                fontWeight={"600"}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                                KYC is done successfully!
+                            </Text>
+                            <Text
+                                color={"#686677"}
+                                fontSize={"xs"}
+                                fontWeight={"500"}
+                                textAlign={"center"}
+                            >
+                                You’re all set and ready to start
+                            </Text>
+
+                            <HStack justifyContent={"center"}>
+                                <Button
+                                    onClick={onClose}
+                                    _hover={{ opacity: 0.8 }}
+                                    px={0}
+                                    fontSize={"sm"}
+                                    color={"#3725EA"}
+                                    textDecoration={"underline"}
+                                    fontWeight={600}
+                                    bg={"transparent"}
+                                >
+                                    Continue
+                                </Button>
+                            </HStack>
+
+                        </MotionBox>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+}
+
+export default SuccessModal;

src/Components/Swiper/SwiperSlider.css

@@ -0,0 +1,74 @@
+.swiper{
+    position: relative;
+}
+
+.swiper-slide {
+    width: 50% !important;
+    display: flex !important;
+}
+
+.swiper-slide-active {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.swiper-slide-next,
+.swiper-slide-prev {
+    opacity: 0.7;
+}
+.swiper-slide-active{
+    transform: translate3d(-5px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(0.8) !important;
+}
+
+.swiper-slide-prev {
+    transform: translate3d(60px, 0px, -500px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+
+.swiper-slide-next {
+    transform: translate3d(-40px, 0px, -533.578px) rotateX(0deg) rotateY(0deg) scale(1) !important;
+}
+
+
+.slider-controler {
+    position: relative;
+    bottom: 12rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px 0 6px;
+}
+
+.slider-controler .swiper-button-next,
+.slider-controler .swiper-button-prev {
+    background: #fff;
+    color: #3725EA;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    box-shadow: 0px 2px 4px 0px #666666CC;
+
+}
+
+.slider-controler .slider-arrow::after {
+    content: '';
+}
+
+.swiper-pagination {
+    display: none !important;
+}
+
+@media screen and (max-width: 1366px) {
+    .slider-controler .swiper-button-next {
+      margin-right: 10px;
+    }
+  }
+  
+  @media screen and (max-width: 1440px) {
+    .slider-controler .swiper-button-next {
+        margin-right: 0px;
+    }
+  }
+  
+  
+  

src/Components/Swiper/SwiperSlider.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Box, Image, IconButton } from '@chakra-ui/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import RupayCard from "../../Components/PayCards/RupayCard";
+import Platinium from "../../Components/PayCards/Platinium";
+import PlatiniumGift from "../../Components/PayCards/PlatiniumGift";
+import './SwiperSlider.css';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+// Import required modules
+import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
+
+function SwiperSlider() {
+  return (
+    <Box>
+      <Swiper
+        effect={'coverflow'}
+        grabCursor={true}
+        centeredSlides={true}
+        loop={true}
+        slidesPerView={'auto'}
+        coverflowEffect={{
+          rotate: 0,
+          stretch: 0,
+          depth: 100,
+          slideShadows: false,
+        }}
+        pagination={{ clickable: true }}
+        navigation={{
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        }}
+        modules={[EffectCoverflow, Pagination, Navigation]}
+      >
+        <SwiperSlide>
+          <Platinium />
+        </SwiperSlide>
+        <SwiperSlide>
+          <RupayCard />
+        </SwiperSlide>
+        <SwiperSlide>
+          <PlatiniumGift />
+        </SwiperSlide>
+        <SwiperSlide>
+          <Platinium />
+        </SwiperSlide>
+        <SwiperSlide>
+          <RupayCard />
+        </SwiperSlide>
+        <SwiperSlide>
+          <PlatiniumGift />
+        </SwiperSlide>
+
+      </Swiper>
+      <Box className="slider-controler">
+        <IconButton className="swiper-button-prev slider-arrow" aria-label="Previous slide" icon={<ChevronLeftIcon />} />
+        <IconButton className="swiper-button-next slider-arrow" aria-label="Next slide" icon={<ChevronRightIcon />} />
+      </Box>
+    </Box>
+
+  );
+}
+
+export default SwiperSlider;

src/Components/ToastBox.jsx

@@ -10,11 +10,13 @@ const ToastBox = ({ message, status }) => {
       color={status === "error" ? "red.500" : status === "warn" ?  "blue.500" : "green.500"}
       bg={"#fff"}
       boxShadow={'md'}
-      rounded={'sm'}
+      rounded={'lg'}
+      bgGradient="linear(to-l, #210A33, #210A33)"
+      // border={'1px solid purple'}
     >
 
       {status === "error" || status === "warn" ? <WarningIcon/> : <CheckCircleIcon /> }
-      <Text as={"span"}>{message}</Text>
+      <Text fontWeight={500} as={"span"}>{message}</Text>
     </Box>
   );
 };

src/Contexts/GlobalStateProvider.jsx

@@ -44,10 +44,15 @@ const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
 
 
+
+  const [image, setImage] = useState("https://bit.ly/sage-adebayo");
+
+
   const [reportsHistory, setReportsHistory] = useState([
     {
       "id": 1,
-      "name": "Office Supplies - July 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "31-07-2024 10:15 am",
       "reportType": "Expense",
       "totalExpense": 350.75,
@@ -55,7 +60,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 2,
-      "name": "Travel Reimbursement - Q2 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "15-08-2024 02:45 pm",
       "reportType": "Expense",
       "totalExpense": 1250.00,
@@ -63,7 +69,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 3,
-      "name": "Client Meeting Expenses - August 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "28-08-2024 09:30 am",
       "reportType": "Expense",
       "totalExpense": 600.50,
@@ -71,7 +78,8 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 4,
-      "name": "Marketing Campaign - Q3 2024",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
       "lastUpdated": "10-09-2024 11:00 am",
       "reportType": "Expense",
       "totalExpense": 2300.00,
@@ -79,136 +87,136 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       "id": 5,
-      "name": "Team Building Event - September 2024",
-      "lastUpdated": "22-09-2024 04:20 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "22-09-2024 04:20 pm",
       "reportType": "Expense",
       "totalExpense": 800.00,
       "status": "Fully Reimbursed"
     },
     {
       "id": 6,
-      "name": "Office Renovation - Phase 1",
-      "lastUpdated": "30-09-2024 03:10 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "30-09-2024 03:10 pm",
       "reportType": "Expense",
       "totalExpense": 4500.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
     },
     {
       "id": 7,
-      "name": "Software Licenses - 2024 Renewal",
-      "lastUpdated": "05-10-2024 01:50 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
       "reportType": "Expense",
       "totalExpense": 3200.00,
       "status": "Saved"
     },
     {
       "id": 8,
-      "name": "Conference Attendance - October 2024",
-      "lastUpdated": "15-10-2024 09:00 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
       "reportType": "Expense",
       "totalExpense": 1500.00,
       "status": "Partially Reimbursed"
     },
     {
       "id": 9,
-      "name": "Holiday Party - December 2024",
-      "lastUpdated": "20-12-2024 05:30 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
       "reportType": "Expense",
       "totalExpense": 2500.00,
       "status": "Saved"
     },
     {
       "id": 10,
-      "name": "Client Gifts - End of Year 2024",
-      "lastUpdated": "31-12-2024 02:00 pm",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
       "reportType": "Expense",
       "totalExpense": 1200.00,
       "status": "Approved"
     },
     {
       "id": 11,
-      "name": "Training Programs - January 2025",
-      "lastUpdated": "15-01-2025 10:30 am",
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
       "reportType": "Expense",
       "totalExpense": 900.00,
       "status": "Saved"
@@ -216,93 +224,211 @@ const GlobalStateProvider = ({ children }) => {
   ]
   )
 
+  const [reportsHistoryMini, setReportsHistoryMini] = useState([
+    {
+      "id": 1,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+    {
+      "id": 2,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Rejected"
+    },
+    {
+      "id": 3,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+    {
+      "id": 4,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Rejected"
+    },
+    {
+      "id": 5,
+      "name": "Reimbursement",
+      "reportFor": "Report for June 2024",
+      "lastUpdated": "31-07-2024 10:15 am",
+      "reportType": "Expense",
+      "totalExpense": 350.75,
+      "status": "Approved"
+    },
+  ]
+  )
+
 
 
   const [requestsTable, setRequestTable] = useState([
     {
       "id": 1,
       "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
+      "date": "25-08-2024 01:15 pm",
       "walletType": "Food",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 3200"
     },
     {
       "id": 2,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "transactionType": "Take Away",
+      "date": "22-07-2024 03:30 pm",
+      "walletType": "Travel",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 1500"
     },
     {
       "id": 3,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "transactionType": "Delivery",
+      "date": "15-06-2024 11:00 am",
+      "walletType": "Shopping",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 2450"
     },
     {
       "id": 4,
       "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "date": "09-05-2024 08:45 pm",
+      "walletType": "Groceries",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 5400"
     },
     {
       "id": 5,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "transactionType": "Take Away",
+      "date": "02-07-2024 12:30 pm",
+      "walletType": "Entertainment",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 1300"
     },
     {
       "id": 6,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "transactionType": "Delivery",
+      "date": "10-03-2024 06:15 pm",
+      "walletType": "Electronics",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 6800"
     },
     {
       "id": 7,
       "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "date": "18-09-2024 05:20 pm",
+      "walletType": "Utilities",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 4000"
     },
     {
       "id": 8,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
+      "transactionType": "Delivery",
+      "date": "12-04-2024 02:50 pm",
       "walletType": "Food",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 2700"
     },
     {
       "id": 9,
       "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
-      "walletType": "Food",
+      "date": "05-11-2024 07:10 pm",
+      "walletType": "Health",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 4900"
     },
     {
       "id": 10,
-      "transactionType": "Dine In",
-      "date": "31- 02-2024 04.20 pm",
+      "transactionType": "Take Away",
+      "date": "19-08-2024 09:40 am",
       "walletType": "Food",
       "document": `${DummyPdf}`,
-      "amountSpent": "₹ 5000"
+      "amountSpent": "₹ 2200"
     },
-
+    {
+      "id": 11,
+      "transactionType": "Dine In",
+      "date": "18-09-2024 05:20 pm",
+      "walletType": "Utilities",
+      "document": `${DummyPdf}`,
+      "amountSpent": "₹ 4000"
+    }
   ]
+
   )
 
+
+
+  const [walletTable, setWalletTable] = useState([
+    {
+      id: 1,
+      transactionType: "Dine In",
+      date: "25-08-2024 01:15 pm",
+      walletType: "Food",
+      amountSpent: "₹ 3200"
+    },
+    {
+      id: 2,
+      transactionType: "Grocery",
+      date: "24-08-2024 10:00 am",
+      walletType: "Essentials",
+      amountSpent: "₹ 1500"
+    },
+    {
+      id: 3,
+      transactionType: "Fuel",
+      date: "23-08-2024 08:30 am",
+      walletType: "Transport",
+      amountSpent: "₹ 2000"
+    },
+    {
+      id: 4,
+      transactionType: "Online Shopping",
+      date: "22-08-2024 03:45 pm",
+      walletType: "Miscellaneous",
+      amountSpent: "₹ 5500"
+    },
+    {
+      id: 5,
+      transactionType: "Movie",
+      date: "21-08-2024 07:00 pm",
+      walletType: "Entertainment",
+      amountSpent: "₹ 800"
+    },
+    {
+      id: 6,
+      transactionType: "Dine In",
+      date: "25-08-2024 01:15 pm",
+      walletType: "Food",
+      amountSpent: "₹ 3200"
+    },
+    {
+      id: 7,
+      transactionType: "Grocery",
+      date: "24-08-2024 10:00 am",
+      walletType: "Essentials",
+      amountSpent: "₹ 1500"
+    },
+    {
+      id: 8,
+      transactionType: "Fuel",
+      date: "23-08-2024 08:30 am",
+      walletType: "Transport",
+      amountSpent: "₹ 2000"
+    }
+  ]);
+
   return (
     <GlobalStateContext.Provider
       value={{
@@ -311,7 +437,9 @@ const GlobalStateProvider = ({ children }) => {
         reportsHistory,
         setReportsHistory,
         requestsTable,
-        setRequestTable
+        setRequestTable, image, setImage,
+        walletTable, setWalletTable,
+        reportsHistoryMini, setReportsHistoryMini
       }}
     >
       {children}

src/Layout/DefaultLayout.jsx

@@ -1,21 +1,12 @@
 import React, { useContext, useEffect, useState } from "react";
-import logo from "../assets/logo2.png";
-import logoDark from "../assets/logo.png";
-import logoMini from "../assets/logo-min.png";
-import logoMiniDark from "../assets/favicon.png";
 import { useDispatch } from "react-redux";
-import { loginUser } from "../Redux/Slice/auth";
-import Button02 from "../Components/Buttons/Button02";
 import {
   TbArrowBadgeLeftFilled,
   TbListDetails,
   TbReportMoney,
   TbTransactionDollar,
 } from "react-icons/tb";
-import { TbArrowBadgeRightFilled } from "react-icons/tb";
-import { ArrowBackIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
 import {
-  Link,
   NavLink,
   Route,
   Routes,
@@ -46,16 +37,13 @@ import {
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from "js-cookie"; // Import the Cookies library
-import Header from "../Components/Header";
 import HeaderMain from "../Components/HeaderMain";
-import { IoMdSwap } from "react-icons/io";
 import {
   RiBankLine,
   RiExchangeBoxLine,
   RiFileUserLine,
   RiMoneyDollarBoxLine,
 } from "react-icons/ri";
-import { VscSymbolClass } from "react-icons/vsc";
 import {
   MdNotificationsNone,
   MdOutlineAddChart,
@@ -64,12 +52,7 @@ import {
 import { HiOutlineChartSquareBar } from "react-icons/hi";
 import { GrManual, GrNotification } from "react-icons/gr";
 import { LuContact } from "react-icons/lu";
-import shield from "../assets/shield.png";
 import SplashScreen from "../Pages/SplashScreen";
-import CutomBreadcrumb from "../Components/CutomBreadcrumb";
-import CustomBreadcrumb from "../Components/CutomBreadcrumb";
-import { getCountdownTimer } from "../Constants/Constants";
-import { FiHome } from "react-icons/fi";
 
 const DashboardLayout = ({ isOnline }) => {
   const navigate = useNavigate();
@@ -121,7 +104,7 @@ const DashboardLayout = ({ isOnline }) => {
     localStorage.removeItem("refreshToken");
     localStorage.removeItem("accessToken");
     localStorage.removeItem("refreshTokenExp");
-    navigate("/login");
+    navigate("/");
   };
 
   // // Function to get the title based on the route
@@ -330,14 +313,14 @@ const DashboardLayout = ({ isOnline }) => {
         title={getTitle()}
       />
       <Box
-        h={{ base: "92%", lg: "96%" }}
+        h={{ base: "92%", xl: "94%" }}
         style={{
           width: "100%",
           position: "relative",
           overflow: "hidden",
         }}
         className="d-flex"
-        pe={0.5}
+        // pe={0.5}
       >
         <Alert
           transition={"0.5s"}
@@ -347,11 +330,14 @@ const DashboardLayout = ({ isOnline }) => {
           zIndex={999}
           status="info"
           variant="solid"
-          bgGradient="linear(to-r, red.500, yellow.500, red.500)"
-          // bgGradient='linear(to-r, #1EBCA3, #22CAB3)'
+          bgGradient="linear(to-r, #C33FAD, #C33FAD, #C33FAD)"
+          // bgGradient='linear(to-r, #1EBCA3, #E0EEFF)'
           color={"white"}
           fontWeight={600}
           fontSize={"md"}
+          display={'flex'}
+          justifyContent={'center'}
+          alignItems={'center'}
         >
           <AlertIcon color={"white"} />
           No Internet !
@@ -456,7 +442,7 @@ const DashboardLayout = ({ isOnline }) => {
                                 }  d-flex align-items-center  p-0`}
                               >
                                 <NavLink
-                                  style={{ borderRadius: "2px" }}
+                                  style={{ borderRadius: "4px" }}
                                   className={`${
                                     true
                                       ? "p-2 ps-1 ms-2 web-text-medium "
@@ -511,6 +497,7 @@ const DashboardLayout = ({ isOnline }) => {
                             : "p-2 ps-0 web-text-xlarge justify-content-start"
                         }  link d-flex align-items-center gap-2 w-100 mb-2 single`}
                         to={path}
+                        onClick={title == "Logout" ?logOutHandler:null}
                       >
                         {Icon && <Icon className="web-text-large ms-2" />}
                         <Text
@@ -537,9 +524,9 @@ const DashboardLayout = ({ isOnline }) => {
             width: `calc(100% - ${isDrawerOpen ? 230 : 0}px)`,
             transition: "width 0.3s ease-in-out",
             backgroundColor: "#F3F3F9",
-            display:'flex',
-            flexDirection:'column',
-            gap:0
+            display: "flex",
+            flexDirection: "column",
+            gap: 0,
           }}
         >
           {/* <HeaderBox

src/Pages/AllTicketsModal/AllTicketsModal.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+    Text,
+    Box,
+    HStack,
+    Icon,
+    Divider,
+    Badge,
+    Button,
+    Image,
+    ModalFooter
+} from '@chakra-ui/react';
+import { FiDownload } from "react-icons/fi";
+import NoInternet from "../../assets/noInternet.jpg";
+import { HiOutlineMail } from 'react-icons/hi';
+
+// FileButton component
+const FileButton = ({ fileName, fileSize, imageUrl }) => {
+    return (
+        <Button
+            variant="outline"
+            border="1px solid #3725EA"
+            borderRadius="md"
+            px={3}
+            p={2}
+            justifyContent="space-between"
+            boxShadow="sm"
+            bg={"rgba(94, 15, 205, 0.05)"}
+            _hover={{ opacity: "0.8" }}
+        >
+            <HStack me={6}>
+                <Image boxSize="24px" src={imageUrl} alt={fileName} />
+                <Box textAlign="left">
+                    <Text
+                        fontSize="xs"
+                        fontWeight="600"
+                        color="#313039"
+                        mb={1}
+                    >
+                        {fileName}
+                    </Text>
+                    <Text
+                        fontSize="xs"
+                        color="#6F6E77"
+                        fontWeight={500}
+                        mb={0}
+                    >
+                        {fileSize}
+                    </Text>
+                </Box>
+            </HStack>
+            <Icon as={FiDownload} boxSize={5} color="#5E0FCD" />
+        </Button>
+    );
+};
+
+// AllTicketsModal component
+const AllTicketsModal = ({ isOpen, onClose }) => {
+    return (
+        <Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent>
+                <Text
+                    color="#667085"
+                    fontSize="xs"
+                    fontWeight="500"
+                    mb={0}
+                    px={6}
+                    pt={4}
+                >
+                    TA-97868
+                </Text>
+                <ModalHeader
+                    pt={1}
+                    display={"flex"}
+                    alignItems={"center"}
+                    justifyContent={"space-between"}
+                    pe={12}
+                >
+                    App loading issue
+                    <Badge
+                        bg={"#FCF8E9"}
+                        color="#E5C862"
+                        border={"1px solid #E5C862"}
+                        px={2}
+                        py={1}
+                        borderRadius="full"
+                        fontSize="xs"
+                        fontWeight="500"
+                    >
+                        In Progress
+                    </Badge>
+                </ModalHeader>
+                <ModalCloseButton />
+                <Divider mt={0} />
+                <ModalBody>
+                    <Text fontSize="sm" fontWeight="600" mb={2}>
+                        Subtype of the ticket
+                    </Text>
+                    <Text fontSize="xs" fontWeight="500" mb={2}>
+                        Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
+                    </Text>
+                    <Text fontSize="xs" fontWeight="500" mb={2}>
+                        Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
+                    </Text>
+                    <Text color="#667085" fontSize="sm" fontWeight="600" mb={2}>
+                        2 Attachments
+                    </Text>
+                    <HStack spacing={4}>
+                        <FileButton fileName="No Internet" fileSize="28 kb" imageUrl={NoInternet} />
+                        <FileButton fileName="No Internet" fileSize="28 kb" imageUrl={NoInternet} />
+                    </HStack>
+                </ModalBody>
+
+                <ModalFooter flexDirection={"column"} alignItems={"start"} px={0}>
+                    <Divider mt={0} />
+                    <Box px={6} w={"100%"} >
+                        <HStack  justifyContent={"space-between"}>
+                            <HStack>
+                                <Text color="#667085" fontSize="sm" fontWeight="600" mb={0}>
+                                    Assigned to:
+                                </Text>
+                                <Text color="#363636" fontSize="sm" fontWeight="600" mb={0}>
+                                    Siddhesh
+                                </Text>
+                            </HStack>
+                            <Box>
+                                <Button
+                                    px={2}
+                                    variant="outline"
+                                    transition={"0.5s all"}
+                                    colorScheme='purple'
+                                    display={"flex"}
+                                    gap={2}
+                                    h={8}
+                                >
+                                    <Text
+                                        fontSize={"xs"}
+                                        fontWeight={600}
+                                        size={"sm"}
+                                        mb={0}
+                                    >
+                                        Mail
+                                    </Text>
+                                    <Icon as={HiOutlineMail} color="#5E0FCD" w={4} h={4} />
+                                </Button>
+                            </Box>
+                        </HStack>
+                    </Box>
+                </ModalFooter>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export default AllTicketsModal;

src/Pages/Benefit/Benefit.jsx

@@ -1,14 +1,382 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Image,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
+import React, { useEffect, useRef } from "react";
+// import MiniHeader from "../Components/MiniHeader";
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import RuPay from "../../assets/rupayImg.png";
 import MiniHeader from "../../Components/MiniHeader";
+import VanillaTilt from "vanilla-tilt";
+import wallet from "../../assets/wallet.svg";
+import { PiPause, PiReceiptBold } from "react-icons/pi";
+import recipt_graddient from "../../assets/recipt_graddient.svg";
+import recipt from "../../assets/recipt.svg";
+import { ArrowForwardIcon, CalendarIcon } from "@chakra-ui/icons";
+import grapgGradient from "../../assets/grapgGradient.svg";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router";
+import AddExpenseModal from "../Expenses/AddExpenseModal";
+import { FaCirclePause } from "react-icons/fa6";
+import { LuInfo } from "react-icons/lu";
+import Food from "../Expenses/Food";
+
+const InternalCard = ({ title1, subTitle1, title2, subbTitle2 }) => {
+  return (
+    <VStack
+      h={"50%"}
+      gap={0}
+      w={"100%"}
+      rounded={"lg"}
+      justifyContent={"space-evenly"}
+      bg={"gray.50"}
+    >
+      <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+        <Text as={"span"} fontSize={"md"} fontWeight={600}>
+          $50,000
+        </Text>
+
+        <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+          Available spend limit
+        </Text>
+      </VStack>
+
+      <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+        <Text as={"span"} fontSize={"md"} fontWeight={600}>
+          1234 5678 1234 5678
+        </Text>
+
+        <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+          Account Number
+        </Text>
+      </VStack>
+    </VStack>
+  );
+};
 
 const Benefit = () => {
+  const tiltRef = useRef(null);
+  const navigate = useNavigate();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useEffect(() => {
+    const node = tiltRef.current;
+    if (node) {
+      VanillaTilt.init(node, {
+        max: 5,
+        speed: 400,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+    return () => {
+      if (node && node.vanillaTilt) {
+        node.vanillaTilt.destroy();
+      }
+    };
+  }, []);
+
+  const tabData = [
+    {
+      title: "Sales Call",
+      emoji: "☎️",
+      panel: <Food />,
+    },
+    {
+      title: "Client Visits",
+      emoji: "👩🏼‍💻",
+      panel: <Food />,
+    },
+  ];
+
+  const miniCardData = [
+    {
+      title: "Available spend limit ",
+      value: "$ 50,000",
+    },
+    {
+      title: "Account Number",
+      value: "**** **** **** 5678",
+    },
+    {
+      title: "Account name",
+      value: "Kartikey Gautam",
+    },
+    {
+      title: "Validity",
+      value: "01/12",
+    },
+  ];
   return (
-    <Box h={"100%"} p={6}>
+    <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
       <MiniHeader
-        title={"Reimbursement Report For June 2024"}
+        title={"Manage Benefits"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
+
+      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
+        <VStack
+          ref={tiltRef} // Attach tilt to this ref
+          // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+          bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+          alignItems={"start"}
+          justifyContent={"space-between"}
+          height={"100%"}
+          w={240}
+          h={"372px"}
+          rounded={"xl"}
+          p={4}
+          boxShadow={"md"}
+          position={"relative"}
+        >
+          <Box
+            width={"100%"}
+            cursor={"grab"}
+            display={"flex"}
+            justifyContent={"space-between"}
+          >
+            <Image w={20} src={logo_card} />
+            <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+          </Box>
+
+          <VStack
+            width={"100%"}
+            display={"flex"}
+            alignItems={"start"}
+            justifyContent={"space-between"}
+          >
+            <Text color={"#fff"} fontSize={"sm"}>
+              1234 5678 1234 5678
+            </Text>
+            <Button
+              size={"sm"}
+              rounded={"full"}
+              bg={"#ffffff30"}
+              fontSize={"sm"}
+              px={6}
+              border={"1px solid #fff"}
+              _hover={{ opacity: 0.8 }}
+              _active={{ opacity: 1 }}
+              color={"#fff"}
+              fontWeight={500}
+            >
+              Tap to view details
+            </Button>
+          </VStack>
+
+          <Box width={"100%"} display={"flex"} justifyContent={"end"}>
+            {/* <Image w={32} src={logo_card} /> */}
+            <Image w={24} src={RuPay} me={0.5} />
+          </Box>
+
+          <Text
+            position={"absolute"}
+            top={24}
+            right={-6}
+            transform="rotate(270deg)"
+            fontSize={"xs"}
+            color={"#9E9E9E"}
+          >
+            Valid in india
+          </Text>
+        </VStack>
+
+        <VStack
+          bg={"#fff"}
+          boxShadow={"md"}
+          height={"100%"}
+          flexGrow={1}
+          gap={4}
+          rounded={"xl"}
+          p={4}
+        >
+          <VStack
+            h={"100%"}
+            gap={0}
+            w={"100%"}
+            rounded={"lg"}
+            justifyContent={"center"}
+            bg={"gray.50"}
+            p={6}
+          >{miniCardData?.map(({ title, value }, index) => (
+            <HStack
+              key={index}
+              borderBottom={index === miniCardData.length - 1 ? "none" : "1px solid #ccc"}
+              gap={0}
+              justifyContent={"start"}
+              alignItems={"center"}
+              h={"25%"}
+              w={"100%"}
+              p={2}
+            >
+              <Text
+                w={"47%"}
+                color={"gray.500"}
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={600}
+              >
+                {title}
+              </Text>
+              <Text
+                w={"6%"}
+                as={"span"}
+                color={"gray.500"}
+                fontSize={"lg"}
+                fontWeight={600}
+              >
+                :
+              </Text>
+          
+              <Text
+                w={"47%"}
+                color={"gray.900"}
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={600}
+              >
+                {value}
+              </Text>
+            </HStack>
+          ))}
+          </VStack>
+        </VStack>
+
+        <VStack height={"100%"} w={"30%"} rounded={"xl"} gap={3}>
+          <Box
+            onClick={onOpen}
+            cursor={"pointer"}
+            display={"flex"}
+            flexDirection={"column"}
+            justifyContent={"start"}
+            position={"relative"}
+            // border={"1px solid purple"}
+            bg={"#FFF"}
+            boxShadow={"md"}
+            rounded={"xl"}
+            height={"100%"}
+            w={"100%"}
+            p={4}
+            gap={3}
+            overflow={"scroll"}
+          >
+            <Text
+              bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+              bgClip="text"
+              fontSize={"md"}
+              as={"span"}
+              fontWeight={600}
+            >
+              About Benefits
+            </Text>
+
+            <Text
+              fontSize={"xs"}
+              as={"span"}
+              fontWeight={500}
+              color={"gray.600"}
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem
+              ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum erat
+              massa, malesuada id ligula vel, scelerisque efficitur sapien.
+              Aliquam erat volutpat. Aliquam suscipit eros at augue sollicitudin
+              sagittis. Mauris varius erat ac quam sagittis, nec dignissim
+              sapien commodo. Nam a lacinia tortor.  Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit. Lorem ipsum dolor sit
+              amet,consectetur adipiscing elit. Vestibulum erat massa, malesuada
+              id ligula vel, scelerisque efficitur sapien. Aliquam erat
+              volutpat. Aliquam suscipit eros at augue sollicitudin sagittis.
+              Mauris varius erat ac quam sagittis.Aliquam erat
+              volutpat. Aliquam suscipit eros at augue sollicitudin sagittis.
+              Mauris varius erat ac quam sagittis.{" "}
+            </Text>
+          </Box>
+        </VStack>
+      </HStack>
+
+      <VStack w={"100%"} bg={"#fff"} rounded={"lg"} boxShadow={"lg"} h={"auto"}>
+        <Text
+          w={"100%"}
+          fontSize={"lg"}
+          fontWeight={600}
+          p={4}
+          as={"span"}
+          borderBottom={"1px solid #ccc"}
+        >
+          My Wallets
+        </Text>
+
+        <Tabs p={4} pb={0} w={"100%"} display={"flex"} variant="unstyled">
+          <TabList
+            bg={"#FFFFFF"}
+            display={"flex"}
+            flexDirection={"column"}
+            w={"30%"}
+            gap={3}
+          >
+            {tabData?.map(({ title, emoji }, index) => (
+              <Tab
+                key={index}
+                _selected={{ color: "#fff", bg: "#3725EA" }}
+                // _hover={{ color: "#fff", bg: "#ddd" }}
+                color="black"
+                bg="#F3F3F9"
+                rounded={"md"}
+                fontWeight={"600"}
+                fontSize={"sm"}
+                boxShadow={"sm"}
+                display={"flex"}
+                justifyContent={"start"}
+              >
+                <Text as={"span"} me={3} fontSize={"lg"}>
+                  {emoji}
+                </Text>{" "}
+                {title}
+              </Tab>
+            ))}
+          </TabList>
+
+          <TabPanels>
+            {tabData?.map(({ panel }, index) => (
+              <TabPanel p={0} key={index}>
+                {panel}
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+
+        <HStack pe={4} w={"100%"} justifyContent={"end"}>
+          <VStack alignItems={"end"}>
+            <Button
+              cursor={"pointer"}
+              fontWeight={500}
+              size={"xs"}
+              leftIcon={<FaCirclePause color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Pause Wallet
+            </Button>
+            <Text display={"flex"} gap={1} alignItems={"star"} fontSize={"xs"}>
+              How to Use? - Where I can use the card? <LuInfo />
+            </Text>
+          </VStack>
+        </HStack>
+      </VStack>
     </Box>
   );
 };

src/Pages/ContactUs/ContactUs.jsx

@@ -0,0 +1,96 @@
+
+import React from 'react'
+import { Box, Text, HStack, Image, Input, Icon, Button, Textarea } from '@chakra-ui/react';
+import MiniHeader from '../../Components/MiniHeader';
+import { OPACITY_ON_LOAD } from '../../Layout/animations';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import contactLogo from '../../assets/contact.webp'
+
+const ContactUs = () => {
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Contact Us"}
+                subTitle={"lorem ipsum dolor sit amet"}
+            />
+            <Box
+                bg={'#FFFFFF'}
+                borderRadius={'md'}
+                boxShadow={'sm'}
+                p={8}
+            >
+                <HStack gap={12} alignItems={"center"} flexWrap={"wrap"} justify={"center"}>
+
+                    <Box>
+                        <Box
+                            border={"1px solid #D9BCFF"}
+                            borderRadius="full"
+                            p={4}
+                        >
+                            <Image
+                                borderRadius="full"
+                                boxSize="200px"
+                                src={contactLogo}
+                                alt="Profile Picture"
+                                objectFit={"cover"}
+                                border={"1px solid #D9BCFF"}
+                                p={4}
+                            />
+                        </Box>
+                    </Box>
+
+                    <Box w={"50%"} pl={16}>
+                    <Text fontWeight={600} fontSize={"xl"} textAlign={"center"} mb={6}>Get in touch</Text>
+                        <ContactUsField label="Subject" placeholder="Subject" defaultValue="" />
+                        <ContactUsField label="Email ID" placeholder="Email ID" defaultValue="" />
+                        <ContactUsField label="Your Message" placeholder="Type your message here..." defaultValue="" isTextarea />
+                        <PrimaryButton title={'Send'} width="100%" />
+                    </Box>
+                </HStack>
+            </Box>
+        </Box>
+    )
+};
+const ContactUsField = ({
+    label,
+    placeholder,
+    defaultValue,
+    labelColor = "#363636",
+    isTextarea = false,
+    placeholderColor = "#9D9D9D", 
+  }) => (
+    <Box width="100%" mb={4}>
+      <Text color={labelColor} fontSize="xs" fontWeight="500" mb={1}>
+        {label}
+      </Text>
+      {isTextarea ? (
+        <Textarea
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          size="sm"
+          borderColor="#9D9D9D"
+          borderRadius="md"
+          color="#363636"
+          fontWeight={500}
+          fontSize="sm"
+          resize="none"
+          _placeholder={{ color: placeholderColor,fontWeight:400,fontSize:"xs" }}
+        />
+      ) : (
+        <Input
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          size="sm"
+          borderColor="#9D9D9D"
+          borderRadius="md"
+          color="#363636"
+          fontWeight={500}
+          fontSize="sm"
+          _placeholder={{ color: placeholderColor,fontWeight:400,fontSize:"xs" }}
+        />
+      )}
+    </Box>
+  );
+  
+
+export default ContactUs

src/Pages/Expenses/AddExpenseModal.jsx

@@ -0,0 +1,289 @@
+import { Button } from "@chakra-ui/button";
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/modal";
+import React, { useRef, useState } from "react";
+import { Box, Text, VStack, HStack } from "@chakra-ui/layout";
+import { Image } from "@chakra-ui/image";
+import { Input, InputGroup, InputLeftElement, InputRightElement, Select, Textarea } from "@chakra-ui/react";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import invoiceGradiant from '../../assets/invoice_gradiant.svg';
+import moneyBack from '../../assets/money_back.svg';
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { CheckIcon } from "@chakra-ui/icons";
+import { LuCalendar } from "react-icons/lu";
+import { useNavigate } from "react-router-dom";
+
+const AddExpenseModal = ({ isOpen, onClose }) => {
+
+  const navigate = useNavigate();
+  // States for controlling each modal
+  const [isAdvanceOpen, setAdvanceOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    subject: '',
+    issueType: '',
+    subtype: '',
+    description: '',
+    file: null,
+  });
+
+  const inputRef = useRef(null);
+
+  // Open file dialog
+  const handleFileUpload = () => inputRef.current.click();
+
+  // Handle form changes
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  // Handle file input
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    setFormData((prev) => ({
+      ...prev,
+      file: file,
+    }));
+  };
+
+  // Submit form (example handler)
+  const handleSubmit = () => {
+    console.log('Form data:', formData);
+    // Add your submit logic here, e.g., API call
+  };
+
+  return (
+    <>
+      {/* Main Add Expense Modal */}
+      <Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader textAlign={"center"} fontSize={"md"}>
+            Add Expense
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody
+            display={"flex"}
+            justifyContent={"center"}
+            flexDirection={"column"}
+            gap={3}
+            p={4}
+          >
+            <VStack gap={4} px={4}>
+              {/* Request Expense Advance Button */}
+              <Button
+                onClick={() => setAdvanceOpen(true)} // Open Advance Modal
+                colorScheme="purple"
+                variant={"outline"}
+                display={"flex"}
+                gap={4}
+                justifyContent={"start"}
+                w={"100%"}
+                h={24}
+              >
+                <Image w={30} src={invoiceGradiant} />
+                <Box
+                  display={"flex"}
+                  alignItems={"start"}
+                  flexDirection={"column"}
+                  flexWrap={"wrap"}
+                  gap={2}
+                  color={'#6311CB'}
+                  borderColor={'#6311CB'}
+                >
+                  <Text as={"span"} fontWeight={600}>
+                    Request Expense Advance
+                  </Text>
+                  <Text
+                    as={"span"}
+                    fontSize={"xs"}
+                    fontWeight={400}
+                    textAlign={'start'}
+                    whiteSpace={"normal"}
+                    wordBreak={"break-word"}
+                  >
+                    Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci
+                  </Text>
+                </Box>
+              </Button>
+
+              {/* Request Reimbursement Button */}
+              <Button
+              onClick={()=>navigate("/request-reimbursement")}
+                colorScheme="purple"
+                variant={"outline"}
+                display={"flex"}
+                gap={4}
+                justifyContent={"start"}
+                w={"100%"}
+                h={24}
+              >
+                <Image w={30} src={moneyBack} />
+                <Box
+                  display={"flex"}
+                  alignItems={"start"}
+                  flexDirection={"column"}
+                  flexWrap={"wrap"}
+                  gap={2}
+                  color={'#6311CB'}
+                  borderColor={'#6311CB'}
+                >
+                  <Text as={"span"} fontWeight={600}>
+                    Request Reimbursement
+                  </Text>
+                  <Text
+                    as={"span"}
+                    fontSize={"xs"}
+                    fontWeight={400}
+                    textAlign={'start'}
+                    whiteSpace={"normal"}
+                    wordBreak={"break-word"}
+                  >
+                    Lorem ipsum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci psum dolor sit amet,ed nulla orci
+                  </Text>
+                </Box>
+              </Button>
+            </VStack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+
+      {/* Request Expense Advance Modal */}
+      <Modal size={'xl'} isOpen={isAdvanceOpen} onClose={() => setAdvanceOpen(false)} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Advanced Expense Request
+            <Text mb={1} fontWeight={"400"} fontSize={"xs"} color={"#606060"}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </Text>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} mb={4}>
+
+              <Box mb={4}>
+                <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                  Expense type
+                </Text>
+                <Select
+                  size="sm"
+                  borderRadius={"md"}
+                  name="issueType"
+                  value={formData.issueType}
+                  onChange={handleInputChange}
+                >
+                  <option value="option1">Option 1</option>
+                  <option value="option2">Option 2</option>
+                  <option value="option3">Option 3</option>
+                </Select>
+              </Box>
+
+
+              <Box mb={4}>
+                <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                  Add Amount
+                </Text>
+
+                <InputGroup>
+                  <InputLeftElement pointerEvents='none' color='#363636' fontWeight={500} fontSize='sm'>
+                    ₹
+                  </InputLeftElement>
+                  <Input 
+                  borderRadius={"md"}
+                  size="sm"
+                  name="subject"
+                  value={formData.subject}
+                  />
+                </InputGroup>
+              </Box>
+
+
+
+              <Box mb={4}>
+                <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                  Date
+                </Text>
+
+                <HStack>
+                  <InputGroup>
+                    <InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs' top={"-1"}>
+                      From
+                    </InputLeftElement>
+                    <Input size={"sm"} borderRadius={"md"} pl={10} />
+                    <InputRightElement  top={"-1"}>
+                      <LuCalendar color="#3725EA" />
+                    </InputRightElement>
+                  </InputGroup>
+                  <InputGroup>
+                    <InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs'  top={"-1"}>
+                      To
+                    </InputLeftElement>
+                    <Input size={"sm"} borderRadius={"md"} />
+                    <InputRightElement  top={"-1"}>
+                      <LuCalendar color="#3725EA" />
+                    </InputRightElement>
+                  </InputGroup>
+                </HStack>
+              </Box>
+
+
+
+              <Box mb={4}>
+                <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                  Evidence of Appointment
+                </Text>
+
+                <Input ref={inputRef} type="file" display="none" onChange={handleFileChange} />
+                <Button
+                  borderRadius={"md"}
+                  size="sm"
+                  onClick={handleFileUpload}
+                  border={"1px solid #e2e8f0"}
+                  w={"100%"}
+                  bg="transparent"
+                  color="#3725EA"
+                  textDecoration={"underline"}
+                  display={"flex"}
+                  justifyContent={"start"}
+                >
+                  Upload File
+                </Button>
+              </Box>
+
+
+              <Box mt={4}>
+                <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                  Comments
+                </Text>
+                <Textarea
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  placeholder="Describe your issue here"
+                  size="sm"
+                  borderRadius={"md"}
+                  resize={"none"}
+                />
+              </Box>
+              <HStack mt={6} justifyContent={"center"}>
+                <SecondaryButton title={"Cancel"} />
+                <PrimaryButton title={"Request Expense"} />
+              </HStack>
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default AddExpenseModal;

src/Pages/Expenses/AddExpenseModalRequestExpenseAdvance.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddExpenseModalRequestExpenseAdvance = () => {
+  return (
+    <div>AddExpenseModalRequestExpenseAdvance</div>
+  )
+}
+
+export default AddExpenseModalRequestExpenseAdvance

src/Pages/Expenses/Expenses.jsx

@@ -1,49 +1,78 @@
-import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Image,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  VStack,
+  useDisclosure,
+} from "@chakra-ui/react";
 import React, { useEffect, useRef } from "react";
 // import MiniHeader from "../Components/MiniHeader";
 import logo_card from "../../assets/logo_card.svg";
 import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
-import RuPay from '../../assets/rupayImg.png'
+import RuPay from "../../assets/rupayImg.png";
 import MiniHeader from "../../Components/MiniHeader";
 import VanillaTilt from "vanilla-tilt";
+import wallet from "../../assets/wallet.svg";
+import { PiPause, PiReceiptBold } from "react-icons/pi";
+import recipt_graddient from "../../assets/recipt_graddient.svg";
+import recipt from "../../assets/recipt.svg";
+import { ArrowForwardIcon, CalendarIcon } from "@chakra-ui/icons";
+import grapgGradient from "../../assets/grapgGradient.svg";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router";
+import AddExpenseModal from "./AddExpenseModal";
+import Food from "./Food";
+import { FaCirclePause } from "react-icons/fa6";
+import { LuInfo } from "react-icons/lu";
+import RupayCard from "../../Components/PayCards/RupayCard";
 
+const InternalCard = ({ title1, subTitle1, title2, subbTitle2 }) => {
+  return (
+    <VStack
+      h={"50%"}
+      gap={0}
+      w={"100%"}
+      rounded={"lg"}
+      justifyContent={"space-evenly"}
+      bg={"gray.50"}
+    >
+      <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+        <Text as={"span"} fontSize={"md"} fontWeight={600}>
+          {title1}
+        </Text>
 
-const InternalCard = ({title1, subTitle1, title2, subbTitle2}) =>{
-  return(
-  <VStack h={'50%'} gap={0} w={'100%'} rounded={'lg'} justifyContent={'space-evenly'} bg={'gray.50'}>
-  <VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
-    <Text as={'span'} fontSize={'md'} fontWeight={600}>
-      {title1}
-    </Text>
+        <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+          {subTitle1}
+        </Text>
+      </VStack>
 
-    <Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
-    {subTitle1}
-    </Text>
+      <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+        <Text as={"span"} fontSize={"md"} fontWeight={600}>
+          {title2}
+        </Text>
 
-  </VStack>
-
-
-  <VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
-    <Text as={'span'} fontSize={'md'} fontWeight={600}>
-    {title2}
-    </Text>
-
-    <Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
-    {subbTitle2}
-    </Text>
-
-  </VStack>
-  </VStack>)
-}
+        <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+          {subbTitle2}
+        </Text>
+      </VStack>
+    </VStack>
+  );
+};
 
 const Expenses = () => {
-  const tiltRef = useRef(null);
-
-  useEffect(() => {
+  const tiltRef = useRef(null);  useEffect(() => {
     const node = tiltRef.current;
     if (node) {
       VanillaTilt.init(node, {
-        max: 25,
+        max: 5,
         speed: 400,
         glare: true,
         "max-glare": 0.5,
@@ -56,93 +85,264 @@ const Expenses = () => {
     };
   }, []);
 
+  const navigate = useNavigate();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const tabData = [
+    {
+      title: "Food",
+      emoji: "🍔",
+      panel: <Food />,
+    },
+    {
+      title: "Fuel",
+      emoji: "⛽️",
+      panel: <Food />,
+    },
+    {
+      title: "Gifts",
+      emoji: "🎁",
+      panel: <Food />,
+    },
+    {
+      title: "Telecom",
+      emoji: "🗼",
+      panel: <Food />,
+    },
+    {
+      title: "Book & Periodicals",
+      emoji: "📚",
+      panel: <Food />,
+    },
+    {
+      title: "Learning & Developemt",
+      emoji: "📖",
+      panel: <Food />,
+    },
+    {
+      title: "Gadgets & Equipments",
+      emoji: "🎧",
+      panel: <Food />,
+    },
+  ];
+
+
   return (
-    <Box h={"100%"} p={4}>
+    <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
       <MiniHeader
         title={"Manage Expenses"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
 
-      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4}>
-
+      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
+        
+        <RupayCard/>
 
         <VStack
-          ref={tiltRef} // Attach tilt to this ref
-          // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
-          bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
-          alignItems={"start"}
-          justifyContent={"space-between"}
+          bg={"#fff"}
+          boxShadow={"md"}
           height={"100%"}
-          w={240}
-          h={"372px"}
+          flexGrow={1}
+          gap={4}
           rounded={"xl"}
           p={4}
-          boxShadow={"md"}
-          position={"relative"}
         >
-          <Box width={"100%"} cursor={'grab'} display={"flex"} justifyContent={"space-between"}>
-            <Image w={20} src={logo_card} />
-            <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
-          </Box>
+          <InternalCard
+            title1={"$50,000"}
+            subTitle1={"Available spend limit"}
+            title2={"1234 5678 1234 5678"}
+            subbTitle2={"Account Number"}
+          />
+          <InternalCard
+            title1={"Kartikey Gautam"}
+            subTitle1={"Account name"}
+            title2={"01/12"}
+            subbTitle2={"Validity"}
+          />
+        </VStack>
 
-          <VStack
-            width={"100%"}
+        <VStack height={"100%"} w={"30%"} rounded={"xl"} gap={3}>
+          <Box
+            onClick={onOpen}
+            cursor={"pointer"}
             display={"flex"}
-            alignItems={"start"}
-            justifyContent={"space-between"}
+            flexDirection={"column"}
+            justifyContent={"space-around"}
+            position={"relative"}
+            border={"1px solid purple"}
+            bg={"#DBD8FF"}
+            boxShadow={"md"}
+            rounded={"xl"}
+            height={"50%"}
+            w={"100%"}
+            p={4}
           >
-            <Text color={"#fff"} fontSize={"sm"}>1234 5678 1234 5678</Text>
-            <Button
-              size={"sm"}
+            <Image position={"absolute"} bottom={0} right={8} src={wallet} />
+            <Box
+              p={3}
+              w={49}
+              h={49}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
               rounded={"full"}
-              bg={"#ffffff30"}
-              fontSize={"sm"}
-              px={6}
-              border={"1px solid #fff"}
-              _hover={{ opacity: 0.8 }}
-              _active={{ opacity: 1 }}
-              color={"#fff"}
-              fontWeight={500}
+              bg={"#fff"}
+              as="span"
             >
-              Tap to view details
-            </Button>
-          </VStack>
+              <Image src={recipt_graddient} />
+            </Box>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"space-between"}
+            >
+              <Text as={"span"} fontWeight={500} fontSize={"lg"}>
+                Add Expense
+              </Text>
 
-          <Box width={"100%"} display={"flex"} justifyContent={"end"}>
-            {/* <Image w={32} src={logo_card} /> */}
-            <Image w={24} src={RuPay} me={0.5} />
+              <Icon
+                zIndex={1}
+                as={ArrowForwardIcon}
+                boxSize={10}
+                bgGradient="linear(to-b, #6211CB, #C33FAD)"
+                color={"#fff"}
+                p={3}
+                rounded={"full"}
+              />
+            </Box>
           </Box>
 
-          <Text 
-          position={"absolute"} 
-          top={24} 
-          right={-6}
-          transform="rotate(270deg)"
-          fontSize={'xs'}
-          color={"#9E9E9E"}
-
+          <Box
+            onClick={() => navigate("/requests")}
+            cursor={"pointer"}
+            display={"flex"}
+            bg={"#fff"}
+            flexDirection={"column"}
+            justifyContent={"space-around"}
+            position={"relative"}
+            border={"1px solid purple"}
+            boxShadow={"md"}
+            rounded={"xl"}
+            height={"50%"}
+            w={"100%"}
+            p={4}
           >
-            Valid in india
-          </Text>
+            <Image
+              opacity={0.3}
+              position={"absolute"}
+              top={0}
+              right={8}
+              src={recipt}
+            />
+            <Box
+              p={3}
+              w={49}
+              h={49}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={"full"}
+              bg={"#F7F7FF"}
+              as="span"
+            >
+              <Image src={grapgGradient} />
+            </Box>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"space-between"}
+            >
+              <Text as={"span"} fontWeight={500} fontSize={"lg"}>
+                Add Reports
+              </Text>
+
+              <Icon
+                zIndex={1}
+                as={ArrowForwardIcon}
+                boxSize={10}
+                bgGradient="linear(to-b, #6211CB, #C33FAD)"
+                color={"#fff"}
+                p={3}
+                rounded={"full"}
+              />
+            </Box>
+          </Box>
         </VStack>
-
-
-        <VStack bg={"#fff"} boxShadow={'md'} height={"100%"} flexGrow={1} gap={4}  rounded={"xl"} p={4}>
-        <InternalCard title1={'$50,000'} subTitle1={'Available spend limit'} title2={"1234 5678 1234 5678"} subbTitle2={"Account Number"} />
-        <InternalCard title1={'Kartikey Gautam'} subTitle1={'Account name'} title2={"01/12"} subbTitle2={"Validity"} />
-
-        </VStack>
-        <VStack bg={"purple"} height={"100%"} w={"30%"} rounded={"xl"}>
-
-
-
-        </VStack>
-        
       </HStack>
+
+      <VStack w={"100%"} bg={"#fff"} rounded={"lg"} boxShadow={"lg"} h={"auto"}>
+        <Text
+          w={"100%"}
+          fontSize={"lg"}
+          fontWeight={600}
+          p={4}
+          borderBottom={"1px solid #ccc"}
+          as={'span'}
+        >
+          My Wallets
+        </Text>
+
+        <Tabs p={4} pb={0} w={"100%"} display={"flex"} variant="unstyled">
+          <TabList
+            bg={"#FFFFFF"}
+            display={"flex"}
+            flexDirection={"column"}
+            w={"30%"}
+            gap={3}
+          >
+            {tabData?.map(({ title, emoji }, index) => (
+              <Tab
+                key={index}
+                _selected={{ color: "#fff", bg: "#3725EA" }}
+                // _hover={{ color: "#fff", bg: "#ddd" }}
+                color="black"
+                bg="#F3F3F9"
+                rounded={"md"}
+                fontWeight={"600"}
+                fontSize={"sm"}
+                boxShadow={"sm"}
+                display={"flex"}
+                justifyContent={"start"}
+              >
+                <Text as={"span"} me={3} fontSize={"lg"}>
+                  {emoji}
+                </Text>{" "}
+                {title}
+              </Tab>
+            ))}
+          </TabList>
+
+          <TabPanels>
+            {tabData?.map(({ panel }, index) => (
+              <TabPanel p={0} key={index}>
+                {panel}
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+
+        <HStack pe={4} w={"100%"} justifyContent={"end"}>
+          <VStack alignItems={'end'}>
+            <Button
+              cursor={"pointer"}
+              fontWeight={500}
+              size={"xs"}
+              leftIcon={<FaCirclePause color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Pause Wallet
+            </Button>
+            <Text display={'flex'} gap={1} alignItems={'center'} fontSize={'xs'}>How to Use? - Where I can use the card? <LuInfo/></Text>
+          </VStack>
+        </HStack>
+      </VStack>
+
+      <AddExpenseModal onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };
 
 export default Expenses;
-
-

src/Pages/Expenses/Food.jsx

@@ -0,0 +1,118 @@
+import { Box, HStack, Text, VStack } from '@chakra-ui/layout'
+import React from 'react'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import { AddIcon, CalendarIcon, Icon } from '@chakra-ui/icons'
+import SecondaryButton from '../../Components/Buttons/SecondaryButton'
+import { Button } from '@chakra-ui/button'
+import { FaCcDinersClub } from 'react-icons/fa6'
+import { IoFastFoodOutline, IoRestaurantOutline } from 'react-icons/io5'
+import { RiRestaurantLine } from 'react-icons/ri'
+import { MdOutlineRamenDining } from 'react-icons/md'
+import { BiWalletAlt } from 'react-icons/bi'
+
+const Food = () => {
+
+    const transactions = [
+        {
+          id: 1,
+          type: 'Dine In',
+          icon: BiWalletAlt,
+          date: '22 March 2024 - 01:12 PM',
+          amount: '+ $500',
+          color: 'green.500',
+        },
+        {
+          id: 2,
+          type: 'Takeaway',
+          icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+          date: '21 March 2024 - 05:45 PM',
+          amount: '+ $200',
+          color: 'green.500',
+        },
+        {
+          id: 3,
+          type: 'Delivery',
+          icon: BiWalletAlt, // Replace with appropriate icon if needed
+          date: '20 March 2024 - 11:30 AM',
+          amount: '- $50',
+          color: 'red.500',
+        },
+        {
+          id: 2,
+          type: 'Takeaway',
+          icon: BiWalletAlt, // Replace with appropriate icon if needed
+          date: '21 March 2024 - 05:45 PM',
+          amount: '+ $200',
+          color: 'green.500',
+        },
+        {
+          id: 3,
+          type: 'Delivery',
+          icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+          date: '20 March 2024 - 11:30 AM',
+          amount: '- $50',
+          color: 'red.500',
+        },
+        {
+          id: 2,
+          type: 'Takeaway',
+          icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+          date: '21 March 2024 - 05:45 PM',
+          amount: '+ $200',
+          color: 'green.500',
+        },
+        // Add more objects as needed
+      ];
+
+
+
+
+  return (
+    <Box ps={4} >
+        <HStack justifyContent={'space-between'} >
+            <Box display={'flex'} flexDirection={'column'} justifyContent={'start'}>
+            <Text as={'span'} fontWeight={500} fontSize={'lg'}>$ 8000</Text>
+            <Text as={'span'} fontWeight={500} 
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text" fontSize={'10px'}>Wallet balance</Text>
+            </Box>
+
+            <HStack>
+            <Button
+            cursor={'pointer'}
+                        fontWeight={500}
+                        size={"sm"}
+                        leftIcon={<CalendarIcon color={"purple.800"} />}
+                        colorScheme="gray"
+                        color={"gray.700"}
+                        variant="outline"
+                        fontSize={"xs"}
+                      >
+                        Select Date Range
+                      </Button>
+                <PrimaryButton leftIcon={<AddIcon/>} title={'Upload Bill'} />
+            </HStack>
+
+        </HStack>
+
+        <VStack pt={3}>
+                {transactions?.map(({id, type, icon, date, amount, color})=><HStack  id={id} bg={''}  mb={2}  alignItems={'center'} w={'100%'} justifyContent={'space-between'}>
+                    <HStack  >
+                    <Icon color={'gray.800'} boxSize={10} rounded={'full'} p={2} bg={'#F6F6F6'} as={icon} />
+
+                    <VStack alignItems={'start'} gap={0}>
+                        <Text as={'span'} fontWeight={500} fontSize={'sm'} >{type}</Text>
+                        <Text as={'span'} fontWeight={500} color={'gray.500'} fontSize={'xs'} >{date}</Text>
+                    </VStack>
+                    </HStack>
+
+                    <Text me={2} fontSize={'sm'} fontWeight={500} as={'span'} color={color}>{amount}</Text>
+
+                </HStack>)}
+            </VStack>
+
+    </Box>
+  )
+}
+
+export default Food

src/Pages/Expenses/RequestReimbursement.jsx

@@ -0,0 +1,295 @@
+import { Box, Input, Text, HStack, Button, Icon, Tag, Divider, useToast, Radio, InputGroup, InputLeftElement, Select, InputRightElement, Textarea } from '@chakra-ui/react';
+import React, { useContext } from 'react';
+import MiniHeader from '../../Components/MiniHeader';
+import { OPACITY_ON_LOAD } from '../../Layout/animations';
+import { MdOutlineRamenDining } from "react-icons/md";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { FaRegFilePdf } from "react-icons/fa";
+import { AiOutlineEdit } from "react-icons/ai";
+import GlobalStateContext from '../../Contexts/GlobalStateContext';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import SecondaryButton from '../../Components/Buttons/SecondaryButton';
+import { FiUploadCloud } from 'react-icons/fi';
+import { BiScan } from 'react-icons/bi';
+import { LuCalendar } from 'react-icons/lu';
+
+const RequestReimbursement = () => {
+    const { requestsTable } = useContext(GlobalStateContext);
+    const toast = useToast();
+
+    // Handle delete action
+    const handleDelete = (id) => {
+        toast({
+            title: "Request Deleted.",
+            description: "Your reimbursement request has been deleted.",
+            status: "success",
+            duration: 3000,
+            isClosable: true,
+        });
+        // Add delete logic here
+    };
+
+    // Handle edit action
+    const handleEdit = (id) => {
+        toast({
+            title: "Edit Request",
+            description: "Edit functionality to be implemented.",
+            status: "info",
+            duration: 3000,
+            isClosable: true,
+        });
+        // Add edit logic here
+    };
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Reimbursement Request"}
+                backButton={true}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+            />
+
+            <Box bg={"#fff"} p={4} rounded={"md"} >
+
+                <Box bg={"#f0e8fa"} p={4} rounded={"md"} mb={6}>
+                    {requestsTable?.length > 0 ? (
+                        <Box display={"flex"}
+                            gap={4}
+                            overflowX={"auto"}
+                            pb={2}
+                            sx={{
+                                // Custom Scrollbar Styles
+                                '&::-webkit-scrollbar': {
+                                    height: '2px', // Set the height of the scrollbar (for horizontal scrolling)
+                                },
+                                '&::-webkit-scrollbar-thumb': {
+                                    backgroundColor: '#6311cb', // Scrollbar thumb color
+                                    borderRadius: '8px', // Rounded corners for the scrollbar
+                                },
+                                '&::-webkit-scrollbar-track': {
+                                    backgroundColor: '#f9f9f9', // Scrollbar track color
+                                },
+                                '&:hover::-webkit-scrollbar-thumb': {
+                                    backgroundColor: '#3725EA', // Change scrollbar thumb color on hover
+                                },
+                            }}
+                        >
+                            {requestsTable.map((request, index) => (
+                                <Box
+                                    key={index}
+                                    className='card'
+                                    p={4}
+                                    w={["100%", "48%", "32.35%"]}
+                                    rounded={"md"}
+                                    border={"none"}
+                                    boxShadow={"md"}
+                                    minW={"280px"}
+                                >
+                                    <HStack justifyContent={"space-between"}>
+                                        <HStack>
+                                            <Icon
+                                                as={MdOutlineRamenDining}
+                                                boxSize={8}
+                                                p={1.5}
+                                                bg={"#6311cb14"}
+                                                rounded={"full"}
+                                                color={"#111111"}
+                                            />
+                                            <Text fontSize={"sm"} color={"#363636"} fontWeight={"600"} mb={0}>
+                                                {request?.transactionType || "N/A"}
+                                            </Text>
+                                        </HStack>
+                                        <Radio size='md' name='1' colorScheme='purple'>
+                                        </Radio>
+                                    </HStack>
+
+                                    <Text fontSize={"md"} color={"#363636"} fontWeight={"600"} mt={4} mb={1}>
+                                        {request?.amountSpent || "0.00"}
+                                    </Text>
+                                    <Text fontSize={"xs"} color={"#545454"} fontWeight={"500"}>
+                                        {request?.date || "Unknown Date"}
+                                    </Text>
+
+                                    <HStack gap={4} mt={2}>
+                                        <Tag bg={"#F0E6FF"} size="sm" py={1} px={3}>
+                                            <Text
+                                                bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+                                                bgClip="text"
+                                                fontSize={"xs"}
+                                                fontWeight={600}
+                                                mb={0}
+                                            >
+                                                {request?.category || "Food"}
+                                            </Text>
+                                        </Tag>
+                                    </HStack>
+                                </Box>
+                            ))}
+                        </Box>
+                    ) : (
+                        <Box textAlign="center" py={10} px={6}>
+                            <Text fontSize="lg" color="gray.500">
+                                No reimbursement requests found.
+                            </Text>
+                        </Box>
+                    )}
+
+                    <HStack justifyContent={"end"} my={4}>
+                        <PrimaryButton title={"Select for Reimbursement"} />
+                    </HStack>
+                </Box>
+
+
+
+                <Text fontSize={"md"} fontWeight={"600"}>
+                    Upload new transaction
+                </Text>
+
+                <HStack justifyContent={"center"} mb={4}>
+                    <PrimaryButton title={"upload file"} leftIcon={<FiUploadCloud />} />
+                    <Text fontSize={"xs"} color={"#959595"} fontWeight={"400"} mb={0}>OR</Text>
+                    <SecondaryButton title={"Scan Bill"} leftIcon={<BiScan />} />
+                </HStack>
+
+                {/* Wallet */}
+
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Wallet
+                    </Text>
+                    <Select
+                        size="sm"
+                        fontWeight={500}
+                        fontSize={"sm"}
+                        borderRadius={"md"}
+                    >
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                        <option value="option3">Option 3</option>
+                    </Select>
+                </Box>
+
+
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Add Amount
+                    </Text>
+
+                    <InputGroup>
+                        <InputLeftElement pointerEvents='none' top={-1} color='#363636' fontWeight={500} fontSize='sm'>
+                            ₹
+                        </InputLeftElement>
+                        <Input
+                            borderRadius={"md"}
+                            size="sm"
+                            name="subject"
+                            fontWeight={500}
+                            fontSize={"sm"}
+                        />
+                    </InputGroup>
+                </Box>
+
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Select category
+                    </Text>
+                    <Select
+                        fontWeight={500}
+                        fontSize={"sm"}
+                        size="sm"
+                        borderRadius={"md"}
+                    >
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                        <option value="option3">Option 3</option>
+                    </Select>
+                </Box>
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Purpose
+                    </Text>
+                    <Select
+                        fontWeight={500}
+                        fontSize={"sm"}
+                        size="sm"
+                        borderRadius={"md"}
+                    >
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                        <option value="option3">Option 3</option>
+                    </Select>
+                </Box>
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Merchant Name
+                    </Text>
+                    <Select
+                        fontWeight={500}
+                        fontSize={"sm"}
+                        size="sm"
+                        borderRadius={"md"}
+                    >
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                        <option value="option3">Option 3</option>
+                    </Select>
+                </Box>
+
+
+
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Date
+                    </Text>
+
+                    <InputGroup>
+                        <InputLeftElement pointerEvents='none' color='#313039' fontWeight={500} fontSize='xs' top={"-1"}>
+                            <LuCalendar color="#3725EA" />
+                        </InputLeftElement>
+                        <Input size={"sm"} borderRadius={"md"} pl={10} fontWeight={500}
+                            fontSize={"sm"} />
+                    </InputGroup>
+                </Box>
+
+                <Box mb={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Payment Method
+                    </Text>
+                    <Select
+                        fontWeight={500}
+                        fontSize={"sm"}
+                        size="sm"
+                        borderRadius={"md"}
+                    >
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                        <option value="option3">Option 3</option>
+                    </Select>
+                </Box>
+
+                <Box mt={4}>
+                    <Text mb={1} fontWeight={"500"} fontSize={"xs"} color={"#313039"}>
+                        Comments (Optional)
+                    </Text>
+                    <Textarea
+                        name="description"
+                        placeholder="Describe your issue here"
+                        size="sm"
+                        borderRadius={"md"}
+                        resize={"none"}
+                        fontWeight={500}
+                        fontSize={"sm"}
+                    />
+                </Box>
+                <HStack mt={6} justifyContent={"center"}>
+                    <PrimaryButton title={"Request Reimbursement"} />
+                </HStack>
+                
+            </Box>
+
+
+        </Box>
+    );
+};
+
+export default RequestReimbursement;

src/Pages/Gifts/BuyVoucher.jsx

@@ -0,0 +1,196 @@
+import { Box, Text, VStack } from '@chakra-ui/layout'
+import { Tabs, TabList, TabPanels, Tab, TabPanel, Icon } from '@chakra-ui/react'
+import React from 'react'
+import { AiOutlineShoppingCart } from 'react-icons/ai';
+import { CgTv } from "react-icons/cg";
+import { IoFastFoodOutline, IoShirtOutline } from 'react-icons/io5';
+import { LuPlaneTakeoff } from 'react-icons/lu';
+import { PiBagBold } from "react-icons/pi";
+import MyVoucher from './MyVoucher';
+import { SLIDE_IN_BOTTOM } from '../../Layout/animations';
+import gap from '../../assets/gap.svg'
+import optifii_white from '../../assets/optifii_white.svg'
+import optifii_purple from '../../assets/optifii_purple.svg'
+import bewakoof from '../../assets/bewakoof.svg'
+import nyka from '../../assets/nyka.svg'
+import hAndm from '../../assets/h&m.svg'
+
+
+
+const brandData = [
+  {
+    brandLogo:gap,
+    brandColor:"#002A5F",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:hAndm,
+    brandColor:"#ffffff",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_purple,
+    patternColor:""
+  },
+  {
+    brandLogo:hAndm,
+    brandColor:"#ffffff",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_purple,
+    patternColor:""
+  },
+  {
+    brandLogo:bewakoof,
+    brandColor:"#FFB819",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:nyka,
+    brandColor:"#FD2679",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:gap,
+    brandColor:"#002A5F",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:bewakoof,
+    brandColor:"#FFB819",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:nyka,
+    brandColor:"#FD2679",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:nyka,
+    brandColor:"#FD2679",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:bewakoof,
+    brandColor:"#FFB819",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+  {
+    brandLogo:hAndm,
+    brandColor:"#ffffff",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_purple,
+    patternColor:""
+  },
+  {
+    brandLogo:gap,
+    brandColor:"#002A5F",
+    cardWorth:"10,000",
+    optifiiLogo:optifii_white,
+    patternColor:""
+  },
+]
+
+const BuyVoucher = () => {
+
+
+
+  
+
+
+
+  const buyVoucherData = [
+    {
+      title:"All", 
+      compoent:<Text>All</Text>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Electronics", 
+      compoent:<Text> Electronics</Text>,
+      Icon:<CgTv fontSize={'18px'} />,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Ecommerce", 
+      compoent:<Text>Ecommerce</Text>,
+      Icon:<AiOutlineShoppingCart fontSize={'16px'}/>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Lifestyle", 
+      compoent:<Text>Lifestyle</Text>,
+      Icon:<PiBagBold fontSize={'14px'}/>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Food & beverages", 
+      compoent:<Text>Food & beverages</Text>,
+      Icon:<IoFastFoodOutline fontSize={'16px'}/>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Clothing", 
+      compoent:<Text>Clothing</Text>,
+      Icon:<IoShirtOutline fontSize={'15px'}/>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+    {
+      title:"Travel", 
+      compoent:<Text>Travel</Text>,
+      Icon:<LuPlaneTakeoff fontSize={'15px'}/>,
+      panel: <MyVoucher brandData={brandData} buyVoucer={true}/>
+    },
+
+  ]
+
+
+
+
+
+
+  return (
+    <VStack  {...SLIDE_IN_BOTTOM}  w={'100%'}  >
+
+<Tabs w={'100%'} variant='unstyled'>
+      <VStack p={4} gap={0}  alignItems={'start'} w={'100%'} bg={'#fff'} shadow={'md'} rounded={'md'}>
+        <Text fontSize={'sm'} fontWeight={500}>Shop by category</Text>
+
+     
+
+  <TabList mt={0}>
+    {buyVoucherData?.map(({title, Icon})=><Tab display={'flex'} gap={1} alignItems={'center'} bgSize={'sm'} rounded={'md'} fontSize={'xs'} color={'gray.500'} fontWeight={500}  _selected={{ color: '#3725EA', bg: '#3725EA26' }}>{Icon}{title}</Tab>)}
+    
+  </TabList>
+  </VStack>
+
+
+
+
+  <TabPanels>
+
+    {buyVoucherData?.map(({panel})=><TabPanel>
+      {panel}
+    </TabPanel>)}
+    
+  </TabPanels>
+</Tabs>
+
+    </VStack>
+  )
+}
+
+export default BuyVoucher

src/Pages/Gifts/ForWhom.jsx

@@ -0,0 +1,713 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Button,
+    HStack,
+    Text,
+    Box,
+    Radio,
+    Divider,
+    Accordion,
+    AccordionItem,
+    AccordionButton,
+    AccordionPanel,
+    AccordionIcon,
+    Tabs,
+    TabList,
+    TabPanels,
+    TabPanel,
+    Tab,
+    Input,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    useDisclosure,
+} from "@chakra-ui/react";
+import { Checkbox } from '@chakra-ui/react'
+import BuyVoucherCardComponent from './SelectDenominationComponent';
+import { GiHamburger } from "react-icons/gi";
+
+const ForWhom = () => {
+    const [selectedValue, setSelectedValue] = useState('1'); // Default to 'Personal Use'
+
+    useEffect(() => {
+        // Check for the saved tab value in localStorage
+        const savedValue = sessionStorage.getItem('selectedTab');
+        if (savedValue) {
+            setSelectedValue(savedValue);
+        }
+    }, []);
+
+    // for modal 
+
+    const { isOpen, onOpen, onClose } = useDisclosure()
+
+    const handleChange = (value) => {
+        setSelectedValue(value);
+        sessionStorage.setItem('selectedTab', value); // Save the selected tab to localStorage
+    };
+
+    const [isChecked, setIsChecked] = useState(false); // Initial state is unchecked
+
+    const handleCheckboxChange = () => {
+        setIsChecked(!isChecked); // Toggle the checkbox state
+
+        if (!isChecked) {
+            // Functionality triggered when checkbox is checked
+            console.log("Checkbox is checked, functionality triggered.");
+        }
+    };
+
+    return (
+        <BuyVoucherCardComponent>
+            <Box w={"60%"} gap={0} pl={8} borderLeft={"1px dashed #ddd"} minH={"80vh"}>
+                <Box>
+                    <Text
+                        fontSize={"sm"}
+                        fontWeight={"600"}
+                        mb={3}
+                    >
+                        For Whom?
+                    </Text>
+
+                    <Tabs
+                        index={selectedValue === '1' ? 0 : 1} // Ensure the correct tab is selected based on the state
+                        isLazy
+                        onChange={(index) => handleChange((index + 1).toString())}
+                    >
+                        <TabList
+                            sx={{
+                                borderBottom: "none", // Remove bottom border from TabList
+                            }}
+                        >
+                            <Tab borderBottom={"none"} pl={0}>
+                                <Radio
+                                    colorScheme='purple'
+                                    value='1'
+                                    isChecked={selectedValue === '1'} // Ensure radio is checked when tab is active
+                                >
+                                    <Text color={selectedValue === '1' ? 'purple.500' : '#535353'}
+                                        mb={0}
+                                        fontWeight={500}
+                                        fontSize={"sm"}
+                                    >
+                                        Personal Use
+                                    </Text>
+                                </Radio>
+                            </Tab>
+                            <Tab borderBottom={"none"}>
+                                <Radio
+                                    colorScheme='purple'
+                                    value='2'
+                                    isChecked={selectedValue === '2'} // Ensure radio is checked when tab is active
+                                >
+                                    <Text color={selectedValue === '2' ? 'purple.500' : '#535353'}
+                                        mb={0}
+                                        fontWeight={500}
+                                        fontSize={"sm"}
+                                    >
+                                        Gifting
+                                    </Text>
+                                </Radio>
+                            </Tab>
+                        </TabList>
+
+                        <TabPanels>
+
+                            {/* panel first */}
+
+                            <TabPanel px={0} >
+                                <Box>
+                                    <Text
+                                        fontSize={"sm"}
+                                        fontWeight={"600"}
+                                        mb={1}
+                                    >
+                                        Summary
+                                    </Text>
+                                    <Box
+                                        rounded={"xl"}
+                                        p={4}
+                                        bg={"#fff"}
+                                        shadow={"md"}
+                                    >
+                                        <HStack justifyContent={"space-between"}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                mb={1}
+                                            >
+                                                Brand card
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                mb={1}
+                                            >
+                                                ₹ 500
+                                            </Text>
+                                        </HStack>
+                                        <HStack justifyContent={"space-between"} mt={1}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                color={"#159F2B"}
+                                                mb={1}
+                                            >
+                                                Instant reward discount (4.0%)
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                color={"#159F2B"}
+                                                mb={1}
+                                            >
+                                                ₹ 500
+                                            </Text>
+                                        </HStack>
+                                        <Divider />
+                                        <HStack justifyContent={"space-between"}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                mb={1}
+                                            >
+                                                You pay
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                mb={1}
+                                            >
+                                                ₹ 480
+                                            </Text>
+                                        </HStack>
+                                    </Box>
+
+                                    <Box>
+                                        <Text
+                                            fontSize={"sm"}
+                                            fontWeight={"600"}
+                                            mb={2}
+                                            mt={4}
+                                        >
+                                            Select Wallet
+                                        </Text>
+
+                                        <Accordion allowToggle>
+                                            <AccordionItem
+                                                borderTop="none"
+                                                borderBottom="none"
+                                            >
+                                                <h2>
+                                                    <AccordionButton
+                                                        border={"1px solid #DCDCDC"}
+                                                        borderRadius={"md"}
+                                                    >
+                                                        <Box as='span' flex='1'
+                                                            textAlign='left'
+                                                            fontSize={"sm"}
+                                                            color={"#777777"}
+                                                        >
+                                                            Select Wallet
+                                                        </Box>
+                                                        <AccordionIcon />
+                                                    </AccordionButton>
+                                                </h2>
+                                                <AccordionPanel p={0}>
+                                                    <Box
+                                                        border="1px solid #e2e8f0"
+                                                        borderRadius="md"
+                                                        p={4}
+                                                        mb={2}
+                                                        _hover={{ boxShadow: "lg" }}
+                                                    >
+                                                        {[...Array(4)].map((_, index) => (
+                                                            <HStack justify="space-between" align="start" key={index} mb={4}>
+                                                                <Checkbox
+                                                                    colorScheme='purple'
+                                                                    alignItems={"center"}
+                                                                    border={"#6211CB"}
+                                                                >
+                                                                    <Text fontSize={"sm"} fontWeight={600} mb={0}>
+                                                                        Food Wallet
+                                                                    </Text>
+                                                                </Checkbox>
+                                                                <HStack align="center">
+                                                                    <Text color="gray.500" fontSize={"xs"} mb={0}>
+                                                                        Balance amount
+                                                                    </Text>
+                                                                    <Text fontWeight="600" fontSize={"sm"} mb={0}>
+                                                                        50000
+                                                                    </Text>
+                                                                </HStack>
+                                                            </HStack>
+                                                        ))}
+                                                    </Box>
+                                                </AccordionPanel>
+                                            </AccordionItem>
+                                        </Accordion>
+                                    </Box>
+                                    <Box mt={6} >
+                                        <Checkbox
+                                            colorScheme='purple'
+                                            isChecked={isChecked}
+                                            onChange={handleCheckboxChange}
+                                            alignItems={"start"}
+                                            border={"#6211CB"}
+                                        >
+                                            <Text fontSize={"xs"} fontWeight={500}>
+                                                Accept terms & conditions, by clicking on Pay now you accept OptiFii’s terms & conditions
+                                            </Text>
+                                        </Checkbox>
+                                    </Box>
+
+                                    <Box display={"flex"} justifyContent={"center"} mt={2} w={"100%"}>
+                                        <Button
+                                            isDisabled={!isChecked} // Disable button when unchecked
+                                            onClick={() => console.log("Preview button clicked")}
+                                            color={"#fff"}
+                                            bg={isChecked ? "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" : "#d4c5f4"}
+                                            _hover={{ opacity: 0.8 }}
+                                            fontSize={"sm"}
+                                            fontWeight={400}
+                                            px={16}
+                                            h={12}
+                                            w={"100%"}
+                                        >
+                                            Pay Now
+                                        </Button>
+                                    </Box>
+                                </Box>
+                            </TabPanel>
+
+                            {/* panel second */}
+
+                            <TabPanel px={0} >
+                                <Box>
+
+                                    <Text
+                                        fontSize={"sm"}
+                                        fontWeight={"600"}
+                                        mb={3}
+                                    >
+                                        User Details
+                                    </Text>
+
+                                    <Box mb={4}>
+                                        <Text
+                                            fontSize={"xs"}
+                                            fontWeight={"500"}
+                                            color={"#363636"}
+                                            mb={1}
+                                        >
+                                            Name
+                                        </Text>
+                                        <Input size='sm' borderRadius={"md"} />
+                                    </Box>
+                                    <Box mb={4}>
+                                        <Text
+                                            fontSize={"xs"}
+                                            fontWeight={"500"}
+                                            color={"#363636"}
+                                            mb={1}
+                                        >
+                                            Email ID
+                                        </Text>
+                                        <Input size='sm' borderRadius={"md"} />
+                                    </Box>
+                                    <Box mb={4}>
+                                        <Text
+                                            fontSize={"xs"}
+                                            fontWeight={"500"}
+                                            color={"#363636"}
+                                            mb={1}
+                                        >
+                                            Phone number
+                                        </Text>
+                                        <Input size='sm' borderRadius={"md"} />
+                                    </Box>
+
+
+                                    <Box>
+                                        <Text
+                                            fontSize={"sm"}
+                                            fontWeight={"600"}
+                                            mb={2}
+                                            mt={4}
+                                        >
+                                            Select Wallet
+                                        </Text>
+
+                                        <Accordion allowToggle>
+                                            <AccordionItem
+                                                borderTop="none"
+                                                borderBottom="none"
+                                            >
+                                                <h2>
+                                                    <AccordionButton
+                                                        border={"1px solid #DCDCDC"}
+                                                        borderRadius={"md"}
+                                                    >
+                                                        <Box as='span' flex='1'
+                                                            textAlign='left'
+                                                            fontSize={"sm"}
+                                                            color={"#777777"}
+                                                        >
+                                                            Select Wallet
+                                                        </Box>
+                                                        <AccordionIcon />
+                                                    </AccordionButton>
+                                                </h2>
+                                                <AccordionPanel p={0}>
+                                                    <Box
+                                                        border="1px solid #e2e8f0"
+                                                        borderRadius="md"
+                                                        p={4}
+                                                        mb={2}
+                                                        _hover={{ boxShadow: "lg" }}
+                                                    >
+                                                        {[...Array(4)].map((_, index) => (
+                                                            <HStack justify="space-between" align="start" key={index} mb={4}>
+                                                                <Checkbox
+                                                                    colorScheme='purple'
+                                                                    alignItems={"center"}
+                                                                    border={"#6211CB"}
+                                                                >
+                                                                    <Text fontSize={"sm"} fontWeight={600} mb={0}>
+                                                                        Food Wallet
+                                                                    </Text>
+                                                                </Checkbox>
+                                                                <HStack align="center">
+                                                                    <Text color="gray.500" fontSize={"xs"} mb={0}>
+                                                                        Balance amount
+                                                                    </Text>
+                                                                    <Text fontWeight="600" fontSize={"sm"} mb={0}>
+                                                                        50000
+                                                                    </Text>
+                                                                </HStack>
+                                                            </HStack>
+                                                        ))}
+                                                    </Box>
+                                                </AccordionPanel>
+                                            </AccordionItem>
+                                        </Accordion>
+                                    </Box>
+                                    <Box mt={4}>
+                                        <Text
+                                            fontSize={"sm"}
+                                            fontWeight={"600"}
+                                            mb={1}
+                                        >
+                                            Summary two
+                                        </Text>
+                                        <Box
+                                            rounded={"xl"}
+                                            p={4}
+                                            bg={"#fff"}
+                                            shadow={"md"}
+                                        >
+                                            <HStack justifyContent={"space-between"}>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"500"}
+                                                    mb={1}
+                                                >
+                                                    Brand card
+                                                </Text>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"600"}
+                                                    mb={1}
+                                                >
+                                                    ₹ 500
+                                                </Text>
+                                            </HStack>
+                                            <HStack justifyContent={"space-between"} mt={1}>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"500"}
+                                                    color={"#159F2B"}
+                                                    mb={1}
+                                                >
+                                                    Instant reward discount (4.0%)
+                                                </Text>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"600"}
+                                                    color={"#159F2B"}
+                                                    mb={1}
+                                                >
+                                                    ₹ 500
+                                                </Text>
+                                            </HStack>
+                                            <Divider />
+                                            <HStack justifyContent={"space-between"}>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"500"}
+                                                    mb={1}
+                                                >
+                                                    You pay
+                                                </Text>
+                                                <Text
+                                                    fontSize={"sm"}
+                                                    fontWeight={"600"}
+                                                    mb={1}
+                                                >
+                                                    ₹ 480
+                                                </Text>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+                                    <Box mt={6} >
+                                        <Checkbox
+                                            colorScheme='purple'
+                                            isChecked={isChecked}
+                                            onChange={handleCheckboxChange}
+                                            alignItems={"start"}
+                                            border={"#6211CB"}
+                                        >
+                                            <Text fontSize={"xs"} fontWeight={500}>
+                                                Accept terms & conditions, by clicking on Pay now you accept OptiFii’s terms & conditions
+                                            </Text>
+                                        </Checkbox>
+                                    </Box>
+
+                                    <Box display={"flex"} justifyContent={"center"} mt={2} w={"100%"}>
+                                        <Button
+                                            onClick={onOpen}
+                                            isDisabled={!isChecked} // Disable button when unchecked
+                                            color={"#fff"}
+                                            bg={isChecked ? "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" : "#d4c5f4"}
+                                            _hover={{ opacity: 0.8 }}
+                                            fontSize={"sm"}
+                                            fontWeight={400}
+                                            px={16}
+                                            h={12}
+                                            w={"100%"}
+                                        >
+                                            Preview
+                                        </Button>
+                                    </Box>
+                                </Box>
+                            </TabPanel>
+
+                        </TabPanels>
+                    </Tabs>
+                </Box>
+                <Modal size={"xl"} isCentered isOpen={isOpen} onClose={onClose}>
+                    <ModalOverlay />
+                    <ModalContent >
+                        <ModalHeader>Make Payment</ModalHeader>
+                        <ModalCloseButton />
+                        <ModalBody>
+                            <Box>
+
+                                <Text
+                                    fontSize={"sm"}
+                                    fontWeight={"600"}
+                                    mb={3}
+                                >
+                                    User Details
+                                </Text>
+
+                                <Box mb={4}>
+                                    <Text
+                                        fontSize={"xs"}
+                                        fontWeight={"500"}
+                                        color={"#363636"}
+                                        mb={1}
+                                    >
+                                        Name
+                                    </Text>
+                                    <Input
+                                        size='sm'
+                                        borderRadius={"md"}
+                                        value={"Kartikey Gautam"}
+                                        color={"#000"}
+                                        fontWeight={"500"}
+                                        fontSize={"sm"}
+                                        bg={"#F3F2FF"}
+                                    />
+                                </Box>
+                                <Box mb={4}>
+                                    <Text
+                                        fontSize={"xs"}
+                                        fontWeight={"500"}
+                                        color={"#363636"}
+                                        mb={1}
+                                    >
+                                        Email ID
+                                    </Text>
+                                    <Input size='sm' borderRadius={"md"}
+                                        value={"kartikeygautam@wdi.com"}
+                                        color={"#000"}
+                                        fontWeight={"500"}
+                                        fontSize={"sm"}
+                                        bg={"#F3F2FF"}
+                                    />
+                                </Box>
+                                <Box mb={4}>
+                                    <Text
+                                        fontSize={"xs"}
+                                        fontWeight={"500"}
+                                        color={"#363636"}
+                                        mb={1}
+                                    >
+                                        Phone number
+                                    </Text>
+                                    <Input size='sm' borderRadius={"md"}
+                                        value={"8945487312"}
+                                        color={"#000"}
+                                        fontWeight={"500"}
+                                        fontSize={"sm"}
+                                        bg={"#F3F2FF"}
+                                    />
+                                </Box>
+
+
+                                <Box>
+                                    <Text
+                                        fontSize={"sm"}
+                                        fontWeight={"600"}
+                                    >
+                                        Paid From
+                                    </Text>
+
+                                    <HStack
+                                        justifyContent={"space-between"}
+                                        border={"1px solid #EFE2FF"}
+                                        borderRadius={"md"}
+                                        h={10}
+                                        py={4}
+                                        px={2}
+                                    >
+                                        <HStack>
+                                            <GiHamburger color='#f6cb93' />
+                                            <Text fontSize={"sm"} fontWeight={500} mb={0}>
+                                                Food Wallet
+                                            </Text>
+                                        </HStack>
+                                        <HStack align="center">
+                                            <Text color="gray.500" fontSize={"xs"} mb={0}>
+                                                Balance amount
+                                            </Text>
+                                            <Text fontWeight="500" fontSize={"sm"} mb={0}>
+                                                50000
+                                            </Text>
+                                        </HStack>
+                                    </HStack>
+                                </Box>
+                                <Box mt={4}>
+                                    <Text
+                                        fontSize={"sm"}
+                                        fontWeight={"600"}
+                                        mb={1}
+                                    >
+                                        Summary two
+                                    </Text>
+                                    <Box
+                                        rounded={"xl"}
+                                        p={4}
+                                        bg={"#fff"}
+                                        shadow={"md"}
+                                    >
+                                        <HStack justifyContent={"space-between"}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                mb={1}
+                                            >
+                                                Brand card
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                mb={1}
+                                            >
+                                                ₹ 500
+                                            </Text>
+                                        </HStack>
+                                        <HStack justifyContent={"space-between"} mt={1}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                color={"#159F2B"}
+                                                mb={1}
+                                            >
+                                                Instant reward discount (4.0%)
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                color={"#159F2B"}
+                                                mb={1}
+                                            >
+                                                ₹ 500
+                                            </Text>
+                                        </HStack>
+                                        <Divider />
+                                        <HStack justifyContent={"space-between"}>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"500"}
+                                                mb={1}
+                                            >
+                                                You pay
+                                            </Text>
+                                            <Text
+                                                fontSize={"sm"}
+                                                fontWeight={"600"}
+                                                mb={1}
+                                            >
+                                                ₹ 480
+                                            </Text>
+                                        </HStack>
+                                    </Box>
+                                </Box>
+                                <Box mt={6} >
+                                    <Checkbox
+                                        colorScheme='purple'
+                                        isChecked={isChecked}
+                                        onChange={handleCheckboxChange}
+                                        alignItems={"start"}
+                                        border={"#6211CB"}
+                                    >
+                                        <Text fontSize={"xs"} fontWeight={500}>
+                                            Accept terms & conditions, by clicking on Pay now you accept OptiFii’s terms & conditions
+                                        </Text>
+                                    </Checkbox>
+                                </Box>
+
+                                <Box display={"flex"} justifyContent={"center"} mt={2} w={"100%"}>
+                                    <Button
+                                        isDisabled={!isChecked} // Disable button when unchecked
+                                        onClick={() => console.log("Preview button clicked")}
+                                        color={"#fff"}
+                                        bg={isChecked ? "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" : "#d4c5f4"}
+                                        _hover={{ opacity: 0.8 }}
+                                        fontSize={"sm"}
+                                        fontWeight={400}
+                                        px={16}
+                                        h={12}
+                                        w={"100%"}
+                                    >
+                                        Pay Now
+                                    </Button>
+                                </Box>
+                            </Box>
+                        </ModalBody>
+
+                    </ModalContent>
+                </Modal>
+            </Box>
+        </BuyVoucherCardComponent>
+    );
+    
+}
+
+export default ForWhom;

src/Pages/Gifts/ForWhomComponent.jsx

@@ -0,0 +1,167 @@
+
+import React, { useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import {
+    HStack,
+    VStack,
+    Text,
+    Box,
+    Image,
+} from "@chakra-ui/react";
+import gap from "../../assets/gap.svg";
+import optifii_white from "../../assets/optifii_white.svg";
+
+const ForWhomComponent = ({children}) => {
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
+            <MiniHeader
+                title={"Buy Vouchers"}
+                subTitle={"Manage your expense and reimbursement requests."}
+                backButton={true}
+            />
+            <Box
+                rounded={"xl"}
+                p={8}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <Text
+                    fontSize={"md"}
+                    fontWeight={"600"}
+                    mb={2}
+                >
+                    Gap Voucher
+                </Text>
+                <HStack spacing={8} alignItems={"start"}>
+                    <Box pt={2} w={"35%"} gap={6} justifyContent={'start'} minH={"80vh"}>
+                        <Box
+                            cursor={"grab"}
+                            overflow={"hidden"}
+                            shadow={"md"}
+                            w={{ base: "100%" }}
+                            h={160}
+                            bg={"#002A5F"}
+                            rounded={20}
+                        >
+                            <HStack
+                                pb={1}
+                                justifyContent={"space-between"}
+                                pt={3}
+                                ps={3}
+                                pe={3}
+                            >
+                                <Image src={gap} />
+                            </HStack>
+                            <VStack color={gap !== gap ? "#E2231A" : "#fff"} gap={1}>
+                                <Text as={"span"} fontSize={"md"}>
+                                    Card Worth
+                                </Text>
+                                <Text as={"span"} fontWeight={700} fontSize={"md"}>
+                                    $ 10000
+                                </Text>
+                                <HStack
+                                    w={"100%"}
+                                    pb={4}
+                                    justifyContent={"end"}
+                                    pt={3}
+                                    ps={3}
+                                    pe={3}
+                                >
+                                    <Image src={optifii_white} />
+                                </HStack>
+                            </VStack>
+                        </Box>
+                        <VStack w={"100%"} gap={0} mt={3}>
+                            <Text
+                                ps={3}
+                                w={"100%"}
+                                as={"span"}
+                                fontSize={"md"}
+                                fontWeight={600}
+                            >
+                                How to use
+                            </Text>
+
+                            <ul
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: 0,
+                                }}
+                            >
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                            </ul>
+                        </VStack>
+
+                        <VStack w={"100%"} gap={0}>
+                            <Text
+                                ps={3}
+                                w={"100%"}
+                                as={"span"}
+                                fontSize={"md"}
+                                fontWeight={600}
+                            >
+                                Terms & condition
+                            </Text>
+
+                            <ul>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                            </ul>
+                        </VStack>
+
+                    </Box>
+
+                    {/* =======================[ Select denomination ]=========== */}
+                    {children}
+                </HStack>
+            </Box>
+        </Box>
+    )
+}
+
+export default ForWhomComponent

src/Pages/Gifts/Gifts.jsx

@@ -1,14 +1,57 @@
-import { Box } from "@chakra-ui/react";
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react";
 import React from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import AdvanceExpense from "../Requests/AdvanceExpense";
+import Reimbursement from "../Requests/Reimbursement";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import MyGiftCardsTab from "./MyGiftCardsTab";
+import VouchersTab from "./VouchersTab";
 
 const Gifts = () => {
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
       <MiniHeader
         title={"Your Gift Cards"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
+
+
+         {/* Tabs for switching between AdvanceExpense and Reimbursement */}
+         <Box color={"black"}>
+        <Tabs variant="unstyled">
+          <TabList bg={'#FFFFFF'} borderRadius={'md'} boxShadow={'sm'} h={12}>
+            <Tab
+              _selected={{ color: "#fff", bg: "#3725EA" }}
+              py={3}
+              px={16}
+              borderLeftRadius={'md'}
+              fontWeight={'600'}
+              fontSize={'sm'}
+            >
+              My Gift Cards
+            </Tab>
+            <Tab
+              _selected={{ color: "#fff", bg: "#3725EA" }}
+              py={3}
+              px={16}
+              fontWeight={'600'}
+              fontSize={'sm'}
+            >
+              Vouchers
+            </Tab>
+          </TabList>
+
+          {/* Tab panels */}
+          <TabPanels>
+            <TabPanel py={4} pl={0} pr={0}>
+              <MyGiftCardsTab />
+            </TabPanel>
+            <TabPanel py={4} pl={0} pr={0}>
+              <VouchersTab/>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Box>
     </Box>
   );
 };

src/Pages/Gifts/MyGiftCardsTab.jsx

@@ -0,0 +1,281 @@
+import { Button } from "@chakra-ui/button";
+import { Box, Divider, HStack, Text, VStack } from "@chakra-ui/layout";
+import React, { useContext, useEffect, useState } from "react";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { useDisclosure } from "@chakra-ui/hooks";
+import { Icon } from "@chakra-ui/icon";
+import { MdOutlineRamenDining } from "react-icons/md";
+import { Tag } from "@chakra-ui/tag";
+import { FaRegFilePdf } from "react-icons/fa";
+import { AiOutlineEdit } from "react-icons/ai";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { CalendarIcon, PhoneIcon, Search2Icon } from "@chakra-ui/icons";
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
+import SwiperSlider from "../../Components/Swiper/SwiperSlider";
+
+const MyGiftCardsTab = () => {
+  const { requestsTable } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // Simulate loading effect
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => setIsLoading(false), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Table headers
+  const tableHeadRow = [
+    "Transaction Type",
+    "Date",
+    "Wallet Type",
+    "Amount Spent",
+  ];
+
+  const InternalCard = ({ title1, subTitle1, title2, subbTitle2 }) => {
+    return (
+      <VStack
+        gap={0}
+        w={"100%"}
+        rounded={"lg"}
+        justifyContent={"space-evenly"}
+        bg={"gray.50"}
+      >
+        <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+          <Text as={"span"} fontSize={"md"} fontWeight={600}>
+            {title1}
+          </Text>
+
+          <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+            {subTitle1}
+          </Text>
+        </VStack>
+
+        <VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
+          <Text as={"span"} fontSize={"md"} fontWeight={600}>
+            {title2}
+          </Text>
+
+          <Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
+            {subbTitle2}
+          </Text>
+        </VStack>
+      </VStack>
+    );
+  };
+
+  // Extracted data for table
+  const extractedArray = requestsTable.map((item, index) => ({
+    "Transaction Type": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        fontSize={"xs"}
+        gap={2}
+        alignItems={"center"}
+      >
+        <Icon
+          as={MdOutlineRamenDining}
+          boxSize={8}
+          p={1.5}
+          bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+          rounded={"full"}
+        />
+        {item.transactionType}
+      </Text>
+    ),
+    Date: (
+      <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
+        {item.date}
+      </Text>
+    ),
+    "Wallet Type": (
+      <HStack flexWrap={"wrap"}>
+        <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
+          <Text
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text"
+            fontSize={"xs"}
+            as={"span"}
+            fontWeight={600}
+          >
+            {item.walletType}
+          </Text>
+        </Tag>
+        <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
+          <Text
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text"
+            fontSize={"xs"}
+            as={"span"}
+            fontWeight={600}
+          >
+            {item.walletType}
+          </Text>
+        </Tag>
+        <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
+          <Text
+            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+            bgClip="text"
+            fontSize={"xs"}
+            as={"span"}
+            fontWeight={600}
+          >
+            {item.walletType}
+          </Text>
+        </Tag>
+      </HStack>
+    ),
+
+    Document: (
+      <Button
+        as="a"
+        href={item.document}
+        download="dummy-pdf"
+        target="_blank"
+        color="#363636"
+        fontWeight={"500"}
+        bg={"transparent"}
+        border={"1px solid #CCCCCC"}
+        borderRadius="full"
+        size="xs"
+        gap={"6px"}
+        alignItems={"center"}
+        _hover={{ bg: "inherit" }}
+        fontSize={"xs"}
+      >
+        <FaRegFilePdf color="#B43331" />
+        Receipt.pdf
+      </Button>
+    ),
+    "Amount Spent": item.amountSpent,
+    Actions: (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        <Button
+          // _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+          fontSize={"xs"}
+        >
+          <AiOutlineEdit fontSize={"19px"} />
+        </Button>
+        <Button
+          // _hover={{ color: "gray.800", bg: "gray.100" }}
+          transition={"0.5s"}
+          size={"sm"}
+          bg={"none"}
+          p={0}
+          color="gray.600"
+          fontSize={"xs"}
+        >
+          <RiDeleteBin5Line fontSize={"18px"} />
+        </Button>
+      </Box>
+    ),
+  }));
+
+  return (
+    <VStack w={'100%'} gap={5}>
+      <HStack
+        bg={"#fff"}
+        w={'100%'}
+        rounded={'lg'}
+        shadow={'md'} p={6}
+        spacing={2}
+        flexWrap={"wrap"}
+        >
+        <Box w={"48%"} position={"relative"}>
+          <SwiperSlider />
+        </Box>
+        <Box w={"50%"}>
+          <VStack
+            flexGrow={1}
+            gap={4}
+            rounded={"xl"}
+            p={4}
+          >
+            <InternalCard
+              title1={"Kartikey Gautam"}
+              subTitle1={"Cardholder Name"}
+              title2={"**** **** **** 5678"}
+              subbTitle2={"Card Number "}
+            />
+            <InternalCard
+              title1={"₹ 1,00,000"}
+              subTitle1={"Card Balance"}
+              title2={"₹ 50,000"}
+              subbTitle2={"Remaining Balance"}
+            />
+          </VStack>
+        </Box>
+      </HStack>
+
+
+
+
+
+      <Box
+        rounded={"xl"}
+        py={3}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        w={'100%'}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Text fontSize={"lg"} fontWeight={600} color={"#000000"}>
+            Transactions
+          </Text>
+          <HStack w={"100%"} justifyContent={"space-between"}>
+            <HStack>
+              <InputGroup rounded={"md"} size={"sm"}>
+                <InputLeftElement pointerEvents="none">
+                  <Search2Icon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  rounded={"md"}
+                  focusBorderColor="purple.500" // Border color when focused
+                  // borderColor='purple.300'        // Default border color
+                  placeholder="Search"
+                />
+              </InputGroup>
+            </HStack>
+
+            <Button
+              fontWeight={500}
+              size={"sm"}
+              leftIcon={<CalendarIcon color={"purple.800"} />}
+              colorScheme="gray"
+              color={"gray.700"}
+              variant="outline"
+              fontSize={"xs"}
+            >
+              Select Date Range
+            </Button>
+          </HStack>
+        </VStack>
+        <Divider />
+        <NormalTable
+          emptyMessage={`We don't have any Sponsors `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+    </VStack>
+  );
+};
+
+export default MyGiftCardsTab;

src/Pages/Gifts/MyVoucher.jsx

@@ -0,0 +1,86 @@
+import { Box, HStack, Text, VStack, Link } from '@chakra-ui/layout'
+import React, { useEffect, useRef } from 'react'
+import { OPACITY_ON_LOAD, SLIDE_IN_BOTTOM } from '../../Layout/animations'
+import gap from '../../assets/gap.svg'
+import optifii_white from '../../assets/optifii_white.svg'
+import optifii_purple from '../../assets/optifii_purple.svg'
+import bewakoof from '../../assets/bewakoof.svg'
+import nyka from '../../assets/nyka.svg'
+import hAndm from '../../assets/h&m.svg'
+import { Image } from '@chakra-ui/image'
+import { Button } from '@chakra-ui/button'
+import VanillaTilt from 'vanilla-tilt'
+import MyVoucherViewModal from './MyVoucherViewModal'
+import { useNavigate } from 'react-router-dom'
+
+const MyVoucher = ({ buyVoucer, brandData }) => {
+
+
+const navigate = useNavigate()
+
+
+
+  return (
+    <HStack {...SLIDE_IN_BOTTOM} mt={2} gap={5} flexWrap={'wrap'} justifyContent={'center'} w={'100%'}>
+      {brandData?.map(({ brandColor, brandLogo, cardWorth, optifiiLogo }, index) => {
+        const tiltRef = useRef(null);
+
+        useEffect(() => {
+          const node = tiltRef.current;
+          if (node) {
+            VanillaTilt.init(node, {
+              max: 15,
+              speed: 400,
+              glare: true,
+              scale: 1.05,
+              "max-glare": 0.5,
+              onEnter: () => {
+                node.style.zIndex = 10; // Bring to top on hover
+              },
+              onLeave: () => {
+                node.style.zIndex = 1; // Reset zIndex after hover
+              },
+            });
+          }
+          return () => {
+            if (node && node.vanillaTilt) {
+              node.vanillaTilt.destroy();
+            }
+          };
+        }, [tiltRef]);
+
+        return (
+          <Box cursor={'grab'} key={index} ref={tiltRef} overflow={'hidden'} shadow={'md'} w={{ base: '23.5%' }} h={160} bg={brandColor} rounded={20}>
+            <HStack pb={1} justifyContent={'space-between'} pt={3} ps={3} pe={3}>
+              <Image src={brandLogo} />
+              <Image src={optifiiLogo} />
+            </HStack>
+            <VStack color={brandLogo === hAndm ? "#E2231A" : '#fff'} gap={1}>
+              <Text as={'span'} fontSize={'sm'}>Card Worth</Text>
+              <Text as={'span'} fontWeight={700} fontSize={'lg'}>$ {cardWorth}</Text>
+
+              {buyVoucer ? (
+                  <Button
+                    bg={"#fff"}
+                    mt={2}
+                    px={5}
+                    py={1}
+                    border={"1px solid purple"}
+                    size={"xs"}
+                    onClick={()=>navigate('/buy-voucher-card')}
+                  >
+                    Buy Voucher
+                  </Button>
+              ) : (
+                <MyVoucherViewModal />
+              )}
+
+            </VStack>
+          </Box>
+        );
+      })}
+    </HStack>
+  );
+}
+
+export default MyVoucher;

src/Pages/Gifts/MyVoucherViewModal.jsx

@@ -0,0 +1,243 @@
+import React, { useEffect, useRef } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  useDisclosure,
+  HStack,
+  VStack,
+  Text,
+  Box,
+  Image,
+  FormControl,
+  FormLabel,
+  Input,
+} from "@chakra-ui/react";
+import { GoDotFill } from "react-icons/go";
+import gap from "../../assets/gap.svg";
+import optifii_white from "../../assets/optifii_white.svg";
+import VanillaTilt from "vanilla-tilt";
+
+const MyVoucherViewModal = () => {
+  const tiltRef = useRef(null);
+
+  useEffect(() => {
+    const node = tiltRef.current;
+    if (node) {
+      VanillaTilt.init(node, {
+        max: 25,
+        speed: 400,
+        glare: true,
+        scale: 1.05,
+        "max-glare": 1.5,
+        onEnter: () => {
+          node.style.zIndex = 10; // Bring to top on hover
+        },
+        onLeave: () => {
+          node.style.zIndex = 1; // Reset zIndex after hover
+        },
+      });
+    }
+    return () => {
+      if (node && node.vanillaTilt) {
+        node.vanillaTilt.destroy();
+      }
+    };
+  }, [tiltRef]);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        bg={"#fff"}
+        mt={2}
+        px={5}
+        py={1}
+        border={"1px solid purple"}
+        size={"xs"}
+      >
+        View Voucher
+      </Button>
+
+      <Modal isCentered isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent maxW={"1000px"} minH={"500px"} w={"90%"}>
+          <ModalHeader pb={0}>My Voucher</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody >
+            <HStack h={'100%'} w={"100%"}>
+              <VStack pt={2} h={'470px'} w={"40%"} gap={6} justifyContent={'start'} >
+                <Box
+                  cursor={"grab"}
+                  ref={tiltRef}
+                  overflow={"hidden"}
+                  shadow={"md"}
+                  w={{ base: "70%" }}
+                  h={160}
+                  bg={"#002A5F"}
+                  rounded={20}
+                >
+                  <HStack
+                    pb={1}
+                    justifyContent={"space-between"}
+                    pt={3}
+                    ps={3}
+                    pe={3}
+                  >
+                    <Image src={gap} />
+                  </HStack>
+                  <VStack color={gap !== gap ? "#E2231A" : "#fff"} gap={1}>
+                    <Text as={"span"} fontSize={"md"}>
+                      Card Worth
+                    </Text>
+                    <Text as={"span"} fontWeight={700} fontSize={"md"}>
+                      $ 10000
+                    </Text>
+                    <HStack
+                      w={"100%"}
+                      pb={4}
+                      justifyContent={"end"}
+                      pt={3}
+                      ps={3}
+                      pe={3}
+                    >
+                      <Image src={optifii_white} />
+                    </HStack>
+                  </VStack>
+                </Box>
+
+                <VStack mt={3} gap={1} w={'100%'} alignItems={'start'}>
+                  <Text as={'span'} fontWeight={500} fontSize={'sm'}>Voucher code</Text>
+                  <HStack justifyContent={'space-between'} py={2} w={'100%'} bg={'#E0EEFF'}>
+                    <Box transform={'translateX(-1px)'} bg={'#fff'} w={3} h={3} rounded={'full'} />
+                    <Text as={'span'} fontSize={'sm'} fontWeight={500}>OPT787593</Text>
+                    <Box transform={'translateX(1px)'} bg={'#fff'} w={3} h={3} rounded={'full'} />
+                  </HStack>
+                  <Text as={'span'} color={'gray.500'} fontWeight={500} fontSize={'sm'}>Validity : 2 July 2034</Text>
+
+
+                </VStack>
+                <FormControl mt={3}>
+                  <FormLabel fontSize={'sm'}>PIN</FormLabel>
+                  <Input type='number' size={'sm'} />
+                </FormControl>
+              </VStack>
+
+              {/* =======================[ How to use ]=========== */}
+              <VStack w={"60%"} gap={0}>
+                <VStack w={"100%"} gap={0}>
+                  <Text
+                    ps={3}
+                    w={"100%"}
+                    as={"span"}
+                    fontSize={"md"}
+                    fontWeight={600}
+                  >
+                    How to use
+                  </Text>
+
+                  <ul
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0,
+                    }}
+                  >
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                  </ul>
+                </VStack>
+
+                <VStack w={"100%"} gap={0}>
+                  <Text
+                    ps={3}
+                    w={"100%"}
+                    as={"span"}
+                    fontSize={"md"}
+                    fontWeight={600}
+                  >
+                    Terms & condition
+                  </Text>
+
+                  <ul>
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                    <li
+                      style={{
+                        color: "#737373",
+                      }}
+                    >
+                      <Text fontSize={"sm"} fontWeight={500}>
+                        How to use Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua
+                      </Text>
+                    </li>
+                  </ul>
+                </VStack>
+              </VStack>
+            </HStack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default MyVoucherViewModal;

src/Pages/Gifts/SelectDenomination.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+import {
+    Button,
+    HStack,
+    VStack,
+    Text,
+    Box,
+    Input,
+} from "@chakra-ui/react";
+import { MdCardGiftcard } from "react-icons/md";
+import SelectDenominationComponent from './SelectDenominationComponent';
+import { useNavigate } from 'react-router-dom';
+
+const SelectDenomination = () => {
+
+    const navigate = useNavigate()
+
+    const [selectedAmount, setSelectedAmount] = useState(50); // default selected amount
+    const amounts = [50, 100, 500, 1000, 2000];
+
+    return (
+        <SelectDenominationComponent>
+            <Box w={"60%"} gap={0} pl={8} borderLeft={"1px dashed #ddd"} minH={"80vh"}>
+                <Box>
+                    <Text
+                        fontSize={"sm"}
+                        fontWeight={"600"}
+                        mb={3}
+                    >
+                        Select denomination
+                    </Text>
+
+                    <HStack spacing={4} mb={4}>
+                        {amounts.map((amount) => (
+                            <Button
+                                key={amount}
+                                bg={selectedAmount === amount ? "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" : "white"}
+                                color={selectedAmount === amount ? "white" : "gray.500"}
+                                border="1px solid"
+                                borderColor="#3725EA"
+                                _hover={{ bg: selectedAmount === amount ? "" : "gray.100" }}
+                                onClick={() => setSelectedAmount(amount)}
+                                rounded="lg"
+                                colorScheme='#535353'
+                                fontWeight={500}
+                                fontSize={"xs"}
+                                px={5}
+                                h={7}
+                            >
+                                {amount}
+                            </Button>
+                        ))}
+                    </HStack>
+                    <Text
+                        colorScheme='#777777'
+                        fontWeight={500}
+                        fontSize={"xs"}
+                        mb={3}
+                    >
+                        OR
+                    </Text>
+                    <Text
+                        fontSize={"sm"}
+                        fontWeight={"600"}
+                        mb={1}
+                    >
+                        Enter denomination
+                    </Text>
+                    <Input
+                        type="number"
+                        placeholder='Enter Value'
+                        size='sm'
+                        borderRadius={"md"}
+                    />
+                    <Text
+                        fontSize={"xs"}
+                        color={"#777777"}
+                        mt={1}
+                    >
+                        Min: 50, Max: 100000
+                    </Text>
+                </Box>
+
+                <Box display={"flex"} justifyContent={"center"} mt={16}>
+                    <Button
+                        leftIcon={<MdCardGiftcard />}
+                        _hover={{
+                            opacity: 0.8,
+                        }}
+                        color={"#fff"}
+                        bg={"linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)"}
+                        fontSize={"xs"}
+                        fontWeight={400}
+                        px={16}
+                        h={8}
+                        onClick={() => navigate('/for-whom-card')}
+                    >
+                        Get this voucher
+                    </Button>
+
+                </Box>
+
+            </Box>
+        </SelectDenominationComponent>
+    )
+}
+
+export default SelectDenomination

src/Pages/Gifts/SelectDenominationComponent.jsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import MiniHeader from '../../Components/MiniHeader'
+import {
+    HStack,
+    VStack,
+    Text,
+    Box,
+    Image,
+} from "@chakra-ui/react";
+import gap from "../../assets/gap.svg";
+import optifii_white from "../../assets/optifii_white.svg";
+const SelectDenominationComponent = ({children}) => {
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
+            <MiniHeader
+                title={"Buy Vouchers"}
+                subTitle={"Manage your expense and reimbursement requests."}
+                backButton={true}
+            />
+            <Box
+                rounded={"xl"}
+                p={8}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <Text
+                    fontSize={"md"}
+                    fontWeight={"600"}
+                    mb={2}
+                >
+                    Gap Voucher
+                </Text>
+                <HStack spacing={8} alignItems={"start"}>
+                    <Box pt={2} w={"35%"} gap={6} justifyContent={'start'} minH={"80vh"}>
+                        <Box
+                            cursor={"grab"}
+                            overflow={"hidden"}
+                            shadow={"md"}
+                            w={{ base: "100%" }}
+                            h={160}
+                            bg={"#002A5F"}
+                            rounded={20}
+                        >
+                            <HStack
+                                pb={1}
+                                justifyContent={"space-between"}
+                                pt={3}
+                                ps={3}
+                                pe={3}
+                            >
+                                <Image src={gap} />
+                            </HStack>
+                            <VStack color={gap !== gap ? "#E2231A" : "#fff"} gap={1}>
+                                <Text as={"span"} fontSize={"md"}>
+                                    Card Worth
+                                </Text>
+                                <Text as={"span"} fontWeight={700} fontSize={"md"}>
+                                    $ 10000
+                                </Text>
+                                <HStack
+                                    w={"100%"}
+                                    pb={4}
+                                    justifyContent={"end"}
+                                    pt={3}
+                                    ps={3}
+                                    pe={3}
+                                >
+                                    <Image src={optifii_white} />
+                                </HStack>
+                            </VStack>
+                        </Box>
+                        <VStack w={"100%"} gap={0} mt={3}>
+                            <Text
+                                ps={3}
+                                w={"100%"}
+                                as={"span"}
+                                fontSize={"md"}
+                                fontWeight={600}
+                            >
+                                How to use
+                            </Text>
+
+                            <ul
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: 0,
+                                }}
+                            >
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={1}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                            </ul>
+                        </VStack>
+
+                        <VStack w={"100%"} gap={0}>
+                            <Text
+                                ps={3}
+                                w={"100%"}
+                                as={"span"}
+                                fontSize={"md"}
+                                fontWeight={600}
+                            >
+                                Terms & condition
+                            </Text>
+
+                            <ul>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                                <li
+                                    style={{
+                                        color: "#737373",
+                                    }}
+                                >
+                                    <Text fontSize={"xs"} fontWeight={500}>
+                                        How to use Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit, sed do eiusmod tempor incididunt ut
+                                        labore et dolore magna aliqua
+                                    </Text>
+                                </li>
+                            </ul>
+                        </VStack>
+
+                    </Box>
+
+                    {/* =======================[ Select denomination ]=========== */}
+                    {children}
+                </HStack>
+            </Box>
+        </Box>
+    )
+}
+
+export default SelectDenominationComponent

src/Pages/Gifts/VouchersTab.jsx

@@ -0,0 +1,214 @@
+import { Button } from "@chakra-ui/button";
+import { ChevronDownIcon, Search2Icon } from "@chakra-ui/icons";
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
+import { Box, HStack, VStack } from "@chakra-ui/layout";
+import React, { useState } from "react";
+import MyVoucher from "./MyVoucher";
+import BuyVoucher from "./BuyVoucher";
+
+import gap from '../../assets/gap.svg'
+import optifii_white from '../../assets/optifii_white.svg'
+import optifii_purple from '../../assets/optifii_purple.svg'
+import bewakoof from '../../assets/bewakoof.svg'
+import nyka from '../../assets/nyka.svg'
+import hAndm from '../../assets/h&m.svg'
+import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { LuArrowDownWideNarrow, LuListFilter } from "react-icons/lu";
+
+const VouchersTab = () => {
+  const [activeTab, setActiveTab] = useState("My Voucher"); // Set default active tab
+
+
+  const brandData = [
+    {
+      brandLogo: gap,
+      brandColor: "#002A5F",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: bewakoof,
+      brandColor: "#FFB819",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: nyka,
+      brandColor: "#FD2679",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: hAndm,
+      brandColor: "#ffffff",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_purple,
+      patternColor: ""
+    },
+    {
+      brandLogo: hAndm,
+      brandColor: "#ffffff",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_purple,
+      patternColor: ""
+    },
+    {
+      brandLogo: gap,
+      brandColor: "#002A5F",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: bewakoof,
+      brandColor: "#FFB819",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: nyka,
+      brandColor: "#FD2679",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: nyka,
+      brandColor: "#FD2679",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: hAndm,
+      brandColor: "#ffffff",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_purple,
+      patternColor: ""
+    },
+    {
+      brandLogo: gap,
+      brandColor: "#002A5F",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+    {
+      brandLogo: bewakoof,
+      brandColor: "#FFB819",
+      cardWorth: "10,000",
+      optifiiLogo: optifii_white,
+      patternColor: ""
+    },
+  ]
+
+  return (
+    <VStack w={"100%"} gap={5}>
+      <VStack
+        justifyContent={"space-around"}
+        alignItems={"start"}
+        p={4}
+        h={150}
+        bg={"#fff"}
+        w={"100%"}
+        rounded={"lg"}
+        shadow={"md"}
+      >
+        <HStack w={"fit-content"} p={2} rounded={"full"} bg={"#EDE5FB"}>
+          <Button
+            size={"sm"}
+            rounded={"full"}
+            bg={activeTab === "My Voucher" ? "#fff" : "transparent"}
+            color={"#6311CB"}
+            shadow={activeTab === "My Voucher" ? "md" : "none"}
+            px={6}
+            onClick={() => setActiveTab("My Voucher")}
+            _hover={{
+              bg: "#fff",
+              shadow: "md",
+            }}
+          >
+            My Voucher
+          </Button>
+          <Button
+            size={"sm"}
+            rounded={"full"}
+            bg={activeTab === "Buy Voucher" ? "#fff" : "transparent"}
+            color={"#6311CB"}
+            shadow={activeTab === "Buy Voucher" ? "md" : "none"}
+            px={6}
+            onClick={() => setActiveTab("Buy Voucher")}
+            _hover={{
+              bg: "#fff",
+              shadow: "md",
+            }}
+          >
+            Buy Voucher
+          </Button>
+        </HStack>
+
+        {activeTab === "My Voucher" ? (
+          <HStack>
+            <HStack>
+              <InputGroup rounded={"md"} size={"sm"}>
+                <InputLeftElement pointerEvents="none">
+                  <Search2Icon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  rounded={"md"}
+                  focusBorderColor="purple.500" // Border color when focused
+                  // borderColor='purple.300'        // Default border color
+                  placeholder="Type to search"
+                />
+              </InputGroup>
+              <Button
+                size={"sm"}
+                rightIcon={<ChevronDownIcon />}
+                variant={"outline"}
+                rounded={"md"}
+                fontWeight={500}
+                color={"gray.500"}
+                px={12}
+              >
+                Category
+              </Button>
+              <Button
+                size={"sm"}
+                rightIcon={<LuArrowDownWideNarrow color="#3725EA"/>}
+                variant={"outline"}
+                rounded={"md"}
+                fontWeight={500}
+                color={"gray.500"}
+                px={12}
+              >
+                Date
+              </Button>
+            </HStack>
+          </HStack>
+        ) : (
+          //   <HStack>
+          <InputGroup w={"70%"} rounded={"md"} size={"sm"}>
+            <InputLeftElement pointerEvents="none">
+              <Search2Icon color="gray.300" />
+            </InputLeftElement>
+            <Input
+              rounded={"md"}
+              focusBorderColor="purple.500" // Border color when focused
+              // borderColor='purple.300'        // Default border color
+              placeholder="Type to search"
+            />
+          </InputGroup>
+          //   </HStack>
+        )}
+      </VStack>
+
+      {activeTab === "My Voucher" ? <MyVoucher brandData={brandData} /> : <BuyVoucher />}
+    </VStack>
+  );
+};
+
+export default VouchersTab;

src/Pages/HelpAndSupport/HelpAndSupport.jsx

@@ -1,14 +1,597 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
+import React, { useState, useRef } from "react";
+import {
+  Box,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  HStack,
+  Text,
+  Input,
+  Textarea,
+  Select,
+  Button,
+  TabIndicator,
+  VStack,
+  Icon,
+  Badge,
+  useDisclosure,
+  Link,
+} from "@chakra-ui/react";
 import MiniHeader from "../../Components/MiniHeader";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { CiCalendarDate } from "react-icons/ci";
+import { HiOutlineMail } from "react-icons/hi";
+import AllTicketsModal from "../AllTicketsModal/AllTicketsModal";
 
 const HelpAndSupport = () => {
+  const [value, setValue] = useState(""); // State to store the textarea value
+  const handleInputChange = (event) => setValue(event.target.value); // Update the state with the textarea input value
+
+  const inputRef = useRef(null);
+  const handleFileUpload = () => inputRef.current.click(); // Trigger click on hidden input
+
+  // For controlling the modal
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const faqItems = [
+    { title: "How to create new account?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry' Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry'" },
+    { title: "How to reset password?", content: "Description for resetting password." },
+    { title: "How to manage expenses?", content: "Description for managing expenses." },
+    { title: "How to redeem gift cards?", content: "Description for redeeming gift cards." },
+    { title: "How to submit tickets?", content: "Description for submitting tickets." },
+  ];
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
       <MiniHeader
-        title={"Contact Us"}
+        title={"Help and Support"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
       />
+
+      {/* Ticket Creation Box */}
+      <Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} mb={4}>
+        <Text mb={2} fontWeight={"600"} fontSize={"md"}>
+          Raise a Ticket
+        </Text>
+
+        <HStack spacing={4} mb={4}>
+          {/* Subject Input */}
+          <Box w={"50%"}>
+            <Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
+              Subject
+            </Text>
+            <Input borderRadius={"md"} placeholder="Enter your subject" size="sm" />
+          </Box>
+
+          {/* Type of Issue Select */}
+          <Box w={"50%"}>
+            <Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
+              Type of Issue
+            </Text>
+            <Select placeholder="Select option" size="sm" borderRadius={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </HStack>
+
+        <HStack spacing={4}>
+          <Box w={"50%"}>
+            <Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
+              Add Screenshot
+            </Text>
+
+            <Input ref={inputRef} type="file" display="none" />
+            <Button
+              borderRadius={"md"}
+              size="sm"
+              onClick={handleFileUpload}
+              border={"1px solid #e2e8f0"}
+              w={"100%"}
+              bg="transparent"
+              color="#3725EA"
+              textDecoration={"underline"}
+              display={"flex"}
+              justifyContent={"start"}
+            >
+              Upload File
+            </Button>
+          </Box>
+
+          {/* Subtype Select */}
+          <Box w={"50%"}>
+            <Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
+              Subtype
+            </Text>
+            <Select placeholder="Select option" size="sm" borderRadius={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </HStack>
+
+        <Box mt={4}>
+          <Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
+            Summarize your issue
+          </Text>
+          <Textarea
+            value={value}
+            onChange={handleInputChange}
+            placeholder="Describe your issue here"
+            size="sm"
+            borderRadius={"md"}
+            resize={"none"}
+          />
+        </Box>
+        <Box mt={4}>
+          <PrimaryButton title={"Submit Ticket"} />
+        </Box>
+      </Box>
+
+      {/* Tabs for FAQ */}
+      <Box mt={4}>
+        <HStack spacing={4} alignItems={"baseline"}>
+          <Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} w={"50%"}>
+            <Text mb={2} fontWeight={"600"} fontSize={"md"}>
+              FAQ
+            </Text>
+            <Tabs variant="unstyled">
+              <TabList h={10} gap={4}>
+                <Tab
+                  _selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" }}
+                  py={1}
+                  px={8}
+                  borderRadius={"md"}
+                  fontWeight={"500"}
+                  fontSize={"sm"}
+                  border={"1px solid #7D7D7D"}
+                  bg="transparent"
+                  color="#7D7D7D"
+                >
+                  All
+                </Tab>
+                <Tab
+                  _selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
+                  py={1}
+                  px={4}
+                  border={"1px solid #7D7D7D"}
+                  borderRadius={"md"}
+                  fontWeight={"500"}
+                  fontSize={"sm"}
+                  color={"#7D7D7D"}
+                  bg="transparent"
+                >
+                  Expense
+                </Tab>
+                <Tab
+                  _selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
+                  py={1}
+                  px={4}
+                  border={"1px solid #7D7D7D"}
+                  borderRadius={"md"}
+                  fontWeight={"500"}
+                  fontSize={"sm"}
+                  color={"#7D7D7D"}
+                  bg="transparent"
+                >
+                  Benefits
+                </Tab>
+                <Tab
+                  _selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
+                  py={1}
+                  px={4}
+                  border={"1px solid #7D7D7D"}
+                  borderRadius={"md"}
+                  fontWeight={"500"}
+                  fontSize={"sm"}
+                  color={"#7D7D7D"}
+                  bg="transparent"
+                >
+                  Gift Cards
+                </Tab>
+              </TabList>
+
+
+              {/* Tab Panels */}
+              <TabPanels>
+                <TabPanel py={4} pl={0} pr={0}>
+                  <Accordion defaultIndex={[0]} allowMultiple>
+                    {faqItems.map((item, index) => (
+                      <AccordionItem
+                        key={index}
+                        borderTop="none"
+                        borderBottom="none"
+                      >
+                        {({ isExpanded }) => (
+                          <>
+                            <AccordionButton
+                              bg={
+                                isExpanded
+                                  ? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
+                                  : "transparent"
+                              }
+                              border={"1px solid #DCDCDC"}
+                              borderRadius={"md"}
+                              mt={2}
+                            >
+                              <Box
+                                as="span"
+                                flex="1"
+                                textAlign="left"
+                                color={"#313039"}
+                                fontWeight={500}
+                                fontSize={"sm"}
+                              >
+                                {item.title}
+                              </Box>
+                              <AccordionIcon />
+                            </AccordionButton>
+                            <AccordionPanel
+                              pb={4}
+                              bg={
+                                isExpanded
+                                  ? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
+                                  : "transparent"
+                              }
+                              borderRadius={"md"}
+                              color={"#313039"}
+                              fontWeight={500}
+                              fontSize={"xs"}
+                            >
+                              {item.content}
+                            </AccordionPanel>
+                          </>
+                        )}
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                </TabPanel>
+                <TabPanel py={4} pl={0} pr={0}>
+                  Reimbursement content
+                </TabPanel>
+                <TabPanel py={4} pl={0} pr={0}>
+                  <Accordion defaultIndex={[0]} allowMultiple>
+                    {faqItems.map((item, index) => (
+                      <AccordionItem
+                        key={index}
+                        borderTop="none"
+                        borderBottom="none"
+                      >
+                        {({ isExpanded }) => (
+                          <>
+                            <AccordionButton
+                              bg={
+                                isExpanded
+                                  ? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
+                                  : "transparent"
+                              }
+                              border={"1px solid #DCDCDC"}
+                              borderRadius={"md"}
+                              mt={2}
+                            >
+                              <Box
+                                as="span"
+                                flex="1"
+                                textAlign="left"
+                                color={"#313039"}
+                                fontWeight={500}
+                                fontSize={"sm"}
+                              >
+                                {item.title}
+                              </Box>
+                              <AccordionIcon />
+                            </AccordionButton>
+                            <AccordionPanel
+                              pb={4}
+                              bg={
+                                isExpanded
+                                  ? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
+                                  : "transparent"
+                              }
+                              borderRadius={"md"}
+                              color={"#313039"}
+                              fontWeight={500}
+                              fontSize={"xs"}
+                            >
+                              {item.content}
+                            </AccordionPanel>
+                          </>
+                        )}
+                      </AccordionItem>
+                    ))}
+                  </Accordion>
+                </TabPanel>
+                <TabPanel py={4} pl={0} pr={0}>
+                  Reimbursement content
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Box>
+
+          <Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} w={"50%"}>
+            <Text mb={3} fontWeight={"600"} fontSize={"md"}>
+              All Tickets
+            </Text>
+            <HStack>
+              <Text
+                color={"#667085"}
+                fontSize={"xs"}
+                mb={0}
+                fontWeight={500}
+              >
+                Date
+              </Text>
+              <Icon as={CiCalendarDate} color="#5E0FCD" w={4} h={4} />
+            </HStack>
+            <HStack alignItems={"baseline"}>
+              <Box>
+                <Tabs position='relative' variant='unstyled'>
+                  <TabList justifyContent={"end"}>
+                    <Tab
+                      color={"#313039"}
+                      fontSize={"sm"}
+                      fontWeight={500}
+                      _selected={{
+                        color: "#5E0FCD",
+                      }}
+                    >
+                      In Progress
+                    </Tab>
+                    <Tab
+                      color={"#313039"}
+                      fontSize={"sm"}
+                      fontWeight={500}
+                      _selected={{
+                        color: "#5E0FCD",
+                      }}
+                    >
+                      Completed
+                    </Tab>
+                    <Tab
+                      color={"#313039"}
+                      fontSize={"sm"}
+                      fontWeight={500}
+                      _selected={{
+                        color: "#5E0FCD",
+                      }}
+                    >
+                      Terminated
+                    </Tab>
+                  </TabList>
+                  <TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
+                  <TabPanels>
+                    <TabPanel px={0} py={4}>
+                      <Box
+                        p={4}
+                        borderWidth="1px"
+                        borderRadius="lg"
+                        boxShadow="sm"
+                        borderColor="#EDEDED"
+                        maxW="600px"
+                        mx="auto"
+                      >
+                        <Box>
+                          <Box>
+                            <HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
+                              <Text color="#667085"
+                                fontSize="xs"
+                                fontWeight="500"
+                                mb={0}
+                                onClick={onOpen}
+                                cursor={"pointer"}>
+                                TA-97868
+                              </Text>
+                              <Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
+                            </HStack>
+                            <Box>
+                              <HStack>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  App loading issue
+                                </Text>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  {" "}
+                                  &#x276F; Lorem ipsum dolor
+                                </Text>
+                                <Text color="#858585" fontSize="xs" mb={2}>
+                                  17 Jan 2023
+                                </Text>
+                              </HStack>
+                              <HStack>
+                                <Text fontSize="xs" color="#667085">
+                                  Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+                                  Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+                                  sollicitudin, ultrices quam eget, dapibus elit.
+                                </Text>
+                                <Badge
+                                  bg={"#FCF8E9"}
+                                  color="#E5C862"
+                                  border={"1px solid #E5C862"}
+                                  px={1}
+                                  py={2}
+                                  borderRadius="full"
+                                  fontSize="xs"
+                                  fontWeight="500"
+                                >
+                                  In Progress
+                                </Badge>
+                              </HStack>
+                            </Box>
+                          </Box>
+
+                        </Box>
+                      </Box>
+                    </TabPanel>
+                    <TabPanel px={0} py={4}>
+                      <Box
+                        p={4}
+                        borderWidth="1px"
+                        borderRadius="lg"
+                        boxShadow="sm"
+                        borderColor="#EDEDED"
+                        maxW="600px"
+                        mx="auto"
+                      >
+                        <Box>
+                          <Box>
+                            <HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
+                              <Text color="#667085"
+                                fontSize="xs"
+                                fontWeight="500"
+                                mb={0}
+                                onClick={onOpen}
+                                cursor={"pointer"}>
+                                TA-97868
+                              </Text>
+                              <Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
+                            </HStack>
+                            <Box>
+                              <HStack>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  App loading issue
+                                </Text>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  {" "}
+                                  &#x276F; Lorem ipsum dolor
+                                </Text>
+                                <Text color="#858585" fontSize="xs" mb={2}>
+                                  17 Jan 2023
+                                </Text>
+                              </HStack>
+                              <HStack>
+                                <Text fontSize="xs" color="#667085">
+                                  Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+                                  Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+                                  sollicitudin, ultrices quam eget, dapibus elit.
+                                </Text>
+                                <Badge
+                                  bg={"#E0FFE5"}
+                                  color="#159F2B"
+                                  border={"1px solid #159F2B"}
+                                  px={1}
+                                  py={2}
+                                  borderRadius="full"
+                                  fontSize="xs"
+                                  fontWeight="500"
+                                >
+                                  Completed
+                                </Badge>
+                              </HStack>
+                            </Box>
+                          </Box>
+
+                        </Box>
+                      </Box>
+                    </TabPanel>
+                    <TabPanel px={0} py={4}>
+                      <Box
+                        p={4}
+                        borderWidth="1px"
+                        borderRadius="lg"
+                        boxShadow="sm"
+                        borderColor="#EDEDED"
+                        maxW="600px"
+                        mx="auto"
+                      >
+                        <Box>
+                          <Box>
+                            <HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
+                              <Text color="#667085"
+                                fontSize="xs"
+                                fontWeight="500"
+                                mb={0}
+                                onClick={onOpen}
+                                cursor={"pointer"}>
+                                TA-97868
+                              </Text>
+                              <Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
+                            </HStack>
+                            <Box>
+                              <HStack>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  App loading issue
+                                </Text>
+                                <Text
+                                  fontWeight="500"
+                                  fontSize="sm"
+                                  color="#363636"
+                                  mb={2}
+                                >
+                                  {" "}
+                                  &#x276F; Lorem ipsum dolor
+                                </Text>
+                                <Text color="#858585" fontSize="xs" mb={2}>
+                                  17 Jan 2023
+                                </Text>
+                              </HStack>
+                              <HStack>
+                                <Text fontSize="xs" color="#667085">
+                                  Aenean et elit vehicula, aliquet libero vitae, tempus massa.
+                                  Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
+                                  sollicitudin, ultrices quam eget, dapibus elit.
+                                </Text>
+                                <Badge
+                                  bg={"#FFD8D8"}
+                                  color="#D40202"
+                                  border={"1px solid #D40202"}
+                                  px={1}
+                                  py={2}
+                                  borderRadius="full"
+                                  fontSize="xs"
+                                  fontWeight="500"
+                                >
+                                  Terminated
+                                </Badge>
+                              </HStack>
+                            </Box>
+                          </Box>
+
+                        </Box>
+                      </Box>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </Box>
+            </HStack>
+          </Box>
+        </HStack>
+      </Box>
+      {/* Include the Notifications modal */}
+      <AllTicketsModal isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };

src/Pages/Home/Home.jsx

@@ -0,0 +1,368 @@
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import { Box, Divider, HStack, Text, VStack } from "@chakra-ui/layout";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import RupayCard from "../../Components/PayCards/RupayCard";
+import Platinium from "../../Components/PayCards/Platinium";
+import PlatiniumGift from "../../Components/PayCards/PlatiniumGift";
+import { HiOutlineCreditCard } from "react-icons/hi2";
+import { Progress } from "@chakra-ui/progress";
+import { Icon } from "@chakra-ui/icon";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+import { Select } from "@chakra-ui/react";
+import BarChart from "../../Components/Doughnut/BarCharts";
+import { BiWalletAlt } from "react-icons/bi";
+import { MdOutlineRamenDining } from "react-icons/md";
+import {
+  Button,
+  Radio,
+  Tag,
+  TagLabel,
+  useDisclosure,
+} from "@chakra-ui/react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiScrollLight } from "react-icons/pi";
+import { useNavigate } from "react-router-dom";
+
+
+const Home = () => {
+
+  const { reportsHistoryMini } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Name",
+    "Last Update",
+    "Report type",
+    "Total Expense",
+    "Status",
+  ];
+
+
+
+  const extractedArray = reportsHistoryMini.map((item, index) => ({
+    Name: <HStack>
+      <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
+
+      <Box>
+        <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+          {item?.name}
+        </Text>
+        <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+          {item?.reportFor}
+        </Text>
+      </Box>
+    </HStack>
+    ,
+    "Last Update":
+      item?.lastUpdated,
+    "Report type": item?.reportType,
+    "Total Expense": item?.totalExpense,
+    Status: (
+      <Tag
+        my={1}
+        size="sm"
+        borderRadius="full"
+        color={item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}
+        border={`1px solid ${item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}`}
+        bg={item?.status === "Approved" ? "green.100" : item?.status === "Rejected" ? "red.100" : "gray.100"}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.status}</TagLabel>
+      </Tag>
+
+    ),
+
+  }));
+
+  const transactions = [
+    {
+      id: 1,
+      type: 'Dine In',
+      icon: BiWalletAlt,
+      date: '22 March 2024 - 01:12 PM',
+      amount: '+ $500',
+      color: 'green.500',
+    },
+    {
+      id: 2,
+      type: 'Takeaway',
+      icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+      date: '21 March 2024 - 05:45 PM',
+      amount: '+ $200',
+      color: 'green.500',
+    },
+    {
+      id: 3,
+      type: 'Delivery',
+      icon: BiWalletAlt, // Replace with appropriate icon if needed
+      date: '20 March 2024 - 11:30 AM',
+      amount: '- $50',
+      color: 'red.500',
+    },
+    {
+      id: 3,
+      type: 'Delivery',
+      icon: BiWalletAlt, // Replace with appropriate icon if needed
+      date: '20 March 2024 - 11:30 AM',
+      amount: '- $50',
+      color: 'red.500',
+    },
+    {
+      id: 2,
+      type: 'Takeaway',
+      icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
+      date: '21 March 2024 - 05:45 PM',
+      amount: '+ $200',
+      color: 'green.500',
+    },
+    // Add more objects as needed
+  ];
+
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
+      <MiniHeader
+        title={"Welcome Kartikey!"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+
+      <Box>
+        <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
+          <VStack
+            gap={4}
+            height={"100%"}
+            justifyContent={"space-between"}
+            p={0}
+            flexGrow={1}
+          >
+            {/* ==================[ Balance Available ]=============== */}
+            <VStack
+              w={"100%"}
+              p={4}
+              bg={"#fff"}
+              h={"65%"}
+              shadow={"md"}
+              rounded={"lg"}
+            >
+              <VStack
+                w={"100%"}
+                alignItems={"start"}
+                justifyContent={"space-between"}
+                h={"100%"}
+              >
+                <HStack alignSelf={"start"} bg={"#F3F3F9"} p={2} rounded={"md"}>
+                  <Text
+                    bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+                    bgClip="text"
+                    as="span"
+                    fontSize={"sm"}
+                    fontWeight={500}
+                  >
+                    Balance Available
+                  </Text>
+                  <Text
+                    color={"gray.800"}
+                    as="span"
+                    fontSize={"sm"}
+                    fontWeight={500}
+                  >
+                    {" "}
+                    $ 1,00,000
+                  </Text>
+                </HStack>
+
+                <HStack w={"100%"} justifyContent={"space-between"}>
+                  <VStack alignItems={"start"} gap={0}>
+                    <Text
+                      fontWeight={500}
+                      as={"span"}
+                      fontSize={"xs"}
+                      color={"gray.500"}
+                    >
+                      Spend
+                    </Text>
+                    <Text fontWeight={500} as={"span"} fontSize={"sm"}>
+                      $ 50,000
+                    </Text>
+                  </VStack>
+
+                  <VStack alignItems={"end"} gap={0}>
+                    <Text
+                      fontWeight={500}
+                      as={"span"}
+                      fontSize={"xs"}
+                      color={"gray.500"}
+                    >
+                      Money in wallet
+                    </Text>
+                    <Text fontWeight={500} as={"span"} fontSize={"sm"}>
+                      $ 50,000
+                    </Text>
+                  </VStack>
+                </HStack>
+
+                <Progress
+                  w={"100%"}
+                  sx={{
+                    "& > div": {
+                      backgroundImage: "linear-gradient(90deg, #6311CB, #a71c71)",
+                    },
+                  }}
+                  rounded={"full"}
+                  size="sm"
+                  value={80}
+                />
+
+                <HStack w={"100%"} justifyContent={"end"}>
+                  <Text color={"gray.500"} fontSize={"sm"} fontWeight={500}>
+                    80%
+                  </Text>
+                </HStack>
+              </VStack>
+            </VStack>
+
+            {/* ==================[ Apply for physical card ]=============== */}
+            <HStack
+              border={"1px solid #3725EA"}
+              bg={"#F8F2FF"}
+              h={"35%"}
+              w={"100%"}
+              shadow={"md"}
+              rounded={"lg"}
+              p={3}
+              justifyContent={"space-evenly"}
+            >
+              <Icon
+                boxSize={12}
+                p={2.5}
+                backgroundImage="linear-gradient(to left, #5E0FCD, #3725EA)"
+                color={"#fff"}
+                rounded={"full"}
+                as={HiOutlineCreditCard}
+              />
+              <VStack gap={0} alignItems={"start"} w={290} px={2}>
+                <Text as={"span"} fontWeight={500} fontSize={"md"}>
+                  Apply for physical card
+                </Text>
+                <Text as={"span"} color={"gray.500"} fontSize={"xs"}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </Text>
+              </VStack>
+
+              <Icon
+                boxSize={7}
+                p={1}
+                border={"1px solid #3725EA"}
+                color={"#3725EA"}
+                rounded={"full"}
+                as={ArrowForwardIcon}
+              />
+            </HStack>
+          </VStack>
+
+          {/* ==================[ Pay Cards ]=============== */}
+          <Platinium />
+          <RupayCard />
+          <PlatiniumGift />
+        </HStack>
+      </Box>
+
+      <HStack alignItems={"start"} spacing={4}>
+
+        <Box flex={1} rounded={"md"} mb={4} p={4} bg={"#fff"}>
+          <HStack justifyContent={"space-between"}>
+            <Text as={"span"} fontSize={"md"} fontWeight={600}>
+              Wallet history
+            </Text>
+            <HStack>
+              <Select placeholder="Monthly" size={"sm"} rounded={"md"}>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </Select>
+            </HStack>
+          </HStack>
+          <BarChart />
+        </Box>
+
+        <Box w={"35%"} h={400} rounded={"md"} mb={4} p={4} bg={"#fff"}>
+          <HStack justifyContent={"space-between"}>
+            <Text as={"span"} fontSize={"md"} fontWeight={600}>
+              Wallet history
+            </Text>
+            <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"}>
+              See All
+            </Text>
+          </HStack>
+          <Box>
+            <VStack pt={3}>
+              {transactions?.map(({ id, type, icon, date, amount, color }) => <HStack id={id} bg={''} mb={2} alignItems={'center'} w={'100%'} justifyContent={'space-between'}>
+                <HStack  >
+                  <Icon color={'gray.800'} boxSize={10} rounded={'full'} p={2} bg={'#F6F6F6'} as={icon} />
+
+                  <VStack alignItems={'start'} gap={0}>
+                    <Text as={'span'} fontWeight={500} fontSize={'sm'} >{type}</Text>
+                    <Text as={'span'} fontWeight={500} color={'gray.500'} fontSize={'xs'} >{date}</Text>
+                  </VStack>
+                </HStack>
+
+                <Text me={2} fontSize={'sm'} fontWeight={500} as={'span'} color={color}>{amount}</Text>
+
+              </HStack>)}
+            </VStack>
+          </Box>
+        </Box>
+
+      </HStack>
+
+      <Box
+        rounded={"md"}
+        p={4}
+        bg={"#fff"}
+        shadow={"md"}
+      >
+        <HStack justifyContent={"space-between"} mb={4}>
+          <Text fontSize={"lg"} fontWeight={600} mb={0}>
+            Reports
+          </Text>
+          <Text
+            onClick={() => navigate("/reports/history")}
+            as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"} cursor={"pointer"}>
+            See All
+          </Text>
+        </HStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+
+    </Box>
+  );
+};
+
+export default Home;

src/Pages/Login.jsx

@@ -1,16 +1,10 @@
 import { useNavigate } from "react-router-dom";
-import Input01 from "../Components/Inputs/Input01";
 import logo from "../assets/optifii_logo.png";
 import { useDispatch, useSelector } from "react-redux";
-import { loginUser } from "../Redux/Slice/auth";
 import { useContext, useEffect, useState } from "react";
-import Button01 from "../Components/Buttons/Button01";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import { TiWarning } from "react-icons/ti";
-import Loader01 from "../Components/Loaders/Loader01";
-import Asset1 from "../assets/asset1.png";
-import Asset2 from "../assets/asset2.png";
 import {
   Box,
   Button,
@@ -69,7 +63,7 @@ const Login = () => {
         // dispatch(loginUser(true));
         setIsAuthenticate(true);
         setIsLoading(false);
-        toast({
+        toast({ 
           // position: "bottom-left",
           render: () => (
             <ToastBox status={"success"} message={"Login Successfully"} />

src/Pages/Notifications/Notifications.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+    Text,
+    Box,
+    HStack,
+    Icon,
+} from '@chakra-ui/react';
+import { FaRegUser } from "react-icons/fa";
+
+// data for notifications
+const notifications = [
+    { id: 1, title: "Notification 1", description: "Description for notification 1", time: "10:00 AM" },
+    { id: 2, title: "Notification 2", description: "Description for notification 2", time: "10:30 AM" },
+    { id: 3, title: "Notification 3", description: "Description for notification 3", time: "11:00 AM" },
+    { id: 4, title: "Notification 4", description: "Description for notification 4", time: "11:30 AM" },
+];
+
+const Notifications = ({ isOpen, onClose }) => {
+
+    return (
+        <Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>Notifications</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody px={0} pt={2} pb={6}>
+                    {notifications.map((notification) => (
+                        <Box
+                            key={notification.id}
+                            display={"flex"}
+                            justifyContent={"space-between"}
+                            px={4}
+                            py={2}
+                            _hover={{ backgroundColor: "#DFDCFF" }}
+                            transition={"background-color 0.3s ease"}
+                        >
+                            <HStack w={"85%"}>
+                                <Box
+                                    py={2}
+                                    px={2}
+                                    bg={"linear-gradient(180deg, #6211CB 0%, #C33FAD 100%)"}
+                                    borderRadius={"full"}
+                                    display={"flex"}
+                                    alignItems={"center"}
+                                    justifyContent={"center"}
+                                >
+                                    <Icon color={"#fff"} as={FaRegUser} />
+                                </Box>
+
+                                <Box>
+                                    <Text
+                                        fontSize={"sm"}
+                                        fontWeight={600}
+                                        mb={0}
+                                    >
+                                        {notification.title}
+                                    </Text>
+                                    <Text
+                                        fontSize={"xs"}
+                                        fontWeight={500}
+                                        mb={0}
+                                        color={"#868686"}
+                                    >
+                                        {notification.description}
+                                    </Text>
+                                </Box>
+                            </HStack>
+                            <Box>
+                                <Text
+                                    fontSize={"xs"}
+                                    fontWeight={600}
+                                    mb={0}
+                                >
+                                    {notification.time}
+                                </Text>
+                            </Box>
+                        </Box>
+                    ))}
+                </ModalBody>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export default Notifications;

src/Pages/Onboarding/Footer.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Box, Text, HStack, VStack, Link, Image, Divider, Stack, Container } from '@chakra-ui/react';
+import o_logo from '../../assets/o_logo.svg';
+import { FaDribbble, FaLinkedinIn } from "react-icons/fa";
+import { GrInstagram } from "react-icons/gr";
+
+const Footer = () => {
+    return (
+        <Box
+            bgGradient="linear-gradient(96.4deg, #C33FAD -20.43%, #3725EA 43.23%, #6311CB 103.29%)"
+            py={6}
+            color="#fff"
+        >
+            <Container maxW='container.xl' py={2}>
+                <Stack
+                    direction={{ base: 'column', md: 'row' }}
+                    justifyContent={"space-between"}
+                    align="start"
+                   
+                >
+                    {/* Left Section */}
+                    <HStack align="start" spacing={4}>
+                        <Image src={o_logo} alt="Optifii Logo" />
+                        <Text fontSize="xxl" fontWeight="500">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing <br /> elit. Ut et massa mi.
+                        </Text>
+                    </HStack>
+
+                    {/* Center Navigation */}
+                    <HStack spacing={16} alignItems={"start"}>
+                        <VStack align="start">
+                            <Link fontSize={"sm"} fontWeight={500}>Home</Link>
+                            <Link fontSize={"sm"} fontWeight={500}>About Us</Link>
+                            <Link fontSize={"sm"} fontWeight={500}>Products</Link>
+                            <Link fontSize={"sm"} fontWeight={500}>Solutions</Link>
+                            <Link fontSize={"sm"} fontWeight={500}>Resources</Link>
+                        </VStack>
+
+                        {/* Address & Contact */}
+                        <VStack align="start">
+                            <Text mb={1} fontSize={"sm"} fontWeight={500}>Address</Text>
+                            <Text mb={0} fontSize={"xs"}>Piazza Santa Maria in Via Lata 16128 Genova, Italy <br /> <Link textDecoration={"underline"}>Get Directions</Link></Text>
+
+                            <Text mb={0} fontSize={"sm"} fontWeight={500}>Contact</Text>
+                            <Text mb={0} fontSize={"xs"}>7851251259</Text>
+                            <Text mb={0} fontSize={"xs"}>optifii@gmail.com</Text>
+                        </VStack>
+                    </HStack>
+
+                    {/* Social Links */}
+                    <VStack align="start" >
+                        <Text mb={1} fontSize={"sm"}>Social</Text>
+                        <HStack>
+                            <FaDribbble size={14} />
+                            <Link href="#" fontSize={"xs"}>Dribble</Link>
+                        </HStack>
+                        <HStack>
+                            <FaLinkedinIn size={14} />
+                            <Link href="#" fontSize={"xs"}>LinkedIn</Link>
+                        </HStack>
+                        <HStack>
+                            <GrInstagram size={14} />
+                            <Link href="#" fontSize={"xs"}>Instagram</Link>
+                        </HStack>
+                    </VStack>
+                </Stack>
+            </Container>
+            <Divider mt={6} />
+            <Container maxW='container.xl'>
+                {/* Footer Bottom */}
+                <HStack justify="start" pt={2} spacing={6}
+                  
+                >
+                    <Text fontSize="sm" mb={0}>All rights reserved.</Text>
+                    <Link fontSize="sm" href="#">Privacy Policy</Link>
+                    <Link fontSize="sm" href="#">Terms & Conditions</Link>
+                </HStack>
+            </Container>
+        </Box>
+    );
+};
+
+export default Footer;

src/Pages/Onboarding/FullKyc.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import FullKycFrame from './FullKycFrame';
+import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import { useNavigate } from 'react-router-dom';
+import { ChevronRightIcon } from '@chakra-ui/icons';
+
+const FullKyc = () => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    const navigate = useNavigate();
+
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 0,
+        count: steps.length,
+    });
+
+    return (
+        <FullKycFrame>
+            <Container maxW={'container.xl'}>
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} display={'flex'} justifyContent={'center'}>
+                        <Box maxW={700}>
+                            <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                                Full KYC
+                            </Text>
+
+                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                            </Text>
+
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#ddd',
+                                        }}
+
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"}>
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'normal' : 'normal'}
+                                                color={index === activeStep ? 'gray.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+                            <Box mt={10}>
+                                <Text fontWeight={600} fontSize={'md'} textAlign={'center'} mb={1}>
+                                    Instructions to be followed
+                                </Text>
+                                <Text fontWeight={500} fontSize={'xs'} textAlign={'center'} color={"#3F3F3F"}>
+                                    Build trust by verifying your identity
+                                </Text>
+
+                                <Box mt={8}>
+                                    <List spacing={3}>
+                                        <ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
+                                            <ListIcon as={ChevronRightIcon} color='#1E1E1E' />
+                                            <Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
+                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                                            </Text>
+                                        </ListItem>
+                                        <ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
+                                            <ListIcon as={ChevronRightIcon} color='#1E1E1E' />
+                                            <Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
+                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                                            </Text>
+                                        </ListItem>
+                                        <ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
+                                            <ListIcon as={ChevronRightIcon} color='#1E1E1E' />
+                                            <Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
+                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                                            </Text>
+                                        </ListItem>
+                                        <ListItem display={"flex"} alignItems={"start"} justifyContent={"center"}>
+                                            <ListIcon as={ChevronRightIcon} color='#1E1E1E' />
+                                            <Text fontWeight={500} fontSize={'xs'} color={"#373434"}>
+                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                                            </Text>
+                                        </ListItem>
+                                    </List>
+                                </Box>
+
+                                <Box mt={10}>
+                                    <HStack justifyContent={'center'} mt={6}>
+                                        <PrimaryButton
+                                            onClick={() => navigate("/full-kyc-location")}
+                                            w={'300px'}
+                                            title={'Proceed'}
+                                        />
+                                    </HStack>
+                                </Box>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </FullKycFrame>
+    );
+};
+
+export default FullKyc;

src/Pages/Onboarding/FullKycAadharVerification.jsx

@@ -0,0 +1,79 @@
+import React, { useState, useCallback } from 'react';
+import FullKycAadharVerificationFrame from './FullKycAadharVerificationFrame';
+import { Box, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import { SlCloudUpload } from "react-icons/sl";
+import { useDropzone } from 'react-dropzone';
+
+const FullKycAadharVerification = () => {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const navigate = useNavigate();
+
+    // Dropzone setup
+    const onDrop = useCallback((acceptedFiles) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            setSelectedImage(URL.createObjectURL(file));
+        }
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: 'image/*',
+    });
+
+    return (
+        <FullKycAadharVerificationFrame>
+            <Box bg={"#F8F3FF"} borderRadius={"md"} p={4}>
+                <Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
+                    Upload Aadhar Card
+                </Text>
+
+                <Text color={'#49475A'} fontWeight={500} fontSize={'xs'} mb={2}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                </Text>
+
+                <Box my={2} h={300} p={4}>
+                    <VStack
+                        {...getRootProps()}
+                        border={"1px dashed #100F14"}
+                        boxShadow={"md"}
+                        borderRadius={"md"}
+                        bg={"#fff"}
+                        p={4}
+                        h={"280px"}
+                        justifyContent={"center"}
+                        cursor="pointer"
+                    >
+                        <input {...getInputProps()} />
+                        {selectedImage ? (
+                            <Image src={selectedImage} alt="Uploaded Aadhar" maxH="240px" objectFit="cover" />
+                        ) : (
+                            <>
+                                <SlCloudUpload color={"#6311CB"} size={100} />
+                                <Text
+                                    color={"#6311CB"}
+                                    fontWeight={"600"}
+                                    fontSize={"sm"}
+                                    mt={'4'}
+                                    mb={0}
+                                >
+                                    {isDragActive ? 'Drop the image here...' : 'Upload from gallery'}
+                                </Text>
+                            </>
+                        )}
+                    </VStack>
+                </Box>
+            </Box>
+
+            <HStack justifyContent={"center"} mt={4}>
+                <PrimaryButton title={"Next"}
+                onClick={()=> navigate("/full-kyc-pan-verification")}
+                 w={"80%"} />
+            </HStack>
+        </FullKycAadharVerificationFrame>
+    );
+};
+
+export default FullKycAadharVerification;

src/Pages/Onboarding/FullKycAadharVerificationFrame.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import { BiSolidMicrophone } from "react-icons/bi";
+import { MdVideocam } from "react-icons/md";
+import { MdCallEnd } from "react-icons/md";
+import call_first from "../../assets/call_first.svg"
+import call_sec from "../../assets/call_sec.svg"
+
+const FullKycAadharVerificationFrame = ({ children }) => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 3,
+        count: steps.length,
+    });
+
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} >
+                        <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                            Full KYC
+                        </Text>
+
+                        <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                        </Text>
+                        <Box>
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#6311CB',
+                                        }}
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"} >
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'bold' : 'normal'}
+                                                color={index === activeStep ? 'purple.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+
+                            <Box>
+                                <HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
+                                    <Box mb={4} w={"35%"}>
+                                        <HStack spacing={4}>
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_first}
+                                                alt='Dan Abramov'
+                                            />
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_sec}
+                                                alt='Dan Abramov'
+                                            />
+                                        </HStack>
+                                        <Box mt={4} w={"52%"}>
+                                            <HStack
+                                                bg={"#484848"}
+                                                borderRadius={"full"}
+                                                py={2}
+                                                px={2}
+                                                spacing={4}
+                                                justifyContent={"center"}
+                                            >
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <BiSolidMicrophone color="white" size="14px" />
+                                                </Box>
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdVideocam color="white" size="14px" />
+                                                </Box>
+                                                <HStack
+                                                    bg="rgba(237, 12, 12, 0.68)"
+                                                    py="1"
+                                                    px={2}
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdCallEnd color="white" size="14px" />
+                                                    <Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
+                                                </HStack>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+
+                                    <Box
+                                        w={"62%"}
+                                    >
+                                        {children}
+                                    </Box>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycAadharVerificationFrame

src/Pages/Onboarding/FullKycFaceVerification.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import FullKycFaceVerificationFrame from './FullKycFaceVerificationFrame';
+import { Box, HStack, Image, Input, Text } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import face_verification from '../../assets/face_verification.svg'
+
+
+const FullKycFaceVerification = () => {
+
+    const navigate = useNavigate();
+
+    return (
+        <FullKycFaceVerificationFrame>
+            <Box
+                bg={"#F8F3FF"}
+                borderRadius={"md"}
+                p={4}
+            >
+                <Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
+                    Position your face in the oval
+                </Text>
+
+                <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}  mb={2}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                </Text>
+
+                <Box my={2} boxSize="xxl" p={4}>
+                    <Image src={face_verification} width="100%" alt="Face Verification" />
+                </Box>
+
+            </Box>
+            <HStack justifyContent={"center"} mt={4} >
+                <PrimaryButton title={"Next"}
+                     onClick={()=> navigate("/full-kyc-aadhar-verification")}
+                    w={"80%"} />
+            </HStack>
+
+        </FullKycFaceVerificationFrame>
+    );
+};
+
+export default FullKycFaceVerification;

src/Pages/Onboarding/FullKycFaceVerificationFrame.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import { BiSolidMicrophone } from "react-icons/bi";
+import { MdVideocam } from "react-icons/md";
+import { MdCallEnd } from "react-icons/md";
+import call_first from "../../assets/call_first.svg"
+import call_sec from "../../assets/call_sec.svg"
+
+const FullKycFaceVerificationFrame = ({ children }) => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 2,
+        count: steps.length,
+    });
+
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} >
+                        <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                            Full KYC
+                        </Text>
+
+                        <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                        </Text>
+                        <Box>
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#6311CB',
+                                        }}
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"} >
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'bold' : 'normal'}
+                                                color={index === activeStep ? 'purple.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+
+                            <Box>
+                                <HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
+                                    <Box mb={4} w={"35%"}>
+                                        <HStack spacing={4}>
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_first}
+                                                alt='Dan Abramov'
+                                            />
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_sec}
+                                                alt='Dan Abramov'
+                                            />
+                                        </HStack>
+                                        <Box mt={4} w={"52%"}>
+                                            <HStack
+                                                bg={"#484848"}
+                                                borderRadius={"full"}
+                                                py={2}
+                                                px={2}
+                                                spacing={4}
+                                                justifyContent={"center"}
+                                            >
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <BiSolidMicrophone color="white" size="14px" />
+                                                </Box>
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdVideocam color="white" size="14px" />
+                                                </Box>
+                                                <HStack
+                                                    bg="rgba(237, 12, 12, 0.68)"
+                                                    py="1"
+                                                    px={2}
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdCallEnd color="white" size="14px" />
+                                                    <Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
+                                                </HStack>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+
+                                    <Box
+                                        w={"62%"}
+                                    >
+                                        {children}
+                                    </Box>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycFaceVerificationFrame

src/Pages/Onboarding/FullKycFrame.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+import {
+    Box,
+} from "@chakra-ui/react";
+import Header from './Header';
+import Footer from './Footer';
+
+const FullKycFrame = ({ children }) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycFrame

src/Pages/Onboarding/FullKycLocation.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import FullKycLocationFrame from './FullKycLocationFrame';
+import { Box, Container, HStack, Text } from '@chakra-ui/react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useNavigate } from 'react-router-dom';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+
+
+// Custom icon for marker (optional)
+const locationIcon = new L.Icon({
+    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+});
+
+const FullKycLocation = () => {
+    const navigate = useNavigate();
+
+    return (
+        <FullKycLocationFrame>
+            <Box
+                bg={"#F8F3FF"}
+                borderRadius={"md"}
+                p={4}
+            >
+                <Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
+                    Location Verification
+                </Text>
+
+                <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                </Text>
+
+                <Box my={2} height="300px">
+                    {/* Map Container */}
+                    <MapContainer
+                        center={[51.505, -0.09]}
+                        zoom={18}
+                        style={{ height: '100%', width: '100%', borderRadius: '6px' }}
+                    >
+                        <TileLayer
+                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                            attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+                        />
+                        <Marker position={[51.505, -0.09]} icon={locationIcon}>
+                            <Popup>Your Location</Popup>
+                        </Marker>
+                    </MapContainer>
+                </Box>
+            </Box>
+            <HStack justifyContent={"center"} mt={4} >
+                <PrimaryButton title={"Next"} 
+                onClick={()=> navigate("/full-kyc-q&a")}
+                w={"80%"}
+                 />
+            </HStack>
+
+        </FullKycLocationFrame>
+    );
+};
+
+export default FullKycLocation;

src/Pages/Onboarding/FullKycLocationFrame.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import { BiSolidMicrophone } from "react-icons/bi";
+import { MdVideocam } from "react-icons/md";
+import { MdCallEnd } from "react-icons/md";
+import call_first from "../../assets/call_first.svg"
+import call_sec from "../../assets/call_sec.svg"
+
+const FullKycLocationFrame = ({ children }) => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 0,
+        count: steps.length,
+    });
+
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} >
+                        <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                            Full KYC
+                        </Text>
+
+                        <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                        </Text>
+                        <Box>
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#6311CB',
+                                        }}
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"} >
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'bold' : 'normal'}
+                                                color={index === activeStep ? 'purple.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+
+                            <Box>
+                                <HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
+                                    <Box mb={4} w={"35%"}>
+                                        <HStack spacing={4}>
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_first}
+                                                alt='Dan Abramov'
+                                            />
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_sec}
+                                                alt='Dan Abramov'
+                                            />
+                                        </HStack>
+                                        <Box mt={4} w={"52%"}>
+                                            <HStack
+                                                bg={"#484848"}
+                                                borderRadius={"full"}
+                                                py={2}
+                                                px={2}
+                                                spacing={4}
+                                                justifyContent={"center"}
+                                            >
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <BiSolidMicrophone color="white" size="14px" />
+                                                </Box>
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdVideocam color="white" size="14px" />
+                                                </Box>
+                                                <HStack
+                                                    bg="rgba(237, 12, 12, 0.68)"
+                                                    py="1"
+                                                    px={2}
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdCallEnd color="white" size="14px" />
+                                                    <Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
+                                                </HStack>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+
+                                    <Box
+                                        w={"62%"}
+                                    >
+                                        {children}
+                                    </Box>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycLocationFrame

src/Pages/Onboarding/FullKycPanVerification.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useCallback } from 'react';
+import FullKycPanVerificationFrame from './FullKycPanVerificationFrame';
+import {
+    Box, HStack, Image, Text, VStack, useDisclosure,
+} from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import { SlCloudUpload } from "react-icons/sl";
+import { useDropzone } from 'react-dropzone';
+// import SuccessModal from '../../Components/SuccessPendingModal/SuccessModal';
+import PendingModal from '../../Components/SuccessPendingModal/PendingModal';
+
+const FullKycPanVerification = () => {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const navigate = useNavigate();
+
+    // Dropzone setup
+    const onDrop = useCallback((acceptedFiles) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            setSelectedImage(URL.createObjectURL(file));
+        }
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: 'image/*',
+    });
+
+    return (
+        <>
+            <FullKycPanVerificationFrame>
+                <Box bg={"#F8F3FF"} borderRadius={"md"} p={4}>
+                    <Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
+                        Upload PAN Card
+                    </Text>
+
+                    <Text color={'#49475A'} fontWeight={500} fontSize={'xs'} mb={2}>
+                        Please upload a clear image of your PAN card.
+                    </Text>
+
+                    <Box my={2} h={300} p={4}>
+                        <VStack
+                            {...getRootProps()}
+                            border={"1px dashed #100F14"}
+                            boxShadow={"md"}
+                            borderRadius={"md"}
+                            bg={"#fff"}
+                            p={4}
+                            h={"280px"}
+                            justifyContent={"center"}
+                            cursor="pointer"
+                        >
+                            <input {...getInputProps()} />
+                            {selectedImage ? (
+                                <Image src={selectedImage} alt="Uploaded PAN Card" maxH="240px" objectFit="cover" />
+                            ) : (
+                                <>
+                                    <SlCloudUpload color={"#6311CB"} size={100} />
+                                    <Text
+                                        color={"#6311CB"}
+                                        fontWeight={"600"}
+                                        fontSize={"sm"}
+                                        mt={'4'}
+                                        mb={0}
+                                    >
+                                        {isDragActive ? 'Drop the image here...' : 'Upload from gallery'}
+                                    </Text>
+                                </>
+                            )}
+                        </VStack>
+                    </Box>
+                </Box>
+
+                <HStack justifyContent={"center"} mt={4}>
+                    <PrimaryButton title={"Next"} w={"80%"} onClick={onOpen} /> 
+                </HStack>
+            </FullKycPanVerificationFrame>
+
+            {/* Success modal */}
+            <PendingModal isOpen={isOpen} onClose={onClose} /> 
+        </>
+    );
+};
+
+export default FullKycPanVerification;

src/Pages/Onboarding/FullKycPanVerificationFrame.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import { BiSolidMicrophone } from "react-icons/bi";
+import { MdVideocam } from "react-icons/md";
+import { MdCallEnd } from "react-icons/md";
+import call_first from "../../assets/call_first.svg"
+import call_sec from "../../assets/call_sec.svg"
+
+const FullKycPanVerificationFrame = ({ children }) => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 4,
+        count: steps.length,
+    });
+
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} >
+                        <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                            Full KYC
+                        </Text>
+
+                        <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                        </Text>
+                        <Box>
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#6311CB',
+                                        }}
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"} >
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'bold' : 'normal'}
+                                                color={index === activeStep ? 'purple.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+
+                            <Box>
+                                <HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
+                                    <Box mb={4} w={"35%"}>
+                                        <HStack spacing={4}>
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_first}
+                                                alt='Dan Abramov'
+                                            />
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_sec}
+                                                alt='Dan Abramov'
+                                            />
+                                        </HStack>
+                                        <Box mt={4} w={"52%"}>
+                                            <HStack
+                                                bg={"#484848"}
+                                                borderRadius={"full"}
+                                                py={2}
+                                                px={2}
+                                                spacing={4}
+                                                justifyContent={"center"}
+                                            >
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <BiSolidMicrophone color="white" size="14px" />
+                                                </Box>
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdVideocam color="white" size="14px" />
+                                                </Box>
+                                                <HStack
+                                                    bg="rgba(237, 12, 12, 0.68)"
+                                                    py="1"
+                                                    px={2}
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdCallEnd color="white" size="14px" />
+                                                    <Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
+                                                </HStack>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+
+                                    <Box
+                                        w={"62%"}
+                                    >
+                                        {children}
+                                    </Box>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycPanVerificationFrame

src/Pages/Onboarding/FullKycQandA.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import FullKycQandAFrame from './FullKycQandAFrame';
+import { Box, HStack, Input, Text } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+
+
+
+const FullKycQandA = () => {
+
+    const navigate = useNavigate();
+
+    return (
+        <FullKycQandAFrame>
+            <Box
+                bg={"#F8F3FF"}
+                borderRadius={"md"}
+                p={4}
+            >
+                <Text color={'#100F14'} fontWeight={600} fontSize={'sm'} mb={1}>
+                    Answer following questions.
+                </Text>
+
+                <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                </Text>
+
+                <Box my={2} height="300px" bg={"#fff"} boxShadow={"md"} borderRadius={"md"} p={4}>
+                    <Box mb={6}>
+                        <Text
+                            color={"#1A1A1A"}
+                            fontSize={"sm"}
+                            fontWeight={500}
+                            mb={2}
+                        >
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                        </Text>
+                        <Input placeholder='Enter answer here' fontSize={"sm"} fontWeight={500} />
+                    </Box>
+                    <Box>
+                        <Text
+                            color={"#1A1A1A"}
+                            fontSize={"sm"}
+                            fontWeight={500}
+                            mb={2}
+                        >
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                        </Text>
+                        <Input placeholder='Enter answer here' fontSize={"sm"} fontWeight={500} />
+                    </Box>
+
+                </Box>
+            </Box>
+            <HStack justifyContent={"center"} mt={4} >
+                <PrimaryButton title={"Next"}
+                 onClick={()=> navigate("/full-kyc-face-verification")}
+                 w={"80%"} />
+            </HStack>
+
+        </FullKycQandAFrame>
+    );
+};
+
+export default FullKycQandA;

src/Pages/Onboarding/FullKycQandAFrame.jsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box, Container, Text, HStack, Stack, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps, StepIcon, List, ListItem, ListIcon, Image } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+import { BiSolidMicrophone } from "react-icons/bi";
+import { MdVideocam } from "react-icons/md";
+import { MdCallEnd } from "react-icons/md";
+import call_first from "../../assets/call_first.svg"
+import call_sec from "../../assets/call_sec.svg"
+
+const FullKycQandAFrame = ({ children }) => {
+
+    const steps = [
+        { description: 'Location' },
+        { description: 'Q and A' },
+        { description: 'Face verification' },
+        { description: 'Aadhar Verification' },
+        { description: 'Pan Verification' },
+    ];
+
+    // Stepper configuration
+    const { activeStep } = useSteps({
+        index: 1,
+        count: steps.length,
+    });
+
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} >
+                        <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                            Full KYC
+                        </Text>
+
+                        <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
+                        </Text>
+                        <Box>
+                            <Box mt={8}>
+                                <Stack spacing={2}>
+                                    <Stepper
+                                        size='sm'
+                                        index={activeStep}
+                                        gap='0'
+                                        sx={{
+                                            '--stepper-accent-color': '#6311CB',
+                                        }}
+                                    >
+                                        {steps.map((step, index) => (
+                                            <Step key={index} gap='0'>
+                                                <StepIndicator>
+                                                    <StepStatus complete={<StepIcon />} />
+                                                </StepIndicator>
+                                                <StepSeparator _horizontal={{ ml: '0' }} />
+                                            </Step>
+                                        ))}
+                                    </Stepper>
+                                    <HStack justifyContent="space-between" alignItems={"center"} >
+                                        {steps.map((step, index) => (
+                                            <Text
+                                                key={index}
+                                                fontSize="xs"
+                                                fontWeight={index === activeStep ? 'bold' : 'normal'}
+                                                color={index === activeStep ? 'purple.500' : 'gray.400'}
+                                                textAlign="center"
+                                            >
+                                                {step.description}
+                                            </Text>
+                                        ))}
+                                    </HStack>
+                                </Stack>
+                            </Box>
+
+
+                            <Box>
+                                <HStack spacing={6} mt={8} alignItems={"start"} justifyContent={"space-between"} >
+                                    <Box mb={4} w={"35%"}>
+                                        <HStack spacing={4}>
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_first}
+                                                alt='Dan Abramov'
+                                            />
+                                            <Image
+                                                boxSize='240px'
+                                                objectFit='cover'
+                                                src={call_sec}
+                                                alt='Dan Abramov'
+                                            />
+                                        </HStack>
+                                        <Box mt={4} w={"52%"}>
+                                            <HStack
+                                                bg={"#484848"}
+                                                borderRadius={"full"}
+                                                py={2}
+                                                px={2}
+                                                spacing={4}
+                                                justifyContent={"center"}
+                                            >
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <BiSolidMicrophone color="white" size="14px" />
+                                                </Box>
+                                                <Box
+                                                    bg="#6A6A6A"
+                                                    p="2"
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdVideocam color="white" size="14px" />
+                                                </Box>
+                                                <HStack
+                                                    bg="rgba(237, 12, 12, 0.68)"
+                                                    py="1"
+                                                    px={2}
+                                                    borderRadius="full"
+                                                    display="inline-flex"
+                                                >
+                                                    <MdCallEnd color="white" size="14px" />
+                                                    <Text mb={0} fontSize={"xs"} fontWeight={500} color={"#fff"}>End</Text>
+                                                </HStack>
+                                            </HStack>
+                                        </Box>
+                                    </Box>
+
+                                    <Box
+                                        w={"62%"}
+                                    >
+                                        {children}
+                                    </Box>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default FullKycQandAFrame

src/Pages/Onboarding/Header.jsx

@@ -0,0 +1,35 @@
+import { Box, Container, HStack, Image, Text, useDisclosure } from '@chakra-ui/react'
+import React from 'react'
+import SecondaryButton from '../../Components/Buttons/SecondaryButton'
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import optifii_logo from '../../assets/optifii_logo.svg'
+import LoginModal from '../../Components/SuccessPendingModal/LoginModal';
+
+
+const Header = () => {
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    return (
+        <Box
+            bg={"#FFFFFF"}
+        >
+            <Container maxW='container.xl' py={2}>
+                <HStack
+                    justifyContent={"space-between"}
+                >
+                    <Box>
+                        <Image src={optifii_logo} alt="Optifii Logo" />
+                    </Box>
+                    <HStack>
+                        <SecondaryButton onClick={onOpen} title={"Login"} />
+                        <PrimaryButton title={"Contact sales"} />
+                    </HStack>
+                </HStack>
+                <LoginModal  isOpen={isOpen} onClose={onClose} />
+            </Container>
+        </Box>
+    )
+}
+
+export default Header

src/Pages/Onboarding/LoginEkyc.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import LoginEkycFrame from './LoginEkycFrame';
+import { Box, Container, Radio, RadioGroup, Text, HStack, Checkbox, Link } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import { BsPatchExclamation } from 'react-icons/bs';
+import { useNavigate } from 'react-router-dom';
+
+const LoginEkyc = () => {
+    const [selectedKyc, setSelectedKyc] = useState('1'); // on change of radio box
+    const navigate = useNavigate();
+
+    // Which radio is checked navigate to that page 
+
+    const handleProceed = () => {
+        if (selectedKyc === '1') {
+            navigate('/maximum-kyc');
+        } else if (selectedKyc === '2') {
+            navigate('/minimum-kyc');
+        }
+    };
+
+    return (
+        <LoginEkycFrame>
+            <Container maxW={'container.xl'}>
+                <Box w={'100%'} my={5} boxShadow={'md'}>
+                    <Box bg={'#fff'} p={4} borderRadius={'md'} display={'flex'} justifyContent={'center'}>
+                        <Box maxW={650}>
+                            <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={'center'} mb={2}>
+                                eKYC
+                            </Text>
+
+                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={'center'}>
+                                Automatically verifies your documents needed for KYC and account opening on OptiFii
+                            </Text>
+
+                            <Box mt={10}>
+                                <Text fontWeight={600} fontSize={'md'} textAlign={'center'}>
+                                    Choose your KYC
+                                </Text>
+
+                                <Box>
+                                    <RadioGroup
+                                        value={selectedKyc}
+                                        onChange={setSelectedKyc}
+                                        display={'flex'}
+                                        flexDirection={'column'}
+                                        gap={6}
+                                    >
+                                        <Box
+                                            border={selectedKyc === '1' ? '1px solid #e8ddf7' : '1px solid #e8e8e8'}
+                                            bg={'#fff'}
+                                            p={4}
+                                            borderRadius={'xl'}
+                                            boxShadow={selectedKyc === '1' ? '0px 4px 4px rgba(232, 221, 247, 0.9)' : 'sm'}
+                                        >
+                                            <Radio value='1' colorScheme='purple'>
+                                                <Text fontSize={'md'} fontWeight={500} mb={0}>
+                                                    Full KYC
+                                                </Text>
+                                            </Radio>
+                                            <Text color={'#555555'} fontSize={'sm'} fontWeight={500}>
+                                                Maximum wallet limit is
+                                                <Text as={'span'} color={'#222222'} fontSize={'sm'} fontWeight={600} ml={1}>
+                                                    ₹ 200000
+                                                </Text>
+                                            </Text>
+                                            <HStack alignItems={'start'}>
+                                                <BsPatchExclamation color={'#AAAAAA'} fontSize={14} />
+                                                <Text color={'#AAAAAA'} fontSize={'xs'} fontWeight={500} mb={1}>
+                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
+                                                </Text>
+                                            </HStack>
+                                        </Box>
+
+                                        <Box
+                                            border={selectedKyc === '2' ? '1px solid #e8ddf7' : '1px solid #e8e8e8'}
+                                            bg={'#fff'}
+                                            p={4}
+                                            borderRadius={'xl'}
+                                            boxShadow={selectedKyc === '2' ? '0px 4px 4px rgba(232, 221, 247, 0.9)' : 'sm'}
+                                        >
+                                            <Radio value='2' colorScheme='purple'>
+                                                <Text fontSize={'md'} fontWeight={500} mb={0}>
+                                                    Minimum KYC
+                                                </Text>
+                                            </Radio>
+                                            <Text color={'#555555'} fontSize={'sm'} fontWeight={500}>
+                                                Minimum wallet limit is
+                                                <Text as={'span'} color={'#222222'} fontSize={'sm'} fontWeight={600} ml={1}>
+                                                    ₹ 10000
+                                                </Text>
+                                            </Text>
+                                            <HStack alignItems={'start'}>
+                                                <BsPatchExclamation color={'#AAAAAA'} fontSize={14} />
+                                                <Text color={'#AAAAAA'} fontSize={'xs'} fontWeight={500} mb={1}>
+                                                    Enter the Aadhar or PAN number and then request for the OTP. This will complete the minimum KYC.
+                                                </Text>
+                                            </HStack>
+                                        </Box>
+                                    </RadioGroup>
+                                </Box>
+
+                                <Box mt={10}>
+                                    <HStack justifyContent={'center'}>
+                                        <Checkbox colorScheme='purple' alignItems={'start'} defaultChecked>
+                                            <Text mb={0} fontSize={'xs'} fontWeight={500}>
+                                                <Text as={'span'} color={'#FE3F25'}>
+                                                    *
+                                                </Text>
+                                                I hereby consent to provide my Aadhaar Number, Biometric and/or One Time Pin (OTP) data for Aadhaar based authentication for the purpose of establishing my identity
+                                            </Text>
+                                        </Checkbox>
+                                    </HStack>
+                                    <HStack justifyContent={'center'} mt={6}>
+                                        <PrimaryButton onClick={handleProceed} w={'300px'} title={'Proceed'} />
+                                    </HStack>
+                                </Box>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </LoginEkycFrame>
+    );
+};
+
+export default LoginEkyc;

src/Pages/Onboarding/LoginEkycFrame.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+import {
+    Box,
+} from "@chakra-ui/react";
+import Header from './Header';
+import Footer from './Footer';
+
+const LoginEkycFrame = ({ children }) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default LoginEkycFrame

src/Pages/Onboarding/LoginEmailAddress.jsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Box, Input, Button, Text, HStack, Link, Container, InputGroup, InputLeftElement, Divider, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import SecondaryButton from '../../Components/Buttons/SecondaryButton';
+import { HiOutlineMail } from "react-icons/hi";
+import { TiWarning } from 'react-icons/ti';
+import LoginEmailAddressFrame from './LoginEmailAddressFrame';
+import { useNavigate } from 'react-router-dom';
+import * as Yup from "yup";
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+
+// Define your validation schema with Yup
+const emailValidation = Yup.object().shape({
+    emailAddress: Yup.string()
+        .email("Invalid email address")
+        .required("Email address is required"),
+});
+
+const LoginEmailAddress = () => {
+    const navigate = useNavigate();
+    const [ isLoading, setIsLoading ] = useState(false)
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm({
+        resolver: yupResolver(emailValidation),
+    });
+
+    const onSubmit = (data) => {
+        setIsLoading(true)
+
+
+        setTimeout(() => {
+            setIsLoading(false)
+            localStorage.setItem('email', data?.emailAddress);
+            navigate("/login-otp");
+        }, 2000); // 2-second delay
+
+
+
+        console.log(data?.emailAddress);
+    };
+
+    return (
+        <LoginEmailAddressFrame>
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
+                    <Box as='form' onSubmit={handleSubmit(onSubmit)} bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
+                        <Box maxW={650}>
+                            <Text
+                                color={'#100F14'}
+                                fontWeight={600}
+                                fontSize={'xl'}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                                Log In to OptiFii
+                            </Text>
+                            <Text
+                                color={'#49475A'}
+                                fontWeight={500}
+                                fontSize={'sm'}
+                                textAlign={"center"}
+                            >
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
+                            </Text>
+                            <Box mt={12}>
+                                <FormControl isInvalid={!!errors.emailAddress}>
+                                    <FormLabel htmlFor='emailAddress' fontSize={"sm"} fontWeight={500} color={"#313039"} mb={2}>
+                                        Enter e-mail address
+                                    </FormLabel>
+                                    <InputGroup>
+                                        <InputLeftElement pointerEvents='none'>
+                                            <HiOutlineMail color='#C33FAD' />
+                                        </InputLeftElement>
+                                        <Input
+                                            id='emailAddress'
+                                            placeholder='Enter your email'
+                                            {...register("emailAddress")}
+                                            fontSize={"sm"}
+                                            fontWeight={500}
+                                        />
+                                    </InputGroup>
+                                    <FormErrorMessage>
+                                        {errors?.emailAddress && (
+                                            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                                                <TiWarning className="fw-bold fs-5 " /> {errors?.emailAddress?.message}
+                                            </span>
+                                        )}
+                                    </FormErrorMessage>
+                                </FormControl>
+                            </Box>
+
+                            <Box px={4} py={6}>
+                                <HStack justifyContent={"center"} mt={6}>
+                                    <PrimaryButton
+                                        isLoading={isLoading}
+                                        type="submit"
+                                        w={"300px"}
+                                        title={"Send OTP"}
+                                    />
+                                </HStack>
+                                <HStack justifyContent={"center"} mt={4}>
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
+                                    <Link fontSize={"xs"} fontWeight={600} mb={0} color={"#3725EA"}>Signup</Link>
+                                </HStack>
+                                <HStack spacing={4} my={8}>
+                                    <Divider />
+                                    <Text
+                                        color={'#49475A'}
+                                        fontWeight={500}
+                                        fontSize={'sm'}
+                                        textAlign={"center"}
+                                        mb={0}
+                                    >Or</Text>
+                                    <Divider />
+                                </HStack>
+                                <HStack justifyContent={"center"}>
+                                    <SecondaryButton
+                                        w={"300px"}
+                                        title={"Continue with phone"}
+                                        onClick={() => navigate("/login-phone-number")}
+                                    />
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </LoginEmailAddressFrame>
+    );
+};
+
+export default LoginEmailAddress;

src/Pages/Onboarding/LoginEmailAddressFrame.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box } from '@chakra-ui/react'
+import Header from './Header'
+import Footer from './Footer'
+
+const LoginEmailAddressFrame = ({children}) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default LoginEmailAddressFrame

src/Pages/Onboarding/LoginOtp.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Box, PinInput, PinInputField, Text, HStack, Container, useToast } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import LoginOtpFrame from './LoginOtpFrame';
+import { useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import ToastBox from '../../Components/ToastBox';
+
+const LoginOtp = () => {
+    
+    const [otp, setOtp] = useState("");
+    const [ isLoading, setIsLoading ] = useState(false)
+    const navigate = useNavigate();
+    const toast = useToast();
+
+    const handleOtpChange = (value) => {
+        setOtp(value);
+    };
+
+    const handleLogin = () => {
+        setIsLoading(true)
+        const email = localStorage.getItem("email");
+        const phoneNumber = localStorage.getItem("phoneNumber");
+        console.log(phoneNumber);
+
+        if (email === "wdi@gmail.com" && otp === "1234" ) { 
+
+            setTimeout(() => {
+
+            setIsLoading(false)
+                toast({
+                    render: () => (
+                        <ToastBox status={"success"} message={"Login Successfully"} />
+                    ),
+                });
+
+                Cookies.set("isAuthenticated", true, { expires: 7 });
+                navigate("/home");
+            }, 2000); // 2-second delay
+        } else {
+            setTimeout(() => {
+                setIsLoading(false)
+                toast({
+                    render: () => (
+                        <ToastBox status={"error"} message={"Invalid Credetials"} />
+                    ),
+                });
+
+                setOtp("")
+                // navigate("/login-phone-number");
+            }, 2000); // 2-second delay
+        }
+    };
+
+    return (
+        <LoginOtpFrame>
+            <Container maxW={'container.xl'}>
+                <Box w={"100%"} my={5} boxShadow={"md"}>
+                    <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
+                        <Box maxW={650}>
+                            <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={"center"} mb={2}>
+                                Enter OTP
+                            </Text>
+                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={"center"}>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
+                            </Text>
+                            <Box mt={12}>
+                                <HStack justifyContent={"center"}>
+                                    <PinInput value={otp} onChange={handleOtpChange} size='lg' otp>
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                    </PinInput>
+                                </HStack>
+                            </Box>
+                            <Box py={10}>
+                                <Box mt={16}>
+                                    <HStack justifyContent={"center"}>
+                                        <PrimaryButton isLoading={isLoading} w={"300px"} title={"Next"} onClick={handleLogin} />
+                                    </HStack>
+                                </Box>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </LoginOtpFrame>
+    );
+};
+
+export default LoginOtp;

src/Pages/Onboarding/LoginOtpFrame.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box } from '@chakra-ui/react'
+import Header from './Header'
+import Footer from './Footer'
+
+const LoginOtpFrame = ({children}) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default LoginOtpFrame

src/Pages/Onboarding/LoginPhoneNumber.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import LoginPhoneNumberFrame from "./LoginPhoneNumberFrame";
+import {
+  Box,
+  Input,
+  Text,
+  HStack,
+  Link,
+  Container,
+  InputGroup,
+  InputLeftElement,
+  Divider,
+} from "@chakra-ui/react";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { MdOutlineLocalPhone } from "react-icons/md";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { TiWarning } from "react-icons/ti";
+
+// Define your validation schema with Yup
+const phoneValidation = Yup.object().shape({
+  phoneNumber: Yup.string()
+    .required("Phone number is required")
+    .matches(/^[0-9]+$/, "Phone number should only contain digits")
+    .min(10, "Phone number should be at least 10 digits")
+    .max(15, "Phone number should be at most 15 digits"),
+});
+
+const LoginPhoneNumber = () => {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Setup form handling with validation
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(phoneValidation),
+  });
+
+  // Handle form submission
+  const onSubmit = (data) => {
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      localStorage.setItem("phoneNumber", data?.phoneNumber);
+      navigate("/login-otp");
+    }, 2000); // 2-second delay
+  };
+
+  return (
+    <LoginPhoneNumberFrame>
+      <Container maxW={"container.xl"}>
+        <Box w={"100%"} my={5} boxShadow={"md"}>
+          <Box
+            as="form"
+            onSubmit={handleSubmit(onSubmit)}
+            bg={"#fff"}
+            p={4}
+            borderRadius={"md"}
+            display={"flex"}
+            justifyContent={"center"}
+          >
+            <Box maxW={650}>
+              <Text
+                color={"#100F14"}
+                fontWeight={600}
+                fontSize={"xl"}
+                textAlign={"center"}
+                mb={2}
+              >
+                Log In to OptiFii
+              </Text>
+              <Text
+                color={"#49475A"}
+                fontWeight={500}
+                fontSize={"sm"}
+                textAlign={"center"}
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+                massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
+                sapien fringilla, mattis ligula consectetur.
+              </Text>
+              <Box mt={12}>
+                <Text fontSize={"sm"} fontWeight={500} color={"#313039"} mb={2}>
+                  Enter phone number
+                </Text>
+                <InputGroup>
+                  <InputLeftElement pointerEvents="none">
+                    <MdOutlineLocalPhone color="#C33FAD" />
+                  </InputLeftElement>
+                  <Input
+                    maxLength={15}
+                    pattern="/^[+()?[\d -]+$/"
+                    type="number"
+                    placeholder="Enter your phone number"
+                    {...register("phoneNumber")}
+                    fontSize={"sm"}
+                    fontWeight={500}
+                  />
+                </InputGroup>
+                {errors?.phoneNumber && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors?.phoneNumber?.message}
+                  </span>
+                )}
+              </Box>
+
+              <Box px={4} py={6}>
+                <Box mt={6}>
+                  <HStack justifyContent={"center"} mt={6}>
+                    <PrimaryButton
+                    isLoading={isLoading}
+                      type="submit"
+                      w={"300px"}
+                      title={"Send OTP"}
+                    />
+                  </HStack>
+                  <HStack justifyContent={"center"} mt={4}>
+                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                      Don’t have an account?
+                    </Text>
+                    <Link
+                      fontSize={"xs"}
+                      fontWeight={600}
+                      mb={0}
+                      color={"#3725EA"}
+                    >
+                      Signup
+                    </Link>
+                  </HStack>
+                </Box>
+                <HStack spacing={4} my={8}>
+                  <Divider />
+                  <Text
+                    color={"#49475A"}
+                    fontWeight={500}
+                    fontSize={"sm"}
+                    textAlign={"center"}
+                    mb={0}
+                  >
+                    Or
+                  </Text>
+                  <Divider />
+                </HStack>
+                <Box>
+                  <HStack justifyContent={"center"}>
+                    <SecondaryButton
+                      w={"300px"}
+                      title={"Continue with email"}
+                      onClick={() => navigate("/login-email-address")}
+                    />
+                  </HStack>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </LoginPhoneNumberFrame>
+  );
+};
+
+export default LoginPhoneNumber;

src/Pages/Onboarding/LoginPhoneNumberFrame.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { Box } from '@chakra-ui/react'
+import Header from './Header'
+import Footer from './Footer'
+
+const LoginPhoneNumberFrame = ({children}) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default LoginPhoneNumberFrame

src/Pages/Onboarding/MinimumKyc.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Box, Input, Text,  HStack,  Container, } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import MinimumKycFrame from './MinimumKycFrame';
+import { useNavigate } from 'react-router-dom';
+
+const MinimumKyc = () => {
+
+    const navigate = useNavigate();
+
+    return (
+        <MinimumKycFrame>
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
+                    <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}  minH={"70vh"}>
+                        <Box maxW={650} >
+                            <Text
+                                color={'#100F14'}
+                                fontWeight={600}
+                                fontSize={'xl'}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                                Minimum KYC
+                            </Text>
+                            <Text
+                                color={'#49475A'}
+                                fontWeight={500}
+                                fontSize={'sm'}
+                                textAlign={"center"}
+                            >
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
+                            </Text>
+                            <Box mt={16}>
+                                <Text
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    color={"#313039"}
+                                    mb={2}
+                                >
+                                    Enter Aadhaar/PAN number
+                                </Text>
+
+                                <Input  />
+                            </Box>
+
+                            <Box px={4} py={6}>
+                                <Box mt={16}>
+                                    <HStack justifyContent={"center"} mt={6} >
+                                        <PrimaryButton
+                                            onClick={() => navigate("/login-otp")}
+                                            w={"300px"} title={"Request For OTP"} />
+                                    </HStack>
+                                </Box>
+                            </Box>
+                        </Box>
+
+
+
+                    </Box>
+                </Box>
+            </Container>
+        </MinimumKycFrame>
+    )
+}
+
+export default MinimumKyc

src/Pages/Onboarding/MinimumKycFrame.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+import {
+    Box,
+} from "@chakra-ui/react";
+import Header from './Header';
+import Footer from './Footer';
+
+const MinimumKycFrame = ({ children }) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box
+                w={'100%'}
+                minH={'60vh'}
+                bg={'#f3f3f9'}
+                px={6}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"start"}
+            >
+                {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default MinimumKycFrame

src/Pages/Onboarding/RegisterOtp.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Box, PinInput, PinInputField, Text, HStack, Container, useToast } from '@chakra-ui/react';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import LoginOtpFrame from './LoginOtpFrame';
+import { useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import ToastBox from '../../Components/ToastBox';
+
+const RegisterOtp = () => {
+    
+    const [otp, setOtp] = useState("");
+    const navigate = useNavigate();
+    const toast = useToast();
+
+    const handleOtpChange = (value) => {
+        setOtp(value);
+    };
+
+    // const handleLogin = () => {
+    //     const email = localStorage.getItem("email");
+    //     const phoneNumber = localStorage.getItem("phoneNumber");
+
+    //     if (email === "wdi@gmail.com" && phoneNumber === "9988776655" && otp === "1234") { 
+
+    //         setTimeout(() => {
+    //             toast({
+    //                 render: () => (
+    //                     <ToastBox status={"success"} message={"Login Successfully"} />
+    //                 ),
+    //             });
+
+    //             Cookies.set("isAuthenticated", true, { expires: 7 });
+    //             navigate("/*");
+    //         }, 2000); // 2-second delay
+    //     } else {
+    //         setTimeout(() => {
+    //             toast({
+    //                 render: () => (
+    //                     <ToastBox status={"error"} message={"Invalid phone number or OTP"} />
+    //                 ),
+    //             });
+
+    //             reset(); 
+    //             navigate("/login-phone-number");
+    //         }, 2000); // 2-second delay
+    //     }
+    // };
+
+    return (
+        <LoginOtpFrame>
+            <Container maxW={'container.xl'}>
+                <Box w={"100%"} my={5} boxShadow={"md"}>
+                    <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
+                        <Box maxW={650}>
+                            <Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={"center"} mb={2}>
+                                Enter OTP
+                            </Text>
+                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={"center"}>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
+                            </Text>
+                            <Box mt={12}>
+                                <HStack justifyContent={"center"}>
+                                    <PinInput value={otp} onChange={handleOtpChange} size='lg' otp>
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                        <PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
+                                    </PinInput>
+                                </HStack>
+                            </Box>
+                            <Box py={10}>
+                                <Box mt={16}>
+                                    <HStack justifyContent={"center"}>
+                                        <PrimaryButton w={"300px"} title={"Next"} onClick={()=>navigate("/ekyc")} />
+                                    </HStack>
+                                </Box>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Container>
+        </LoginOtpFrame>
+    );
+};
+
+export default RegisterOtp;

src/Pages/Onboarding/WelcomeFrame.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+
+import {
+    Box,
+} from "@chakra-ui/react";
+import Header from './Header';
+import Footer from './Footer';
+
+const WelcomeFrame = ({ children }) => {
+    return (
+
+        <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+            <Header />
+            <Box 
+            w={'100%'} 
+            minH={'60vh'} 
+            bg={'#f3f3f9'}
+             px={6}
+             display={"flex"}
+             justifyContent={"center"}
+             alignItems={"start"}
+             >
+            {children}
+            </Box>
+
+            <Footer />
+        </Box>
+
+    )
+}
+
+export default WelcomeFrame

src/Pages/Onboarding/WelcomeToOptifii.jsx

@@ -0,0 +1,263 @@
+import React, { useState } from 'react'
+import WelcomeFrame from './WelcomeFrame'
+import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container, useDisclosure, } from '@chakra-ui/react';
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import { Navigate, useNavigate } from 'react-router-dom';
+import LoginModal from '../../Components/SuccessPendingModal/LoginModal';
+
+const WelcomeToOptifii = () => {
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    const handlePasswordVisibility = () => setShowPassword(!showPassword);
+
+    const navigate = useNavigate();
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    return (
+        <WelcomeFrame>
+
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
+                    <Box bg={'#fff'} p={4} borderRadius={"md"}>
+                        <Text
+                            color={'#100F14'}
+                            fontWeight={600}
+                            fontSize={'xl'}
+                            textAlign={"center"}
+                            mb={2}
+                        >
+                            Welcome to OptiFii
+                        </Text>
+                        <Text
+                            color={'#49475A'}
+                            fontWeight={500}
+                            fontSize={'sm'}
+                            textAlign={"center"}
+                        >
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. <br /> Pellentesque sit amet sapien fringilla, mattis ligula consectetur,
+                        </Text>
+
+
+                        <Box maxW="7xl" mx="auto" px={4} py={6}>
+                            <Grid templateColumns="repeat(4, 1fr)" gap={6}>
+                                {/* Company */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Company</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} value="Website Developers India Pvt Ltd" />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Name */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Name</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} placeholder="Enter your name" />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Email */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Email</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} value="admin@wdipl.com" readOnly />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Date of Birth */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Date of birth</FormLabel>
+                                        <Input type="date" fontSize="xs" fontWeight={500} value="2024-06-14" />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Phone Number */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Phone number</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} value="9854247586" readOnly />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Roles */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Roles</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} value="Sr. Accountant" readOnly />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Department */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Department</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} value="Finance" readOnly />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Grade/Level */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Grade/Level</FormLabel>
+                                        <Input fontSize="xs" fontWeight={500} placeholder="Enter grade/level" />
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Password */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Password</FormLabel>
+                                        <InputGroup size="md">
+                                            <Input
+                                                fontSize="xs"
+                                                fontWeight={500}
+                                                pr="4.5rem"
+                                                type={showPassword ? 'text' : 'password'}
+                                                placeholder="Enter password"
+                                            />
+                                            <InputRightElement width="4.5rem">
+                                                <Button
+                                                    h="1.75rem"
+                                                    size="sm"
+                                                    bg={"transparent"}
+                                                    _hover={{ opacity: 0.7 }}
+
+                                                    onClick={handlePasswordVisibility}>
+                                                    {showPassword ? <FaEyeSlash /> : <FaEye />}
+                                                </Button>
+                                            </InputRightElement>
+                                        </InputGroup>
+                                        <HStack>
+                                            <UnorderedList
+                                                ml={0}
+                                                display={"flex"}
+                                                alignItems={"start"}
+                                                flexWrap={"wrap"}
+                                                columnGap={10}
+                                                rowGap={0}
+                                            >
+                                                <ListItem
+                                                    style={{
+                                                        color: "#737373",
+                                                    }}
+                                                >
+                                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                                        Use 8 or more characters
+                                                    </Text>
+                                                </ListItem>
+                                                <ListItem
+                                                    style={{
+                                                        color: "#737373",
+                                                    }}
+                                                >
+                                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                                        One Uppercase character
+                                                    </Text>
+                                                </ListItem>
+                                                <ListItem
+                                                    style={{
+                                                        color: "#737373",
+                                                    }}
+                                                >
+                                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                                        One lowercase character
+                                                    </Text>
+                                                </ListItem>
+                                                <ListItem
+                                                    style={{
+                                                        color: "#737373",
+                                                    }}
+                                                >
+                                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                                        One special character
+                                                    </Text>
+                                                </ListItem>
+                                                <ListItem
+                                                    style={{
+                                                        color: "#737373",
+                                                    }}
+                                                >
+                                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>
+                                                        One number
+                                                    </Text>
+                                                </ListItem>
+                                            </UnorderedList>
+                                        </HStack>
+                                        {/* <Text fontSize="xs" mt={2} fontWeight={500}>
+                                        Use 8 or more characters including at least one uppercase, one lowercase, one special character, and one number.
+                                    </Text> */}
+                                    </FormControl>
+                                </GridItem>
+
+                                {/* Confirm Password */}
+                                <GridItem colSpan={{ base: 4, md: 2 }}>
+                                    <FormControl>
+                                        <FormLabel fontSize="sm">Confirm Password</FormLabel>
+                                        <InputGroup size="md">
+                                            <Input
+                                                fontSize="xs"
+                                                fontWeight={500}
+                                                pr="4.5rem"
+                                                type={showConfirmPassword ? 'text' : 'password'}
+                                                placeholder="Confirm password"
+                                            />
+                                            <InputRightElement width="4.5rem">
+                                                <Button
+                                                    h="1.75rem"
+                                                    size="sm"
+                                                    bg={"transparent"}
+                                                    _hover={{ opacity: 0.7 }}
+
+                                                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
+                                                    {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
+                                                </Button>
+                                            </InputRightElement>
+                                        </InputGroup>
+                                    </FormControl>
+                                </GridItem>
+                            </Grid>
+
+                            <Box mt={10}>
+                                <HStack justifyContent={"center"}>
+                                    <Checkbox colorScheme='purple' defaultChecked>
+                                        <Text mb={0} fontSize={"sm"} fontWeight={500}>
+                                            <Text as={'span'} color={'#FE3F25'}>*</Text>
+                                            I agree to the Terms of Service and acknowledge you’ve read our Privacy Policy.
+                                        </Text>
+                                    </Checkbox>
+                                </HStack>
+                                <HStack justifyContent={"center"} mt={6} >
+                                    <PrimaryButton
+                                        onClick={() => navigate("/register-otp")}
+                                        w={"300px"} title={"Register with us"} />
+                                </HStack>
+                                <HStack justifyContent={"center"} mt={4} spacing={1}>
+                                    <Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
+                                    <Button
+                                        onClick={onOpen}
+                                        _hover={{ opacity: 0.8 }}
+                                        px={0}
+                                        fontSize={"xs"}
+                                        color={"#3725EA"}
+                                        textDecoration={"underline"}
+                                        fontWeight={600}
+                                        bg={"transparent"}
+                                    >Log in</Button>
+                                </HStack>
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+                <LoginModal  isOpen={isOpen} onClose={onClose} />
+            </Container>
+        </WelcomeFrame>
+    )
+}
+
+export default WelcomeToOptifii

src/Pages/Profile/DisplayProfile.jsx

@@ -0,0 +1,60 @@
+import { Icon } from "@chakra-ui/icon";
+import { Image } from "@chakra-ui/image";
+import { Input } from "@chakra-ui/input";
+import { Box, HStack, Text } from "@chakra-ui/layout";
+import React, { useContext, useRef, useState } from "react";
+import { BiCloudUpload } from "react-icons/bi";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+
+const DisplayProfile = () => {
+  const inputRef = useRef();
+  const { image, setImage } = useContext(GlobalStateContext);
+
+
+    // Trigger the hidden file input
+    const handleFileUploadClick = () => {
+        inputRef.current.click();
+    };
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  return (
+    <Box>
+      <Image
+        borderRadius="full"
+        boxSize="200px"
+        src={image}
+        alt="Profile Picture"
+        objectFit={"cover"}
+      />
+
+      <Input
+        type="file"
+        ref={inputRef}
+        display="none"
+        onChange={handleFileChange}
+      />
+      <HStack
+        justify={"center"}
+        mt={4}
+        cursor="pointer"
+        onClick={handleFileUploadClick}
+      >
+        <Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
+        <Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
+          Upload
+        </Text>
+      </HStack>
+    </Box>
+  );
+};
+
+export default DisplayProfile;

src/Pages/Profile/EditProfile.jsx

@@ -0,0 +1,92 @@
+import { Box, Text, HStack, Image, Input, Icon, Button } from '@chakra-ui/react';
+import React, { useRef } from 'react';
+import MiniHeader from '../../Components/MiniHeader';
+import { OPACITY_ON_LOAD } from '../../Layout/animations';
+import { BiCloudUpload } from "react-icons/bi";
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import SecondaryButton from '../../Components/Buttons/SecondaryButton';
+import DisplayProfile from './DisplayProfile';
+
+const EditProfile = () => {
+    const inputRef = useRef();
+
+    // Trigger the hidden file input
+    const handleFileUploadClick = () => {
+        inputRef.current.click();
+    };
+
+    // Handle saving profile (you may add logic to actually handle form submission)
+    const handleSaveProfile = () => {
+        console.log('Profile saved');
+        // Add actual save logic here (e.g., API call)
+    };
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Edit Your Profile"}
+                subTitle={"Update your information below."}
+            />
+
+            <Box
+                bg={'#FFFFFF'}
+                borderRadius={'md'}
+                boxShadow={'sm'}
+                p={8}
+            >
+                <HStack alignItems={"flex-start"} flexWrap={"wrap"}>
+                    {/* Profile Picture and Upload */}
+
+                    <HStack
+                        w={"30%"}
+                        justify={"center"}
+                    >
+                        <DisplayProfile />
+                    </HStack>
+
+                    {/* Editable Profile Information */}
+                    <Box w={"50%"} pl={16} borderLeft={'1px dashed #989898'}>
+                        <ProfileField label="Name" placeholder="Enter your name" defaultValue="Kartikey Gautam" />
+                        <ProfileField label="Email ID" placeholder="Enter your email" defaultValue="ajinkyaanand@5gth.com" />
+                        <ProfileField label="Phone number" placeholder="Enter your phone number" defaultValue="9854412589" />
+                        <ProfileField label="Designation" placeholder="Enter your designation" defaultValue="Architect" />
+                    </Box>
+
+                </HStack>
+                <HStack
+                    gap={4}
+                    justify={"center"}
+                    mt={4}
+                >
+                    <SecondaryButton onClick={handleSaveProfile} title={'cancel'} />
+                    <PrimaryButton onClick={handleSaveProfile} title={'Save Profile'} />
+                </HStack>
+
+            </Box>
+
+        </Box>
+    );
+};
+
+
+// Profile Field Component
+const ProfileField = ({ label, placeholder, defaultValue, labelColor = "#363636" }) => (
+    <Box width="100%" mb={4}>
+        <Text color={labelColor} fontSize="xs" fontWeight="500" mb={1}>
+            {label}
+        </Text>
+        <Input
+            placeholder={placeholder}
+            defaultValue={defaultValue}
+            size="sm"
+            borderColor="#9D9D9D"
+            borderRadius="md"
+            color={"#363636"}
+            fontWeight={500}
+            fontSize={"sm"}
+        />
+    </Box>
+);
+
+
+export default EditProfile;

src/Pages/Profile/Profile.jsx

@@ -0,0 +1,161 @@
+import { Box, Text, HStack, Image, Input, Icon, useDisclosure } from '@chakra-ui/react';
+import React, { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';  
+import MiniHeader from '../../Components/MiniHeader';
+import { OPACITY_ON_LOAD } from '../../Layout/animations';
+import { AiOutlineEdit } from "react-icons/ai";
+import { BiCloudUpload } from "react-icons/bi";
+import { RxLockClosed } from "react-icons/rx";
+import { RiArrowRightSLine, RiRotateLockLine } from "react-icons/ri";
+import { GoArrowSwitch } from "react-icons/go";
+import DisplayProfile from './DisplayProfile';
+import SwitchProfileModal from './SwitchProfileModal';
+
+const Profile = () => {
+    const navigate = useNavigate(); 
+    const { isOpen, onOpen, onClose } = useDisclosure()
+
+
+    // Handle navigation to edit profile page
+    const handleEditProfile = () => {
+        navigate('/profile/edit-profile'); 
+    };
+
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Your Profile"}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+            />
+
+            <Box
+                bg={'#FFFFFF'}
+                borderRadius={'md'}
+                boxShadow={'sm'}
+                p={8}
+            >
+                <Box display={"flex"} justifyContent={"end"}>
+                    <HStack
+                        cursor={'pointer'}
+                        rounded={'md'}
+                        _hover={{ bg: "gray.100" }}
+                        transition={'0.5s'}
+                        py={1}
+                        px={3}
+                        border={"1px solid rgba(99, 17, 203, 0.25)"}
+                        onClick={handleEditProfile}  // Call handleEditProfile on click
+                    >
+                        <AiOutlineEdit color={"#3725EA"} fontSize={"16px"} />
+                        <Text
+                            bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+                            bgClip="text"
+                            fontSize={"sm"}
+                            mb={0}
+                            fontWeight={"500"}
+                        >
+                            Edit
+                        </Text>
+                    </HStack>
+                </Box>
+
+                <HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"}>
+
+                    <Box>
+                        <DisplayProfile />
+                    </Box>
+
+                    <Box>
+                        <ProfileInfo label="Name" value="Kartikey Gautam" />
+                        <ProfileInfo label="Email ID" value="ajinkyaanand@5gth.com" />
+                        <ProfileInfo label="Phone number" value="9854412589" />
+                        <ProfileInfo label="Designation" value="Architect" />
+                    </Box>
+                </HStack>
+            </Box>
+
+            <HStack
+                bg={'#FFFFFF'}
+                borderRadius={'md'}
+                boxShadow={'sm'}
+                py={5}
+                px={4}
+                mt={4}
+                justify={"space-between"}
+                border={"1px solid #fff"}
+                _hover={{ border: "1px solid #6311CB", bg: "#F8F2FF" }}
+                transition="all 0.3s ease"
+
+            >
+                <HStack gap={4}>
+                    <HStack
+                        borderRadius="full"
+                        boxSize={8}
+                        bg={"#fff"}
+                        justify={"center"}
+                    >
+                        <RiRotateLockLine  color='#6311CB' />
+                    </HStack>
+                    <Text
+                        color={"#383838"}
+                        fontSize={"sm"}
+                        fontWeight={500}
+                        mb={0}
+                    >
+                        Change Password
+                    </Text>
+                </HStack>
+                <RiArrowRightSLine color='#363636' />
+            </HStack>
+
+            <HStack
+                onClick={onOpen}
+                bg={'#FFFFFF'}
+                borderRadius={'md'}
+                boxShadow={'sm'}
+                py={5}
+                px={4}
+                justify={"space-between"}
+                border={"1px solid #fff"}
+                _hover={{ border: "1px solid #6311CB", bg: "#F8F2FF" }}
+                transition="all 0.3s ease"
+            >
+                <HStack  gap={4}>
+                    <HStack
+                        borderRadius="full"
+                        boxSize={8}
+                        bg={"#fff"}
+                        justify={"center"}
+                    >
+                        <GoArrowSwitch color='#6311CB' />
+                    </HStack>
+
+                    <Text
+                        color={"#383838"}
+                        fontSize={"sm"}
+                        fontWeight={500}
+                        mb={0}
+                    >
+                        Switch Profile
+                    </Text>
+                </HStack>
+                <RiArrowRightSLine color='#363636' />
+            </HStack>
+
+            <SwitchProfileModal isOpen={isOpen} onOpen={onOpen} onClose={onClose}/>
+        </Box>
+    );
+};
+
+const ProfileInfo = ({ label, value }) => (
+    <>
+        <Text color={"#868686"} fontSize={"xs"} fontWeight={"500"} mb={1}>
+            {label}
+        </Text>
+        <Text color={"#363636"} fontSize={"sm"} fontWeight={"600"} mb={3}>
+            {value}
+        </Text>
+    </>
+);
+
+export default Profile;

src/Pages/Profile/SwitchProfileModal.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    Button,
+    Text,
+    Box,
+    HStack,
+    Image,
+} from '@chakra-ui/react'
+
+
+const Card = ({ title, designation, lastActiveTime, position }) => {
+    return (
+        <Box display={'flex'} flexDirection={'column'} gap={0} mb={4}>
+            <Box
+                border={"1px solid #DFDCFF"}
+                borderRadius={"md"}
+                borderBottomLeftRadius={0}
+                borderBottomRightRadius={0}
+                p={2}
+            >
+                <HStack justify={"space-between"}>
+                    <HStack>
+                        <Image width={"30px"} src="https://www.wdipl.com/public/img/black_logo.svg" alt="logo" />
+                        <Text fontSize={"sm"} fontWeight={600} mb={0}>{title}</Text>
+                    </HStack>
+                    <Box>
+                        <Text color={"#FF5454"} fontSize={"xs"} mb={0}>
+                            {position}
+                        </Text>
+                    </Box>
+                </HStack>
+
+                <HStack mt={4}>
+                    <Text color={"#787878"} fontSize={"xs"} fontWeight={500} mb={1}>
+                        Designation
+                    </Text>
+                    <Text color={"#000000"} fontSize={"xs"} fontWeight={500} mb={1}>
+                        {designation}
+                    </Text>
+                </HStack>
+                <HStack>
+                    <Text color={"#787878"} fontSize={"xs"} fontWeight={500}>
+                        Last active on
+                    </Text>
+                    <Text color={"#000000"} fontSize={"xs"} fontWeight={500}>
+                        {lastActiveTime}
+                    </Text>
+                </HStack>
+            </Box >
+            <Button
+                bg={"linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)"}
+                color={"#FFFFFF"}
+                fontSize={"xs"}
+                w={"100%"}
+                size={"sm"}
+                borderTopLeftRadius={0}
+                borderTopRightRadius={0}
+                _hover={{ opacity: 0.9 }}
+                transition={"0.3s ease"}
+            >
+                Switch Account
+            </Button>
+        </Box>
+
+    )
+}
+
+const SwitchProfileModal = ({ isOpen, onOpen, onClose }) => {
+
+
+
+    return (
+
+        <Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>Switch Profile</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>
+
+
+                    <Card title={"Website Developers India Pvt Ltd."} designation={"Architect"} lastActiveTime={"02/05/2023"} position={"Ex-employee"} />
+
+
+                    <Card title={"Mad Developers India Pvt Ltd."} designation={"Developer"} lastActiveTime={"05/05/2024"} position={"Cr-employee"} />
+
+
+
+                </ModalBody>
+
+            </ModalContent>
+        </Modal>
+    )
+}
+
+export default SwitchProfileModal

src/Pages/Report/AddNewReport.jsx

@@ -0,0 +1,157 @@
+import { Box, Input, Text, HStack, Button, Icon, Tag, Divider, flexbox, useToast, } from '@chakra-ui/react'
+import React, { useContext } from 'react'
+import MiniHeader from '../../Components/MiniHeader'
+import { OPACITY_ON_LOAD } from '../../Layout/animations'
+import { MdOutlineRamenDining } from "react-icons/md";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { FaRegFilePdf } from "react-icons/fa";
+import { AiOutlineEdit } from "react-icons/ai";
+import GlobalStateContext from '../../Contexts/GlobalStateContext';
+import PrimaryButton from '../../Components/Buttons/PrimaryButton';
+import ToastBox from '../../Components/ToastBox';
+
+const AddNewReport = () => {
+    const toast = useToast()
+    const { requestsTable } = useContext(GlobalStateContext);
+    const toastTrigger = () =>{
+        toast({
+            position:"bottom-right",
+            render: () => (
+              <ToastBox
+                status={"success"}
+                message={"Report successfully added!"}
+              />
+            ),
+          });
+    }
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Add New Report"}
+                backButton={true}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+            />
+            <Box>
+                <HStack gap={7} align={"end"}>
+                    <Box flex={"1"}>
+                        <Text mb='6px' fontSize={"sm"} color={"#313039"} fontWeight={"600"}>Name of the Report</Text>
+                        <Input size={'sm'} rounded={'md'} border={"1px solid #6311CB"}
+                            _hover={"inherit"} />
+                    </Box>
+                    <PrimaryButton onClick={toastTrigger} title={'Send for Approval'}/>
+                </HStack>
+            </Box>
+            <Box display={"flex"} gap={"4"} flexWrap={"wrap"} my={"8"}>
+                {requestsTable?.map((request, index) =>
+                    <Box key={index} className='card' p={"4"} w={"32.35%"} rounded={"md"} border={"none"} boxShadow={"md"}
+                    >
+                        <HStack justifyContent={"space-between"}>
+                            <HStack>
+                                <Icon
+                                    as={MdOutlineRamenDining}
+                                    boxSize={8}
+                                    p={1.5}
+                                    bg={"#6311cb14"}
+                                    rounded={"full"}
+                                    color={"#111111"}
+                                />
+                                <Text
+                                    fontSize={"sm"}
+                                    color={"#363636"}
+                                    fontWeight={"600"}
+                                    mb={"0"}
+                                >
+                                    {request?.transactionType}
+                                </Text>
+                            </HStack>
+                            <RiDeleteBin5Line fontSize={"18px"} />
+                        </HStack>
+                        <Text
+                            fontSize={"md"}
+                            color={"#363636"}
+                            fontWeight={"600"}
+                            mt={"4"}
+                            mb={"1"}
+                        >
+                            {request?.amountSpent}
+                        </Text>
+                        <Text
+                            fontSize={"xs"}
+                            color={"#545454"}
+                            fontWeight={"500"}
+                        >
+                            {request?.date}
+                        </Text>
+
+                        <HStack gap={"4"}>
+                            <Tag
+                                bg={"#F0E6FF"}
+                                color={"#fff"}
+                                size="sm"
+                                py={"1"}
+                                px={"3"}
+                            >
+                                <Text
+                                    bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+                                    bgClip="text"
+                                    fontSize={"xs"}
+                                    as={"span"}
+                                    fontWeight={600}
+                                >Food</Text>
+                            </Tag>
+                            <Button
+                                as="a"
+                                color="#363636"
+                                fontWeight={"500"}
+                                bg={"transparent"}
+                                border={"1px solid #CCCCCC"}
+                                borderRadius="full"
+                                size="xs"
+                                gap={"6px"}
+                                alignItems={"center"}
+                                _hover={{ bg: "inherit" }}
+                                fontSize={'xs'}
+                                py={"3"}
+                                px={"4"}
+                            >
+                                <FaRegFilePdf color="#B43331" />
+                                Receipt.pdf
+                            </Button>
+                        </HStack>
+                        <Divider />
+                        <HStack justify={'space-between'}>
+                            <Text
+                                color={"#159F2B"}
+                                fontWeight={"600"}
+                                fontSize={"sm"}
+                                mb={"0"}
+                            >
+                                Approved
+                            </Text>
+
+                            <HStack cursor={'pointer'}  rounded={'md'} _hover={{bg:"gray.100"}} transition={'0.5s'} py={0.5} px={2}>
+                                <AiOutlineEdit color={"#3725EA"}
+                                    fontSize={"16px"} />
+                                <Text
+                                    bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+                                    bgClip="text"
+                                    fontSize={"sm"}
+                                    mb={"0"}
+                                    fontWeight={"500"}
+                                >
+                                    Edit
+                                </Text>
+                            </HStack>
+
+                        </HStack>
+
+
+                    </Box>
+                )}</Box >
+
+
+        </Box >
+    )
+}
+
+export default AddNewReport

src/Pages/Report/Report.jsx

@@ -4,27 +4,36 @@ import {
   Divider,
   HStack,
   Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
   Radio,
   Tag,
   TagLabel,
   Text,
   VStack,
+  useDisclosure,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
-import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
 import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
 import { AiOutlineEdit } from "react-icons/ai";
 import { FaRegEye } from "react-icons/fa";
-import { PiReceipt } from "react-icons/pi";
+import { PiReceipt, PiScrollLight } from "react-icons/pi";
+import AddReportModal from "../Requests/AddReportModal";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 
 const Report = () => {
   const { reportsHistory } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [searchTerm, setSearchTerm] = useState("");
+
 
   useEffect(() => {
     // Set isLoading to true
@@ -53,12 +62,12 @@ const Report = () => {
 
   const extractedArray = reportsHistory.map((item, index) => ({
     Name: <Radio colorScheme='purple' value='1'>
-      <Text as={'span'}  display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
-      
-    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
+      <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+
+        <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
     </Radio>
     ,
-    "Last Update": 
+    "Last Update":
       item?.lastUpdated,
     "Report type": item?.reportType,
     "Total Expense": item?.totalExpense,
@@ -71,28 +80,27 @@ const Report = () => {
           item?.status === "Approved"
             ? "green"
             : item?.status === "Fully Reimbursed"
-            ? "purple"
-            : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "yellow"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default color scheme if status doesn't match any condition
+              ? "purple"
+              : item?.status === "Disapproved"
+                ? "red"
+                : item?.status === "Saved"
+                  ? "yellow"
+                  : item?.status === "Partially Reimbursed"
+                    ? "orange"
+                    : "gray" // default color scheme if status doesn't match any condition
         }
-        border={`1px solid ${
-          item?.status === "Approved"
-            ? "green"
-            : item?.status === "Fully Reimbursed"
+        border={`1px solid ${item?.status === "Approved"
+          ? "green"
+          : item?.status === "Fully Reimbursed"
             ? "purple"
             : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "orange"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default border color if status doesn't match any condition
-        }`}
+              ? "red"
+              : item?.status === "Saved"
+                ? "orange"
+                : item?.status === "Partially Reimbursed"
+                  ? "orange"
+                  : "gray" // default border color if status doesn't match any condition
+          }`}
         p={1}
         px={3}
       >
@@ -106,13 +114,13 @@ const Report = () => {
         alignItems={"center"}
         justifyContent={"center"}
       >
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <FaRegEye fontSize={"18px"} />
         </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <AiOutlineEdit fontSize={"19px"} />
         </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
+        <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
           <RiDeleteBin5Line fontSize={"18px"} />
         </Button>
       </Box>
@@ -142,38 +150,35 @@ const Report = () => {
             Reports
           </Text>
           <HStack w={"100%"} justifyContent={"space-between"}>
-            <Button
-              fontWeight={500}
-              size={"sm"}
-              leftIcon={<CalendarIcon color={"purple.800"} />}
-              colorScheme="gray"
-              color={"gray.700"}
-              variant="outline"
-              fontSize={"xs"}
-            >
-              Select Date Range
-            </Button>
 
-            <Button
-              _hover={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 0.8,
-              }}
-              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
-              fontSize={"xs"}
-              px={8}
-              fontWeight={500}
-              size={"sm"}
-              color={"#fff"}
-              variant="outline"
-              transition={"0.5s all"}
-              _active={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 1,
-              }}
-            >
-              Add to Report
-            </Button>
+
+            <HStack>
+              <InputGroup width={300} size="sm" >
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Type to search..."
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <Button
+                fontWeight={500}
+                size={"sm"}
+                leftIcon={<CalendarIcon color={"purple.800"} />}
+                colorScheme="gray"
+                color={"gray.700"}
+                variant="outline"
+                fontSize={"xs"}
+              >
+                Select Date Range
+              </Button>
+            </HStack>
+            <PrimaryButton title={'Add to Report'} onClick={onOpen} />
           </HStack>
         </VStack>
         <Divider />
@@ -184,6 +189,8 @@ const Report = () => {
           isLoading={isLoading}
         />
       </Box>
+
+      <AddReportModal isOpen={isOpen} onClose={onClose} />
     </Box>
   );
 };

src/Pages/Report/ReportsHistory.jsx

@@ -0,0 +1,202 @@
+import {
+    Box,
+    Button,
+    Divider,
+    HStack,
+    Icon,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Radio,
+    Tag,
+    TagLabel,
+    Text,
+    VStack,
+    useDisclosure,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt, PiScrollLight } from "react-icons/pi";
+import AddReportModal from "../Requests/AddReportModal";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+
+const ReportsHistory = () => {
+    const { reportsHistory } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const [searchTerm, setSearchTerm] = useState("");
+
+
+    useEffect(() => {
+        // Set isLoading to true
+        setIsLoading(true);
+
+        // Simulate a 3-second delay
+        const timer = setTimeout(() => {
+            setIsLoading(false); // Set isLoading to false after 3 seconds
+        }, 500);
+
+        // Cleanup the timer when the component unmounts or when the useEffect re-runs
+        return () => clearTimeout(timer);
+    }, []); // Empty dependency array means this effect runs once after the component mounts
+
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+        "Name",
+        "Last Update",
+        "Report type",
+        "Total Expense",
+        "Status",
+        "Actions",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = reportsHistory.map((item, index) => ({
+        Name: <HStack>
+            <Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
+
+            <Box>
+                <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+                    {item?.name}
+                </Text>
+                <Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
+                    {item?.reportFor}
+                </Text>
+            </Box>
+        </HStack>
+        ,
+        "Last Update":
+            item?.lastUpdated,
+        "Report type": item?.reportType,
+        "Total Expense": item?.totalExpense,
+        Status: (
+            <Tag
+                my={1}
+                size={"sm"}
+                borderRadius="full"
+                colorScheme={
+                    item?.status === "Approved"
+                        ? "green"
+                        : item?.status === "Fully Reimbursed"
+                            ? "purple"
+                            : item?.status === "Disapproved"
+                                ? "red"
+                                : item?.status === "Saved"
+                                    ? "yellow"
+                                    : item?.status === "Partially Reimbursed"
+                                        ? "orange"
+                                        : "gray" // default color scheme if status doesn't match any condition
+                }
+                border={`1px solid ${item?.status === "Approved"
+                    ? "green"
+                    : item?.status === "Fully Reimbursed"
+                        ? "purple"
+                        : item?.status === "Disapproved"
+                            ? "red"
+                            : item?.status === "Saved"
+                                ? "orange"
+                                : item?.status === "Partially Reimbursed"
+                                    ? "orange"
+                                    : "gray" // default border color if status doesn't match any condition
+                    }`}
+                p={1}
+                px={3}
+            >
+                <TagLabel>{item?.status}</TagLabel>
+            </Tag>
+        ),
+        Actions: (
+            <Box
+                display={"flex"}
+                gap={1}
+                alignItems={"center"}
+                justifyContent={"center"}
+            >
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <FaRegEye fontSize={"18px"} />
+                </Button>
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <AiOutlineEdit fontSize={"19px"} />
+                </Button>
+                <Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
+                    <RiDeleteBin5Line fontSize={"18px"} />
+                </Button>
+            </Box>
+        ),
+    }));
+
+    return (
+        <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+            <MiniHeader
+                title={"Reports History"}
+                subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+                backButton={true}
+            />
+
+            <Box
+                rounded={"xl"}
+                py={3}
+                // pb={0}
+                display={"flex"}
+                flexDirection={"column"}
+                bg={"#fff"}
+                shadow={"md"}
+                minH={"100%"}
+            >
+                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                    <Text fontSize={"lg"} fontWeight={600}>
+                        Reports
+                    </Text>
+                    <HStack w={"100%"} justifyContent={"space-between"}>
+
+                        <InputGroup width={300} size="sm" >
+                            <InputLeftElement pointerEvents="none">
+                                <SearchIcon color="gray.300" />
+                            </InputLeftElement>
+                            <Input
+                                type="search"
+                                placeholder="Type to search..."
+                                rounded="md"
+                                focusBorderColor="#3725EA"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                            />
+                        </InputGroup>
+
+                        <Button
+                            fontWeight={500}
+                            size={"sm"}
+                            leftIcon={<CalendarIcon color={"purple.800"} />}
+                            colorScheme="gray"
+                            color={"gray.700"}
+                            variant="outline"
+                            fontSize={"xs"}
+                        >
+                            Select Date Range
+                        </Button>
+                    </HStack>
+                </VStack>
+                <Divider />
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                />
+            </Box>
+
+            <AddReportModal isOpen={isOpen} onClose={onClose} />
+        </Box>
+    );
+};
+
+export default ReportsHistory;

src/Pages/Requests/AddReportModal.jsx

@@ -0,0 +1,28 @@
+import { Button } from "@chakra-ui/button";
+import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from "@chakra-ui/modal";
+import React from "react";
+import SeccondaryButton from "../../Components/Buttons/SecondaryButton";
+import { AddIcon, EmailIcon } from "@chakra-ui/icons";
+import { PiReceipt, PiReceiptBold } from "react-icons/pi";
+import { useNavigate } from "react-router";
+
+const AddReportModal = ({isOpen, onClose}) => {
+    const navigate = useNavigate()
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader textAlign={'center'} fontSize={'md'}>Add Report</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody display={'flex'} justifyContent={'center'}  flexDirection={'column'} gap={3} p={6} >
+            <SeccondaryButton onClick={()=> navigate('/reports/add-new-report')} leftIcon={<AddIcon />} title={"Add to New Report"}/>
+            <SeccondaryButton onClick={()=> navigate('/reports')} leftIcon={<PiReceiptBold />} title={"Add To Existing Report"}/>
+            
+        </ModalBody>
+
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AddReportModal;

src/Pages/Requests/AdvanceExpense.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, VStack, Text, HStack, Button, Divider } from '@chakra-ui/react';
+import { CalendarIcon } from '@chakra-ui/icons';
+import NormalTable from "../../Components/DataTable/NormalTable";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+
+const AdvanceExpense = ({ tableHeadRow, extractedArray, isLoading, onOpen }) => {
+    return (
+        <Box
+            rounded={"xl"}
+            py={3}
+            display={"flex"}
+            flexDirection={"column"}
+            bg={"#fff"}
+            shadow={"md"}
+            minH={"100%"}
+        >
+            <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
+                    Expenses
+                </Text>
+                <HStack w={"100%"} justifyContent={"space-between"}>
+                    <HStack>
+                        <Button
+                            fontWeight={500}
+                            size={"sm"}
+                            leftIcon={<CalendarIcon color={"purple.800"} />}
+                            colorScheme="gray"
+                            color={"gray.700"}
+                            variant="outline"
+                            fontSize={"xs"}
+                        >
+                            Select Date Range
+                        </Button>
+                        <Button
+                            as={"a"}
+                            fontWeight={500}
+                            size={"sm"}
+                            color="#667085"
+                            fontSize={"xs"}
+                            bg={"transparent"}
+                            _hover={"none"}
+                            cursor={"pointer"}
+                            textDecoration={"underline"}
+                        >
+                            Select all
+                        </Button>
+                    </HStack>
+                    <PrimaryButton onClick={onOpen} title={"Add to Report"} />
+                </HStack>
+            </VStack>
+            <Divider />
+            <NormalTable
+                emptyMessage={`We don't have any Sponsors`}
+                tableHeadRow={tableHeadRow}
+                data={extractedArray}
+                isLoading={isLoading}
+            />
+        </Box>
+    );
+};
+
+export default AdvanceExpense;

src/Pages/Requests/Reimbursement.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, VStack, HStack, Text, Button, Divider } from '@chakra-ui/react';
+import { CalendarIcon } from '@chakra-ui/icons';
+import NormalTable from "../../Components/DataTable/NormalTable";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+
+const Reimbursement = ({ onOpen, tableHeadRow, extractedArray, isLoading }) => {
+    return (
+        <Box
+            rounded={"xl"}
+            py={3}
+            display={"flex"}
+            flexDirection={"column"}
+            bg={"#fff"}
+            shadow={"md"}
+            minH={"100%"}
+        >
+            <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
+                    Expenses
+                </Text>
+                <HStack w={"100%"} justifyContent={"space-between"}>
+                    <HStack>
+                        <Button
+                            fontWeight={500}
+                            size={"sm"}
+                            leftIcon={<CalendarIcon color={"purple.800"} />}
+                            colorScheme="gray"
+                            color={"gray.700"}
+                            variant="outline"
+                            fontSize={"xs"}
+                        >
+                            Select Date Range
+                        </Button>
+                        <Button
+                            as={"a"}
+                            fontWeight={500}
+                            size={"sm"}
+                            color="#667085"
+                            fontSize={"xs"}
+                            bg={"transparent"}
+                            _hover={"none"}
+                            cursor={"pointer"}
+                            textDecoration={"underline"}
+                        >
+                            Select all
+                        </Button>
+                    </HStack>
+                    <PrimaryButton onClick={onOpen} title={"Add to Report"} />
+                </HStack>
+            </VStack>
+            <Divider />
+            <NormalTable
+                emptyMessage={`We don't have any Sponsors `}
+                tableHeadRow={tableHeadRow}
+                data={extractedArray}
+                isLoading={isLoading}
+            />
+        </Box>
+    );
+};
+
+export default Reimbursement;

src/Pages/Requests/Requests.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState, useEffect } from "react";
 import {
   Box, Tabs, Tab, TabList, TabPanels, TabPanel,
   Button,
@@ -9,39 +9,33 @@ import {
   Text,
   VStack,
   HStack,
-  Checkbox
+  Checkbox,
+  useDisclosure
 } from "@chakra-ui/react";
-import { useContext, useEffect, useState } from "react";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { RiDeleteBin5Line } from "react-icons/ri";
-import { AiOutlineEdit } from "react-icons/ai";
-import { FaRegEye } from "react-icons/fa";
-import { PiReceipt } from "react-icons/pi";
-import { CalendarIcon } from "@chakra-ui/icons";
-import MiniHeader from "../../Components/MiniHeader";
-import NormalTable from "../../Components/DataTable/NormalTable";
-import { FaRegFilePdf } from "react-icons/fa";
+import Reimbursement from "./Reimbursement";
+import AdvanceExpense from "./AdvanceExpense";
 import { MdOutlineRamenDining } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { AiOutlineEdit } from "react-icons/ai";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import MiniHeader from "../../Components/MiniHeader";
+import { FaRegFilePdf } from "react-icons/fa";
+import AddReportModal from "./AddReportModal";
 
 const Requests = () => {
   const { requestsTable } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
+  // Simulate loading effect
   useEffect(() => {
-    // Set isLoading to true
     setIsLoading(true);
-
-    // Simulate a 3-second delay
-    const timer = setTimeout(() => {
-      setIsLoading(false); // Set isLoading to false after 3 seconds
-    }, 500);
-
-    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    const timer = setTimeout(() => setIsLoading(false), 500);
     return () => clearTimeout(timer);
-  }, []); // Empty dependency array means this effect runs once after the component mounts
+  }, []);
 
-  // ===============================[ Table Header ]
+  // Table headers
   const tableHeadRow = [
     "Transaction Type",
     "Date",
@@ -51,12 +45,11 @@ const Requests = () => {
     "Actions",
   ];
 
-  // const extractedArray = requestsTable.map((item)=>({ }))
-
+  // Extracted data for table
   const extractedArray = requestsTable.map((item, index) => ({
     "Transaction Type": (
       <Checkbox colorScheme="purple">
-        <Text as={"span"} display={"flex"} fontSize={'sm'} gap={2} alignItems={"center"}>
+        <Text as={"span"} display={"flex"} fontSize={'xs'} gap={2} alignItems={"center"}>
           <Icon
             as={MdOutlineRamenDining}
             boxSize={8}
@@ -76,8 +69,14 @@ const Requests = () => {
     "Wallet Type": (
 
 
-<Tag bg={index % 2 === 0 ? "#E8E6FF" : "#fff"} 
-        size="sm">{item.walletType}</Tag>
+      <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"}
+        size="sm"><Text
+          bgGradient="linear(to-l, #3725EA, #5E0FCD)"
+          bgClip="text"
+          fontSize={"xs"}
+          as={"span"}
+          fontWeight={600}
+        >{item.walletType}</Text></Tag>
     ),
 
     Document: (
@@ -136,25 +135,21 @@ const Requests = () => {
     ),
   }));
 
-
   return (
-    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
+      {/* Mini header component */}
       <MiniHeader
         title={"My Requests"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+        subTitle={"Manage your expense and reimbursement requests."}
         backButton={true}
       />
-      <Box color={"white"}>
+
+      {/* Tabs for switching between AdvanceExpense and Reimbursement */}
+      <Box color={"black"}>
         <Tabs variant="unstyled">
-          <TabList
-            bg={'#FFFFFF'}
-            borderRadius={'md'}
-            boxShadow={'sm'}
-          >
+          <TabList bg={'#FFFFFF'} borderRadius={'md'} boxShadow={'sm'} h={12}>
             <Tab
               _selected={{ color: "#fff", bg: "#3725EA" }}
-              // _hover={{ color: "#fff", bg: "#ddd" }}
-              color="black" bg="transparent"
               py={3}
               px={16}
               borderLeftRadius={'md'}
@@ -165,7 +160,6 @@ const Requests = () => {
             </Tab>
             <Tab
               _selected={{ color: "#fff", bg: "#3725EA" }}
-              color="black" bg="transparent"
               py={3}
               px={16}
               fontWeight={'600'}
@@ -175,160 +169,29 @@ const Requests = () => {
             </Tab>
           </TabList>
 
+          {/* Tab panels */}
           <TabPanels>
-            <TabPanel py={'4'} pl={'0'} pr={'0'}>
-              <Box
-                rounded={"xl"}
-                py={3}
-                display={"flex"}
-                flexDirection={"column"}
-                bg={"#fff"}
-                shadow={"md"}
-                minH={"100%"}
-              >
-                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
-                  <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
-                    Expenses
-                  </Text>
-                  <HStack w={"100%"} justifyContent={"space-between"}>
-                    <HStack>
-                      <Button
-                        fontWeight={500}
-                        size={"sm"}
-                        leftIcon={<CalendarIcon color={"purple.800"} />}
-                        colorScheme="gray"
-                        color={"gray.700"}
-                        variant="outline"
-                        fontSize={"xs"}
-                      >
-                        Select Date Range
-                      </Button>
-                      <Button
-                        as={"a"}
-                        fontWeight={500}
-                        size={"sm"}
-                        color="#667085"
-                        fontSize={"xs"}
-                        bg={"transparent"}
-                        _hover={"none"}
-                        cursor={"pointer"}
-                        textDecoration={"underline"}
-                      >
-                        Select all
-                      </Button>
-
-                    </HStack>
-
-                    <Button
-                      _hover={{
-                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                        opacity: 0.8,
-                      }}
-                      bgGradient="linear(to-r, #3725EA, #5E0FCD)"
-                      fontSize={"xs"}
-                      px={8}
-                      fontWeight={500}
-                      size={"sm"}
-                      color={"#fff"}
-                      variant="outline"
-                      transition={"0.5s all"}
-                      _active={{
-                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                        opacity: 1,
-                      }}
-                    >
-                      Add to Report
-                    </Button>
-                  </HStack>
-                </VStack>
-                <Divider />
-                <NormalTable
-                  emptyMessage={`We don't have any Sponers `}
-                  tableHeadRow={tableHeadRow}
-                  data={extractedArray}
-                  isLoading={isLoading}
-                />
-              </Box>
+            <TabPanel py={4} pl={0} pr={0}>
+              <AdvanceExpense
+                tableHeadRow={tableHeadRow}
+                extractedArray={extractedArray}
+                isLoading={isLoading}
+                onOpen={onOpen}
+              />
             </TabPanel>
-            <TabPanel py={'4'} pl={'0'} pr={'0'}>
-              <Box
-                rounded={"xl"}
-                py={3}
-                display={"flex"}
-                flexDirection={"column"}
-                bg={"#fff"}
-                shadow={"md"}
-                minH={"100%"}
-              >
-                <VStack mb={0} px={3} alignItems={"start"} gap={0}>
-                  <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
-                    Expenses
-                  </Text>
-                  <HStack w={"100%"} justifyContent={"space-between"}>
-                    <HStack>
-                      <Button
-                        fontWeight={500}
-                        size={"sm"}
-                        leftIcon={<CalendarIcon color={"purple.800"} />}
-                        colorScheme="gray"
-                        color={"gray.700"}
-                        variant="outline"
-                        fontSize={"xs"}
-                      >
-                        Select Date Range
-                      </Button>
-                      <Button
-                        as={"a"}
-                        fontWeight={500}
-                        size={"sm"}
-                        color="#667085"
-                        fontSize={"xs"}
-                        bg={"transparent"}
-                        _hover={"none"}
-                        cursor={"pointer"}
-                        textDecoration={"underline"}
-                      >
-                        Select all
-                      </Button>
-
-                    </HStack>
-
-                    <Button
-                      _hover={{
-                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                        opacity: 0.8,
-                      }}
-                      bgGradient="linear(to-r, #3725EA, #5E0FCD)"
-                      fontSize={"xs"}
-                      px={8}
-                      fontWeight={500}
-                      size={"sm"}
-                      color={"#fff"}
-                      variant="outline"
-                      transition={"0.5s all"}
-                      _active={{
-                        // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                        opacity: 1,
-                      }}
-                    >
-                      Add to Report
-                    </Button>
-                  </HStack>
-                </VStack>
-                <Divider />
-                <NormalTable
-                  emptyMessage={`We don't have any Sponers `}
-                  tableHeadRow={tableHeadRow}
-                  data={extractedArray}
-                  isLoading={isLoading}
-                />
-              </Box>
+            <TabPanel py={4} pl={0} pr={0}>
+              <Reimbursement
+                tableHeadRow={tableHeadRow}
+                extractedArray={extractedArray}
+                isLoading={isLoading}
+                onOpen={onOpen}
+              />
             </TabPanel>
           </TabPanels>
         </Tabs>
-
       </Box>
 
+      <AddReportModal isOpen={isOpen} onClose={onClose} />
 
     </Box>
   );

src/Pages/YourWallet/Transactions.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, VStack, Text, HStack, Button, Divider } from '@chakra-ui/react';
+import { CalendarIcon } from '@chakra-ui/icons';
+import NormalTable from "../../Components/DataTable/NormalTable";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+
+const Transactions = ({ tableHeadRow, extractedArray, isLoading, onOpen }) => {
+    return (
+        <Box
+            rounded={"xl"}
+            py={3}
+            display={"flex"}
+            flexDirection={"column"}
+            bg={"#fff"}
+            shadow={"md"}
+            minH={"100%"}
+        >
+            <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+                <Text fontSize={"lg"} fontWeight={600} color={'#000000'}>
+                    Transactions
+                </Text>
+                <HStack w={"100%"} justifyContent={"space-between"}>
+                    <HStack>
+                        <Button
+                            fontWeight={500}
+                            size={"sm"}
+                            leftIcon={<CalendarIcon color={"purple.800"} />}
+                            colorScheme="gray"
+                            color={"gray.700"}
+                            variant="outline"
+                            fontSize={"xs"}
+                        >
+                            Select Date Range
+                        </Button>
+                        <Button
+                            as={"a"}
+                            fontWeight={500}
+                            size={"sm"}
+                            color="#667085"
+                            fontSize={"xs"}
+                            bg={"transparent"}
+                            _hover={"none"}
+                            cursor={"pointer"}
+                            textDecoration={"underline"}
+                        >
+                            Select all
+                        </Button>
+                    </HStack>
+                    <PrimaryButton onClick={onOpen} title={"Add to Report"} />
+                </HStack>
+            </VStack>
+            <Divider />
+            <NormalTable
+                emptyMessage={`We don't have any transactions`}
+                tableHeadRow={tableHeadRow}
+                data={extractedArray}
+                isLoading={isLoading}
+            />
+        </Box>
+    );
+};
+
+export default Transactions;

src/Pages/YourWallet/YourWallet.jsx

@@ -0,0 +1,76 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Box, Divider, Text, Icon, useDisclosure } from '@chakra-ui/react';
+import MiniHeader from '../../Components/MiniHeader';
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { TbSquareRoundedPercentage } from "react-icons/tb";
+import Transactions from './Transactions';
+
+const YourWallet = () => {
+    const { walletTable } = useContext(GlobalStateContext); // Use walletTable instead of requestsTable
+    const [isLoading, setIsLoading] = useState(false);
+    const { onOpen } = useDisclosure();
+
+    // Simulate loading effect
+    useEffect(() => {
+        setIsLoading(true);
+        const timer = setTimeout(() => setIsLoading(false), 500);
+        return () => clearTimeout(timer);
+    }, []);
+
+    // Table headers
+    const tableHeadRow = ["TransactionType", "Date", "Amount"];
+
+    // Extracted data for table
+    const extractedArray = walletTable.map((item, index) => ({
+        "TransactionType": (
+            <Text as={"span"} display={"flex"} fontSize={'xs'} gap={2} alignItems={"center"}>
+                <Icon
+                    as={TbSquareRoundedPercentage}
+                    boxSize={8}
+                    p={1.5}
+                    bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+                    rounded={"full"}
+                />
+                {item.transactionType}
+            </Text>
+        ),
+        "Date": (
+            <Text fontSize={'xs'} as={"span"} colorScheme={"#363636"}>
+                {item.date}
+            </Text>
+        ),
+        "Amount": (
+            <Text fontSize={'xs'} fontWeight={600}>
+                {item.amountSpent}
+            </Text>
+        )
+    }));
+
+    return (
+        <Box p={4} overflowX={"scroll"}>
+            <MiniHeader title={"Your Wallet"} 
+            subTitle={"Overview of your wallet transactions"}
+            backButton={true}
+             />
+            <Box bg={'#FFFFFF'} borderRadius={'md'} boxShadow={'sm'} p={3}>
+                <Box>
+                    <Text color={'#5E0FCD'} fontSize={"sm"} fontWeight={600} mb={2}>
+                        Wallet Balance
+                    </Text>
+                    <Text color={'#000'} fontSize={"sm"} fontWeight={700} mb={1}>
+                        ₹ 10,000
+                    </Text>
+                </Box>
+            </Box>
+            <Divider />
+            <Transactions
+                tableHeadRow={tableHeadRow}
+                extractedArray={extractedArray}
+                isLoading={isLoading}
+                onOpen={onOpen}
+            />
+        </Box>
+    );
+};
+
+export default YourWallet;

src/Routes/Nav.js

@@ -1,12 +1,14 @@
 import { HiOutlineNewspaper } from "react-icons/hi";
 import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb";
 import {
+  RiCustomerService2Fill,
+  RiLogoutBoxLine,
   RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { RiExchangeBoxLine } from "react-icons/ri";
 import { VscSymbolClass } from "react-icons/vsc";
 import { FiHome, FiUsers } from "react-icons/fi";
-import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
+import {MdLogout, MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
 import {  GrNotification } from "react-icons/gr";
 import HomeIcon from "../assets/homeIcon.png"
 import { PiReceiptBold } from "react-icons/pi";
@@ -60,7 +62,13 @@ export const nav = [
     title: "Help & Support",
     type: "single",
     path: "/help-support",
-    Icon: MdOutlineLiveHelp,
+    Icon: RiCustomerService2Fill,
+  },
+  {
+    title: "Logout",
+    type: "single",
+    path: "/",
+    Icon: MdLogout,
   },
 ];
 

src/Routes/Routes.js

@@ -1,18 +1,43 @@
 import Dashbaord from "../Pages/Dashbaord";
+import Expenses from "../Pages/Expenses/Expenses";
+import AddNewReport from "../Pages/Report/AddNewReport";
+// import ReportsHistory from "../Pages/Report/ReportsHistory";
 import Report from "../Pages/Report/Report";
 import Requests from "../Pages/Requests/Requests";
-import Expenses from "../Pages/Expenses/Expenses";
 import Benefit from "../Pages/Benefit/Benefit";
 import Gifts from "../Pages/Gifts/Gifts";
 import HelpAndSupport from "../Pages/HelpAndSupport/HelpAndSupport";
+import Profile from "../Pages/Profile/Profile";
+import EditProfile from "../Pages/Profile/EditProfile";
+import Home from "../Pages/Home/Home";
+import ContactUs from "../Pages/ContactUs/ContactUs";
+import YourWallet from "../Pages/YourWallet/YourWallet";
+import BuyVoucherCard from "../Pages/Gifts/SelectDenomination";
+import ForWhom from "../Pages/Gifts/ForWhom";
+import WelcomeToOptifiiComponent from "../Pages/Onboarding/WelcomeFrame";
+import RequestReimbursement from "../Pages/Expenses/RequestReimbursement";
+import ReportsHistory from "../Pages/Report/ReportsHistory";
+
+
 
 export const RouteLink = [
-  
-  { path: "/", Component: Dashbaord },
+
+  { path: "/", Component: WelcomeToOptifiiComponent },
+  { path: "/home", Component: Home },
   { path: "/expenses", Component: Expenses },
   { path: "/reports", Component: Report },
+  { path: "/reports/history", Component: ReportsHistory },
+  { path: "/reports/add-new-report", Component: AddNewReport },
+  // { path: "/reports/reports-history", Component: ReportsHistory },
   { path: "/requests", Component: Requests },
   { path: "/benefit", Component: Benefit },
   { path: "/gifts", Component: Gifts },
   { path: "/help-support", Component: HelpAndSupport },
+  { path: "/profile", Component: Profile },
+  { path: "/profile/edit-profile", Component: EditProfile },
+  { path: "/contact-us", Component: ContactUs },
+  { path: "/buy-voucher-card", Component: BuyVoucherCard },
+  { path: "/for-whom-card", Component: ForWhom },
+  { path: "/log-in", Component: WelcomeToOptifiiComponent },
+  { path: "/request-reimbursement", Component: RequestReimbursement },
 ];

src/assets/Platinum.svg

@@ -0,0 +1,3 @@
+<svg width="51" height="8" viewBox="0 0 51 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.614031 7.56738L1.78733 0.500004H4.30646C4.854 0.500004 5.29111 0.600079 5.61779 0.800229C5.94677 1.00038 6.17223 1.273 6.29416 1.61809C6.41839 1.96317 6.44485 2.35312 6.37353 2.78793C6.29991 3.22274 6.14347 3.61384 5.90421 3.96123C5.66725 4.30631 5.35092 4.58008 4.95522 4.78253C4.55952 4.98268 4.08906 5.08276 3.54382 5.08276H1.80803L1.95642 4.17863H3.59213C3.93952 4.17863 4.23169 4.11881 4.46865 3.99918C4.70791 3.87725 4.89541 3.71161 5.03114 3.50226C5.16688 3.29061 5.25545 3.0525 5.29686 2.78793C5.34057 2.51876 5.32907 2.2818 5.26235 2.07705C5.19563 1.87 5.06335 1.70781 4.8655 1.59048C4.66995 1.47315 4.39618 1.41448 4.04419 1.41448H2.70526L1.68035 7.56738H0.614031ZM6.81093 7.56738L7.98422 0.500004H9.05054L8.02908 6.64945H11.2315L11.0797 7.56738H6.81093ZM13.2537 7.56738H12.1218L15.8384 0.500004H17.0704L18.4404 7.56738H17.3085L16.2767 1.78373H16.2214L13.2537 7.56738ZM13.9025 4.79979H17.5742L17.4223 5.69701H13.7506L13.9025 4.79979ZM19.2988 1.41794L19.4506 0.500004H24.9202L24.7684 1.41794H22.5633L21.5418 7.56738H20.479L21.5004 1.41794H19.2988ZM27.1952 0.500004L26.0219 7.56738H24.9556L26.1289 0.500004H27.1952ZM34.4524 0.500004L33.2791 7.56738H32.299L29.5694 2.38418H29.5073L28.6411 7.56738H27.5748L28.7481 0.500004H29.735L32.4681 5.69011H32.5337L33.3964 0.500004H34.4524ZM40.5527 0.500004H41.6224L40.8529 5.14832C40.7724 5.64295 40.5837 6.08121 40.2869 6.4631C39.9902 6.8427 39.6129 7.14178 39.1551 7.36033C38.6972 7.57659 38.1865 7.68471 37.6229 7.68471C37.0569 7.68471 36.5819 7.57659 36.1977 7.36033C35.8135 7.14178 35.5362 6.8427 35.366 6.4631C35.1981 6.08121 35.1555 5.64295 35.2383 5.14832L36.0079 0.500004H37.0742L36.3184 5.06205C36.2678 5.38183 36.292 5.66595 36.3909 5.91442C36.4921 6.16288 36.6601 6.35843 36.8947 6.50106C37.1317 6.6414 37.4296 6.71157 37.7885 6.71157C38.1474 6.71157 38.4683 6.6414 38.7513 6.50106C39.0366 6.35843 39.2689 6.16288 39.4484 5.91442C39.6301 5.66595 39.7463 5.38183 39.7969 5.06205L40.5527 0.500004ZM43.1727 0.500004H44.4668L45.8126 5.99379H45.8955L49.0496 0.500004H50.3436L49.1703 7.56738H48.1558L49.0081 2.4532H48.9426L46.0093 7.55703H45.1639L43.9354 2.44974H43.8698L43.014 7.56738H41.9994L43.1727 0.500004Z" fill="white"/>
+</svg>

src/assets/bell.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="49" viewBox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 37L37.5 18.5C37.5 8.28274 29.2173 1.41726e-05 19 1.28328e-05C8.78274 1.1493e-05 0.500011 8.28274 0.50001 18.5L0.500008 37L37.5 37Z" fill="#6938EF"/>
+<path d="M8.28921 36.9999C8.28921 30.9054 13.2298 25.9648 19.3243 25.9648C25.4188 25.9648 30.3594 30.9054 30.3594 36.9999L8.28921 36.9999Z" fill="#F0276C"/>
+<path d="M8.28921 37.0001C8.28921 43.0946 13.2298 48.0352 19.3243 48.0352C25.4188 48.0352 30.3594 43.0946 30.3594 37.0001L8.28921 37.0001Z" fill="#EDB500"/>
+<path d="M19 22.0703C22.0473 22.0703 24.5176 19.6 24.5176 16.5528C24.5176 13.5055 22.0473 11.0352 19 11.0352C15.9528 11.0352 13.4825 13.5055 13.4825 16.5528C13.4825 19.6 15.9528 22.0703 19 22.0703Z" fill="#FAFAFF"/>
+</svg>

src/assets/chip_rays.svg

@@ -0,0 +1,23 @@
+<svg width="40" height="24" viewBox="0 0 40 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_435_7323" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="24">
+<path d="M0.160156 0.824459H39.297V23.6731H0.160156V0.824459Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_435_7323)">
+<path d="M32.8871 22.3154C32.6374 22.2533 32.4171 22.1389 32.2601 21.9283C31.9963 21.5738 31.9547 21.1907 32.1558 20.7947C32.3156 20.4802 32.4943 20.1756 32.6498 19.8587C33.3614 18.4085 33.8526 16.8868 34.1129 15.2899C34.216 14.6569 34.2819 14.0204 34.3109 13.3793C34.337 12.8065 34.337 12.234 34.3018 11.6625C34.2047 10.0891 33.8939 8.55946 33.3558 7.07774C33.0426 6.21528 32.6635 5.38365 32.2086 4.58771C31.9717 4.17346 31.9647 3.76797 32.2426 3.3725C32.4001 3.14824 32.6268 3.02649 32.8871 2.96185H33.2575C33.5796 3.04026 33.8267 3.216 33.994 3.51053C34.663 4.68849 35.1982 5.92466 35.5969 7.22093C36.0676 8.75101 36.3361 10.3171 36.3959 11.917C36.4288 12.8001 36.4058 13.683 36.3088 14.5635C36.2265 15.3089 36.1075 16.0471 35.9395 16.7775C35.5451 18.4914 34.9143 20.1121 34.0638 21.6486C33.8776 21.9849 33.6377 22.2297 33.2575 22.3154H32.8871Z" fill="white"/>
+<path d="M21.0703 9.3478C21.129 9.09553 21.2429 8.87659 21.4486 8.71305C21.9364 8.32509 22.6235 8.43386 22.9674 8.95546C23.4101 9.62731 23.7209 10.3569 23.9031 11.1422C24.0338 11.7056 24.096 12.2773 24.0728 12.8548C24.0227 14.1017 23.6639 15.2528 22.9826 16.2974C22.7277 16.6883 22.362 16.8631 21.9038 16.7745C21.4682 16.6904 21.197 16.4101 21.0844 15.9767C21.0804 15.9609 21.0751 15.9456 21.0703 15.9301V15.5567C21.1181 15.3817 21.1997 15.224 21.2946 15.0698C21.7923 14.2612 22.0299 13.3831 21.9869 12.4285C21.9512 11.6358 21.7209 10.9062 21.3099 10.2331C21.2107 10.0705 21.1188 9.90681 21.0703 9.7212V9.3478Z" fill="white"/>
+<path d="M32.1318 12.6384C32.1224 14.7599 31.6877 16.7873 30.8066 18.7161C30.6218 19.1208 30.4216 19.5177 30.1977 19.9019C29.9506 20.3259 29.4656 20.5195 29.0071 20.3821C28.5465 20.2442 28.2421 19.8169 28.2606 19.3293C28.2676 19.1459 28.3272 18.9775 28.4179 18.8188C28.8569 18.0498 29.2082 17.2418 29.474 16.3962C29.7228 15.6048 29.8924 14.7967 29.9782 13.9705C30.0301 13.4721 30.0599 12.9727 30.0512 12.4717C30.0219 10.7787 29.6751 9.15524 28.9955 7.60529C28.8155 7.19464 28.6043 6.80026 28.3924 6.40573C28.0532 5.77411 28.3994 5.02417 29.0914 4.87331C29.5181 4.78035 29.9666 4.97691 30.1922 5.36596C30.6047 6.07709 30.9489 6.82108 31.2329 7.59324C31.5752 8.52283 31.8201 9.47809 31.9674 10.4581C32.0422 10.9562 32.0926 11.457 32.1143 11.9609C32.1239 12.1868 32.1283 12.4123 32.1318 12.6384Z" fill="white"/>
+<path d="M28.0376 12.5734C28.027 14.3798 27.6105 16.0852 26.7807 17.6873C26.7222 17.8004 26.6604 17.912 26.5967 18.0223C26.3726 18.4107 25.9188 18.6134 25.4887 18.519C25.0441 18.4214 24.7225 18.0632 24.6698 17.6175C24.6426 17.3872 24.6877 17.1747 24.7987 16.9753C25.1727 16.3043 25.4654 15.5997 25.6597 14.8548C25.7944 14.3381 25.8829 13.8138 25.9256 13.2806C25.9603 12.849 25.9679 12.4175 25.9377 11.9864C25.856 10.8108 25.5656 9.6907 25.0436 8.63419C24.961 8.4672 24.8708 8.30413 24.7857 8.1384C24.4277 7.44136 24.8928 6.62147 25.6708 6.59784C26.0705 6.58563 26.3922 6.76263 26.5945 7.11553C27.1514 8.08629 27.545 9.12199 27.782 10.2175C27.9143 10.8289 27.9978 11.4468 28.0225 12.0731C28.0291 12.2399 28.0317 12.4066 28.0376 12.5734Z" fill="white"/>
+</g>
+<mask id="mask1_435_7323" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="8" width="14" height="10">
+<path d="M2.89453 17.1946H15.5214V8.5783H2.89453V17.1946Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_435_7323)">
+<path d="M14.94 11.8372L10.0331 8.76562C9.82904 8.63776 9.60991 8.57986 9.39621 8.57986C8.92424 8.57986 8.48022 8.86312 8.28516 9.30476L10.3984 10.6276C11.1749 11.1137 11.6387 11.9538 11.6387 12.8749C11.6387 13.7961 11.1749 14.6363 10.3984 15.1224L8.28516 16.4451C8.48022 16.8866 8.92424 17.1702 9.39621 17.1702C9.60991 17.1702 9.82904 17.1121 10.0331 16.9841L14.94 13.9127C15.7034 13.4347 15.7034 12.315 14.94 11.8372Z" fill="#008041"/>
+</g>
+<mask id="mask2_435_7323" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="24">
+<path d="M0.160156 0.824459H39.297V23.6731H0.160156V0.824459Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_435_7323)">
+<path d="M9.6534 11.8374L4.74654 8.76587C4.54263 8.63801 4.32318 8.58011 4.10964 8.58011C3.47755 8.58011 2.89453 9.08778 2.89453 9.80376V15.9466C2.89453 16.6627 3.47755 17.1704 4.10964 17.1704C4.32318 17.1704 4.54232 17.1123 4.74654 16.9843L9.6534 13.9131C10.417 13.435 10.417 12.3152 9.6534 11.8374Z" fill="#F4832C"/>
+</g>
+</svg>

src/assets/gift.svg

@@ -0,0 +1,37 @@
+<svg width="91" height="111" viewBox="0 0 91 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.1797 60.4707L38.4199 62.0521L38.9526 61.3784C38.9526 61.3784 38.982 61.3439 39.033 61.2813C39.0585 61.2512 39.0878 61.2143 39.1244 61.1701C40.5107 59.5145 49.7719 48.8781 55.6143 53.6663C60.1427 57.3799 48.3418 61.3808 41.2661 63.3558C41.2295 63.365 41.1896 63.3766 41.1492 63.3883L41.5072 63.562C41.5105 63.562 41.5144 63.562 41.5178 63.562C41.551 63.5572 41.5837 63.5528 41.614 63.5455C42.9497 63.3029 56.7504 60.6469 60.352 55.236L60.3631 55.2176C60.5101 55.0002 60.6406 54.7719 60.7533 54.5346C63.702 48.3598 54.0356 44.3472 48.8066 45.3495C43.5777 46.3518 35.1797 60.4707 35.1797 60.4707Z" fill="#E2231A"/>
+<path d="M55.614 54.0688C60.1424 57.6304 48.3415 61.4668 41.2658 63.3607L41.5063 63.5587C41.5097 63.5587 41.5136 63.5587 41.5169 63.5587C41.5501 63.5543 41.5829 63.55 41.6132 63.5432C54.8119 61.5182 59.0159 57.6925 60.3512 55.5744L60.3623 55.5569C60.3806 55.5278 60.3988 55.5011 60.4133 55.4749C60.9204 54.6308 60.8512 53.7008 60.2526 52.8815C59.2455 51.4982 57.1037 49.4466 53.4256 49.7951C48.3896 50.2703 40.3616 59.7597 39.125 61.2673C40.5098 59.6767 49.7715 49.4776 55.614 54.0688Z" fill="#9D162E"/>
+<path d="M25.7489 45.9017C20.5199 44.8906 10.8536 48.9372 13.8017 55.164C13.9148 55.4031 14.0454 55.6333 14.1925 55.8527C14.1958 55.86 14.1997 55.8644 14.2035 55.8716C17.8051 61.3262 31.6082 64.0035 32.9411 64.2511C32.9704 64.2583 33.0031 64.2627 33.0373 64.2676C33.0412 64.2676 33.045 64.27 33.0484 64.27L33.4059 64.0948C33.3659 64.0831 33.326 64.0715 33.2894 64.0618C26.2137 62.0718 14.4128 58.0359 18.9412 54.2908C24.7832 49.4623 34.0449 60.1885 35.4312 61.8582C35.4677 61.9024 35.4971 61.9397 35.5226 61.9698C35.5736 62.0354 35.6029 62.0703 35.6029 62.0703L36.1356 62.7498L39.3759 61.1554C39.3759 61.1554 30.9827 46.9107 25.7489 45.9017Z" fill="#E2231A"/>
+<path d="M18.9389 54.2921C14.4105 58.0372 26.2114 62.0716 33.2871 64.0631L33.0465 64.2713C33.0432 64.2713 33.0393 64.2689 33.0355 64.2689C33.0027 64.264 32.97 64.2597 32.9392 64.2524C19.7405 62.1231 15.5369 58.1003 14.2017 55.873C14.1978 55.8657 14.194 55.8613 14.1906 55.854C14.1723 55.8239 14.154 55.7958 14.1396 55.7676C13.6324 54.8804 13.7017 53.9024 14.2998 53.0408C15.3069 51.5847 17.4491 49.4287 21.1273 49.7952C26.1633 50.2951 34.1908 60.2738 35.4279 61.8595C34.0426 60.1898 24.7809 49.4637 18.9389 54.2921Z" fill="#9D162E"/>
+<path d="M60.3695 62.7422L59.6208 72.4908L13.3488 73.2524L12.002 65.0268L27.9694 64.2711L47.4253 63.3542L60.3695 62.7422Z" fill="#FFCE00"/>
+<path d="M60.2579 62.7422L59.4688 72.4908L70.0441 76.6034L72.2536 69.6728L60.2579 62.7422Z" fill="#FFCE00"/>
+<path d="M14.1172 74.1648L18.647 110.265H56.852L59.1174 72.5039L14.1172 74.1648Z" fill="#FFCE00"/>
+<path d="M66.8379 104.86L70.1403 76.6019L59.117 72.5039L56.8516 110.265L66.8379 104.86Z" fill="#FFCE00"/>
+<path d="M69.8903 76.6017L60.0243 73.2507L13.8668 74.1647L13.1113 73.2507L59.7726 72.2354L69.8903 76.6017Z" fill="#FFB819"/>
+<path d="M32.3477 64.0653L33.3423 73.78V110.266H42.2041V73.6047L41.4992 63.6328L32.3477 64.0653Z" fill="#E2231A"/>
+<path d="M65.8629 65.9795L64.0869 74.0988L62.3652 107.283L65.8629 105.39L67.7693 75.6879L69.3553 67.9972L65.8629 65.9795Z" fill="#E2231A"/>
+<path d="M47.4262 63.8123L27.9703 64.271C27.9313 64.1694 27.9109 64.0615 27.9102 63.9526C27.9102 62.3509 32.2802 61.0583 37.6742 61.0583C42.9109 61.0583 47.1813 62.2786 47.4262 63.8123Z" fill="#E2231A"/>
+<path d="M15.6852 39.1119L-5.80039 28.4148L-6.83203 21.209L0.215299 21.9997L15.6852 39.1119Z" fill="#FFB819"/>
+<path d="M24.2795 26.7811L14.998 10.2101L17.0604 5.87573L24.2795 26.7811Z" fill="#FFB819"/>
+<path d="M36.4848 29.4558L39.5788 32.4034L35.2819 0.673828L29.4375 2.23429L36.4848 29.4558Z" fill="#FFB819"/>
+<path d="M48.1738 25.8152V14.3721H51.096L48.1738 25.8152Z" fill="#FFB819"/>
+<path d="M69.4857 8.12988L56.0781 30.1613V31.5368L71.7202 10.0369L69.4857 8.12988Z" fill="#FFB819"/>
+<path d="M63.9004 33.6176L74.9872 24.363L75.6748 27.4194L63.9004 33.6176Z" fill="#FFB819"/>
+<path d="M85.9877 31.5369L66.5645 40.0323L84.0971 37.952L90.1133 34.6573L85.9877 31.5369Z" fill="#FFB819"/>
+<path d="M1.23619 47.2689C-0.191949 47.2689 -1.35352 46.206 -1.35352 44.8994C-1.35352 43.5927 -0.191949 42.5293 1.23619 42.5293C2.66432 42.5293 3.82636 43.5923 3.82636 44.8994C3.82636 46.2065 2.66432 47.2689 1.23619 47.2689ZM1.23619 42.7492C-0.059144 42.7492 -1.11341 43.7136 -1.11341 44.8994C-1.11341 46.0851 -0.059144 47.0491 1.23619 47.0491C2.53152 47.0491 3.58578 46.0846 3.58578 44.8994C3.58578 43.7141 2.53152 42.7492 1.23619 42.7492Z" fill="#FF9E16"/>
+<path d="M10.2563 83.6581C9.5422 83.6581 8.96094 83.1267 8.96094 82.4734C8.96094 81.8201 9.5422 81.2881 10.2563 81.2881C10.9703 81.2881 11.5511 81.822 11.5511 82.4734C11.5511 83.1247 10.9703 83.6581 10.2563 83.6581ZM10.2563 81.3983C9.60812 81.3983 9.08123 81.8807 9.08123 82.4734C9.08123 83.066 9.60812 83.548 10.2563 83.548C10.9044 83.548 11.4308 83.066 11.4308 82.4734C11.4308 81.8807 10.9039 81.3983 10.2563 81.3983Z" fill="#605B55"/>
+<path d="M72.539 86.0283C71.8249 86.0283 71.2441 85.4944 71.2441 84.8435C71.2441 84.1926 71.8249 83.6582 72.539 83.6582C73.2531 83.6582 73.8343 84.1921 73.8343 84.8435C73.8343 85.4948 73.2531 86.0283 72.539 86.0283ZM72.539 83.7684C71.8913 83.7684 71.3644 84.2504 71.3644 84.8435C71.3644 85.4366 71.8937 85.9181 72.539 85.9181C73.1842 85.9181 73.714 85.4361 73.714 84.8435C73.714 84.2508 73.1867 83.7684 72.539 83.7684Z" fill="#FF9E16"/>
+<path d="M75.1297 59.203C74.6174 59.2031 74.1165 59.05 73.6905 58.7629C73.2645 58.4759 72.9324 58.0678 72.7363 57.5904C72.5402 57.1129 72.4889 56.5876 72.5888 56.0807C72.6887 55.5738 72.9354 55.1082 73.2977 54.7428C73.66 54.3774 74.1216 54.1285 74.624 54.0277C75.1265 53.9269 75.6474 53.9787 76.1207 54.1765C76.594 54.3743 76.9985 54.7093 77.2831 55.139C77.5677 55.5688 77.7195 56.074 77.7194 56.5908C77.7187 57.2834 77.4456 57.9473 76.9601 58.4371C76.4746 58.9268 75.8163 59.2023 75.1297 59.203ZM75.1297 54.2207C74.665 54.2207 74.2108 54.3597 73.8244 54.6201C73.438 54.8806 73.1368 55.2507 72.959 55.6838C72.7812 56.1169 72.7346 56.5934 72.8253 57.0531C72.9159 57.5129 73.1397 57.9352 73.4683 58.2667C73.7969 58.5981 74.2156 58.8238 74.6713 58.9153C75.1271 59.0067 75.5995 58.9598 76.0289 58.7804C76.4582 58.601 76.8252 58.2973 77.0833 57.9075C77.3415 57.5177 77.4793 57.0595 77.4793 56.5908C77.4786 55.9624 77.2308 55.36 76.7903 54.9157C76.3498 54.4714 75.7526 54.2215 75.1297 54.2207Z" fill="#E2231A"/>
+<path d="M33.4237 46.4868C33.7599 46.1477 33.7599 45.5979 33.4237 45.2588C33.0876 44.9197 32.5425 44.9197 32.2064 45.2588C31.8702 45.5979 31.8702 46.1477 32.2064 46.4868C32.5425 46.8259 33.0876 46.8259 33.4237 46.4868Z" fill="#605B55"/>
+<path d="M8.32648 100.601C8.43569 100.134 8.14912 99.6663 7.68641 99.5561C7.2237 99.446 6.76007 99.735 6.65087 100.202C6.54166 100.669 6.82822 101.136 7.29093 101.246C7.75364 101.356 8.21727 101.067 8.32648 100.601Z" fill="#FF9E16"/>
+<path d="M76.3632 72.4292C76.6994 72.0901 76.6994 71.5403 76.3632 71.2012C76.027 70.8621 75.482 70.8621 75.1458 71.2012C74.8096 71.5403 74.8096 72.0901 75.1458 72.4292C75.482 72.7683 76.027 72.7683 76.3632 72.4292Z" fill="#FF9E16"/>
+<path d="M14.3515 25.932C14.5651 25.0192 14.0046 24.1045 13.0996 23.889C12.1946 23.6736 11.2878 24.2389 11.0742 25.1518C10.8607 26.0647 11.4211 26.9793 12.3261 27.1948C13.2311 27.4103 14.1379 26.8449 14.3515 25.932Z" fill="#E2231A"/>
+<path d="M60.9736 35.5023C61.5242 35.5023 61.9706 35.0521 61.9706 34.4967C61.9706 33.9412 61.5242 33.491 60.9736 33.491C60.4229 33.491 59.9766 33.9412 59.9766 34.4967C59.9766 35.0521 60.4229 35.5023 60.9736 35.5023Z" fill="#FF9E16"/>
+<path d="M47.8469 33.6261L47.549 33.3262L46.2984 34.5876L45.0474 33.3262L44.75 33.6261L46.0006 34.8881L44.75 36.1496L45.0474 36.45L46.2984 35.1881L47.549 36.45L47.8469 36.1496L46.5958 34.8881L47.8469 33.6261Z" fill="#FFCE00"/>
+<path d="M75.7545 95.7942L75.6347 95.6729L75.1294 96.1825L74.6242 95.6729L74.5039 95.7942L75.0091 96.3038L74.5039 96.8135L74.6242 96.9348L75.1294 96.4252L75.6347 96.9348L75.7545 96.8135L75.2497 96.3038L75.7545 95.7942Z" fill="#FF9E16"/>
+<path d="M11.8062 60.0054L11.6571 59.8555L11.032 60.486L10.4065 59.8555L10.2578 60.0054L10.8829 60.6364L10.2578 61.2674L10.4065 61.4174L11.032 60.7864L11.6571 61.4174L11.8062 61.2674L11.1807 60.6364L11.8062 60.0054Z" fill="#FF9E16"/>
+<path d="M60.7516 57.7847L60.6029 57.6348L59.9773 58.2653L59.3518 57.6348L59.2031 57.7847L59.8287 58.4157L59.2031 59.0462L59.3518 59.1967L59.9773 58.5657L60.6029 59.1967L60.7516 59.0462L60.126 58.4157L60.7516 57.7847Z" fill="#FF9E16"/>
+<path d="M23.3219 32.9864L23.1732 32.8359L22.5477 33.4669L21.9221 32.8359L21.7734 32.9864L22.399 33.6169L21.7734 34.2479L21.9221 34.3979L22.5477 33.7669L23.1732 34.3979L23.3219 34.2479L22.6963 33.6169L23.3219 32.9864Z" fill="#FF9E16"/>
+<path d="M66.2418 44.0118L66.0926 43.8613L65.4676 44.4923L64.842 43.8613L64.6934 44.0118L65.3184 44.6423L64.6934 45.2733L64.842 45.4232L65.4676 44.7928L66.0926 45.4232L66.2418 45.2733L65.6163 44.6423L66.2418 44.0118Z" fill="#605B55"/>
+<path opacity="0.15" d="M29.8105 104.428C29.8105 104.428 48.4803 88.3349 53.0346 81.6271C55.3659 78.1936 59.0137 65.8525 59.0137 65.8525L68.7508 71.478L66.829 77.1039L65.2281 99.3256L56.2489 104.428H29.8105Z" fill="#F19A00"/>
+</svg>