Fix sponsor image to fit within container; partial circle shape imple… (#171)

Author: fisayoadabs

src/components/LandingPage/ThanksSponsors.tsx

@@ -9,7 +9,7 @@ const rightSponsorSvgSmall = "/svgs/judgingCriteria/rightSponsorSvgSmall.svg";
 
 export default async function ThankSponsors() {
   const IMAGE_CLASS =
-    "relative size-12 min-w-12 overflow-hidden rounded-full duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform sm:size-28 sm:min-w-28";
+    "relative duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform ";
 
   const sponsors = await fetchContent("hackathonSponsor");
   const sortedSponsors = sponsors.sort(
@@ -19,7 +19,7 @@ export default async function ThankSponsors() {
   return (
     <div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-10">
       <div className="flex h-48 w-full justify-center">
-        <div className="absolute -left-12 top-24 z-20  size-44 sm:hidden">
+        <div className="absolute -left-12 top-24 z-20 size-44 sm:hidden">
           <Image
             src={leftSponsorSvgSmall}
             alt="squiggly lines"
@@ -64,27 +64,50 @@ export default async function ThankSponsors() {
 
       <div className="flex w-full flex-row justify-around px-8 pt-10">
         {sortedSponsors.map((sponsor, index) => (
-          <div className="flex flex-row  gap-2 sm:gap-3" key={index}>
+          <div className="flex flex-row gap-2 sm:gap-3" key={index}>
             <div className="group flex flex-col items-center gap-3">
-              <div className={IMAGE_CLASS}>
+              <div
+                className={IMAGE_CLASS}
+                style={{
+                  maxWidth: "300px",
+                  width: "95%",
+                  height: "100%",
+                  padding: "5px",
+                  borderRadius: "20px",
+                  overflow: "hidden",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
                 <a
                   href={sponsor.fields.sponsorPage}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <Image
-                    src={
-                      sponsor.fields.sponsorImg.fields.file?.url
-                        ?.toString()
-                        .replace("//", "https://") ?? ""
-                    }
-                    alt="Sponsor Image"
-                    style={{ objectFit: "contain" }}
-                    fill
-                  />
+                  <div
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: "inherit",
+                    }}
+                  >
+                    <Image
+                      src={
+                        sponsor.fields.sponsorImg.fields.file?.url
+                          ?.toString()
+                          .replace("//", "https://") ?? ""
+                      }
+                      alt="Sponsor Image"
+                      layout="intrinsic"
+                      objectFit="contain"
+                      width={150}
+                      height={150}
+                    />
+                  </div>
                 </a>
               </div>
-              <p className="inset-0 text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
+              <p className="text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
                 {sponsor.fields.sponsorName}
               </p>
             </div>