Update to Leadership as well as notes update

docs/resources.md

@@ -19,5 +19,4 @@
 
 ## Get Access to The Lab:
 
-[Getting Swite Access](docs/swipe-access)
-
+[Getting Swipe Access](docs/swipe-access)

src/comps/LeadershipBox/LeadershipBox.jsx

@@ -1,38 +1,40 @@
-import React, { Component } from "react";
+import React from "react";
+import { Box, Typography, Avatar, Grid } from "@mui/material";
 
-import styles from "@/comps/LeadershipBox/leadership.module.css";
-
-import Image from "next/image";
-
-class LeadershipBox extends Component {
-  /*
-    Expects an image prop, which is a string
-    This will then generate a div with the image
-    If the string is blank, the uid will be used instead
-
-    Props needed: name, title, email
-    */
-
-  // Check if any of the expected props are undefined
-
-  render() {
-    // Simple div with a title and value
-    if (this.props.src !== undefined) {
-      return (
-        <div class={styles.leadershipBox}>
-          <div class={styles.alignImage}>
-            <Image src={this.props.src} alt={this.props.name + "Image"}></Image>
-          </div>
-          <p>
-            <em>{this.props.title}</em>
-          </p>
-          <p>
-            <a href={"mailto:" + this.props.email}>{this.props.email}</a>
-          </p>
-        </div>
-      );
-    }
-  }
-}
+const LeadershipBox = ({ name, title, email, src }) => {
+  return (
+    <Grid item xs={12} sm={6} md={4}>
+      <Box sx={{ textAlign: "center" }}>
+        <Avatar
+          src={src.src}
+          alt={`Headshot of ${name}`}
+          sx={{ 
+          width: {
+            xs: '40vw',  // 30% of the viewport width on small screens
+            sm: '40vw',  // 20% on medium screens
+            md: '25vw',  // 15% on larger screens
+          },
+          height: {
+            xs: '40vw',
+            sm: '40vw',
+            md: '25vw',
+          },
+          margin: "0 auto" }}
+        />
+        <Typography variant="h6" sx={{ marginTop: 2 }}>
+          {name}
+        </Typography>
+        <Typography variant="subtitle1" color="textSecondary">
+          {title}
+        </Typography>
+        <Typography variant="body2">
+          <a href={`mailto:${email}`} aria-label={`Send an email to ${name}`}>
+            {email}
+          </a>
+        </Typography>
+      </Box>
+    </Grid>
+  );
+};
 
 export default LeadershipBox;

src/pages/Leadership.jsx

@@ -1,71 +1,72 @@
-//https://react-icons.github.io/react-icons/icons?name=bs
 import React from "react";
-
+import { Box, Grid, Typography, Divider } from "@mui/material";
 import LeadershipBox from "@/comps/LeadershipBox/LeadershipBox.jsx";
 import Baumann from "../../public/Headshots/Baumann.jpg";
-import Gibbons from "../../public/Headshots/Gibbons.jpg";
+import Wells from "../../public/Headshots/Wells.jpg";
 import Forsyth from "../../public/Headshots/Forsyth2.jpg";
 import Meadows from "../../public/Headshots/Meadows.jpg";
 import Pritchard from "../../public/Headshots/Pritchard.jpeg";
-import Blank from "../../public/Headshots/blank.jpeg";
 import Ethan from "../../public/Headshots/Ethan.jpg";
 import PB from "../../public/Headshots/pb.jpeg";
 
 export default function Leadership() {
   return (
-    <div>
-      <div class="App-pageHelper">
-        <h2>Meet Our Team: Student Staff</h2>
-        <hr></hr>
-        <div class="flex-row-left">
-          <LeadershipBox
-            name="Richard Gibbons"
-            src={Gibbons}
-            title="Richard Gibbons: Team Lead"
-            email="[email protected]"
-          ></LeadershipBox>
-          <LeadershipBox
-            name="Henry Forsyth"
-            src={Forsyth}
-            title="Henry Forsyth: Mentor/Webdev"
-            email="[email protected]"
-          ></LeadershipBox>
-          <LeadershipBox
-            name="Eddie Pritchard"
-            src={Pritchard}
-            title="Eddie Pritchard: Mentor"
-            email="[email protected]"
-          ></LeadershipBox>
-          <LeadershipBox
-            name="Purv Bavishi"
-            src={PB}
-            title="Purv Bavishi: Mentor"
-            email="[email protected]"
-          ></LeadershipBox>
-          <LeadershipBox
-            name="Ethan James"
-            src={Ethan}
-            title="Ethan James: Mentor"
-            email="[email protected]"
-          ></LeadershipBox>
-        </div>
-        <h2>Meet Our Team: Professors</h2>
-        <hr></hr>
-        <div class="flex-row-left">
-          <LeadershipBox
-            name="William Baumann"
-            src={Baumann}
-            title="Dr.William Baumann: Professor"
-            email="[email protected]"
-          ></LeadershipBox>
-          <LeadershipBox
-            name="Toby Meadows"
-            src={Meadows}
-            title="Dr.Toby Meadows: Professor"
-            email="[email protected]"
-          ></LeadershipBox>
-        </div>
-      </div>
-    </div>
+    <Box sx={{ padding: 3 }}>
+      <Typography variant="h4" gutterBottom>
+        Meet Our Team: Student Staff
+      </Typography>
+      <Divider />
+      <Grid container spacing={3} sx={{ marginTop: 2 }}>
+        <LeadershipBox
+          name="Tyler Wells"
+          src={Wells}
+          title="Lab Lead"
+          email="[email protected]"
+        />
+        <LeadershipBox
+          name="Henry Forsyth"
+          src={Forsyth}
+          title="Mentor / Web Developer"
+          email="[email protected]"
+        />
+        <LeadershipBox
+          name="Eddie Pritchard"
+          src={Pritchard}
+          title="Mentor"
+          email="[email protected]"
+        />
+        <LeadershipBox
+          name="Purv Bavishi"
+          src={PB}
+          title="Mentor"
+          email="[email protected]"
+        />
+        <LeadershipBox
+          name="Ethan James"
+          src={Ethan}
+          title="Mentor"
+          email="[email protected]"
+        />
+      </Grid>
+
+      <Typography variant="h4" gutterBottom sx={{ marginTop: 4 }}>
+        Meet Our Team: Professors
+      </Typography>
+      <Divider />
+      <Grid container spacing={3} sx={{ marginTop: 2 }}>
+        <LeadershipBox
+          name="William Baumann"
+          src={Baumann}
+          title="Professor"
+          email="[email protected]"
+        />
+        <LeadershipBox
+          name="Toby Meadows"
+          src={Meadows}
+          title="Professor"
+          email="[email protected]"
+        />
+      </Grid>
+    </Box>
   );
 }

src/pages/getting_started.jsx

@@ -15,6 +15,8 @@ import { RxDiscordLogo } from "react-icons/rx";
 import { BiPurchaseTagAlt } from "react-icons/bi";
 import { GiSwipeCard } from "react-icons/gi";
 
+import {Alert} from "@mui/material";
+
 export default function GettingStarted({ new_members, returning_members }) {
   return (
     <div className="min-h-screen">
@@ -40,6 +42,11 @@ export default function GettingStarted({ new_members, returning_members }) {
           buttonTitle="Click here to begin"
           color="#f9f9f9"
         >
+          <Alert severity="info">
+            If you need help with any of this process, please don't hesitate to
+            come into the lab and ask for help! Or reach out to leadership through
+            the Discord!
+          </Alert>
           <ReactMarkdown class="App-standardPage" rehypePlugins={[rehypeRaw]}>
             {new_members}
           </ReactMarkdown>