Complete 404 page (#20)

rokartur · May 14, 2024 · 7d2c5c3 · 7d2c5c3
2 parents e42ee1f + e51fb05
commit 7d2c5c3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/website/src/assets/images/404_photo.jpg b/website/src/assets/images/404_photo.jpg
diff --git a/website/src/pages/notFound.tsx b/website/src/pages/notFound.tsx
@@ -5,6 +5,8 @@ import { Overlay } from '@/components/overlay/overlay'
 import { SEO } from '@/components/seo'
 import { useScrollTop } from '@/hooks/useScrollTop'
 import { Link } from 'react-router-dom'
+import photo404 from '@/assets/images/404_photo.jpg'
+import { Image } from '@/components/image'
 
 const metaData = {
 	title: 'Not Found',
@@ -28,6 +30,7 @@ export default function NotFound() {
 							<Link to={'/'}>
 								Back to home page
 							</Link>
+							<Image source={photo404}/>
 						</div>
 					</Container>
 				</AnimateWrapper>

diff --git a/website/src/styles/notFound.module.scss b/website/src/styles/notFound.module.scss
@@ -26,13 +26,17 @@
 
     transition: background-color .2s;
 
-    img {
-      width: 100%;
-      max-width: 400px;
-    }
     &:is(:hover, :focus) {
       background-color: $neutral-100;
     }
   }
 
+  img {
+    margin: 24px 0 0 0;
+    width: 100%;
+    max-width: 256px;
+    object-fit: cover;
+    border-radius: 16px;
+    box-shadow: $drop-shadow-medium;
+  }
 }