Not found 2

import { Button } from "@/components/ui/button";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyTitle,
} from "@/components/ui/empty";

export function NotFoundPage() {
	return (
		<div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden">
			<Empty>
				<EmptyHeader>
					<EmptyTitle className="mask-b-from-20% mask-b-to-80% font-extrabold font-heading text-9xl">
						404
					</EmptyTitle>
					<EmptyDescription className="-mt-8 text-nowrap text-foreground/80">
						The page you're looking for might have been <br />
						moved or doesn't exist.
					</EmptyDescription>
				</EmptyHeader>
				<EmptyContent>
					<div className="flex gap-2">
						<Button asChild>
							<a href="#">
								<IconPlaceholder
									data-icon="inline-start"
									hugeicons="Home01Icon"
									lucide="HomeIcon"
									phosphor="HouseIcon"
									remixicon="RiHomeLine"
									tabler="IconHome"
								/>
								Go Home
							</a>
						</Button>

						<Button asChild variant="outline">
							<a href="#">
								<IconPlaceholder
									data-icon="inline-start"
									hugeicons="CompassIcon"
									lucide="CompassIcon"
									phosphor="CompassIcon"
									remixicon="RiCompassLine"
									tabler="IconCompass"
								/>{" "}
								Explore
							</a>
						</Button>
					</div>
				</EmptyContent>
			</Empty>
		</div>
	);
}