Not found and loading pages

2024-07-09 11:12:21 -04:00
parent fa26583823
commit ac598205d0
5 changed files with 72 additions and 4 deletions
@@ -0,0 +1,20 @@
+'use client';
+import ClipLoader from 'react-spinners/ClipLoader';
+
+const override = {
+  display: 'block',
+  margin: '100px auto',
+};
+
+const loading = ({ loading }) => {
+  return (
+    <ClipLoader
+      color='#3B82F6'
+      loading={loading}
+      cssOverride={override}
+      size={150}
+      aria-label='Loading Spinner'
+    />
+  );
+};
+export default loading;
@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import { FaExclamationTriangle } from 'react-icons/fa';
+
+const NotFoundPage = () => {
+  return (
+    <section className='bg-blue-50 min-h-screen flex-grow'>
+      <div className='container m-auto max-w-2xl py-24'>
+        <div className='bg-white px-6 py-24 mb-4 shadow-md rounded-md border m-4 md:m-0'>
+          <div className='flex justify-center'>
+            <FaExclamationTriangle className='text-yellow-400 text-8xl fa-5x' />
+          </div>
+          <div className='text-center'>
+            <h1 className='text-3xl font-bold mt-4 mb-2'>Page Not Found</h1>
+            <p className='text-gray-500 text-xl mb-10'>
+              The page you are looking for does not exist.
+            </p>
+            <Link
+              href='/'
+              className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 px-6 rounded'
+            >
+              Go Home
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className='flex-grow'></div>
+    </section>
+  );
+};
+export default NotFoundPage;