created other events section and added black student orientation and …

…faculty events onto homepage
UofT-Frosh-Orientation · Aug 24, 2024 · 94c35e5 · 94c35e5
1 parent d4b3d0b
commit 94c35e5
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 13 deletions.
diff --git a/client/src/assets/misc/blackstudentorientationlogo.PNG b/client/src/assets/misc/blackstudentorientationlogo.PNG
diff --git a/client/src/assets/misc/facultylogo.png b/client/src/assets/misc/facultylogo.png
diff --git a/client/src/assets/schedule/data.jsx b/client/src/assets/schedule/data.jsx
@@ -4503,7 +4503,7 @@ export const data = {
     {
       'Event Name': 'F!ROSH GAMES + D!YE STATION',
       'Event Description':
-        'Frosh Games: Compete against other frosh groups in the craziest competitions imaginable.\nDye: When I say purple you say purple! Where F!rosh and Leedurs alike dye their bodies (or parts thereof) purple. The colour purple represents great significance in the traditions of engineering schools across Canada.',
+        'Frosh Games: Compete against other frosh groups in the craziest competitions imaginable.<br />Dye: When I say purple you say purple! Where F!rosh and Leedurs alike dye their bodies (or parts thereof) purple. The colour purple represents great significance in the traditions of engineering schools across Canada.',
       'Start Time': '10:30 AM',
       'End Time': '12:30 PM',
       Color: 'purple',
@@ -4517,7 +4517,7 @@ export const data = {
     {
       'Event Name': 'F!ROSH GAMES + D!YE STATION',
       'Event Description':
-        'Frosh Games: Compete against other frosh groups in the craziest competitions imaginable.\nDye: When I say purple you say purple! Where F!rosh and Leedurs alike dye their bodies (or parts thereof) purple. The colour purple represents great significance in the traditions of engineering schools across Canada.',
+        'Frosh Games: Compete against other frosh groups in the craziest competitions imaginable.<br />Dye: When I say purple you say purple! Where F!rosh and Leedurs alike dye their bodies (or parts thereof) purple. The colour purple represents great significance in the traditions of engineering schools across Canada.',
       'Start Time': '1:30 AM',
       'End Time': '3:00 PM',
       Color: 'purple',
@@ -4565,7 +4565,7 @@ export const data = {
     {
       'Event Name': 'CAMPUS TOUR & BUILD BATTLE',
       'Event Description':
-        "Campus Tour: Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! \nBuild Battle: Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T8 class!",
+        "Campus Tour: Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! <br />Build Battle: Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T8 class!",
       'Start Time': '11:00 AM',
       'End Time': '12:10 PM',
       Color: 'yellow',
@@ -4587,7 +4587,7 @@ export const data = {
     {
       'Event Name': 'CAMPUS TOUR & BUILD BATTLE',
       'Event Description':
-        "Campus Tour: Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! \nBuild Battle: Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T8 class!",
+        "Campus Tour: Be guided by your F!rosh Leedurs on a tour of our gorgeous campus, showing you all the best places to study, grab food, participate in extracurriculars, and nap! <br />Build Battle: Your first of many design challenges at UofT Engineering, except its probably the one of the coolest ones you do! Work with your frosh group to tackle your piece of the puzzle for this year's unique design challenge, coming together to build something truly amazing as a 2T8 class!",
       'Start Time': '3:00 PM',
       'End Time': '6:00 PM',
       Color: 'yellow',
@@ -4616,6 +4616,7 @@ export const data = {
   'WEDNESDAY AUGUST 28': [
     {
       'Event Name': 'FACULTY EVENTS',
+      'Event Description': `Check out more information about Faculty Events here: <a href="#other-events">Other Events</a>`,
       'Start Time': ' ',
       'End Time': ' ',
       Color: 'gray',
@@ -4639,6 +4640,7 @@ export const data = {
   'THURSDAY AUGUST 29': [
     {
       'Event Name': 'FACULTY EVENTS',
+      'Event Description': `Check out more information about Faculty Events here: <a href="#other-events">Other Events</a>`,
       'Start Time': ' ',
       'End Time': ' ',
       Color: 'gray',

diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
@@ -20,14 +20,21 @@ import { DarkModeContext } from '../../util/DarkModeProvider';
 import { useSelector } from 'react-redux';
 import { loggedInSelector, userSelector } from '../../state/user/userSlice';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Header } from '../../components/text/Header/Header';
+import { otherEventsData } from './otherevents';
+
 import ProgressiveImage from '../../components/progressiveImg/ProgressiveImg';
+import blackstudentorientationlogo from '../../assets/misc/blackstudentorientationlogo.png';
+import facultylogo from '../../assets/misc/facultylogo.png';
 
 const PageHome = () => {
   return (
     <>
       <HomePageHeader />
       <HomePageTimeline />
       <HomePageSchedule />
+      <PageAbout />
+      {/* <HomePageBlackStudentOrientation /> */}
       <HomePageSponsors />
     </>
   );
@@ -209,21 +216,56 @@ const HomePageSchedule = () => {
   );
 };
 
+const PageAbout = () => {
+  return (
+    <>
+      <div className="aboutus-page-components">
+        <AboutUsSection />
+        {/* <AboutUsTeamsTabWrapper /> */}
+      </div>
+    </>
+  );
+};
+
+const AboutUsSection = () => {
+  return (
+    <div id="other-events">
+      <Header text="OTHER EVENTS">
+        <>
+          {otherEventsData.map((info, index) => {
+            return (
+              <div className="otherevents-subsubcontainer" key={info.title}>
+                <div className="otherevents-image-container">
+                  <LazyLoadImage
+                    className="otherevents-image"
+                    src={index === 0 ? blackstudentorientationlogo : facultylogo}
+                    alt={info.title}
+                  ></LazyLoadImage>
+                </div>
+                <div className="otherevents-info-container" key={info.title}>
+                  <div className="otherevents-info">
+                    <h2 className="otherevents-info-title">{info.title}</h2>
+                    <p
+                      className="otherevents-info-des"
+                      dangerouslySetInnerHTML={{ __html: info.description }}
+                    ></p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </>
+      </Header>
+    </div>
+  );
+};
+
 const HomePageSponsors = () => {
   const { darkMode, setDarkModeStatus } = useContext(DarkModeContext);
   const [viewAll, setViewAll] = useState(false);
 
   return (
     <div className="home-page-sponsors">
-      {darkMode ? (
-        <img
-          src={WaveReverseDarkmode}
-          className="wave-image home-page-bottom-wave-image"
-          alt="wave-img"
-        />
-      ) : (
-        <img src={WaveReverse} className="wave-image home-page-bottom-wave-image" alt="wave-img" />
-      )}
       <h2>OUR SPONSORS</h2>
       <PleaseSponsor />
 

diff --git a/client/src/pages/Home/Home.scss b/client/src/pages/Home/Home.scss
@@ -207,6 +207,92 @@
   }
 }
 
+.otherevents-subsubcontainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  align-items: stretch;
+
+  @include devices(tablet) {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
+.otherevents-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  margin: 13px 50px 13px 0;
+  max-width: 650px;
+
+  flex: 1;
+  overflow: visible;
+
+  @include devices(tablet) {
+    width: 70vw;
+    height: fit-content;
+    margin-right: 0;
+    margin-bottom: 25px;
+  }
+}
+
+.otherevents-image {
+  object-fit: cover;
+  height: auto;
+  width: 100%;
+
+  @include devices(mobile) {
+    //height: auto;
+  }
+}
+
+.otherevents-info-container {
+  display: flex;
+  flex-direction: column;
+  width: 50vw;
+  justify-content: center;
+  max-width: 1000px;
+
+  @include devices(tablet) {
+    width: 85vw;
+  }
+}
+
+.otherevents-info {
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+
+  display: flex;
+  flex-direction: column;
+
+  padding: 25px;
+  margin: 13px;
+
+  @include devices(tablet) {
+    margin: 0 0 25px 0;
+  }
+}
+
+.otherevents-info-title {
+  font-size: 24px;
+  margin-bottom: 10px;
+
+  color: var(--white);
+  text-align: left;
+
+  @include devices(tablet) {
+    text-align: center;
+  }
+}
+.otherevents-info-des {
+  font-size: 16px;
+  color: var(--white);
+}
+
 .home-page-section-header {
   font-size: 45px;
   color: var(--white);

diff --git a/client/src/pages/Home/otherevents.jsx b/client/src/pages/Home/otherevents.jsx
@@ -0,0 +1,14 @@
+export const otherEventsData = [
+  {
+    title: 'BLACK STUDENT ORIENTATION',
+    description:
+      "Want to celebrate Black culture, embrace the community at the University of Toronto, and prepare yourself for the UofT experience? Black Student Orientation, organized by Black Students for Black students, is an opportunity to make a smooth transition into university life, make new friends, and start the year on a positive note!<br />Registration for this FREE orientation is now LIVE! Stay up to date and Learn more about Black Student Orientation 2024 <a href='https://www.instagram.com/uoftbso/'>here</a>.",
+    image: '../../assets/misc/blackstudentorientationlogo.png',
+  },
+  {
+    title: 'FACULTY ORIENTATION EVENTS',
+    description:
+      "Check out the schedule for Faculty Orientation Events happening on Wednesday, August 28th <a href='https://undergrad.engineering.utoronto.ca/event/faculty-orientation-events/'>here</a>!",
+    image: '../../assets/misc/facultylogo.png',
+  },
+];