From 03f9ebede870ef780780ee4607be44bcf7784b5f Mon Sep 17 00:00:00 2001
From: Megh Bari <meghbari01@gmail.com>
Date: Mon, 18 Aug 2025 02:20:29 +0530
Subject: [PATCH] fix: use Button asChild with Link for better semantics and
 accessibility on 404 page

---
 apps/web/src/app/not-found.tsx | 53 +++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index e9b7de0a..3b173995 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -4,34 +4,35 @@ import { Undo2 } from "lucide-react";
 import Image from "next/image";
 
 export const metadata = {
-  title: "404 | Page Not Found - OpenCut",
-  description:
-    "Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
+    title: "404 | Page Not Found - OpenCut",
+    description:
+        "Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
 };
 
 export default function NotFound() {
-  return (
-    <div className="min-h-screen flex bg-white items-center justify-center">
-      <div className="text-center">
-        <div className="mb-4">
-          <Image
-            src="/images/404-custom.png"
-            alt="404 - Page Not Found"
-            width={300}
-            height={200}
-            className="mx-auto"
-          />
+    return (
+        <div className="min-h-screen flex bg-white items-center justify-center">
+            <div className="text-center">
+                <div className="mb-4">
+                    <Image
+                        src="/images/404-custom.png"
+                        alt="404 - Page Not Found"
+                        width={300}
+                        height={200}
+                        className="mx-auto"
+                    />
+                </div>
+                <p className="text-gray-600  mb-8">
+                    Sorry, the page you&apos;re looking for can&apos;t be found.
+                </p>
+                <Button asChild>
+                    <Link href="/" className="flex items-center gap-2">
+                        <Undo2 className="h-4 w-4" aria-hidden="true" focusable="false" />
+                        <span>Go Back To Home</span>
+                    </Link>
+                </Button>
+
+            </div>
         </div>
-        <p className="text-gray-600  mb-8">
-          Sorry, the page you&apos;re looking for can&apos;t be found.
-        </p>
-        <Button>
-          <Link href="/" className="flex items-center gap-2">
-            <Undo2 className="h-4 w-4" />
-            Go Back To Home
-          </Link>
-        </Button>
-      </div>
-    </div>
-  );
+    );
 }