fix: card alignment

Author: Miran-Firdausi

src/assets/styles/index.css

@@ -1,7 +1,12 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "@fontsource/poppins/300.css";
 @import "@fontsource/poppins/400.css";
+@import "@fontsource/poppins/500.css";
+@import "@fontsource/poppins/600.css";
+@import "@fontsource/poppins/700.css";
+@import "@fontsource/poppins/800.css";
 @import "@fontsource/poppins/900.css";
 @import "@fontsource/league-gothic";
 

src/pages/Teams/TeamMember.jsx

@@ -9,20 +9,20 @@ function TeamMember({ member }) {
     member;
 
   return (
-    <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle max-w-[350px]">
-      <div className="pt-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 space-y-4 align-middle">
+    <div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 align-middle max-w-[350px]">
+      <div className="py-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 align-middle">
         <img
           src={image}
           alt={name}
           className="w-32 h-32 rounded-full mx-auto"
         />
-        <h2 className="text-2xl mt-16 font-poppins font-thin text-center text-text-light">
+        <h2 className="text-xl mt-8 font-poppins font-thin text-center tracking-wide text-text-light">
           {name}
         </h2>
-        <p className="text-l font-poppins text-center font-bold text-text-light">
+        <p className="text-sm mt-2 font-poppins text-center font-semibold tracking-wide text-text-light">
           {position}
         </p>
-        <p className="font-poppins text-center text-wrap text-text-light">
+        <p className="text-sm font-poppins my-4 text-center text-wrap text-secondary-light">
           {description}
         </p>
         <div className="flex justify-center space-x-4">

src/pages/Teams/index.jsx

@@ -18,7 +18,7 @@ function Teams() {
               text="MEET OUR TEAM"
               className="text-center absolute top-0 left-0 right-0 mb-24"
             />
-            <div className="flex flex-row flex-wrap gap-6 justify-center items-center mt-12">
+            <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
               {teamMembers}
             </div>
             <SkewButton text="SEE ALL" link="/all-members" className="mt-16" />