diff --git a/src/App.tsx b/src/App.tsx index c10d915..a567845 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> + } /> diff --git a/src/assets/icons/404.svg b/src/assets/icons/404.svg new file mode 100644 index 0000000..d96ddba --- /dev/null +++ b/src/assets/icons/404.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/NotFound404.tsx b/src/pages/NotFound404.tsx new file mode 100644 index 0000000..ca23628 --- /dev/null +++ b/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 ( + + + + + Page not found! + Oops! We coudn't find the page you were looking for + + Go to home page + + + + + + + + + ); +}; + +export default NotFound404; diff --git a/src/styles/_404.scss b/src/styles/_404.scss new file mode 100644 index 0000000..67ec483 --- /dev/null +++ b/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; + } +} diff --git a/src/styles/style.scss b/src/styles/style.scss index 292e23d..57fcc77 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -17,3 +17,4 @@ @import "./search-result"; @import "./pagination"; @import "./all-posts"; +@import "./404";