fix: use Button asChild with Link for better semantics and accessibility on 404 page

This commit is contained in:
Megh Bari 2025-08-18 02:20:29 +05:30
parent a9a0b83703
commit 03f9ebede8
1 changed files with 27 additions and 26 deletions

View File

@ -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 youre looking for isnt available. Head back to the homepage or continue exploring OpenCut.",
title: "404 | Page Not Found - OpenCut",
description:
"Oops! The page youre looking for isnt 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>
);
);
}