Not found and loading pages

app/loading.jsx

@@ -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;

app/not-found.jsx

@@ -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;

components/PropertyCard.jsx

@@ -1,6 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { FaBed, FaBath, FaRulerCombined, FaMoneyBill } from 'react-icons/fa';
+import {
+  FaBed,
+  FaBath,
+  FaRulerCombined,
+  FaMoneyBill,
+  FaMapMarker,
+} from 'react-icons/fa';
 
 const PropertyCard = ({ property }) => {
   const getRateDisplay = () => {
@@ -63,7 +69,7 @@ const PropertyCard = ({ property }) => {
 
         <div className='flex flex-col lg:flex-row justify-between mb-4'>
           <div className='flex align-middle gap-2 mb-4 lg:mb-0'>
-            <i className='fa-solid fa-location-dot text-lg text-orange-700'></i>
+            <FaMapMarker className='text-orange-700 mt-1' />
             <span className='text-orange-700'>
               {' '}
               {property.location.city}, {property.location.state}

package-lock.json

@@ -11,7 +11,8 @@
         "next": "14.2.4",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^5.2.1"
+        "react-icons": "^5.2.1",
+        "react-spinners": "^0.14.1"
       },
       "devDependencies": {
         "postcss": "^8",
@@ -1369,6 +1370,16 @@
         "react": "*"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -12,7 +12,8 @@
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "react-spinners": "^0.14.1"
   },
   "devDependencies": {
     "postcss": "^8",