From 397832e4a1e57e6745e2a893055b56c34053931e Mon Sep 17 00:00:00 2001
From: mialsong <mialsong@icloud.com>
Date: Thu, 4 Dec 2025 00:44:26 -0800
Subject: [PATCH] implemented responsive design and animation to 404

---
 src/app/not-found.tsx | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 80f1361..79b67c5 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,17 +1,30 @@
+"use client";
 import Link from "next/link";
+import { motion } from "motion/react";
 
 const NotFound = () => {
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <h1 className="font-playfair text-ascend-red-orange text-5xl">404</h1>
-      <p className="font-playfair mt-3 text-4xl font-bold">Page Not Found</p>
-      <Link
-        href="/"
-        className="bg-ascend-red-orange mt-5 rounded-full px-8 py-2 text-xl text-white transition hover:bg-red-700"
-      >
-        Back to Home
-      </Link>
-    </div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+      viewport={{ once: true }}
+    >
+      <div className="flex h-screen w-screen flex-col items-center justify-center">
+        <h1 className="font-playfair text-ascend-red-orange text-8xl lg:text-9xl">
+          404
+        </h1>
+        <p className="font-playfair mt-2 text-4xl font-bold lg:mt-5 lg:text-6xl">
+          Page Not Found
+        </p>
+        <Link
+          href="/"
+          className="bg-ascend-red-orange mt-4 rounded-full px-6 py-2 text-xl text-white transition hover:bg-red-700 lg:mt-8 lg:px-12 lg:py-4 lg:text-4xl"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </motion.div>
   );
 };