diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 26a2066b045c..f03cc6ab7029 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -19,11 +19,11 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
}
return (
-
+
{studies.map((study, index) => (
diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx
index c3ead83b61b3..773f5953e040 100644
--- a/components/MDX/MDX.tsx
+++ b/components/MDX/MDX.tsx
@@ -37,7 +37,7 @@ import Row from '../layout/Row';
import NewsletterSubscribe from '../NewsletterSubscribe';
import Profiles from '../Profiles';
import Remember from '../Remember';
-import Sponsors from '../sponsors/Sponsors';
+import Sponsors from '../sponsors/PlatinumSponsors';
import Warning from '../Warning';
import { Table, TableBody, TableCell, TableHeader, TableRow, Thead } from './MDXTable';
diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
index 3729ffcc7e09..f7155ba4b4ec 100644
--- a/components/sponsors/GoldSponsors.tsx
+++ b/components/sponsors/GoldSponsors.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { goldSponsors } from './GoldSponsorsList';
+import SponsorImage from './SponsorImage';
interface GoldSponsorsProps {
className?: string;
@@ -26,10 +27,10 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
rel='noopener noreferrer'
data-testid='GoldSponsors-link'
>
-
diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/PlatinumSponsors.tsx
similarity index 83%
rename from components/sponsors/Sponsors.tsx
rename to components/sponsors/PlatinumSponsors.tsx
index fd5aff751179..824156759603 100644
--- a/components/sponsors/Sponsors.tsx
+++ b/components/sponsors/PlatinumSponsors.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { sponsors } from './SponsorsList';
+import { platinumSponsors } from './PlatinumSponsorsList';
+import SponsorImage from './SponsorImage';
interface SponsorsProps {
className: string;
@@ -13,11 +14,11 @@ interface SponsorsProps {
* @param {string} props.className - Additional CSS classes for styling.
* @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed.
*/
-export default function Sponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
+export default function PlatinumSponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
return (
- {sponsors.map((sponsor, index) => (
+ {platinumSponsors.map((sponsor, index) => (
-
-
-
diff --git a/components/sponsors/SponsorImage.tsx b/components/sponsors/SponsorImage.tsx
new file mode 100644
index 000000000000..e51e179e8330
--- /dev/null
+++ b/components/sponsors/SponsorImage.tsx
@@ -0,0 +1,19 @@
+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 (
+
+
+
+ );
+}
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
index 634982c9ee2a..847a8effbc8d 100644
--- a/pages/[lang]/index.tsx
+++ b/pages/[lang]/index.tsx
@@ -21,8 +21,8 @@ import NewsletterSubscribe from '../../components/NewsletterSubscribe';
import NewsroomSection from '../../components/newsroom/NewsroomSection';
import Slack from '../../components/slack';
import GoldSponsors from '../../components/sponsors/GoldSponsors';
+import PlatinumSponsors from '../../components/sponsors/PlatinumSponsors';
import SilverSponsors from '../../components/sponsors/SilverSponsors';
-import Sponsors from '../../components/sponsors/Sponsors';
import SupportUs from '../../components/SupportUs/SupportUs';
import Testimonial from '../../components/Testimonial';
import Heading from '../../components/typography/Heading';
@@ -149,7 +149,7 @@ export default function HomePage() {
{t('sponsors.platinumTitle')}
-
+