designed 404 not found page

src/components/NotFound/NotFound.css

@@ -0,0 +1,76 @@
+.innerNotFound {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: 80%;
+}
+
+.HoldAnimation {
+  width: 55%;
+}
+
+.HoldAnimation > img {
+  width: 100%;
+}
+
+.HoldText {
+  margin-left: 8vw;
+  margin-top: 50px;
+  width: 30%;
+  position: relative;
+}
+
+.HeaderText {
+  margin-bottom: 2rem;
+}
+.HeaderText > h1,
+h4 {
+  text-align: center;
+}
+
+.pageList {
+  padding-left: 2em;
+  list-style-type: circle;
+}
+
+/* For smaller screens */
+@media only screen and (max-width: 1024px) {
+  .innerNotFound {
+    flex-direction: column;
+  }
+
+  .HoldAnimation {
+    width: 70%;
+  }
+
+  .HoldText {
+    width: 60%;
+    margin: 0 auto;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .pageList li {
+    margin-bottom: 0;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .innerNotFound {
+    height: initial;
+  }
+
+  .HoldAnimation {
+    width: 90%;
+  }
+
+  .HoldText {
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .pageList li {
+    margin-bottom: 0;
+  }
+}

src/components/NotFound/NotFound.tsx

@@ -1,13 +1,48 @@
 import { Container, Image } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
-import Dog from "../home/dog.jpg";
+import "./NotFound.css";
+import logo from "./NotFoundDog.svg";
 
 export default function NotFound() {
   return (
-    <Container className="d-flex flex-column justify-center align-items-center">
-      <Image src={Dog} rounded fluid />
+    <Container className="pawhub py-2">
+      <div className="innerNotFound">
+        <div className="HoldAnimation">
+          <Image src={logo} alt="page not found"></Image>
+        </div>
+        <div className="HoldText">
+          <div className="HeaderText">
+            <h1>Ruh Roh! 404 Error</h1>
+            <h4>Page Not Found</h4>
+          </div>
+          <p>The pets you&apos;re looking for are in another castle!</p>
 
-      <h1>Page Not Found</h1>
+          <p>
+            You either found a broken link or the content you were looking for
+            was removed. Sorry!
+          </p>
+
+          <p>Heres a couple of pages you might have been looking for:</p>
+          <ul className="pageList">
+            <li>
+              <Link to="/">HOME</Link>
+            </li>
+            <li>
+              <Link to="/pets">PETS</Link>
+            </li>
+            <li>
+              <Link to="/resources">RESOURCES</Link>
+            </li>
+            <li>
+              <Link to="/tips">TIPS</Link>
+            </li>
+            <li>
+              <Link to="/donate">DONATE</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
     </Container>
   );
 }

src/components/NotFound/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}