Account not verified page

frontend/src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Classes from './pages/classes';
 import VolunteerProfile from './pages/volunteerProfile';
 import VolunteerDash from './pages/volunteerDash';
+import AccountNotVerified from './pages/account_not_verified';
 
 function App() {
 
@@ -14,6 +15,7 @@ function App() {
           <Route path="/volunteer/classes" element={<Classes/>} />
           <Route path="/volunteer/my-profile" element={<VolunteerProfile/>} />
           <Route path="/volunteer/schedule" element={<VolunteerDash/>} />
+          <Route path="/volunteer/account-not-verified" element={<AccountNotVerified/>} />
         </Routes>
       </BrowserRouter>
     </div>

frontend/src/pages/account_not_verified/index.css

@@ -0,0 +1,78 @@
+@import '../../styles.css';
+
+/* index.css */
+
+/* Import Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700&display=swap');
+
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-primary);
+  background-color: var(--white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.account-not-verified-page {
+  text-align: center;
+  color: var(--primary-blue);
+}
+
+.account-not-verified-page h2 {
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.account-not-verified-page div {
+  color: var(--dark);
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: var(--white);
+  color: var(--dark);
+  border: 1px solid var(--primary-blue);
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+button:hover {
+  background-color: var(--secondary-blue);
+}
+
+span {
+  font-size: 16px; /* Adjust as needed */
+  color: var(--grey) /* Light grey to match the button */
+}
+
+/**
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: var(--white);
+  color: var(--dark);
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+button:hover {
+  background-color: #F9FAFB;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+*/

frontend/src/pages/account_not_verified/index.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import './index.css';
+import logoutIcon from "./logout.png";
+
+function AccountNotVerified() {
+  //const [data, setData] = useState(null);
+
+  const logOut = () => {
+    // Implement log-out logic here
+    console.log('Logged out');
+  };
+
+  return (
+    <div className="account-not-verified-page">
+      <h2>Waiting for an admin to verify your account.</h2>
+      <div>You can reach out to us at <b>[email protected]</b>. </div>
+      <button onClick={logOut}>
+        <img 
+          src={logoutIcon} 
+          alt="Log out icon" 
+          style={{ width: '14px', height: '14px', marginRight: '8px', marginTop: '1px' }} 
+        />
+        Log Out
+      </button>
+
+    </div>
+  );
+}
+
+export default AccountNotVerified;