Adding coop info

I've added coop info

src/components/Team/Coop.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-function Coop({ headshot, name }) {
+function Coop({ headshot, name, position }) {
   return (
     <div className="group text-center">
       <div className="relative inline-block mx-auto h-32 w-32 rounded-full overflow-hidden">
@@ -11,7 +11,9 @@ function Coop({ headshot, name }) {
         <p className="title h5 text-lg font-medium text-emerald-600 mb-1">
           {name}
         </p>
+        <p className="text-slate-400">{position}</p>
       </div>
+
     </div>
   );
 }

src/components/Team/Coops.ts

@@ -1,13 +1,28 @@
-import Ling from "/static/img/Coops/Ling.png";
-import Nicole_C from "/static/img/Coops/Nicole_C.png";
+import Omer_S from "/static/img/team_headshots/Omer_S.png";
+import Alessandra from "/static/img/Coops/Alessandra.png";
+import Simra_K from "/static/img/Coops/Simra_K.png";
+import Tom_W from "/static/img/Coops/Tom_W.png";
 
 export const coops = [
     {
-        name: "Ling",
-        headshot: Ling,
+        name: "Omer Syed",
+        headshot: Omer_S,
+        position: 'Mechanical Engineering Co-op',
     },
     {
-        name: "Nicole Chung",
-        headshot: Nicole_C,
+        name: "Alessandra",
+        headshot: Alessandra,
+        position: 'Mechanical Engineering Co-op',
+    },
+    {
+        name: "Simra Khan",
+        headshot: Simra_K,
+        position: 'Firmware Engineering Co-op',
+    },
+
+    {
+        name: "Tom Wang",
+        headshot: Tom_W,
+        position: 'Web Dev Co-op',
     },
 ];

src/pages/team.tsx

@@ -62,7 +62,7 @@ function Team() {
 
           <div className="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 mt-0 gap-[30px]">
             {coops.map((lead, index) => (
-              <Coop headshot={lead.headshot} name={lead.name} />
+              <Coop headshot={lead.headshot} name={lead.name} position={lead.position} />
             ))}
           </div>