Aplio
NextJs
404 Page

404 Page

To customize the 404 page, you can make changes to the app/not-found.jsx file. Here's how you can customize different elements of the page:

<section className="mb-150 pt-[200px]">
  <div className="container relative">
    <div className="mx-auto max-w-[700px] text-center">
      <h1 className="from-0to-primary/0 bg-gradient-to-b from-primary to-90% bg-clip-text text-[140px] font-bold leading-[1] text-transparent dark:text-transparent">
        404
      </h1>
      <p className="section-tagline -mt-16">Error</p>
      <h2 className="mb-9 text-[64px] font-bold leading-[1.22] ">
        Ooops! <br />
        Page Not Found
      </h2>
      <p className="mb-8 text-xl">
        This page doesn’t exist or was removed! <br />
        We suggest you go back to home.
      </p>
      <Link href="/" className="btn">
        Go Back-Home
      </Link>
    </div>
  </div>
</section>
 

After customizing the elements in the not-found.jsx file, save the changes. When the 404 page is rendered, it will reflect your customizations.