style(404): better image path

app/form/[id]/not-found.tsx

@@ -1,27 +1,70 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+import { Spinner } from "@/components/ui/spinner";
+import Background from "@/public/404.png";
+import Profile from "@/public/404-image.jpg";
+import { Activity, Home } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function NotFound() {
+  const [goingHome, goHome] = useState(false);
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    const messages = [
+      "ฟอร์มนี้อาจจะถูก Erika กินไปแล้ว...",
+      "หรือว่าฟอร์มนี้โดน Sukuna เล่นไปแล้ว...",
+      "ฟอร์มนี้อาจจะหมดอายุหรือโดนลบไปแล้ว...",
+      "บางทีคนสร้างอาจจะลืมเปิดฟอร์มนะ...",
+      "ฟอร์มหายไปไหนน้า... ลองเช็คลิงก์ดูอีกทีสิ",
+    ];
+
+    setMessage(messages[Math.floor(Math.random() * messages.length)]);
+  }, []);
+  
   return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center p-4">
+    <div className="relative flex min-h-screen w-full flex-col items-center justify-center gap-2">
       <Image
-        src="https://cdn.gunshiz.top/404-erika.png"
+        src={Background}
         alt="404 Background"
         fill
         priority
-        className="-z-10 object-cover opacity-40"
+        className="z-[-1] object-cover opacity-20 grayscale"
       />
-      
-      <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>
+      <div className="rounded-sm bg-white p-4 pb-12 shadow-lg max-sm:landscape:hidden">
+        <Image 
+          src={Profile}
+          alt="404" 
+          width={256} 
+          height={256} 
+          className="vintage-filter h-64 w-64 bg-gray-300" 
+        />
+      </div>
+      <h2 className="text-2xl font-semibold">404 ไม่พบหน้านี้</h2>
+        <span>{message || <Skeleton className="h-6 w-40" />}</span>
+        <div className="flex gap-2">
+          <Link href="/">
+            <Button
+              onClick={() => {
+                goHome(true);
+              }}
+              disabled={goingHome}
+              variant="destructive"
+            >
+              {goingHome ? <Spinner /> : <Home />}
+              กลับหน้าแรก
             </Button>
+          </Link>
+          <Link href="https://status.sudloh.com">
+            <Button variant="link" className="text-secondary-foreground">
+              <Activity />
+              สถานะเว็บไซต์
+            </Button>
+          </Link>
         </div>
     </div>
   );

app/not-found.tsx

@@ -5,6 +5,8 @@ import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { useEffect, useState } from "react";
 import { Spinner } from "@/components/ui/spinner";
+import Background from "@/public/404.png";
+import Profile from "@/public/404-image.jpg";
 import { Activity, Home } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -27,14 +29,15 @@ export default function NotFound() {
   return (
     <div className="flex min-h-screen w-full flex-col items-center justify-center gap-2 bg-[#2225] backdrop-blur-md backdrop-grayscale">
       <Image
-        src="/404.png"
+        src={Background}
         alt="404 Background"
         fill
         priority
         className="fixed top-0 left-0 z-[-1] h-full w-full object-cover opacity-20"
       />
       <div className="rounded-sm bg-white p-4 pb-12 shadow-lg max-sm:landscape:hidden">
-        <Image src="/404-image.jpg" 
+        <Image 
+          src={Profile}
           alt="404" 
           width={256} 
           height={256}