17 add UI for 404 page

next.config.mjs

@@ -4,6 +4,13 @@ const nextConfig = {
   env: {
     APP_SERVER_URL: process.env.APP_SERVER_URL,
   },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  }
 }
 
 export default nextConfig

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
     "@percy/sdk-utils": "^1.28.3",
+    "@svgr/webpack": "^8.1.0",
     "@tabler/icons-react": "^3.3.0",
     "@testing-library/jest-dom": "^6.4.3",
     "@testing-library/react": "^15.0.6",

src/app/[...not_found]/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import NotFoundIcon from '@/public/assets/icons/404.svg';
+import { useRouter } from 'next/navigation';
+import { IconArrowBack } from '@tabler/icons-react';
+
+export default function NotFoundPage() {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center gap-4 p-4">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <NotFoundIcon className="size-48" />
+        <p className="max-w-md text-center text-sm">
+          Looks like you`ve stumbled upon a page that`s playing hide and seek
+          with us. Don`t worry, it happens to the best of us. But fear not,
+          we`re here to help you get back on track!
+        </p>
+        <button onClick={() => router.push('/')} className="btn">
+          <IconArrowBack /> Go back home
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/auth/layout.tsx

@@ -1,16 +1,10 @@
-import Image from 'next/image';
+import AppLogoIcon from '@/public/assets/icons/app-logo.svg';
 
 const AuthLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center">
       <div className="flex w-full max-w-md flex-col items-center justify-center p-4">
-        <Image
-          src="/assets/icons/app-logo.svg"
-          className="h-9 w-auto"
-          alt="App Logo"
-          width={100}
-          height={40}
-        />
+        <AppLogoIcon className="w-36" />
         {children}
       </div>
     </div>