Card design pending

src/App.jsx

@@ -1,9 +1,11 @@
 import ContactUs from "./components/contact/ContactUs";
 import Footer from "./components/footer/Footer";
+import Team from "./components/team/Team";
 
 function App() {
   return (
     <div>
+      <Team />
       <ContactUs />
       <Footer />
     </div>

src/components/team/Card.jsx

@@ -0,0 +1,26 @@
+export default function Card({ name, image, role, linkedin, github, twitter }) {
+  console.log(role.name);
+  return (
+    <div className="flex flex-col justify-center  w-[18.875rem] h-[24.4375rem] shrink-0">
+      <div className="">{role}</div>
+      <img
+        className="text-[#1C1C1C] text-[1.625rem] not-italic font-medium leading-[normal]"
+        src={image}
+        alt="Meh"
+      />
+      <h1>{name}</h1>
+      <h2>{role}</h2>
+      <div className="flex flex-row justify-center">
+        <a href={linkedin}>
+          <img src="" />
+        </a>
+        <a href={github}>
+          <img src="" />
+        </a>
+        <a href={twitter}>
+          <img src="" />
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/team/Team.jsx

@@ -0,0 +1,17 @@
+import * as data from "../../data/data2023.json";
+import Card from "./Card";
+export default function Team() {
+  console.log(data.teamMembers[0]);
+  return (
+    <div className="flex 6flex-row justify-evenly">
+      <Card
+        name={data.teamMembers[0].name}
+        role={data.teamMembers[0].role}
+        linkedin={data.teamMembers[0].linkedinUrl}
+        github={data.teamMembers[0].githubUrl}
+        twitter={data.teamMembers[0].twitterUrl}
+        image={data.teamMembers[0].image}
+      />
+    </div>
+  );
+}