feat: implement custom 404 not-found page

app/not-found.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center p-4">
+      <Image
+        src="https://cdn.gunshiz.top/404-erika.png"
+        alt="404 Background"
+        fill
+        className="-z-10 object-cover opacity-40"
+      />
+      
+      <div className="text-center space-y-6">
+        <h1 className="text-8xl font-bold">404</h1>
+        <h2 className="text-3xl font-semibold">ไม่พบหน้าที่คุณต้องการ</h2>
+        <p className="text-muted-foreground text-lg">
+          ขออภัย หน้าที่คุณกำลังพยายามเข้าถึงอาจถูกลบ ย้าย หรือไม่มีอยู่ตั้งแต่แรก
+        </p>
+        <Button asChild size="lg">
+          <Link href="/">กลับสู่หน้าหลัก</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

next.config.ts

@@ -5,6 +5,10 @@ const nextConfig: NextConfig = {
   allowedDevOrigins: ['test.gunshiz.top'],
   images: {
     remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.gunshiz.top',
+      },
       {
         protocol: 'https',
         hostname: 'cdn.discordapp.com',