diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 9d355c0..d54a3e8 100644 --- a/frontend/src/App.jsx +++ b/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)()} /> + diff --git a/frontend/src/assets/svg/404.svg b/frontend/src/assets/svg/404.svg new file mode 100644 index 0000000..7fce943 --- /dev/null +++ b/frontend/src/assets/svg/404.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/Widget/User/User.jsx b/frontend/src/components/Widget/User/User.jsx index 4f07219..83dd8a5 100644 --- a/frontend/src/components/Widget/User/User.jsx +++ b/frontend/src/components/Widget/User/User.jsx @@ -7,6 +7,7 @@ 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) => { @@ -14,9 +15,8 @@ const Widget = React.forwardRef((props, ref) => { const navigate = useNavigate(); const handleLogout = () => { - localStorage.removeItem("userId"); - localStorage.removeItem("token"); - navigate("/"); + clearUserData(); + navigate("/login"); }; const handleMyAccount = () => { diff --git a/frontend/src/pages/Page404/Page404.jsx b/frontend/src/pages/Page404/Page404.jsx new file mode 100644 index 0000000..b6b26e5 --- /dev/null +++ b/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 ( +
+
+ 404 Not Found +

404

+

Oops! Page not found

+

+ Sorry, the page you are looking for might be in another castle. +

Please check the URL or go back to the home. +

+ + + +
+
+ ); +}; + +export default NotFound; diff --git a/frontend/src/pages/Page404/Page404.module.css b/frontend/src/pages/Page404/Page404.module.css new file mode 100644 index 0000000..2efb558 --- /dev/null +++ b/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; + } +} diff --git a/frontend/src/utility/handleRedirections.js b/frontend/src/utility/handleRedirections.js index f53eb8a..3a49e23 100644 --- a/frontend/src/utility/handleRedirections.js +++ b/frontend/src/utility/handleRedirections.js @@ -11,6 +11,7 @@ const handleNavigate = (path, navigate) => { contact: "/contact", login: "/login", signup: "/signup", + explore: "/explore", }; navigate(redirects[path]); diff --git a/frontend/src/utility/userPersistence.js b/frontend/src/utility/userPersistence.js index 8409ebf..004f91f 100644 --- a/frontend/src/utility/userPersistence.js +++ b/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 };