Worked on schedule section

2024/ellehacks2024/package.json

@@ -14,6 +14,8 @@
 
     "@emotion/styled": "^11.11.0",
 
+    "@fontsource/space-grotesk": "^5.0.16",
+
     "@mui/material": "^5.14.18",
 
     "@mui/styled-engine-sc": "^6.0.0-alpha.6",

2024/ellehacks2024/src/App.js

@@ -7,6 +7,7 @@ import NavBar from './components/NavBar';
 import Home from './components/Home';
 import AboutUs from './components/AboutUs';
 import JoinUS from './components/JoinUS';
+import Schedule from  './components/Schedule';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import PreviousWinners from './components/PreviousWinners'; 
@@ -20,6 +21,7 @@ function App() {
         <Home id="home" />
         <AboutUs id="aboutus" />
         <JoinUS id="joinus" />
+        <Schedule id="schedule"/>
         <FAQ id="faq" />
         <Footer />
         <PreviousWinners />

2024/ellehacks2024/src/components/Home.js

@@ -72,7 +72,7 @@ class Home extends Component {
             <p style={mainDateTime}>Febuary 17-19, 2024 </p>
             <p style={mainLocation}>York University, Toronto, ON </p>
           </div>
-          <Button variant="link" href="https://docs.google.com/forms/d/e/1FAIpQLScgC8tMJAb8RJmOTAdPYisk_pyDoVxosDGI7Bqq51Dr4AhnCQ/viewform?pli=1" style={apply}>Applications are open</Button>
+          <Button variant="link" href="https://docs.google.com/forms/d/e/1FAIpQLScgC8tMJAb8RJmOTAdPYisk_pyDoVxosDGI7Bqq51Dr4AhnCQ/viewform?pli=1" style={apply}>Applications are closed</Button>
         </div>
 
         <div id="Main-right" style={rightStyle}>

2024/ellehacks2024/src/components/Schedule.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import './schedule.css'
+import { schedules } from './schedules';
+import Card from 'react-bootstrap/Card';
+import '@fontsource/space-grotesk'
+import {v4 as uuidv4} from 'uuid';
+
+const Schedule = () => {
+
+    return (
+        <React.Fragment className='schedule'>
+            <h1 className='title sm:text-3xl md:text-4xl lg:text-6xl text-left font-bold'>Schedule</h1>
+            <div className='schedule-cards'>
+                <div className='__row'>
+                    {schedules.map((schedule) => {
+                        return (
+                            <div className='__col' key={uuidv4()}>
+                            <Card>
+                                <Card.Body style={{ paddingBottom: '63px' }}>
+                                    <Card.Text className='date'>{schedule.date}</Card.Text>
+                                        <Card.Text className='day'>{schedule.dayOfWeek}</Card.Text>
+                                        {schedule.activities.map((activity) => {
+                                            return (
+                                                <div className={`agenda ${activity.isGold ? 'gold-background' : ''}`} key={uuidv4()}>
+                                                    <div className='agenda-item'>
+                                                        <div className='time'>
+                                                            <p className='text-sm sm:text-base md:text-xl lg:text-2xl xl:text-3xl'>{activity.time}</p>
+                                                        </div>
+                                                        <div className='agenda-time-location'>
+                                                            <div className='activity-name'>
+                                                                <p className='text-sm sm:text-base md:text-xl lg:text-2xl xl:text-3xl'>{activity.activityName}</p>
+                                                            </div>
+                                                            <div className='location'>
+                                                                <p className='text-sm sm:text-base md:text-xl lg:text-2xl xl:text-3xl'>{activity.location}</p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            );})}
+                                </Card.Body>
+                            </Card>
+                        </div>
+                        );})}
+                </div>
+            </div>
+        </React.Fragment>
+    )
+}
+
+export default Schedule

2024/ellehacks2024/src/components/schedule.css

@@ -0,0 +1,102 @@
+.title {
+    padding: 20px;
+    font-size: '4xl';
+    color: white;
+}
+
+.schedule-cards {
+    margin: auto;
+    width: 90%;
+}
+
+
+.date, .day, .agenda {
+    color: #712323;
+    font-family: 'Space Grotesk';
+}
+
+.date {
+    font-weight: medium;
+    font-size: 16px;
+}
+
+.day {
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.agenda {
+    width: 100%;
+    display: block;
+    margin: auto;
+    padding: 1rem;
+}
+
+.gold-background {
+    margin-top: 8px;
+    background-color: rgba(255, 215, 0, 0.5);
+}
+
+.agenda-item {
+    display: flex;
+    margin: auto;
+    width: 95%;
+    bottom: 2rem;
+    border-bottom: 2px solid #853536;
+}
+
+.time {
+    width: 40%;
+    padding-top: 3px;
+    font-size: 12px;
+    font-weight: regular;
+}
+
+.agenda-time-location {
+    width: 100%;
+}
+
+.activity-name {
+    color: black;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.location {
+    color: black;
+    font-size: 10px;
+}
+
+.__row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2%;
+
+}
+
+@media screen and (max-width: 992px) {
+    /* Styles for medium screens */
+
+    .__row {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .__col {
+        width: 75%;
+        margin: auto;
+    }
+}
+
+  @media screen and (max-width: 768px) {
+    /* Styles for small screens */
+
+    .__col {
+        width: 90%;
+        margin: auto;
+    }
+
+    .time {
+        width: 30%;
+    }
+}