Add tutor information and notice board cards

frontend/src/components/pages/Dashboard/index.tsx

@@ -15,6 +15,9 @@ const ModuleOverview: React.FC = () => {
   return (
     <>
       <MyBreadcrumbs />
+
+      {/* User Card */}
+
       <Container style={{ display: "flex", padding: 0 }}>
         <span>
           <Image className={styles.dashboardImage} src="holder.js/180x180" />
@@ -32,26 +35,133 @@ const ModuleOverview: React.FC = () => {
           <p className={styles.userCourse}>MEng Computing (IP)</p>
         </span>
       </Container>
+
+      {/* User Buttons */}
+
       <Row style={{ marginTop: "30px" }}>
         {[...Array(8)].map((e, i) => (
           <Col xs={6} sm={6} md={3} key={i}>
             <Button className={styles.dashboardButton}>
               Button {i}
-                <FontAwesomeIcon
-                  style={{ fontSize: "1.125rem" }}
-                  icon={faFile}
-                  className={styles.dashboardButtonSvg}
-                />
+              <FontAwesomeIcon
+                style={{ fontSize: "1.125rem" }}
+                icon={faFile}
+                className={styles.dashboardButtonSvg}
+              />
             </Button>
           </Col>
         ))}
       </Row>
-      <Row style={{marginTop: "30px"}}>
-      <Col>
-        <h4>Tutors</h4>
+
+      {/* Tutors and Notice Board */}
+
+      <Row style={{ marginTop: "30px" }}>
+        <Col>
+          <h4>Tutors</h4>
+
+          {/* Tutor 1 */}
+
+          <Container
+            style={{
+              display: "flex",
+              padding: 0,
+              marginTop: "20px",
+              alignItems: "center"
+            }}
+          >
+            <span>
+              <Image className={styles.tutorImage} src="holder.js/60x60" />
+            </span>
+            <span style={{ height: "72px" }}>
+              <p className={styles.tutorName}>Dr. Nicolas Wu</p>
+              <p className={styles.tutorEmail}>n.wu@imperial.ac.uk</p>
+              <p className={styles.tutorAddress}>374, Huxley Building</p>
+            </span>
+          </Container>
+
+          {/* Tutor 2 */}
+
+          <Container
+            style={{
+              display: "flex",
+              padding: 0,
+              marginTop: "15px",
+              alignItems: "center"
+            }}
+          >
+            <span>
+              <Image className={styles.tutorImage} src="holder.js/60x60" />
+            </span>
+            <span style={{ height: "72px" }}>
+              <p className={styles.tutorName}>Dr. Sophia Drossopoulou</p>
+              <p className={styles.tutorEmail}>s.drossopoulou@imperial.ac.uk</p>
+              <p className={styles.tutorAddress}>559, Huxley Building</p>
+            </span>
+          </Container>
+
+          {/* Tutor 3 */}
+
+          <Container
+            style={{
+              display: "flex",
+              padding: 0,
+              marginTop: "15px",
+              alignItems: "center"
+            }}
+          >
+            <span>
+              <Image className={styles.tutorImage} src="holder.js/60x60" />
+            </span>
+            <span style={{ height: "72px" }}>
+              <p className={styles.tutorName}>Mr. Evangelos Ververas</p>
+              <p className={styles.tutorEmail}>e.ververas16@imperial.ac.uk</p>
+              <p className={styles.tutorAddress}>Huxley Building</p>
+            </span>
+          </Container>
         </Col>
         <Col>
           <h4>Notice Board</h4>
+
+          {/* Notice 1 */}
+          <div style={{ marginTop: "20px" }} className={styles.noticeContainer}>
+            <p className={styles.noticeHeading}>Lab Closure Information</p>
+            <span style={{ display: "flex", justifyContent: "space-between" }}>
+              <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+              <p className={styles.noticeTime}>1 Minute Ago</p>
+            </span>
+            <p className={styles.noticeBody}>
+              Computing lab rooms 209, 208, and 210 would be closed for the year
+              one haskell exams on Friday 20th of April.
+            </p>
+          </div>
+
+          {/* Notice 2 */}
+
+          <div style={{ marginTop: "15px" }} className={styles.noticeContainer}>
+            <p className={styles.noticeHeading}>Lab Closure Information</p>
+            <span style={{ display: "flex", justifyContent: "space-between" }}>
+              <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+              <p className={styles.noticeTime}>1 Minute Ago</p>
+            </span>
+            <p className={styles.noticeBody}>
+              Computing lab rooms 209, 208, and 210 would be closed for the year
+              one haskell exams on Friday 20th of April.
+            </p>
+          </div>
+
+          {/* Notice 3 */}
+
+          <div style={{ marginTop: "15px" }} className={styles.noticeContainer}>
+            <p className={styles.noticeHeading}>Lab Closure Information</p>
+            <span style={{ display: "flex", justifyContent: "space-between" }}>
+              <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+              <p className={styles.noticeTime}>1 Minute Ago</p>
+            </span>
+            <p className={styles.noticeBody}>
+              Computing lab rooms 209, 208, and 210 would be closed for the year
+              one haskell exams on Friday 20th of April.
+            </p>
+          </div>
         </Col>
       </Row>
     </>

frontend/src/components/pages/Dashboard/style.module.scss

@@ -99,3 +99,66 @@
   border-color: #fff;
   color: #000;
 }
+
+.tutorImage {
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.tutorName, .tutorEmail, .tutorAddress {
+  font-size: 18px;
+  margin-bottom: 0px;
+  line-height: 24px !important;
+}
+
+.tutorName {
+  color: $blue-500;
+}
+
+.tutorEmail {
+  color: $gray-700;
+}
+
+.tutorAddress {
+  color: $gray-600;
+}
+
+.noticeContainer {
+  background-color: $gray-100;
+  border-radius: 8px;
+  padding: 10px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.noticeContainer:hover {
+  transform: scale(1.03);
+  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1); 
+}
+
+.noticeHeading {
+  font-size: 18px;
+  color: $black;
+  font-weight: 500;
+  margin-bottom: 2px;
+  line-height: 22px;
+}
+
+.noticeUser {
+  font-size: 16px;
+  color: $gray-700;
+  line-height: 18px;
+  margin-bottom: 10px;
+}
+
+.noticeTime {
+  font-size: 16px;
+  color: $gray-600;
+  line-height: 18px;
+  margin-bottom: 10px;
+}
+
+.noticeBody {
+  font-size: 16px;
+  color: $gray-800;
+  margin-bottom: 0px;
+}