Cleaned up styling on project card components

pages/index.jsx

@@ -7,9 +7,7 @@ import Button from "@/components/button";
 
 import fs from "fs";
 import path from "path";
-// import Markdown from 'markdown-to-jsx';
 import Image from "next/image";
-import fontbook from "@/shared/fonts";
 import SponsorSection from "@/components/sponsorSection";
 import { useRouter } from "next/router";
 
@@ -70,7 +68,7 @@ export default function Home({ sponsors, projects }) {
       <div className="bg-grey">
         <Wave180 className="rotate-180"></Wave180>
         <div className="container mx-auto py-4">
-          <h2 className="text-3xl text-center bold">Recent Projects</h2>
+          <h2 className="text-3xl text-center font-bold">Recent Projects</h2>
           <div className="flex gap-4 flex-col sm:flex-row p-4">
             {projects.map((project, index) => (
               <ProjectCard key={index} basePath={basePath} json={project} />
@@ -106,10 +104,10 @@ function ProjectCard({ json, basePath }) {
   return (
     <Link
       href={json.link}
-      className="bg-grey-light p-2 rounded-lg w-full hover:-translate-y-1"
+      className="bg-grey-light p-5 rounded-lg drop-shadow-sm w-full transition hover:-translate-y-1"
     >
       <Image
-        className="w-full rounded"
+        className="w-full rounded mb-3"
         width="500"
         height="500"
         src={
@@ -119,8 +117,8 @@ function ProjectCard({ json, basePath }) {
         }
         alt={json.image.split(".")[0].split("_").join(" ")}
       />
-      <h3 className="text-lg ">{json.name}</h3>
-      <p>{json.description}</p>
+      <h3 className="text-lg font-bold">{json.name}</h3>
+      <p className="line-clamp-2">{json.description}</p>
     </Link>
   );
 }