main page partially done

Frontend/algoverse/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

Frontend/algoverse/src/App.css

@@ -1,38 +1,5 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  background-color: #496a8e;
+  height: 100vh;
+  width: 100vw;
 }

Frontend/algoverse/src/App.js

@@ -1,11 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import SideBar from "./components/SideBar";
+import SearchBar from "./components/SearchBar";
+import Home from "./components/pages/Home";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div className="App">
-
-    </div>
+    <>
+      <Router>
+        <SearchBar />
+        <Routes>
+          <Route path="/home" exact Component={Home} />
+        </Routes>
+        <SideBar />
+      </Router>
+    </>
   );
 }
 

Frontend/algoverse/src/components/Home.css

@@ -0,0 +1,36 @@
+.home {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  background-color: #496a8e;
+}
+
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+}
+
+input[type="text"] {
+  width: 50%;
+  height: 50%;
+  border-radius: 5px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.grid {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 3px;
+}

Frontend/algoverse/src/components/SearchBar.css

@@ -0,0 +1,36 @@
+.container {
+  background-color: #334a64;
+  padding-top: 3vh;
+  padding-bottom: 3vh;
+  width: 40%;
+  min-width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.search-bar {
+  background-color: white;
+  width: 40%;
+  border-radius: 0px;
+  height: 2.5rem;
+  padding: 0 15px;
+  box-shadow: 0px 0px 2px #ddd;
+  display: flex;
+  align-items: center;
+}
+
+input[type="text"] {
+  background-color: transparent;
+  border: none;
+  height: 100%;
+  font-size: 1.1rem;
+  width: 100%;
+  margin-left: 5px;
+}
+
+input:focus {
+  outline: none;
+}

Frontend/algoverse/src/components/SearchBar.js

@@ -0,0 +1,15 @@
+import "./SearchBar.css";
+import { FaSearch } from "react-icons/fa";
+
+function SearchBar() {
+  return (
+    <div className="container">
+      <div className="search-bar">
+        <FaSearch id="search-icon" />
+        <input type="text" placeholder="Search" />
+      </div>
+    </div>
+  );
+}
+
+export default SearchBar;

Frontend/algoverse/src/components/SideBar.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+}
+
+.side-bar {
+  height: 100%;
+  width: 200px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #334a64;
+  overflow-x: hidden;
+  padding-top: 50px;
+}
+
+.side-bar a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 20px;
+  color: #818181;
+  display: block;
+}
+
+.side-bar a:hover {
+  color: #f1f1f1;
+}

Frontend/algoverse/src/components/SideBar.js

@@ -0,0 +1,15 @@
+import "./SideBar.css";
+
+function SideBar() {
+  return (
+    <div className="container">
+      <div className="side-bar">
+        <a>Sorting</a>
+        <a>Tree Search</a>
+        <a>Path Finding</a>
+      </div>
+    </div>
+  );
+}
+
+export default SideBar;

Frontend/algoverse/src/components/pages/Home.js

@@ -0,0 +1,39 @@
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import "../../App.css";
+import "../Home.css";
+import React from "react";
+
+function Home() {
+  return (
+    <div className="home">
+      <div className="grid">
+        <div className="sorting">
+          <img
+            src="images/Sorting-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+        <div className="treeSearch">
+          <img
+            src="images/TreeSearch-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+        <div className="pathFinding">
+          <img
+            src="images/PathFinding-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;