Merge pull request #39 from RutikKulkarni/frontend

Design responsive 404 page and update userPersistence utility for log…

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import NotFound from "./pages/Page404/Page404"
 import Home from "./pages/Home/Home";
 import About from "./pages/About/About";
 import Services from "./pages/Services/Services";
@@ -36,6 +37,7 @@ function App() {
             element={BgLayout(EditAccountInfo)()}
           />
           <Route path="/explore" element={BgLayout(Explore)()} />
+          <Route path="*" element={BgLayout(NotFound)()} />
         </Routes>
       </ThemeProvider>
     </Router>

frontend/src/components/Widget/User/User.jsx

@@ -7,16 +7,16 @@ import { LuLifeBuoy } from "react-icons/lu";
 import { FiLogOut } from "react-icons/fi";
 import { HiOutlineLightBulb } from "react-icons/hi";
 import { ThemeContext } from "../../../context/ThemeProvider/ThemeProvider";
+import { clearUserData } from "../../../utility/userPersistence";
 import {ToggleThemeSwitcher, ThemeSwitcher} from "../../Buttons/ThemeSwitcher/ThemeSwitcher";
 
 const Widget = React.forwardRef((props, ref) => {
   const { theme } = useContext(ThemeContext);
   const navigate = useNavigate();
 
   const handleLogout = () => {
-    localStorage.removeItem("userId");
-    localStorage.removeItem("token");
-    navigate("/");
+    clearUserData();
+    navigate("/login");
   };
 
   const handleMyAccount = () => {

frontend/src/pages/Page404/Page404.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./Page404.module.css";
+import { Link } from "react-router-dom";
+import NotFoundImage from "../../assets/svg/404.svg";
+import { IoArrowForwardCircleOutline } from "react-icons/io5";
+
+const NotFound = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <img src={NotFoundImage} alt="404 Not Found" className={styles.image} />
+        <h1 className={styles.title}>404</h1>
+        <p className={styles.subtitle}>Oops! Page not found</p>
+        <p className={styles.description}>
+          Sorry, the page you are looking for might be in another castle.
+          <br></br>Please check the URL or go back to the home.
+        </p>
+        <Link to="/">
+          <button variant="contained" className={styles.joinButton}>
+            Go to Homepage{" "}
+            <IoArrowForwardCircleOutline className={styles.arrowIcon} />
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

frontend/src/pages/Page404/Page404.module.css

@@ -0,0 +1,118 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: transparent;
+  text-align: center;
+  color: var(--secondary-color);
+  padding: 20px;
+}
+
+.image {
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    margin: 0 auto 20px;
+}
+
+.title {
+  font-size: 10rem;
+  margin: 0;
+  color: var(--text-color);
+}
+
+.subtitle {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0 0 20px 0;
+  color: var(--text-color);
+}
+
+.description {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  color: var(--text-color);
+}
+
+.joinButton {
+  padding: 10px 20px;
+  padding-left: 1.2em;
+  font-size: 17px;
+  font-weight: 500;
+  border: none;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-top: 30px;
+  display: inline-flex;
+  align-items: center;
+  font-family: Poppins;
+  transition: background-color 0.3s, padding-left 0.3s;
+}
+
+.joinButton:hover {
+  background: darken(10%);
+  padding-left: 1.5em;
+}
+
+.arrowIcon {
+  margin-left: 10px;
+  font-size: 30px;
+  transition: margin-left 0.3s;
+}
+
+.joinButton:hover .arrowIcon {
+  margin-left: 15px;
+}
+
+/* Media query for max-width: 800px */
+@media (max-width: 800px) {
+  .title {
+    font-size: 6rem;
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+
+  .joinButton {
+    padding: 8px 16px;
+    font-size: 15px;
+    border-radius: 8px;
+  }
+
+  .arrowIcon {
+    margin-left: 8px;
+  }
+}
+
+/* Media query for min-width: 801px and max-width: 1349px */
+@media (min-width: 801px) and (max-width: 1349px) {
+  .title {
+    font-size: 4rem;
+  }
+
+  .subtitle {
+    font-size: 1.2rem;
+  }
+
+  .description {
+    font-size: 0.9rem;
+  }
+
+  .joinButton {
+    padding: 9px 18px;
+    font-size: 16px;
+    border-radius: 9px;
+  }
+
+  .arrowIcon {
+    margin-left: 9px;
+  }
+}

frontend/src/utility/handleRedirections.js

@@ -11,6 +11,7 @@ const handleNavigate = (path, navigate) => {
     contact: "/contact",
     login: "/login",
     signup: "/signup",
+    explore: "/explore",
   };
 
   navigate(redirects[path]);

frontend/src/utility/userPersistence.js

@@ -12,4 +12,14 @@ const persistUser = (userId, token, loginType) => {
   localStorage.setItem("loginType", loginType);
 };
 
-export { persistUser };
+const clearUserData = () => {
+  localStorage.removeItem("userId");
+  localStorage.removeItem("token");
+  localStorage.removeItem("loginType");
+};
+
+const isLoggedIn = () => {
+  return localStorage.getItem("token") !== null;
+};
+
+export { persistUser, clearUserData, isLoggedIn };