linkashare · dev-phantom · Aug 4, 2022 · Aug 6, 2022
diff --git a/README.md b/README.md
@@ -121,7 +121,7 @@ To get a local copy up and running follow these simple steps.
 - [x] Added the navbar
 - [ ] Change Licence to MIT
 - [ ] Add Linting Support
-- [ ] Create 404 Page
+- [x] Create 404 Page
 - [ ] Create SignUp
 - [ ] Create Login
 - [ ] Create Homepage
@@ -164,7 +164,7 @@ Distributed under the Apache License. See `LICENSE.txt` for more information.
 ## Acknowledgments
 
 These are list of resources that we find helpful and would like to give credit to.
-
+* [dribbble](https://dribbble.com)
 * [Img Shields](https://shields.io)
 * [Font Awesome](https://fontawesome.com)
 * [React Icons](https://react-icons.github.io/react-icons/search)

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Link-A-Share</title>
   </head>

diff --git a/logo.png b/logo.png
diff --git a/screenshot.png b/screenshot.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,13 @@
 import { Routes, Route } from 'react-router-dom';
 import Home from './Pages/Home';
-
+import PageNotFound from './Pages/PageNotFound';
 
 
 function App() {
   return (
    <Routes>
      <Route path='/' element={<Home />} />
+     <Route path='*' element={<PageNotFound />} />
    </Routes>
   )
 }

diff --git a/src/Assets/img/jaconda-error-404.png b/src/Assets/img/jaconda-error-404.png
diff --git a/src/Assets/index.tsx b/src/Assets/index.tsx
@@ -1,5 +1,6 @@
 import logo from "./img/logo.png";
-
+import errorImg from "./img/jaconda-error-404.png";
 export {
     logo,
+    errorImg,
 }
diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx
@@ -13,8 +13,8 @@ const Home = () => {
         <Navbar />
       </header>
       <div className="flex justify-center items-center h-screen flex-col">
-        <div className='font-gotham text-primary text-9xl md:lg sm:md'>Linkashare</div>
-        <p>timi gbetrabaye from here</p>
+        <div className='font-gotham text-primary lg:text-9xl md:lg sm:md'>Linkashare</div>
+        <p>About to start work here next</p>
       </div>
     </main>
 </Fragment>

diff --git a/src/Pages/PageNotFound.tsx b/src/Pages/PageNotFound.tsx
@@ -0,0 +1,31 @@
+import Navbar from "../Components/Navbar";
+import { errorImg } from "../Assets/index";
+import { useNavigate } from "react-router-dom";
+const PageNotFound = () =>{
+    let navigate = useNavigate();
+    const handleHome = () => {
+        navigate('/')
+    }
+    return(
+        <div className="">
+            <header>
+                <Navbar />
+            </header>
+            <div className="flex text-center bg-dark lg:text-left text-textColor h-screen
+                pt-[6rem] lg:flex-row lg:justify-between  md:pl-0 
+                md:flex md:justify-center md:items-center md:flex-col md:text-center
+                sm:flex sm:flex-col sm:text-center
+                md:pt-0 sm:pt-[9rem]">
+                <div className="lg:pl-[3rem]">
+                    <div className="text-[3rem] font-gotham text-primary">Oops!</div>
+                    <p className="lg:w-[80%] py-2">We could not find that page. Please go back to the home page</p>
+                    <button onClick={handleHome} className="bg-primary px-5 py-3 mt-3 rounded-full">Back To Homepage</button>
+                </div>
+                <div className="hidden lg:flex xl:flex pt-9 md:hidden sm:hidden">
+                    <img src={errorImg} alt="page not found" />
+                </div>
+            </div>
+        </div>
+    )
+}
+export default PageNotFound;