From c4b12e0b20e363dff0064c014c58c78aecebeec1 Mon Sep 17 00:00:00 2001
From: "deepanshu.bone" <123951725+29deepanshutyagi@users.noreply.github.com>
Date: Mon, 27 Jan 2025 10:28:00 +0530
Subject: [PATCH] fix: normalize the logos of sponsors  (#3534)

fix: normalize the logos of sponsors  (#3534)
---
 components/CaseStudyCard.tsx                  |  4 ++--
 components/MDX/MDX.tsx                        |  2 +-
 components/sponsors/GoldSponsors.tsx          |  5 +++--
 .../{Sponsors.tsx => PlatinumSponsors.tsx}    |  9 +++++----
 ...ponsorsList.ts => PlatinumSponsorsList.ts} |  2 +-
 components/sponsors/SilverSponsors.tsx        |  5 +++--
 components/sponsors/SponsorImage.tsx          | 19 +++++++++++++++++++
 pages/[lang]/index.tsx                        |  4 ++--
 8 files changed, 36 insertions(+), 14 deletions(-)
 rename components/sponsors/{Sponsors.tsx => PlatinumSponsors.tsx} (83%)
 rename components/sponsors/{SponsorsList.ts => PlatinumSponsorsList.ts} (92%)
 create mode 100644 components/sponsors/SponsorImage.tsx

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 (
-    <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center gap-3'>
+    <div className='flex flex-wrap gap-3 pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
       {studies.map((study, index) => (
         <a key={index} href={`casestudies/${study.id}`}>
           <div
-            className='max-w-sm h-full overflow-hidden min-h-[300px] rounded-md border border-gray-200 bg-white p-4'
+            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
             data-testid='CaseStudyCard-main'
           >
             <span className='mr-2'>
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'
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
+              className={sponsor.imageClass}
               data-testid='GoldSponsors-img'
             />
           </a>
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 (
     <div className={`text-center ${className}`}>
       <ul className='mb-4 flex flex-wrap items-center justify-center md:px-4'>
-        {sponsors.map((sponsor, index) => (
+        {platinumSponsors.map((sponsor, index) => (
           <li key={index} className='w-2/3 sm:w-1/4 md:w-1/3 lg:w-1/5' data-testid='Sponsors-list'>
             <a
               href={sponsor.website}
@@ -26,7 +27,7 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S
               rel='noopener noreferrer'
               data-testid='Sponsors-link'
             >
-              <img
+              <SponsorImage
                 className={sponsor?.imageClass}
                 src={sponsor.imageSrc}
                 alt={sponsor.altText}
diff --git a/components/sponsors/SponsorsList.ts b/components/sponsors/PlatinumSponsorsList.ts
similarity index 92%
rename from components/sponsors/SponsorsList.ts
rename to components/sponsors/PlatinumSponsorsList.ts
index bdc75f3a7141..31735e0001c3 100644
--- a/components/sponsors/SponsorsList.ts
+++ b/components/sponsors/PlatinumSponsorsList.ts
@@ -1,6 +1,6 @@
 import type { SponsorType } from '@/types/components/sponsors/SponsorType';
 
-export const sponsors: SponsorType[] = [
+export const platinumSponsors: SponsorType[] = [
   {
     name: 'Solace',
     website: 'https://www.solace.com',
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
index 4a737aef7df9..f1276bed8b13 100644
--- a/components/sponsors/SilverSponsors.tsx
+++ b/components/sponsors/SilverSponsors.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Silversponsors } from './SilverSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface SilverSponsorsProps {
   className: string;
@@ -26,10 +27,10 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
+              className={sponsor.imageClass}
               data-testid='SilverSponsors-img'
             />
           </a>
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 (
+    <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>
+  );
+}
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() {
             <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
               {t('sponsors.platinumTitle')}
             </Heading>
-            <Sponsors className='mt-4' showSupportBanner={false} />
+            <PlatinumSponsors className='mt-4' showSupportBanner={false} />
           </Container>
 
           <Container className='pb-6 text-center' wide as='section'>