Install react-snowfall and create a not found page

package.json

@@ -13,7 +13,8 @@
     "axios": "^1.7.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.0"
+    "react-router-dom": "^7.0.0",
+    "react-snowfall": "^2.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/App.jsx

@@ -4,6 +4,7 @@ import LoginPage from "./pages/LoginPage";
 import CreateAccount from "./pages/CreateAccountPage";
 import Account from "./pages/AccountPage";
 import About from "./pages/AboutPage";
+import NotFound from "./pages/NotFoundPage";
 import Accommodation from "./pages/Accommodation";
 import Activities from "./pages/Activities";
 import Gastronomy from "./pages/Gastronomy";
@@ -21,6 +22,7 @@ function App() {
           <Route path="/accommodation" element={<Accommodation />} />
           <Route path="/activities" element={<Activities />} />
           <Route path="/gastronomy" element={<Gastronomy />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </div>
     </Router>

src/pages/NotFoundPage.jsx

@@ -0,0 +1,17 @@
+import Snowfall from "react-snowfall";
+import "../styles/NotFound.css";
+import HomeButton from "../components/HomeButton";
+
+function NotFound() {
+  return (
+    <div className="not-found-page">
+      <Snowfall color="white" snowflakeCount={200} />
+      <div className="not-found-container">
+        <h1>404</h1>
+        <p>Oops! The page you are looking for does not exist.</p>
+        <HomeButton />
+      </div>
+    </div>
+  );
+}
+export default NotFound;

src/styles/NotFound.css

@@ -0,0 +1,22 @@
+.not-found-page {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2c3e50;
+  font-family: "Georgia", sans-serif;
+}
+
+.not-found-container {
+  text-align: center;
+}
+
+.not-found-container h1 {
+  font-size: 6rem;
+  margin-bottom: 20px;
+}
+
+.not-found-container p {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+}