diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
index 3729ffcc7e0..94b2bb41c98 100644
--- a/components/sponsors/GoldSponsors.tsx
+++ b/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'
>
-
))}
diff --git a/components/sponsors/ResponsiveImage.tsx b/components/sponsors/ResponsiveImage.tsx
new file mode 100644
index 00000000000..e5d20657cb4
--- /dev/null
+++ b/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 = ({
+ src,
+ alt,
+ className,
+ dataTestId,
+}) => {
+ const classNameMerged = twMerge('w-full h-12 object-contain', className);
+
+ return (
+
+ );
+};
+
+export default ResponsiveImage;
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
index 4a737aef7df..8a223fda18e 100644
--- a/components/sponsors/SilverSponsors.tsx
+++ b/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'
>
-
))}
diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/Sponsors.tsx
index fd5aff75117..fe0041814c8 100644
--- a/components/sponsors/Sponsors.tsx
+++ b/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'
>
-