First Draft of the Search Screen and also logo

frontend/src/App.tsx

@@ -1,10 +1,20 @@
 import './App.css'
+import MainSearch from './components/MainSearch';
 
 function App() {
 
   return (
     <>
-      <h1>PeerNotes</h1>
+      <div className="App" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <img 
+        src="/PeerNotes.png" 
+        alt="PeerNotes Logo" 
+        style={{ 
+          height: "100px"
+        }} 
+      />
+     <MainSearch />
+    </div>
     </>
   )
 }

frontend/src/components/MainSearch.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import '../screens/MainScreenWrapper.css';
+
+const MainSearch: React.FC = () => {
+  return (
+    <div className="filter-container">
+      <div className="filter-item">
+        <label htmlFor="professors">Professors:</label>
+        <select id="professors">
+          <option value="">Select a Professor</option>
+          {/* temporary */}
+          <option value="professor1">Professor 1</option>
+          <option value="professor2">Professor 2</option>
+        </select>
+      </div>
+      <div className="filter-item">
+        <label htmlFor="courses">Course:</label>
+        <select id="courses">
+          <option value="">Select a Course</option>
+          {/* temporary */}
+          <option value="course1">Course 1</option>
+          <option value="course2">Course 2</option>
+        </select>
+      </div>
+      <div className="filter-item">
+        <label htmlFor="topics">Topic:</label>
+        <select id="topics">
+          <option value="">Select a Topic</option>
+          {/* temporary */}
+          <option value="topic1">Topic 1</option>
+          <option value="topic2">Topic 2</option>
+        </select>
+      </div>
+      <button type="submit" className="submit-button">Submit</button>
+    </div>
+  );
+}
+
+export default MainSearch;

frontend/src/screens/MainScreenWrapper.css

@@ -0,0 +1,52 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #0C2D48;
+    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+  }
+  
+  .filter-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: #B1D4E0;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* shadow */
+  }
+  
+  .filter-item + .filter-item {
+    margin-top: 20px; /* space between filter items */
+  }
+  
+  label {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+  
+  select {
+    padding: 8px;
+    border: 1px solid #2E8BC0;
+    border-radius: 4px;
+    width: 100%; /* fill the container width */
+  }
+
+  .submit-button {
+    padding: 8px 16px;
+    margin-top: 20px; /* Adds space above the button */
+    background-color: #2E8BC0; /* Example background color */
+    color: white; /* Text color */
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+  }
+  
+  .submit-button:hover {
+    background-color: #1D6A96; /* Darker shade for hover effect */
+  }
+