Merge pull request #213 from PratikMane0112/404ErrorPge

Updated 404 error page

frontend/src/App.jsx

@@ -10,6 +10,7 @@ import TermsOfService from './Components/common/Footer/LegalSection/TermsOfServi
 import CreateMeeting from './Pages/Create-Meeting-Page';
 import MeetingDetails from './Components/Pages/Meeting-Page/Meeting-Details';
 import MeetingAvailability from './Components/Pages/Meeting-Page/Meeting-Availability';
+import ErrorPage from './Pages/Error-Page';
 import Navbar from './Components/Pages/Landing-Page/Navbar';
 
 const App = () => {
@@ -38,6 +39,8 @@ const App = () => {
             path='/meetingDetails/meetingAvailaibility'
             element={<MeetingAvailability />}
           />
+          {/* Error  */}
+        <Route path='*' element={<ErrorPage />} />
         </Routes>
         <Footer />
       </Router>

frontend/src/Components/Pages/Error-Page/ErrorPage.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import backgroundImage from '../../../assets/Landing-Page-Assets/ErrorImage.png';
+
+const Error = () => {
+  return (
+    <div
+      className="flex justify-center items-center h-screen bg-cover bg-center text-center text-black"
+      style={{ backgroundImage: `url(${backgroundImage})` }}
+    >
+      <div className="p-5 rounded-lg md:p-20 w-11/12 md:w-auto bg-opacity-75">
+        <p className="text-white text-2xl md:text-4xl mb-8">Coming soon ...</p>
+        <div className="text-white mt-8 flex justify-center gap-7">
+          <a 
+            href="/" 
+            className="flex justify-center items-center text-lg px-5 py-3 font-semibold tracking-wide leading-5 text-white whitespace-nowrap hover:border hover:bg-transparent cursor-pointer hover:border-[#408ACD] bg-[#408ACD] rounded-[10px]"
+          >
+            Home Page
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Error;

frontend/src/Pages/Error-Page.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ErrorPageContainer from '../Components/Pages/Error-Page/ErrorPage';
+
+const ErrorPage = () => {
+  return (
+    <div>
+      <ErrorPageContainer />
+    </div>
+  );
+};
+
+export default ErrorPage;