Team cards added to homepage

package.json

@@ -24,7 +24,7 @@
     "nextra-theme-docs": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.11.0"
   },
   "devDependencies": {
     "@types/node": "18.11.10",

src/components/team-card/index.tsx

@@ -1,7 +1,57 @@
+import React from 'react';
 import styles from './style.module.css';
 
 const TeamCard: React.FC = () => {
-  return <h3>TeamCard</h3>;
+  const teamMembers = [
+    {
+      name: 'Nikhil Dange',
+      position: 'Hack Technical Lead',
+      email: '[email protected]',
+      imageUrl: 'assets/nikhil2_pfp.JPG',
+    },
+    {
+      name: 'Angela Hu',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/angela_pfp.PNG',
+    },
+    {
+      name: 'Khushi Patel',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/khushi_pfp.PNG',
+    },
+    {
+      name: 'Charvi Shukla',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/charvi_pfp.PNG',
+    },
+    {
+      name: 'Alexis Vergnet',
+      position: 'Hack Technical Event Directors',
+      email: '[email protected]',
+      imageUrl: 'assets/alexis_pfp.PNG',
+    },
+  ];
+
+
+  return (
+    <div className={styles.team}>
+      {teamMembers.map((member, index) => (
+        <div key={index} className={styles.card}>
+          <div className={styles.cardOutline}>
+            <img src={member.imageUrl} 
+              alt={member.name} 
+            />
+            <h4>{member.name}</h4>
+            <p>{member.position}</p>
+            <p>{member.email}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default TeamCard;

src/components/team-card/style.module.css

@@ -0,0 +1,25 @@
+.team {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.card {
+    margin: 10px;
+    text-align: center;
+}
+
+.cardOutline {
+    border: 2px solid #333;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.card img {
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    display: inline-block;
+}

src/sections/Team/index.tsx

@@ -1,7 +1,13 @@
 import styles from './style.module.css';
+import TeamCard from '../../components/team-card/index';
 
 const Team: React.FC = () => {
-  return <h3 className={styles.team}>Team Section</h3>;
+  return (
+    <div>
+      <h3 className={styles.team}>Team Section</h3>
+      <TeamCard />
+    </div>
+  )
 };
 
-export default Team;
+export default Team;

src/sections/Team/style.module.css

@@ -6,4 +6,5 @@
     height: 30vh;
     max-height: 100vh;
     border-bottom: 1px solid black;
-}
+}
+

yarn.lock

@@ -3811,10 +3811,10 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-icons@^4.10.1:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
-  integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
 
 react-is@^16.13.1:
   version "16.13.1"