[Feature]: Add No Results Found Page for Unsuccessful Searches

src/App.js

@@ -1,15 +1,19 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Homepage from './Homepage';
 import Opportunities from './Page/Opportunities.jsx';
+import PageNotFound from './Page/PageNotFound.jsx';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route index element={<Homepage />} />
-        <Route path="/opportunities" element={<Opportunities />} />
+        <Route index element={<Homepage />} /> {/* Route for default homepage */}
+        <Route path="/opportunities" element={<Opportunities />} /> {/* Route for opportunities page */}
+        {/* Catch-all route for unmatched paths */}
+        <Route path="*" element={<PageNotFound />} />
       </Routes>
     </BrowserRouter>
   );
 }
+
 export default App;

src/Page/PageNotFound.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import NoResultFound from '../components/NoResultFound/NoResultFound';
+
+function PageNotFound() {
+  return (
+    <div>
+      <NoResultFound />
+    </div>
+  );
+}
+
+export default PageNotFound;

src/components/NoResultFound/NoResultFound.jsx

@@ -1,13 +1,41 @@
 import React from 'react';
-import { FaFrown } from 'react-icons/fa';
+// import { FaFrown } from 'react-icons/fa';
 
 export default function NoResultFound() {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 p-4 text-center dark:text-white">
-      <FaFrown className="text-7xl" />
-      <div className="">
-        <p className="text-2xl font-bold">No Results Found</p>
-        <p>We couldn't find any results for your search.</p>
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="flex items-center gap-9 p-5">
+        {/* Icon Section */}
+        <div className="icon-container">
+          <img
+            src="https://private-user-images.githubusercontent.com/146618499/380475741-bee5c0c2-f728-4d93-a53e-be0d46980df7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzAwMTQxMzAsIm5iZiI6MTczMDAxMzgzMCwicGF0aCI6Ii8xNDY2MTg0OTkvMzgwNDc1NzQxLWJlZTVjMGMyLWY3MjgtNGQ5My1hNTNlLWJlMGQ0Njk4MGRmNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMDI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTAyN1QwNzIzNTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05NzNmOTk3MmM1OGVhOGZhNDAyNzIzYzJlYTFiMGVkMDZjNWFlY2FiYjMyMTJjZDQ4NjgxMzY3NWM0M2JlN2Q1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.WfZTSgt9SqgAK0ZFtMBeEXDQu067YCkMQv4LZJHXXUI"
+            alt="Not Found Image"
+            width={500}
+            height={300}
+            className="rounded-lg"
+          />
+        </div>
+
+        {/* Details Section */}
+        <div>
+          <h2 className="mb-4 text-4xl font-bold text-gray-800">No Results Found</h2>
+          <p className="mb-2 text-lg text-gray-600">We couldn't find any results for your search.</p>
+          <p className="mb-8 text-sm text-gray-500">Try a different search or use the links below.</p>
+          <div className="mb-8 flex flex-col gap-5 space-x-4">
+            <button
+              // onClick={handleGoBack}
+              className="text-customTeal rounded px-6 py-2 transition hover:text-blue-600"
+            >
+              Go Back
+            </button>
+            <button
+              // onClick={handleSearchAgain}
+              className="text-customTeal rounded px-6 py-2 transition hover:text-blue-600"
+            >
+              Search Again
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );