Vol 26/discover tab

api/env

@@ -0,0 +1,7 @@
+apiKey="AIzaSyBox7z0b2SBEnz0v6qmQjFx3QfUJcG099U"
+authDomain="volunteerclub-14b7a.firebaseapp.com"
+projectId="volunteerclub-14b7a"
+storageBucket="volunteerclub-14b7a.appspot.com"
+messagingSenderId="765497707892"
+appId="1:765497707892:web:d1fb4e8f77881366037021"
+measurementId="G-TLM9P3DCKS"

web/src/components/Discover.tsx

@@ -0,0 +1,24 @@
+// WelcomeStats
+import "../styles/componentStyles/Discover.css";
+import DiscoverCard from "./DiscoverCard";
+function Discover() {
+  return (
+  <div className="container">
+     <div className = "div1">
+      <div className="LeftContent">
+        <h1 className="Discover">Discover</h1>
+      </div>
+      <div className="rightContent">
+        <button className="view-all">View all</button>
+      </div>
+    </div>
+    <div className="div2">
+        <DiscoverCard/>
+        <DiscoverCard/>
+        <DiscoverCard/>
+    </div>
+  </div>
+  );
+}
+
+export default Discover;

web/src/components/DiscoverCard.tsx

@@ -0,0 +1,20 @@
+import '../styles/componentStyles/DiscoverCard.css';
+
+const DiscoverCard = () => {
+    return ( 
+        <div className="card">
+            <div className="details">
+                <h2>Produce Packer</h2>
+                <p>Company</p>
+                <p>Day</p>
+                <p>Time</p>
+                <p>Hours</p>
+            </div>
+            <button className="more-info">
+                More info
+            </button>
+        </div>
+     );
+}
+
+export default DiscoverCard;

web/src/pages/MainMenu.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
-import NavBar from '../components/NavBar'
 import Footer from '../components/Footer';
 import '../styles/pageStyles/MainMenu.css';
-import UpcomingEvents from '@components/UpcomingEvents';
+import Discover from '@components/Discover';
 
 function MainMenu() {
   const [testList, setTestList] = useState<{ id: string, name: string, number: number }[]>([]);
@@ -27,7 +26,7 @@ function MainMenu() {
   return (
     <div className="MainMenu">
       {/* Render testList data */}
-      <UpcomingEvents/>
+      <Discover/>
       <ul>
         {testList.map((item) => (
           <li key={item.id}>{item.name} - {item.number}</li>

web/src/styles/componentStyles/Discover.css

@@ -0,0 +1,62 @@
+.container {
+  display: flex;
+  background-color: #ffffff;
+  border-radius: 3.5em;
+  margin: 10px;
+  align-items: center;
+  flex-wrap: no-wrap;
+  position: relative;
+  padding: 1;
+  flex-direction: column;
+  height: 503px;
+  border: 1px solid red;
+}
+
+.div1{
+  display: flex;
+  padding: 10px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  position: absolute;
+  top: 0px;
+  width: 779px;
+  align-items: center;
+}
+
+.LeftContent {
+  float: left;
+}
+
+.right-content {
+  float: right;
+}
+
+header {
+  background-color: #f0f0f0;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h1 {
+  color:#323232;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 2.1vw;
+  margin: 100px;
+  top: 0;
+  left: 0;
+}
+
+
+.div2 {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 0px;
+  width: 779px;
+}
+

web/src/styles/componentStyles/DiscoverCard.css

@@ -0,0 +1,63 @@
+.card {
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    margin: 10px;
+    padding: 20px;
+    width: 192px;
+    height: 348px;background: url('https://via.placeholder.com/192x348');
+    align-items: center;
+  }
+
+  .card h2 {
+    margin-top: 0;
+  }
+
+  .details {
+    background-color: #f7f7fb;
+    border-radius: 10%;
+    position: absolute;
+    bottom: 8px;
+    text-align: left;
+    width: 179px;
+    height: 110px;
+  }
+
+  .details h2 {
+    color: #323232;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 15px;
+    margin: 5px;
+    margin-left: 15px;
+  }
+
+  .details p {
+    color: #323232;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 10px;
+    margin: 0px;
+    margin-left: 15px;
+  }
+
+  .more-info {
+    background-color: #3c9ddd;
+    border-radius: 18px;
+    padding: 1.8% 3.5%;
+    text-decoration: none;
+    color: #ffffff;
+    font-size: 0.6vw;
+    transition: all 400ms ease;
+    width: 67px;
+    height: 24px;
+    bottom: 10px;
+    right: 10px;
+    float: right;
+    position: absolute;
+}
+
+.more-info:hover {
+  background-color: #307caf;
+  text-decoration: none;
+}