Adds OurTeam component with team members profile picture, linkedin an…

…d github acount links.

src/aboutUs/MemberCard.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import Card from "react-bootstrap/Card";
+
+import defaultImg from "../assets/images/AgriLensLogo1.png";
+
+const MemberCard = ({ member }) => {
+  const imgSrc = member.imgSrc || defaultImg;
+  return (
+    <Card
+      id="memberCard"
+      style={{ width: "16rem" }}
+      className="text-center text-primary p-0 mt-5"
+    >
+      <Card.Img variant="top" src={imgSrc} style={{ height: "16rem" }} />
+      <Card.Body>
+        <Card.Title className="fw-bold">{member.name}</Card.Title>
+        <Card.Text>{member.role}</Card.Text>
+        <div className="member-links d-flex justify-content-center gap-4 ">
+          <Link to={member.linkedInLink}>
+            {member.linkedInLink && <i className="fa-brands fa-linkedin" />}
+          </Link>
+          <Link to={member.gitHubLink}>
+            {member.gitHubLink && <i className="fa-brands fa-square-github" />}
+          </Link>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default MemberCard;

src/aboutUs/OurTeam.css

@@ -0,0 +1,29 @@
+#ourTeam {
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 0px min(5vw, 100px);
+}
+
+
+/* MemberCard styling */
+#memberCard {
+  margin: 0 auto;
+}
+
+#memberCard {
+  border-radius: 20px;
+}
+#memberCard img {
+  border-radius: 20px 20px 0 0;
+}
+.member-links a {
+  text-decoration: none;
+  color: none;
+  transform: scale(2);
+}
+.member-links .fa-linkedin {
+  color: #0a66c2;
+}
+.member-links .fa-square-github {
+  color: #181717;
+}

src/aboutUs/OurTeam.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import Row from "react-bootstrap/Row";
+
+import "./OurTeam.css";
+import MemberCard from "./MemberCard";
+
+// import blair from "../assets/images/BlairEdnie.jpeg";
+import jacquelineHernandez from "../assets/images/JacquelineHernandez.jpeg";
+import jessicaNguyen from "../assets/images/JessicaNguyen.jpeg";
+import jihaduYassien from "../assets/images/JihaduYassien.jpeg";
+import lukeFarchione from "../assets/images/LukeFarchione.jpeg";
+
+const teamList = [
+  {
+    id: 1,
+    name: "Luke Farchione",
+    role: "Developer",
+    imgSrc: lukeFarchione,
+    gitHubLink: "https://github.com/LukeFarch",
+    linkedInLink: "https://www.linkedin.com/in/luke-farchione-05548b161/",
+  },
+  {
+    id: 2,
+    name: "Jessica Nguyen",
+    role: "Developer",
+    imgSrc: jessicaNguyen,
+    gitHubLink: "https://www.linkedin.com/in/jessnwin/",
+    linkedInLink: "https://github.com/JessNwin",
+  },
+  {
+    id: 3,
+    name: "Jihadu Yassien",
+    role: "Developer",
+    imgSrc: jihaduYassien,
+    gitHubLink: "https://github.com/jyassien",
+    linkedInLink: "https://www.linkedin.com/in/jyassien/",
+  },
+  {
+    id: 4,
+    name: "Blair Ednie",
+    role: "Developer",
+    imgSrc: "",
+    gitHubLink: "https://github.com/bednie",
+    linkedInLink: "https://www.linkedin.com/in/blair-ednie/",
+  },
+  {
+    id: 5,
+    name: "Jacqueline Hernandez",
+    role: "Developer",
+    imgSrc: jacquelineHernandez,
+    gitHubLink:
+      "https://github.com/agrilens/agrilens/commits?author=jacihernandez303",
+    linkedInLink: "https://www.linkedin.com/in/jacqueline-hernandez-aba845173/",
+  },
+];
+
+const OurTeam = () => {
+  return (
+    <section id="ourTeam">
+      <Row className="text-primary text-center display-4">
+        <h1 className="display-5 fw-bold ">Our Team</h1>
+      </Row>
+      <Row className="text-primary mb-5">
+        {teamList.map((member) => (
+          <MemberCard key={member.id} member={member} />
+        ))}
+      </Row>
+    </section>
+  );
+};
+
+export default OurTeam;