404

src/App.tsx

@@ -18,6 +18,7 @@ import NewsArticle from "./pages/NewsArticle";
 import Category from "./pages/Category";
 import SearchResult from "./pages/SearchResult";
 import AllPosts from "./pages/AllPosts";
+import NotFound404 from "./pages/NotFound404";
 
 // Components
 import Header from "./components/header/Header";
@@ -43,6 +44,7 @@ const App = () => {
             <Route path="/news/:id" element={<NewsArticle />} />
             <Route path="/search/:word" element={<SearchResult />} />
             <Route path="/all/:category" element={<AllPosts />} />
+            <Route path="*" element={<NotFound404 />} />
           </Routes>
         </AnimatePresence>
         <Footer />

src/pages/NotFound404.tsx

@@ -0,0 +1,30 @@
+// Modules
+import { Link } from "react-router-dom";
+// import {Api} from '../api/Api';
+
+// Icons
+import Robot404 from "../assets/icons/404.svg";
+
+const NotFound404 = () => {
+  // const language = new Api('').language;
+  return (
+    <main className="not-found">
+      <div className="container">
+        <div className="not-found-inner">
+          <div className="not-found-left">
+            <h1>Page not found!</h1>
+            <h3>Oops! We coudn't find the page you were looking for</h3>
+            <h4>
+              <Link to="/">Go to home page</Link>
+            </h4>
+          </div>
+          <div className="not-found-right">
+            <img src={Robot404} alt="404" />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default NotFound404;

src/styles/_404.scss

@@ -0,0 +1,82 @@
+.not-found {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.not-found-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 32px;
+}
+
+.not-found-left h3 {
+  font-size: 24px;
+  color: #939393;
+}
+
+.not-found-left h4 {
+  font-size: 18px;
+  color: black;
+}
+
+.not-found-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.not-found-left h1 {
+  color: #000;
+  font-size: 48px;
+}
+
+.not-found-right {
+  max-height: 736px;
+  max-width: 736px;
+  width: 100%;
+  height: 100%;
+}
+
+.not-found-right img {
+  max-height: 736px;
+  max-width: 736px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+@media screen and (max-width: 1020px) {
+  .not-found-inner {
+    flex-direction: column-reverse;
+  }
+
+  .not-found-right {
+    max-height: 500px;
+    max-width: 500px;
+  }
+
+  .not-found-right img {
+    max-height: 500px;
+    max-width: 500px;
+  }
+
+  .not-found-left {
+    justify-content: center;
+  }
+  .not-found-left * {
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .not-found-left h1 {
+    font-size: 32px;
+  }
+  .not-found-left h3 {
+    font-size: 16px;
+  }
+}

src/styles/style.scss

@@ -17,3 +17,4 @@
 @import "./search-result";
 @import "./pagination";
 @import "./all-posts";
+@import "./404";