Nextjs project not-found file

not-found.tsx

import Link from 'next/link';
import Image from 'next/image';
import { Title } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { PiHouseLineBold } from 'react-icons/pi';
import SocialItems from '@/components/ui/social-shares';
import NotFoundImg from '@public/not-found.png';

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col bg-[#F8FAFC]">
      <div className="flex grow items-center px-6 xl:px-10">
        <div className="mx-auto text-center">
          <Image
            src={NotFoundImg}
            alt="not found"
            className="mx-auto mb-8 aspect-[360/326] max-w-[256px] xs:max-w-[370px] lg:mb-12 2xl:mb-16"
          />
          <Title
            as="h1"
            className="text-[22px] font-bold leading-normal text-gray-1000 lg:text-3xl"
          >
            Désolé, aucune page trouvée
          </Title>
          <p className="mt-3 text-sm leading-loose text-gray-500 lg:mt-6 lg:text-base lg:leading-loose">
            Contactez l&apos;administrateur de la plateforme
            <br className="hidden sm:inline-block" />
            au cas où vous cherchez quelque chose de particulier
          </p>
          <Link href={'/'}>
            <Button
              tag="span"
              size="xl"
              className="mt-8 h-12 px-4 xl:h-14 xl:px-6"
            >
              <PiHouseLineBold className="mr-1.5 text-lg" />
              Retour à l&apos;accueuil
            </Button>
          </Link>
        </div>
      </div>
      <SocialItems />
    </div>
  );
}