Merge pull request #321 from bounswe/feature/FE-not-found-page

Add not found page

frontend/src/App.js

@@ -9,6 +9,7 @@ import HomePage from "./components/home/HomePage.js";
 import CommunityPage from "./components/community/CommunityPage.js";
 import MarketsPage from "./components/markets/MarketsPage.js";
 import PortfolioPage from "./components/portfolio/PortfolioPage.js";
+import NotFound from "./components/notfound/NotFound.js";
 
 function App() {
   return (
@@ -29,6 +30,7 @@ function App() {
             <Route path="portfolio" element={<PortfolioPage />} />
 
             <Route path="/" element={<Navigate to="/home" />} />
+            <Route path="*" element={<NotFound />} />
           </Route>
         </Routes>
       </div>

frontend/src/components/notfound/NotFound.js

@@ -0,0 +1,30 @@
+// src/components/NotFound.js
+import React from "react";
+import { Link } from "react-router-dom";
+import "../../styles/NotFound.css";
+import notfoundbear from "../../assets/notfound-bear.png";
+
+const NotFound = () => {
+  return (
+    <div className="not-found-container">
+      <div className="error-404">
+        <h1 className="animated-bounce">404</h1>
+      </div>
+      <p className="error-message">
+        Oops! It looks like you are lost. Let the bear help you find your way.
+      </p>
+      <div className="notfoundbear">
+        <img
+          src={notfoundbear}
+          alt="Not Found Bear"
+          className="notfoundbear-img"
+        />
+      </div>
+      <Link to="/" className="back-home">
+        Take me home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;

frontend/src/styles/NotFound.css

@@ -0,0 +1,80 @@
+.not-found-container {
+    text-align: center;
+    margin-top: 50px;
+    padding: 20px;
+    font-family: 'Roboto', sans-serif;
+}
+
+.error-404 h1 {
+    font-size: 10rem;
+    margin: 0;
+    color: var(--color-error-500);
+}
+
+.error-message {
+    font-size: 1.5rem;
+    color: var(--color-neutral-600);
+    margin-top: -20px;
+    animation: fadeIn 2s ease-in-out;
+}
+
+.notfoundbear {
+    position: relative;
+    margin: 50px auto;
+    width: 100px;
+}
+
+.notfoundbear-img {
+    width: 100%;
+    animation: float 3s ease-in-out infinite;
+}
+
+.back-home {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 20px;
+    color: var(--color-neutral-white);
+    background-color: var(--color-primary-500);
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+.back-home:hover {
+    background-color: var(--color-primary-600);
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.animated-bounce {
+    animation: bounce 1.5s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}