feat: added tempalte for site appearance

frontend/src/App.tsx

 import { useState } from 'react'
 import logo from './logo.svg'
 import './App.css'
+import { MainPage } from './components/MainPage'
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-        <p>
-          <button type="button" onClick={() => setCount((count: number) => count + 1)}>
-            count is: {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
-      </header>
+      <MainPage/>
     </div>
   )
 }

frontend/src/components/NavigationBar.tsx

-
+import "../styles/navigationbar.css"
 // on top of the screen at all times, links to each feature of site
 export const NavigationBar = () => {
     return (<div className="navigation-bar">
-        Here is navigation bar.
+        <nav>
+        <label htmlFor="checkbox-demo">
+            <ul className="menu demo">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Search</a></li>  
+            <li><a href="#">Browse</a></li>  
+            <li><a href="#">About</a></li>  
+            </ul>
+        </label>
+        </nav>
     </div>)
 }
\ No newline at end of file

frontend/src/styles/navigationbar.css

+nav {
+    margin: 50px auto;
+    max-width: 700px;
+    width: 95%;
+    font-family: 'Roboto Condensed', sans-serif;
+  }
+  #checkbox1,
+  .toggle {
+    display: none;
+  }
+  .menu {
+    padding: 0;
+    margin: 0;
+    max-width: 700px;
+    height: 50px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    list-style-type: none;
+  }
+  .menu li a {
+    text-decoration: none;
+    align-self: center;
+    border-radius: 5px;
+    font-size: 14px;
+    padding: 10px 15px;
+    transition: background .2s linear;
+  }
\ No newline at end of file