From cfa2461ae3b463a73e49bda75e58e12d02aa8d50 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 19 Jun 2024 19:49:31 +0200
Subject: [PATCH] Refactor NotFoundPage component in not-found.tsx

---
 app/not-found.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/not-found.tsx b/app/not-found.tsx
index b261e32..a949aca 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,20 +1,23 @@
+'use client';
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
-function NotFoundPage() {
+export default function NotFoundPage() {
   return (
-    <div className="grid h-screen place-content-center px-4">
-      <div className="text-center">
-        <h1 className="text-9xl font-black">404</h1>
-        <p className="text-2xl font-bold tracking-tight sm:text-4xl">Uh-oh!</p>
-        <p className="mt-4 text-gray-500">We can&apos;t find that page.</p>
-
-        <Button asChild className="mt-6 text-foreground">
-          <Link href="/">Go Back Home</Link>
-        </Button>
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
+      <div className="space-y-2 text-center">
+        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
+          404
+        </h1>
+        <p className="text-muted-foreground md:text-xl">
+          Oops, the page you are looking for could not be found.
+        </p>
       </div>
+      <Button
+        onClick={() => window.history.back()}
+        variant="secondary"
+      >
+        Go Back
+      </Button>
     </div>
   );
-}
-
-export default NotFoundPage;
+}
\ No newline at end of file