team section

src/App.tsx

@@ -2,6 +2,7 @@ import Navbar from './components/NavBar';
 import About from './sections/About';
 import FAQ from './sections/FAQ';
 import Sponsors from './sections/Sponsors';
+import Team from './sections/Team';
 import Footer from './components/Footer';
 import Landing from './sections/Landing';
 import styled from 'styled-components';
@@ -22,6 +23,7 @@ function App() {
         <About />
         <Sponsors />
         <FAQ />
+        <Team />
         <Footer />
       </Container>
     </>

src/components/Member.tsx

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { mobile } from '../styles';
+
+const Container = styled.a`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    height: 125px;
+    width: auto;
+    margin: 10px;
+    transition: transform 0.2s ease-in-out;
+    border-radius: 15px;
+    ${mobile} {
+      max-width: auto;
+      height: 100px;
+      margin: 0px;
+    }
+  }
+
+  &:hover img {
+    transform: scale(1.02);
+  }
+`;
+
+const Name = styled.p`
+  font-size: 20px;
+  color: var(--beige);
+`;
+
+const Description = styled.p`
+  font-size: 15px;
+  color: var(--beige);
+`;
+
+interface IMember {
+  src: string;
+  alt: string;
+  name: string;
+  description: string;
+  h?: number;
+}
+
+export const Member: React.FC<IMember> = ({ src, alt, name, description }) => {
+  return (
+    <Container target="_blank" rel="noreferrer">
+      <img src={src} alt={alt} />
+      <Name>{name}</Name>
+      <Description>{description}</Description>
+    </Container>
+  );
+};
+
+export default Member;

src/components/MemberBox.tsx

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { mobile } from '../styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBookmark } from '@fortawesome/free-regular-svg-icons';
+
+const Container = styled.div`
+  margin-bottom: 2px;
+  background-color: var(--dark green);
+  margin: 50px;
+  border-radius: 15px;
+  padding-bottom: 50px;
+  padding-left: 150px;
+  padding-right: 150px;
+  ${mobile} {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+`;
+
+const Title = styled.h2`
+  text-align: left;
+  padding-left: 0px;
+  padding-bottom: 30px;
+  font-size: 32px;
+  color: var(--gold);
+  font-family: GentiumBookPlus;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  column-gap: 50px;
+  row-gap: 20px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+const FontContainer = styled.div`
+  padding: 10px;
+`;
+
+interface IMemberBox {
+  title: string;
+  children: React.ReactNode;
+}
+
+export const MemberBox: React.FC<IMemberBox> = ({ title, children }) => {
+  return (
+    <Container>
+      <TitleContainer>
+        <FontContainer>
+          <FontAwesomeIcon icon={faBookmark} size="2x" color="var(--red)" />
+        </FontContainer>
+        <Title>{title}</Title>
+      </TitleContainer>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
+
+export default MemberBox;

src/components/NavBar.tsx

@@ -78,6 +78,7 @@ const Navbar: React.FC = () => {
         <NavLink href="#about">About</NavLink>
         <NavLink href="#sponsors">Sponsors</NavLink>
         <NavLink href="#faq">FAQ</NavLink>
+        <NavLink href="#team">Team</NavLink>
         <Button href={dashboard} color="#654221">
           Dashboard
         </Button>

src/sections/Team.tsx

@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+import MemberBox from '../components/MemberBox';
+import Member from '../components/Member';
+import profilePic from '../assets/members/profilepic.jpg';
+
+const Section = styled.div``;
+
+const Container = styled.div`
+  background-color: var(--darkgreen);
+`;
+
+export default function Team() {
+  return (
+    <Section id="team">
+      <Container>
+        <MemberBox title="OUR TEAM">
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+          <Member
+            src={profilePic}
+            alt="FName LName"
+            name="FName"
+            description="Team"
+          />
+        </MemberBox>
+      </Container>
+    </Section>
+  );
+}