my-website/app/not-found.tsx

import { textCorrection } from "@/_assets/decorations";
import { Home24Regular } from "@fluentui/react-icons";
import { Metadata } from "next";
import Image from "next/image";
import React from "react";
import { notFoundImage } from "./_assets/illustrations";
import Button from "./_components/Button";
import { canonicalName, getTitle } from "./_data/metadata";
import cls from "./not-found.module.scss";

export const metadata: Metadata =
{
	title: getTitle("Page not found", canonicalName.hostname),
	robots: "noindex"
};

// [SPECIAL]

const NotFoundPage: React.FC = () => (
	<main className={ `${cls.page} not-found` }>
		<div className={ cls.illustration }>
			<h1>404...</h1>
			<Image src={ notFoundImage.src } alt={ notFoundImage.alt } priority />
		</div>
		<div className={ cls.content }>
			<div className={ cls.caption }>
				<h2>...fox not found</h2>
				<Image src={ textCorrection.src } alt={ textCorrection.alt } />
			</div>
			<Button as="next" href="/" icon={ <Home24Regular /> }>
				To the homepage
			</Button>
		</div>
	</main>
);

export default NotFoundPage;