changed columns from 3 to 2,added vertical spacing in mobile view

asyncapi · Dec 22, 2024 · 3c62159 · 3c62159
1 parent c9a6730
commit 3c62159
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
@@ -19,22 +19,24 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   }
 
   return (
-    <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
-      {studies.map((study, index) => (
-        <a key={index} href={`casestudies/${study.id}`}>
-          <div
-            className='max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
-            data-testid='CaseStudyCard-main'
-          >
-            <span className='mr-2'>
-              <img className='m-auto h-16' src={study.company.logo} alt={study.company.name} />
-            </span>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
-              {study.company.description}
-            </Paragraph>
-          </div>
-        </a>
-      ))}
-    </div>
+    <div className="grid gap-y-4 pt-10 sm:gap-y-6 lg:grid-cols-2 lg:gap-y-8 lg:justify-items-center lg:gap-x-0">
+  {studies.map((study, index) => (
+    <a key={index} href={`casestudies/${study.id}`} className="w-full max-w-sm">
+      <div
+        className="flex flex-col items-center h-full overflow-hidden rounded-md border border-gray-200 bg-white p-4 transform transition-transform duration-300 hover:scale-105 hover:shadow-lg"
+        style={{ minHeight: '300px' }}
+        data-testid="CaseStudyCard-main"
+      >
+        <span className="mr-2"> 
+          <img className="m-auto h-16" src={study.company.logo} alt={study.company.name} />
+        </span>
+        <Paragraph typeStyle={ParagraphTypeStyle.md} className="my-4 text-center">
+          {study.company.description}
+        </Paragraph>
+      </div>
+    </a>
+  ))}
+</div>
+
   );
 }