[DESIGN] Protoype the Two Meet The Team Page designs

[arvindg-rfa]

Overview:

The two meet the page designs discussed:

1. Grid design with cards. Each card will contain an image, position/title, and name. When a user clicks on a card, a modal pops up displays for more information. The entire card should be clickable.

2. Also a grid design. However, when the user clicks on a card, the user is redirected to a new page with a full view of the person. Note that to avoid the complexity of implemeting routing, just conditionally render the full page view in the same component, using some basically boolean functionality to toggle the grid view and page view.

Do not worry about styling. Just implement the structure and layout using raw React Bootstrap components with their default formatting.

Websites for Reference:

1. Option 1: Review the functionality of the current Meet the Team page as a reference for the modals. Review Option 2 links for grid formatting.
2. Option 2: https://www.luminary.com/about , https://www.etsy.com/team

Documentation for Reference:

• https://react-bootstrap.netlify.app/
• https://getbootstrap.com/

[arvindg-rfa]

Comments from today's meeting, Dec 3:

1. Look into how other companies visually indicate the cards are clickable (Hover effects, etc.). Review your research for ideas.
2. The image resolution on mobile is blurry. Look at the Uploadcare docs on implementing resolution switching: https://uploadcare.com/docs/transformations/image/compression/. Also review this mdn article on responsive images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images. Refer to the home page file for an example.
3. I believe I resolved the image centering issue on mobile. Check out my code to see differences.

import React from "react";
import bmInfoJSON from "@/posts/board_members.json";
import ccInfoJSON from "@/posts/curriculum_committee.json";
import adInfoJSON from "@/posts/assistant_directors.json";
//import pcInfoJSON from "@/posts/pub_committee.json";

import { Col } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";

import { MeetTheTeamCard } from "@/components/About/MeetTheTeamCard";
import { Header } from "@/components/Header";

import { ColorThemes } from "@/colors";
import headerBlobYellow from "@/media/HeaderBlobs/yellow.png";

enum Headers {
  First = "EXECUTIVE COMMITTEE",
  Second = "BOARD OF DIRECTORS",
  Third = "CURRICULUM COMMITTEE",
  Fourth = "PUBLICITY COMMITTEE",
}

export const MeetTheTeam: React.FC = () => {
  return (
    <section>
      <Header
        headerTextColor={ColorThemes.mainYellow}
        image={headerBlobYellow}
        title={"Get to Know our Team!"}
        description={"Get to know the faces behind Robotics for All!"}
      />
      <section>
        <h2
          style={{
            color: ColorThemes.mainOrange,
            textAlign: "center",
            padding: "8px",
          }}
        >
          {Headers.First}
        </h2>
        <Container fluid className="container">
          <Row>
            {bmInfoJSON.board_members_list.map((info: any, i: number) => (
              <Col sm={6} md={4} xl={3} key={i}>
                <MeetTheTeamCard
                  info={info}
                  backgroundColor={ColorThemes.mainYellow}
                  color={ColorThemes.darkYellow}
                />
              </Col>
            ))}
          </Row>
        </Container>
      </section>

      <section>
        <h2
          style={{
            color: ColorThemes.mainGreen,
            textAlign: "center",
            padding: "8px",
          }}
        >
          {Headers.Second}
        </h2>
        <Container fluid className="container">
          <Row>
            {adInfoJSON.assistant_directors_list.map((info: any, i: number) => (
              <Col sm={6} md={4} xl={3} key={i}>
                <MeetTheTeamCard
                  info={info}
                  backgroundColor={ColorThemes.mainYellow}
                  color={ColorThemes.darkYellow}
                />
              </Col>
            ))}
          </Row>
        </Container>
      </section>

      <section>
        <h2
          style={{
            color: ColorThemes.mainBlue,
            textAlign: "center",
            padding: "8px",
          }}
        >
          {Headers.Third}
        </h2>
        <Container fluid className="container">
          <Row>
            {ccInfoJSON.curriculum_committee_list.map(
              (info: any, i: number) => (
                <Col sm={6} md={4} xl={3} key={i}>
                  <MeetTheTeamCard
                    info={info}
                    backgroundColor={ColorThemes.mainYellow}
                    color={ColorThemes.darkYellow}
                  />
                </Col>
              )
            )}
          </Row>
        </Container>
      </section>
    </section>
  );
};

[arvindg-rfa]

Dec 17th Meeting:

• I will take a look at your code regarding the issue you brought up
• Continue to debug your issue with the repsonsive scaling