Update board member card look and feel

components/Boardmembercard.jsx

@@ -1,22 +1,56 @@
+import React from "react";
 import Image from "next/future/image";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
 
 /* eslint-disable */
-const BoardMemberCard = ({ givenName, img, role, color }) => {
+const ReactIcon = (props) => {
   return (
-    <div className="bg-white opacity-100 z-50 h-[20rem] w-[15rem] rounded-3xl shadow-lg m-4 flex flex-col justify-center items-center" data-aos="fade-up"
-    data-aos-anchor-placement="center-center">
+    <>
+      <a
+        href={props?.link}
+        className="text-4xl text-gray-700 hover:-translate-y-0.5 cursor-pointer"
+        target="__blank"
+      >
+        {props?.Icon}
+      </a>
+    </>
+  );
+};
+
+const BoardMemberCard = ({
+  givenName,
+  img,
+  role,
+  color,
+  desc,
+  github,
+  linkedIn,
+}) => {
+  return (
+    <div
+      className="bg-white opacity-100 z-50 h-[25rem] w-[20rem] rounded-3xl shadow-lg flex flex-col justify-center items-center space-x-2 relative"
+      data-aos="fade-up"
+      data-aos-anchor-placement="center-center"
+    >
       <Image
         src={img}
-        className="p-6 rounded-full"
-        alt=""
-        width={400}
-        height={400}
+        className="p-5 mt-0 rounded-full absolute top-0"
+        alt="profile picture"
+        width={250}
+        height={250}
       />
-      <div className="flex flex-col items-center justify-center p-4 pt-0 mb-5 space-x-2">
-        <p className="font-bold text-lg">{givenName}</p>
-        <p style={{ color: color }} className={`text-xl text-center`}>
+
+      <div className="absolute top-1/2 mt-8 flex flex-col items-center">
+        <p className="font-bold text-2xl">{givenName}</p>
+        <p style={{ color: color }} className={`text-lg text-center`}>
           {role}
         </p>
+        <p className={`text-mb text-center italic mt-2`}>"{desc}"</p>
+      </div>
+
+      <div className="flex gap-5 absolute bottom-0 mb-2">
+        <ReactIcon Icon={<FaGithub />} link={github} />
+        <ReactIcon Icon={<FaLinkedin />} link={linkedIn} />
       </div>
     </div>
   );

components/Boardmembers.jsx

@@ -12,8 +12,11 @@ const BoardMembers = () => {
   const { width } = useWindowDimensions();
 
   return (
-    <div className="font-productSans h-full relative w-full flex flex-col space-y-10 mt-10 mb-5" data-aos="fade-up"
-    data-aos-anchor-placement="center-center">
+    <div
+      className="font-productSans h-full relative w-full flex flex-col space-y-10 mt-10 mb-5"
+      data-aos="fade-up"
+      data-aos-anchor-placement="center-center"
+    >
       <div className="flex flex-col justify-center items-center space-y-6 text-gray-700 z-10">
         <h1 className="text-center text-6xl font-bold">The Board</h1>
         <p className="text-center text-xl">2022-23</p>
@@ -35,19 +38,23 @@ const BoardMembers = () => {
           modules={[Navigation]}
           className="mySwiper"
         >
-          {data.map(({ name, image, description, role, color }) => {
-            return (
-              <SwiperSlide className="" key={name}>
-                <BoardMemberCard
-                  givenName={name}
-                  img={image}
-                  desc={description}
-                  role={role}
-                  color={color}
-                />
-              </SwiperSlide>
-            );
-          })}
+          {data.map(
+            ({ name, image, description, role, color, linkedIn, github }) => {
+              return (
+                <SwiperSlide className="" key={name}>
+                  <BoardMemberCard
+                    givenName={name}
+                    img={image}
+                    desc={description}
+                    role={role}
+                    color={color}
+                    linkedIn={linkedIn}
+                    github={github}
+                  />
+                </SwiperSlide>
+              );
+            }
+          )}
         </Swiper>
 
         {/* Card */}