From 09ea848e35c6ebde476b907bd08a036569e97c25 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 3 Feb 2022 19:58:12 +0300
Subject: [PATCH] use custom Image component

---
 src/pages/404/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/404/index.tsx b/src/pages/404/index.tsx
index 2a808d3..fade882 100644
--- a/src/pages/404/index.tsx
+++ b/src/pages/404/index.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import Image from "next/image";
 import styled from "styled-components";
 import { Button } from "src/components/Button";
 import { useRouter } from "next/router";
+import { Image } from "src/components/Image";
 
 const StyledNotFound = styled.div`
   display: flex;
@@ -26,12 +26,18 @@ const StyledSubMessage = styled.div`
   margin-bottom: 25px;
 `;
 
+const StyledImageWrapper = styled.div`
+  width: 300px;
+`;
+
 const NotFound: React.FC = () => {
   const router = useRouter();
 
   return (
     <StyledNotFound>
-      <Image src="/404.svg" alt="" width={300} height={400} />
+      <StyledImageWrapper>
+        <Image src="/404.svg" alt="404" width={300} height={400} />
+      </StyledImageWrapper>
       <StyledMessage>WIZARDS BEHIND CURTAINS?</StyledMessage>
       <StyledSubMessage>
         Looks like you&apos;re lost, let&apos;s head back to the home!