404 Page

The 404 page is displayed when a user tries to access a page that doesn't exist. It provides a user-friendly message and a link to return to the home page. The 404 page is located at iot-frontend/src/pages/404.tsx.

Link

The "Return Home" link navigates the user back to the home page ("/") when clicked. It uses the Link component from Next.js to handle the navigation.

<div className='flex flex-col items-center justify-center'>
  <p className='text-3xl md:text-4xl lg:text-5xl text-gray-800 mt-12'>
    Page Not Found
  </p>
  <p className='container md:text-lg lg:text-xl text-gray-600 mt-8'>
    Sorry, the page you are looking for could not be found.
  </p>
  <Link
    href='/'
    className='flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-gray-100 px-4 py-2 mt-12 rounded transition duration-150'
    title='Return Home'
  >
    <svg
      xmlns='http://www.w3.org/2000/svg'
      className='h-5 w-5'
      viewBox='0 0 20 20'
      fill='currentColor'
    >
      <path
        fill-rule='evenodd'
        d='M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z'
        clip-rule='evenodd'
      ></path>
    </svg>
    <span>Return Home</span>
  </Link>
</div>

Conclusion

The 404 page provides a user-friendly way to handle cases where a user tries to access a non-existent page. It displays a clear message indicating that the page could not be found and offers a convenient link to return to the home page.