Refact: Update professors grid layout

Author: RodrigoEC

src/components/Professor.tsx

@@ -12,19 +12,19 @@ interface ProfessorCardProps {
 const Professor: React.FC<ProfessorCardProps> = ({ professor, onTagSelect }) => {
   return (
     <div className="max-w-sm overflow-hidden bg-white font-sans">
-      <div className="aspect-square w-full overflow-hidden">
+      <div className="aspect-square w-full overflow-hidden rounded-xl">
         <Image
           src={professor.photo.url}
           width={800}
           height={800}
           alt={professor.name}
-          className="h-full w-full object-cover"
+          className="h-full w-full object-cover rounded-xl transition-transform duration-300 hover:scale-105"
         />
       </div>
 
       <div className="py-4 flex flex-col gap-2">
         <div>
-          <h2 className="text-xl font-bold text-gray-800 p-0">
+          <h2 className="text-md md:text-lg font-bold text-gray-800 p-0">
             {professor.name}
           </h2>
           <p className="text-sm text-gray-400">{professor.role}</p>

src/components/ProfessorsGrid.tsx

@@ -35,7 +35,7 @@ export const ProfessorsGrid: React.FC<{
           Nenhum professor foi encontrado para os filtros selecionados.
         </p>
       ) : (
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4 items-start">
+        <div className="grid gap-8 grid-cols-2 lg:grid-cols-4 items-start">
           {paginated.map((prof) => (
             <Professor key={prof.name} professor={prof} onTagSelect={handleTagSelectOnly} />
           ))}

src/components/ProjectCard.tsx

@@ -15,31 +15,29 @@ export const ProjectCard = ({
 
   return (
     <div className="py-6 border-b border-gray-200 hover:bg-gray-100 rounded-lg p-4 transition duration-300 slast:border-b-0">
-      <div className="flex  justify-between gap-4">
-        <div className="flex w-full  flex-wrap flex-col items-start gap-x-2 gap-y-1">
-          {project.link ? (
-            <a
-              href={project.link}
-              target="_blank"
-              rel="noreferrer"
-              className="font-bold text-gray-900 hover:underline flex items-center gap-1"
-            >
-              {project.name}
-              <ExternalLink size={14} className="shrink-0" />
-            </a>
-          ) : (
-            <span className="font-bold text-gray-900">{project.name}</span>
-          )}
-          {project.leader && (
-            <span className="text-gray-600 text-sm">
-              Coordenado por: <strong>{project.leader.name}</strong>
-            </span>
-          )}
-        </div>
+      <div className="flex w-full flex-wrap items-start justify-between gap-x-2 gap-y-1">
+        {project.link ? (
+          <a
+            href={project.link}
+            target="_blank"
+            rel="noreferrer"
+            className="font-bold text-gray-900 hover:underline flex items-center gap-1"
+          >
+            {project.name}
+            <ExternalLink size={14} className="shrink-0" />
+          </a>
+        ) : (
+          <span className="font-bold text-gray-900">{project.name}</span>
+        )}
         <span className="text-sm text-gray-500 shrink-0">
           {getYear(project.initDate)} - {endLabel}
         </span>
       </div>
+      {project.leader && (
+        <span className="text-gray-600 text-sm">
+          Coordenado por: <strong>{project.leader.name}</strong>
+        </span>
+      )}
 
       <div className="mt-2 text-sm text-gray-700">
         {documentToReactComponents(project.description.json)}