fix: normalized logos of sponsors

components/sponsors/GoldSponsors.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { goldSponsors } from './GoldSponsorsList';
+import ResponsiveImage from './ResponsiveImage';
 
 interface GoldSponsorsProps {
   className?: string;
@@ -26,11 +27,11 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
             rel='noopener noreferrer'
             data-testid='GoldSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <ResponsiveImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='GoldSponsors-img'
+              className={sponsor.imageClass}
+              dataTestId='GoldSponsors-img'
             />
           </a>
         ))}

components/sponsors/ResponsiveImage.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface ResponsiveImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  dataTestId: string;
+}
+
+/*
+ * This component displays the responsive image of the sponsors.
+ * @param {ResponsiveImageProps} props - The props for ResponsiveImage component.
+ * @param {string} props.src - Source of the image displayed.
+ * @param {string} props.alt - Alternative text for the image, important for accessibility.
+ * @param {string} props.className - Additional CSS class names for styling the image.
+ * @param {string} props.dataTestId - A string for identifying the element during testing.
+ */
+const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
+  src,
+  alt,
+  className,
+  dataTestId,
+}) => {
+  const classNameMerged = twMerge('w-full h-12 object-contain', className);
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`${classNameMerged}`}
+      data-testid={dataTestId}
+    />
+  );
+};
+
+export default ResponsiveImage;

components/sponsors/SilverSponsors.tsx

@@ -1,5 +1,5 @@
+import ResponsiveImage from './ResponsiveImage';
 import React from 'react';
-
 import { Silversponsors } from './SilverSponsorsList';
 
 interface SilverSponsorsProps {
@@ -26,11 +26,11 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <ResponsiveImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='SilverSponsors-img'
+              className={sponsor.imageClass}
+              dataTestId='SilverSponsors-img'
             />
           </a>
         ))}

components/sponsors/Sponsors.tsx

@@ -1,5 +1,5 @@
+import ResponsiveImage from './ResponsiveImage';
 import React from 'react';
-
 import { sponsors } from './SponsorsList';
 
 interface SponsorsProps {
@@ -26,11 +26,11 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S
               rel='noopener noreferrer'
               data-testid='Sponsors-link'
             >
-              <img
-                className={sponsor?.imageClass}
+              <ResponsiveImage
                 src={sponsor.imageSrc}
                 alt={sponsor.altText}
-                data-testid='Sponsors-img'
+                className={sponsor?.imageClass}
+                dataTestId='Sponsors-img'
               />
             </a>
           </li>