[Feature] Team profile filter & Team profile card

src/app/about/about.scss

@@ -8,6 +8,7 @@
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
+
   @include mobile {
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -23,75 +24,198 @@
   }
 
   &__text {
-    font-size: 24px;
+    font-size: 1.5rem;
     text-align: center;
     letter-spacing: -0.48px;
-    color: #424242;
+    color: $text-color-primary;
     font-family: inherit;
 
     @include tablet {
       font-size: 1.5rem;
     }
   }
 
+  &__content-container {
+    display: flex;
+    align-items: flex-start;
+    margin-top: 3.75rem;
+    gap: 5rem;
+
+    @include tablet {
+      flex-direction: column;
+      gap: 2rem;
+    }
+  }
+
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 5rem;
+    width: 100%;
+    padding-bottom: 6rem;
+
+    @include tablet {
+      width: 100%;
+      align-items: center;
+      padding-bottom: 3rem;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 22px;
+
+    @include tablet {
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+  }
+
+  &__filter-button {
+    padding: 0.5rem 1rem;
+    font-family: inherit;
+    font-weight: 600;
+    font-size: 1.25rem;
+    color: $text-color-secondary;
+    background-color: $filter-button-background-color;
+    border-radius: 12px;
+    white-space: nowrap;
+
+    &--active {
+      background-color: $filter-button-background-color-active;
+      color: $primary-color;
+    }
+  }
+
   &__card-container {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 40px;
-    margin-top: 60px;
+    row-gap: 5rem;
+    column-gap: 1.75rem;
     flex-wrap: wrap;
 
+    @include tablet {
+      width: 100%;
+      justify-content: center;
+    }
+
     @include mobile {
       flex-direction: column;
       gap: 0px;
     }
   }
+
+  &__pagination {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .MuiPagination-ul {
+      li {
+        &:first-child {
+          margin-right: 5rem;
+
+          @include tablet {
+            margin-right: 2.5rem;
+          }
+
+          button {
+            color: $pagination-color-active;
+          }
+        }
+
+        &:last-child {
+          margin-left: 5rem;
+
+          @include tablet {
+            margin-left: 2.5rem;
+          }
+
+          button {
+            color: $pagination-color-active;
+          }
+        }
+
+        .MuiPaginationItem-root {
+          font-size: 1.125rem;
+          line-height: 1.5rem;
+          font-family: inherit;
+          color: $pagination-color-disabled;
+
+          @include tablet {
+            font-size: 1rem;
+            line-height: 1.25rem;
+          }
+
+          &.Mui-selected {
+            color: $pagination-color-active;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
 }
 
 .join-us-cta-card {
-  max-width: 560px;
-  padding: 20px;
+  padding: 1.25rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 24px;
+  gap: 1.5rem;
   border-radius: 6px;
-  background-color: #f4f8fc;
-  margin: 60px auto 0;
+  margin: 3.75rem auto 0;
 
   @include mobile {
     max-width: 100%;
-    margin: 32px 0;
+    margin: 2rem 0;
+  }
+
+  &__divider {
+    width: 50%;
+    height: 0;
+    border: 1.6px solid $divider-color-secondary;
+
+    @include mobile {
+      width: 100%;
+    }
   }
 
   &__text-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 1rem;
     text-align: center;
   }
 
   &__title {
-    color: #0d3c6b;
+    color: $heading-color-primary;
     font-family: inherit;
-    font-size: 24px;
+    font-size: 1.75rem;
     font-weight: 700;
     letter-spacing: -0.48px;
   }
 
   &__text {
     color: #575757;
     font-family: inherit;
-    font-size: 20px;
+    font-size: 1.25rem;
     font-weight: 600;
   }
 
   &__button {
     text-transform: none;
+    min-width: 200px;
+
     @include mobile {
       width: 100%;
     }

src/app/about/page.client.tsx

@@ -0,0 +1,155 @@
+'use client';
+import TeamBioCard from '@/components/team-bio-card/team-bio-card';
+import {
+  Box,
+  Button,
+  Pagination,
+  PaginationItem,
+  Typography,
+} from '@mui/material';
+import Container from '@mui/material/Container';
+import Script from 'next/script';
+import React, { useState } from 'react';
+import './about.scss';
+
+interface TeamMember {
+  name: string;
+  job_title: string;
+  bio?: string;
+  linkedin_link: string;
+  github_link?: string;
+  role: string[];
+  profile_image_link: string;
+  brief_descriptions?: string;
+}
+
+interface AboutPageProps {
+  teamMemberData: TeamMember[];
+}
+
+export default function About({ teamMemberData }: AboutPageProps) {
+  const roles = [
+    'All Members',
+    'Executive',
+    'Product/UIUX',
+    'Developers',
+    'Business Development',
+    'Data',
+  ];
+  const [filter, setFilter] = useState<string>(roles[0]);
+  const [page, setPage] = useState<number>(1);
+
+  const teamMemberJson = teamMemberData.map((teamMember: TeamMember) => ({
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: teamMember.name,
+    jobTitle: teamMember.job_title,
+    description: teamMember.bio || '',
+    url: 'https://www.codeforbc.ca/about',
+    image: teamMember.profile_image_link
+      ? `https://www.codeforbc.ca${teamMember.profile_image_link}`
+      : '',
+    sameAs: [teamMember.linkedin_link, teamMember.github_link || ''],
+  }));
+  const filterMembers = (role: string) => {
+    if (role === roles[0]) return teamMemberData;
+    return teamMemberData.filter((member) => member.role.includes(role));
+  };
+
+  const filteredMembers = filterMembers(filter);
+
+  const numberOfMembersToDisplay = 6;
+  const displayedMembers = filteredMembers.slice(
+    (page - 1) * numberOfMembersToDisplay,
+    page * numberOfMembersToDisplay
+  );
+  const totalPages = Math.ceil(
+    filteredMembers.length / numberOfMembersToDisplay
+  );
+
+  const formatPageNumber = (number: number | null) => {
+    if (number === null) return '00';
+    return number.toLocaleString('en-US', { minimumIntegerDigits: 2 });
+  };
+
+  const renderRoleButtons = roles.map((role) => (
+    <Button
+      key={role}
+      className={`about-page__filter-button ${filter === role ? 'about-page__filter-button--active' : ''}`}
+      onClick={() => {
+        setFilter(role);
+        setPage(1);
+      }}
+    >
+      {role}
+    </Button>
+  ));
+
+  return (
+    <Container className="about-page">
+      <Script id="jsonLD_team-member" type="application/ld+json">
+        {JSON.stringify(teamMemberJson)}
+      </Script>
+      <Box className="about-page__heading-container">
+        <Typography className="page-heading about-page__heading" variant="h1">
+          Meet Our Team
+        </Typography>
+        <Typography className="about-page__text" variant="body1">
+          We are volunteer developers, designers, project managers, engineers,
+          marketers, organizers, strategists, and citizens committed to our
+          vision, and driven by our mission.
+        </Typography>
+      </Box>
+      <Box className="about-page__content-container">
+        <Box className="about-page__filter">{renderRoleButtons}</Box>
+        <Box className="about-page__content-wrapper">
+          <Box className="about-page__card-container">
+            {displayedMembers.map((teamMember: TeamMember) => (
+              <TeamBioCard key={teamMember.name} data={teamMember} />
+            ))}
+          </Box>
+          <Pagination
+            count={totalPages}
+            page={page}
+            onChange={(event, value) => setPage(value)}
+            className="about-page__pagination"
+            variant="text"
+            size="large"
+            color="primary"
+            shape="rounded"
+            renderItem={(item) => (
+              <PaginationItem
+                {...item}
+                page={
+                  item.type === 'page' && item.page !== null
+                    ? formatPageNumber(item.page)
+                    : item.page
+                }
+              />
+            )}
+          />
+        </Box>
+      </Box>
+      <Box className="join-us-cta-card">
+        <hr className="join-us-cta-card__divider" />
+        <Box className="join-us-cta-card__text-container">
+          <Typography className="join-us-cta-card__title" variant="body1">
+            Want to be a part of our team?
+          </Typography>
+          <Typography className="join-us-cta-card__text" variant="body2">
+            Contribute to Rewarding Projects for BC, from Anywhere, with
+            CodeForBC.
+          </Typography>
+        </Box>
+        <Button
+          size="large"
+          className="join-us-cta-card__button"
+          variant="contained"
+          href="https://tally.so/embed/3jMe1x"
+        >
+          Join Us
+        </Button>
+      </Box>
+    </Container>
+  );
+}