fix: normalize the logos of sponsors

components/sponsors/GoldSponsors.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { goldSponsors } from './GoldSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface GoldSponsorsProps {
   className?: string;
@@ -13,24 +14,26 @@ interface GoldSponsorsProps {
  * @param {string} props.className - Additional CSS classes for styling.
  * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed.
  */
-export default function GoldSponsors({ className = '' }: GoldSponsorsProps): React.ReactNode {
+export default function GoldSponsors({
+  className = '',
+}: GoldSponsorsProps): React.ReactNode {
   return (
     <div className={`text-center ${className}`}>
-      <div className='mb-8 flex flex-wrap items-center justify-center md:px-4'>
+      <div className="mb-8 flex flex-wrap items-center justify-center md:px-4">
         {goldSponsors.map((sponsor, index) => (
           <a
             key={index}
             href={sponsor.website}
-            target='_blank'
-            className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5'
-            rel='noopener noreferrer'
-            data-testid='GoldSponsors-link'
+            target="_blank"
+            className="relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5"
+            rel="noopener noreferrer"
+            data-testid="GoldSponsors-link"
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='GoldSponsors-img'
+              className={sponsor.imageClass}
+              data-testid="GoldSponsors-img"
             />
           </a>
         ))}

components/sponsors/SilverSponsors.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Silversponsors } from './SilverSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface SilverSponsorsProps {
   className: string;
@@ -13,24 +14,26 @@ interface SilverSponsorsProps {
  * @param {string} props.className - Additional CSS classes for styling.
  * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed.
  */
-export default function SilverSponsors({ className = '' }: SilverSponsorsProps): React.ReactNode {
+export default function SilverSponsors({
+  className = '',
+}: SilverSponsorsProps): React.ReactNode {
   return (
     <div className={`text-center ${className}`}>
-      <div className='mb-8 flex flex-wrap items-center justify-center md:px-4'>
+      <div className="mb-8 flex flex-wrap items-center justify-center md:px-4">
         {Silversponsors.map((sponsor, index) => (
           <a
             key={index}
             href={sponsor.website}
-            target='_blank'
-            className='relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4'
-            rel='noopener noreferrer'
-            data-testid='SilverSponsors-link'
+            target="_blank"
+            className="relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4"
+            rel="noopener noreferrer"
+            data-testid="SilverSponsors-link"
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='SilverSponsors-img'
+              className={sponsor.imageClass}
+              data-testid="SilverSponsors-img"
             />
           </a>
         ))}

components/sponsors/SponsorImage.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface SponsorImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+/**
+ * A component that displays sponsor logos with consistent dimensions
+ */
+export default function SponsorImage({
+  src,
+  alt = 'Sponsor logo',
+  className,
+}: SponsorImageProps) {
+  return (
+    <div className="flex size-full items-center justify-center">
+      <img
+        src={src}
+        alt={alt}
+        className={twMerge(
+          'max-h-9 sm:max-h-12 w-auto object-contain',
+          className,
+        )}
+      />
+    </div>
+  );
+}