RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/web/src/app/not-found.tsx
View File

@ -4,34 +4,35 @@ import { Undo2 } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
export const metadata = { export const metadata = {
title: "404 | Page Not Found - OpenCut", title: "404 | Page Not Found - OpenCut",
description: description:
"Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.", "Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
}; };
export default function NotFound() { export default function NotFound() {
return ( return (
<div className="min-h-screen flex bg-white items-center justify-center"> <div className="min-h-screen flex bg-white items-center justify-center">
<div className="text-center"> <div className="text-center">
<div className="mb-4"> <div className="mb-4">
<Image <Image
src="/images/404-custom.png" src="/images/404-custom.png"
alt="404 - Page Not Found" alt="404 - Page Not Found"
width={300} width={300}
height={200} height={200}
className="mx-auto" 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> </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>
);
} }