From 6f161a4bd7b21bc72bd1dd5ad875bd2fa298b873 Mon Sep 17 00:00:00 2001
From: "Alejandro E. Rendon" <alejandro@rendon.co>
Date: Thu, 9 Jul 2026 11:50:16 -0500
Subject: [PATCH] Add Interledger Foundation as a gold partner: Moved the
 Interledger Foundation entry to the appropriate tier in the sponsors data and
 updated the styling logic for goldPlus sponsors to include specific styles
 for the Interledger Foundation. This enhances the visibility and
 representation of the sponsor in the application.

---
 src/assets/data/sponsors.ts                 | 12 ++--
 src/components/blocks/sponsors/sponsors.tsx | 71 ++++++++++++++++-----
 2 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/assets/data/sponsors.ts b/src/assets/data/sponsors.ts
index 2255b69..8e54d92 100644
--- a/src/assets/data/sponsors.ts
+++ b/src/assets/data/sponsors.ts
@@ -76,6 +76,12 @@ export const sponsorTiers: SponsorTier[] = [
     description:
       "Enhanced gold partners with expanded visibility and community impact.",
     sponsors: [
+      {
+        name: "Interledger Foundation",
+        slug: "interledger",
+        logo: "/images/sponsors/interledger.svg",
+        href: "https://interledger.org/",
+      },
       {
         name: "EPAM",
         slug: "epam",
@@ -88,12 +94,6 @@ export const sponsorTiers: SponsorTier[] = [
         logo: "/images/sponsors/nequi.svg",
         href: "https://www.nequi.com.co/",
       },
-      {
-        name: "Interledger Foundation",
-        slug: "interledger",
-        logo: "/images/sponsors/interledger.svg",
-        href: "https://interledger.org/",
-      },
     ],
   },
   {
diff --git a/src/components/blocks/sponsors/sponsors.tsx b/src/components/blocks/sponsors/sponsors.tsx
index 39f0add..97c9a8a 100644
--- a/src/components/blocks/sponsors/sponsors.tsx
+++ b/src/components/blocks/sponsors/sponsors.tsx
@@ -101,21 +101,26 @@ const sizeStyles = {
 
 type TierStyle = (typeof sizeStyles)[SponsorTier["size"]];
 
+const platinumSponsorContainer =
+  "mx-auto w-full min-w-0 shrink-0 max-w-[min(100%,calc((48rem-1.25rem)/2))]";
+
+const platinumStyles: TierStyle = {
+  container: "mx-auto w-full min-w-0 shrink-0",
+  gridMaxWidth: "max-w-3xl",
+  card: "min-h-44 px-7 py-9 sm:min-h-52 sm:px-9 sm:py-11",
+  logo: "max-h-24 max-w-[min(100%,18rem)] sm:max-h-28 sm:max-w-[20rem]",
+  imageWidth: 288,
+  imageHeight: 96,
+  layoutWidth: 320,
+  layoutWidthSm: 360,
+  minLayoutWidth: 280,
+  minLayoutWidthSm: 320,
+};
+
 /** Gold+ uses M-tier logos; Platinum sits between Venue (XL) and Gold+ (M). */
 function getTierStyles(tier: SponsorTier): TierStyle {
   if (tier.tierKey === "platinum") {
-    return {
-      container: "mx-auto w-full min-w-0 shrink-0",
-      gridMaxWidth: "max-w-3xl",
-      card: "min-h-44 px-7 py-9 sm:min-h-52 sm:px-9 sm:py-11",
-      logo: "max-h-24 max-w-[min(100%,18rem)] sm:max-h-28 sm:max-w-[20rem]",
-      imageWidth: 288,
-      imageHeight: 96,
-      layoutWidth: 320,
-      layoutWidthSm: 360,
-      minLayoutWidth: 280,
-      minLayoutWidthSm: 320,
-    };
+    return platinumStyles;
   }
 
   const base = sizeStyles[tier.size];
@@ -133,6 +138,20 @@ function getTierStyles(tier: SponsorTier): TierStyle {
   };
 }
 
+function getSponsorStyles(
+  sponsor: SponsorTier["sponsors"][number],
+  tier: SponsorTier,
+): TierStyle {
+  if (tier.tierKey === "goldPlus" && sponsor.slug === "interledger") {
+    return {
+      ...platinumStyles,
+      container: platinumSponsorContainer,
+    };
+  }
+
+  return getTierStyles(tier);
+}
+
 function shouldFitContainerToContent(tier: SponsorTier, isMulti: boolean) {
   if (tier.tierKey === "goldPlus") {
     return true;
@@ -201,7 +220,7 @@ const SponsorCard = ({
   tier,
   sponsorDisplayName,
 }: SponsorCardProps & { sponsorDisplayName: string }) => {
-  const styles = getTierStyles(tier);
+  const styles = getSponsorStyles(sponsor, tier);
   const isPlaceholder = !sponsor.logo;
 
   const inner = (
@@ -258,7 +277,7 @@ const TierRow = ({ tier, index }: { tier: SponsorTier; index: number }) => {
   );
   const sponsorRows = useMemo(() => {
     if (tier.tierKey === "goldPlus" && isMulti) {
-      return [sponsors];
+      return [[sponsors[0]], sponsors.slice(1)];
     }
 
     return chunkIntoRows(sponsors, columns);
@@ -316,19 +335,23 @@ const TierRow = ({ tier, index }: { tier: SponsorTier; index: number }) => {
         >
           {sponsorRows.map((row, rowIndex) => {
             const isFullRow = row.length === columns;
-            const isGoldPlusRow = tier.tierKey === "goldPlus" && isMulti;
+            const isGoldPlusFeaturedRow =
+              tier.tierKey === "goldPlus" && isMulti && rowIndex === 0;
+            const isGoldPlusBottomRow =
+              tier.tierKey === "goldPlus" && isMulti && rowIndex > 0;
 
             const rowContent = row.map((sponsor) => {
               const sponsorDisplayName =
                 sponsor.name === OPEN_SLOT_NAME
                   ? t("blocks.sponsors.openSlot")
                   : sponsor.name;
+              const sponsorStyles = getSponsorStyles(sponsor, tier);
 
               return (
                 <div
                   key={`${tier.tierKey}-${sponsor.name}-${sponsor.href ?? ""}`}
                   className={cn(
-                    styles.container,
+                    sponsorStyles.container,
                     shouldFitContainerToContent(tier, isMulti) &&
                       tier.tierKey !== "goldPlus" &&
                       "sm:w-fit",
@@ -343,7 +366,21 @@ const TierRow = ({ tier, index }: { tier: SponsorTier; index: number }) => {
               );
             });
 
-            if (isGoldPlusRow) {
+            if (isGoldPlusFeaturedRow) {
+              return (
+                <div
+                  key={`${tier.tierKey}-row-${rowIndex}`}
+                  className={cn(
+                    "mx-auto flex w-full justify-center gap-4 sm:gap-5",
+                    platinumStyles.gridMaxWidth,
+                  )}
+                >
+                  {rowContent}
+                </div>
+              );
+            }
+
+            if (isGoldPlusBottomRow) {
               return (
                 <div
                   key={`${tier.tierKey}-row-${rowIndex}`}