diff --git a/src/app.jsx b/src/app.jsx
index a3f527d..54c3e3c 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -9,6 +9,7 @@ import MessagesPage from "./pages/messages-page";
import SendMessagePage from "./pages/send-message-page";
import TestApiPage from "./tests/test-api-page";
import TestComponentsPage from "./tests/test-components-page";
+import Error404Page from "./pages/404-page";
import GlobalStyle from "./styles/global-style";
function Provider({ children }) {
@@ -62,10 +63,12 @@ function App() {
} />
} />
+ } />
+
);
}
diff --git a/src/assets/ic-paperairplane.svg b/src/assets/ic-paperairplane.svg
new file mode 100644
index 0000000..fabc93a
--- /dev/null
+++ b/src/assets/ic-paperairplane.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/pages/404-page.jsx b/src/pages/404-page.jsx
new file mode 100644
index 0000000..cde6c03
--- /dev/null
+++ b/src/pages/404-page.jsx
@@ -0,0 +1,152 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { PrimaryButton } from "../components/button/button";
+import BUTTON_SIZE from "../components/button/button-size";
+import styled from "styled-components";
+import CrushedPaperPlane from "../assets/ic-paperairplane.svg";
+import logoImage from "../assets/logo.svg";
+import { media } from "../utils/media";
+
+const TopContainer = styled.article`
+ height: 100vh;
+ border: 1px solid #ff000021;
+ display: flex;
+ font-size: 80px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+`;
+
+const ContentsContainer = styled.section`
+ &::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: url(${CrushedPaperPlane}) center/cover repeat;
+ background-size: 250px;
+ opacity: 0.15;
+ z-index: 0;
+ }
+
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+`;
+
+const Contents = styled.article`
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const ErrorNumber = styled.h1`
+ font-weight: 900;
+ color: var(--color-purple-700);
+ margin: 0;
+ font-size: 200px;
+
+ ${media.mobile} {
+ font-size: 130px;
+ }
+`;
+
+const ErrorComment = styled.span`
+ font-size: 80px;
+ color: #6e6293;
+ font-weight: 700;
+
+ em {
+ font-size: 100px;
+ font-weight: 800;
+ font-style: normal;
+ color: #240079;
+ }
+
+ ${media.tablet} {
+ font-size: 70px;
+ em {
+ font-size: 90px;
+ }
+ }
+
+ ${media.mobile} {
+ font-size: 50px;
+ em {
+ font-size: 60px;
+ }
+ }
+`;
+
+const ErrorCommentSofter = styled.span`
+ font-size: 50px;
+ color: #6e6293;
+ font-weight: 400;
+
+ ${media.tablet} {
+ font-size: 40px;
+ }
+
+ ${media.mobile} {
+ font-size: 30px;
+ }
+`;
+
+const AirplaneSVG = styled.img`
+ width: 250px;
+ padding: 30px 0;
+
+ ${media.mobile} {
+ width: 200px;
+ }
+`;
+
+const HomeButton = styled(PrimaryButton)`
+ margin-top: 120px;
+ font-weight: 400;
+ padding: 14px 90px;
+
+ ${media.tablet} {
+ justify-self: anchor-center;
+ width: calc(100% - 48px);
+ padding: 14px 20px;
+ margin: 120px 24px 24px 24px;
+ }
+`;
+
+const Error404Page = () => {
+ const navigate = useNavigate();
+
+ const handleMainButtonClick = () => {
+ navigate("/");
+ };
+
+ useEffect(() => {
+ document.title = "404 - Page Not Found";
+ }, []);
+
+ return (
+
+
+
+
+ 404
+
+ Oops! Page Not Found...
+
+
+ Don't worry, let's get you back on track.
+
+
+
+
+
+ );
+};
+
+export default Error404Page;