404, 500 new layout

client/src/app/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import ErrorContainer from '@/containers/error';
+
+export default function ErrorPage() {
+  <ErrorContainer errorType="500" heading="Internal server error" message="Something went wrong and we are working on to fix the problem. Please, try again later." />
+}

client/src/app/not-found.tsx

@@ -1,20 +1,16 @@
 import Link from 'next/link';
 
 import { Button } from '@/components/ui/button';
+import ErrorContainer from '@/containers/error';
 
 export default function NotFound() {
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <h2 className="mb-24 text-[200px] font-extrabold leading-10 text-green-400">404</h2>
-      <h3 className="mb-4 text-[52px]">Page not found</h3>
-      <p className="mb-6 text-base font-light">
-        It looks like the links is broken or the page has been removed.
-      </p>
+    <ErrorContainer errorType="404" heading="Page not found" message="It looks like the links is broken or the page has been removed.">
       <Link href="/projects">
         <Button variant="primary" size="base">
           Go to home page
         </Button>
       </Link>
-    </div>
+    </ErrorContainer>
   );
 }

client/src/containers/error/index.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import Image from 'next/image';
+
+import ERROR_SVG from '@/svgs/ui/error.svg';
+
+type ErrorTypes = {
+  errorType: '404' | '500';
+  heading: string;
+  message: string;
+  children?: React.ReactNode;
+};
+
+export default function ErrorContainer({ errorType, heading, message, children }: ErrorTypes) {
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center space-y-6">
+      <Image src={ERROR_SVG} alt="error" width={83} height={108} />
+      <span className="text-[40px] font-bold text-green-400">{errorType}</span>
+      <h2 className="text-[96px]">{heading}</h2>
+      <p>{message}</p>
+      {children}
+    </div>
+  );
+}