Fixed "About Us" cards

gcl-website/src/Components/Navbar.js

@@ -19,6 +19,7 @@ const Navbar = () => {
   const location = useLocation();
 
   const tabs = [
+    { label: 'Home', href: '/' },
     { label: 'About Us', href: '/about' },
     { label: 'Join Clubs', href: '/join-clubs' },
     { label: 'Get Involved', href: '/get-involved' },
@@ -54,7 +55,7 @@ const Navbar = () => {
         <Link
           to="/"
           style={{ height: theme.spacing(4) }}
-          onClick={() => setValue(false)}
+          onClick={() => setValue(0)}
         >
           <Box
             component="img"

gcl-website/src/Domains/About/Board.js

@@ -0,0 +1,88 @@
+import { Grid, Typography } from '@mui/material';
+import PersonCard from './PersonCard';
+
+const Board = () => {
+  const members = [
+    {
+      name: 'Elsbeth Magilton',
+      title: 'President + Member of Nominating Committee',
+      email: '[email protected]',
+    },
+    {
+      name: 'Jenna Vitosh',
+      title: 'Vice President + Member of Nominating Committee',
+      email: '[email protected]',
+    },
+    {
+      name: 'Bonita Sharif',
+      title: 'Treasurer + Finance Committee Chair',
+      email: '[email protected]',
+    },
+    {
+      name: 'Danielle Miller',
+      title: 'At Large Member + Finance Committee',
+      email: '[email protected]',
+    },
+    {
+      name: 'Lana Zumbrunn',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Ron Gallagher',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Jaxon McCue',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Ryan Olsen',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Maura Penas',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Abby Rogers',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+    {
+      name: 'Ryan Wolff',
+      title: 'At Large Member',
+      email: '[email protected]',
+    },
+  ];
+
+  return (
+    <>
+      <Typography variant="h2">Board</Typography>
+      <Grid container spacing={4}>
+        {members.map((member) => (
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            md={4}
+            lg={3}
+            key={`${member.name}, ${member.title}`}
+          >
+            <PersonCard
+              name={member.name}
+              title={member.title}
+              email={member.email}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default Board;

gcl-website/src/Domains/About/LeadershipTeam.js

@@ -0,0 +1,60 @@
+import { Grid, Typography } from '@mui/material';
+import PersonCard from './PersonCard';
+
+import photoVal from './Assets/ValStehlik.jpg';
+import photoCiara from './Assets/CiaraBaumert.jpg';
+import photoVivian from './Assets/VivianJacobitz.jpg';
+import photoLeah from './Assets/LeahOlson.jpg';
+
+const LeadershipTeam = () => {
+  const members = [
+    {
+      name: 'Val Stehlik',
+      title: 'Director of Clubs',
+      image: photoVal,
+    },
+    {
+      name: 'Ciara Baumert',
+      title: 'Director of Volunteers',
+      image: photoCiara,
+      email: '[email protected]',
+    },
+    {
+      name: 'Vivian Jacobitz',
+      title: 'Director of Curriculum',
+      image: photoVivian,
+    },
+    {
+      name: 'Leah Olson',
+      title: 'Website Chair',
+      image: photoLeah,
+    },
+  ];
+
+  return (
+    <>
+      <Typography variant="h2">Leadership Team</Typography>
+      <Grid container spacing={4}>
+        {members.map((member) => (
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            md={4}
+            lg={3}
+            key={`${member.name}, ${member.title}`}
+          >
+            <PersonCard
+              name={member.name}
+              title={member.title}
+              image={member.image}
+              email={member.email}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default LeadershipTeam;

gcl-website/src/Domains/About/PersonCard.js

@@ -2,44 +2,43 @@ import {
   Card,
   CardContent,
   CardMedia,
-  Grid,
-  Link,
+  IconButton,
   Typography,
-  useTheme,
 } from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 const PersonCard = (props) => {
-  const theme = useTheme();
-
   return (
-    <Card>
-      <Grid container gap={1}>
-        <Grid item>
-          <CardMedia
-            component="img"
-            image={props.image}
-            alt={props.name}
-            sx={{
-              height: theme.spacing(20),
-              width: theme.spacing(20),
-            }}
-          />
-        </Grid>
+    <Card
+      variant="outlined"
+      align="center"
+      sx={{ height: '100%', borderRight: 'red' }}
+    >
+      {props.image && (
+        <CardMedia component="img" image={props.image} alt={props.name} />
+      )}
+
+      <CardContent>
+        <Typography
+          variant="h4"
+          variantMapping={{ h4: 'h3' }}
+          sx={{ marginBottom: 0.5, marginTop: 1 }}
+        >
+          {props.name}
+        </Typography>
+
+        <Typography>{props.title}</Typography>
 
-        <Grid item>
-          <CardContent>
-            <Typography variant="h3">{props.name}</Typography>
-            <Typography variant="subtitle1" color="text.secondary">
-              {props.title}
-            </Typography>
-            {props.email && (
-              <Typography>
-                <Link href={`mailto:${props.email}`}>{props.email}</Link>
-              </Typography>
-            )}
-          </CardContent>
-        </Grid>
-      </Grid>
+        {props.email && (
+          <IconButton
+            href={`mailto:${props.email}`}
+            aria-label={`Email ${props.name}`}
+          >
+            <FontAwesomeIcon icon={faEnvelope} size="xs" />
+          </IconButton>
+        )}
+      </CardContent>
     </Card>
   );
 };

gcl-website/src/Domains/About/index.js

@@ -1,99 +1,34 @@
-import { Box, Container, Grid, Typography } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
 import Header from '../../Components/Header';
-import PersonCard from './PersonCard';
-import sampleImg from '../../Assets/clubs-background.jpg';
+import Board from './Board';
+import LeadershipTeam from './LeadershipTeam';
 
 const About = () => {
-  const leadershipTeamMembers = [
-    {
-      name: 'Val Stehlik',
-      title: 'Director of Clubs',
-      image: sampleImg,
-    },
-    {
-      name: 'Ciara Baumert',
-      title: 'Director of Volunteers',
-      image: sampleImg,
-      email: '[email protected]'
-    },
-    {
-      name: 'Vivian Jacobitz',
-      title: 'Director of Curriculum',
-      image: sampleImg,
-    },
-    {
-      name: 'Leah Olson',
-      title: 'Website Chair',
-      image: sampleImg,
-    },
-  ];
-
-  const boardMembers = [
-    { name: 'Elsbeth Magilton', title: 'Board President' },
-    { name: 'Abby Rogers' },
-    { name: 'Angela Garbacz' },
-    { name: 'Bonita Sharif' },
-    { name: 'Danielle Miller' },
-    { name: 'Jaxon McCue' },
-    { name: 'Jenna Vitosh' },
-    { name: 'Lana Zumbrunn' },
-    { name: 'Maura Penas' },
-    { name: 'Ron Gallagher' },
-    { name: 'Ryan Olsen' },
-    { name: 'Ryan Wolff' },
-  ];
-
   return (
-    <Box component="section">
+    <Box component="main">
       <Header>
         <Typography variant="h1" textAlign="center">
           About Us
         </Typography>
       </Header>
 
-      <Container component="section">
+      <Container>
         <Typography paragraph>
           Girls Code Lincoln is a 501(c)(3) nonprofit organization. We strive to
           ignite passion for technology and leadership in young girls with the
           long-term goal of closing the gender gap in STEM.
         </Typography>
-
         <Typography paragraph>
-          We host multiweek technology clubs for 4th through 9th grade girls. All clubs
-          are completely free and 100% volunteer-run.
+          We host multiweek technology clubs for 4th through 9th grade girls.
+          All clubs are completely free and 100% volunteer-run.
         </Typography>
-
         <Typography paragraph>
           We partner with Nebraska organizations and build in-house curriculum
           to teach technology, leadership, and life skills.
         </Typography>
 
-        <Typography variant="h2">Leadership Team</Typography>
-        <Grid container gap={2}>
-          {leadershipTeamMembers.map((member) => (
-            <Grid item xs={12} md={6} key={`${member.name}, ${member.title}`}>
-              <PersonCard
-                name={member.name}
-                title={member.title}
-                image={member.image}
-                email={member.email}
-              />
-            </Grid>
-          ))}
-        </Grid>
-
-        <Typography variant="h2">Board</Typography>
-        <Grid container gap={2}>
-          {boardMembers.map((member) => (
-            <Grid item xs={12} md={6} key={`${member.name}, ${member.title}`}>
-              <PersonCard
-                name={member.name}
-                title={member.title}
-                image={member.image}
-              />
-            </Grid>
-          ))}
-        </Grid>
+        <LeadershipTeam />
+        <Board />
       </Container>
     </Box>
   );