Rework Conf 2026 sponsor sizing for clearer tier hierarchy

src/app/conf/2026/components/sponsors.tsx

@@ -14,32 +14,29 @@ interface Sponsor {
     | React.FC<React.HTMLAttributes<HTMLDivElement>>
   name: string
   link: string
+  // Per-logo size override appended after the tier classes; use sparingly to
+  // even out logos with extreme aspect ratios within the same tier.
+  sizeOverride?: string
 }
 
 const sponsorPlatinum: Sponsor[] = [
   {
-    icon: (props: React.HTMLAttributes<HTMLDivElement>) => (
-      // When attempting to render the Meta logo with SVGR, the image becomes
-      // corrupted (something to do with a `clip-path`?); this means we need to
-      // render as an `<img>` and prevents us updating the viewBox.
-      <div
-        {...props}
-        className={clsx(props.className, "relative aspect-video flex-shrink-0")}
-      >
+    icon: ({ className }: React.HTMLAttributes<HTMLElement>) => (
+      <>
         <img
           src={
             new URL("/public/img/conf/Sponsors/Meta.svg", import.meta.url).href
           }
-          className="absolute inset-0 size-full object-contain dark:hidden"
+          className={clsx(className, "dark:hidden")}
         />
         <img
           src={
             new URL("/public/img/conf/Sponsors/Meta-dark.svg", import.meta.url)
               .href
           }
-          className="absolute inset-0 hidden size-full object-contain dark:block"
+          className={clsx(className, "hidden dark:block")}
         />
-      </div>
+      </>
     ),
     name: "Meta",
     link: "https://about.facebook.com/meta/",
@@ -101,6 +98,8 @@ const sponsorSilver: Sponsor[] = [
     ),
     name: "Chillicream",
     link: "https://chillicream.com/",
+    // Square logo — needs more height to feel comparable to wide silver logos.
+    sizeOverride: "md:max-h-36 md:max-w-[200px]",
   },
 ]
 
@@ -118,16 +117,17 @@ const sponsorBronze: Sponsor[] = [
     ),
     name: "Grafast",
     link: "https://grafast.org/",
+    sizeOverride: "md:max-h-[72px] md:max-w-[280px]",
   },
 ]
 
 const sponsorCommunity: Sponsor[] = [
   {
-    icon: (props: React.SVGProps<SVGElement>) => (
-      <Airbnb {...props} viewBox="567 570 1979.77 660.012" />
-    ),
+    icon: (props: React.SVGProps<SVGElement>) => <Airbnb {...props} />,
     name: "Airbnb",
     link: "https://www.airbnb.com/",
+    // Tall stacked logo — bump height to match silver visual weight.
+    sizeOverride: "md:max-h-[76px] md:max-w-[230px]",
   },
 ]
 
@@ -139,33 +139,42 @@ interface Tier {
   rank: number
   name: string
   items: Sponsor[]
+  logoClass: string
 }
 
+// Tier envelopes: cap glyph height and width per breakpoint so visual hierarchy
+// stays Platinum > Gold > Silver/Community > Bronze regardless of each logo's
+// intrinsic aspect ratio.
 const sponsorTiers: Tier[] = [
   {
     rank: 0,
     name: "Platinum",
     items: sponsorPlatinum,
+    logoClass: "max-h-20 max-w-[320px] md:max-h-24 md:max-w-[420px]",
   },
   {
     rank: 1,
     name: "Gold",
     items: sponsorGold,
+    logoClass: "max-h-16 max-w-[260px] md:max-h-24 md:max-w-[340px]",
   },
   {
     rank: 2,
     name: "Silver",
     items: sponsorSilver,
+    logoClass: "max-h-14 max-w-[220px] md:max-h-[76px] md:max-w-[280px]",
   },
   {
     rank: 2,
     name: "Open Source Community Sponsor",
     items: sponsorCommunity,
+    logoClass: "max-h-14 max-w-[220px] md:max-h-[76px] md:max-w-[280px]",
   },
   {
     rank: 3,
     name: "Bronze",
     items: sponsorBronze,
+    logoClass: "max-h-12 max-w-[200px] md:max-h-16 md:max-w-[240px]",
   },
 ]
 
@@ -176,42 +185,36 @@ export function Sponsors({ heading }: SponsorsProps) {
 
       <div className="mt-10 md:mt-16">
         {sponsorTiers.map(
-          tier =>
-            tier.items.length > 0 && (
-              <Tier
-                key={tier.name}
-                tier={tier}
-                logoHeight={(7 - tier.rank) * 32}
-              />
-            ),
+          tier => tier.items.length > 0 && <Tier key={tier.name} tier={tier} />,
         )}
       </div>
     </section>
   )
 }
 
-function Tier({ tier, logoHeight }: { tier: Tier; logoHeight: number }) {
+function Tier({ tier }: { tier: Tier }) {
   return (
-    <div className="flex gap-x-12 gap-y-4 border-t border-neu-200 py-4 pb-12 dark:border-neu-50 max-md:flex-col">
-      <h3 className="flex w-[80px] shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base">
+    <div className="relative flex gap-y-4 border-t border-neu-200 py-4 pb-12 dark:border-neu-50 max-md:flex-col">
+      <h3 className="flex shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-pri-base md:absolute md:left-0 md:top-4">
         <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
         {tier.name}
       </h3>
-      <div className="flex min-w-[70%] flex-wrap justify-center gap-y-4 pt-6 lg:grid lg:w-full lg:grid-cols-2 lg:gap-4">
-        {tier.items.map(({ link, icon: Icon, name }, i) => (
+      <div className="flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-4 pt-6 lg:gap-x-20">
+        {tier.items.map(({ link, icon: Icon, name, sizeOverride }, i) => (
           <a
             key={i}
             href={link}
             target="_blank"
             rel="noreferrer"
             title={name}
-            className="group flex min-h-24 grow items-center justify-center hover:bg-neu-500/10 dark:opacity-90 dark:hover:opacity-100 md:basis-1/2"
+            className="group flex min-h-24 items-center justify-center px-6 hover:bg-neu-500/10 dark:opacity-90 dark:hover:opacity-100"
           >
             <Icon
-              className="aspect-[3] w-auto max-w-[80%] shrink-0"
-              style={{
-                height: logoHeight,
-              }}
+              className={clsx(
+                "h-auto w-auto shrink-0 object-contain",
+                tier.logoClass,
+                sizeOverride,
+              )}
             />
           </a>
         ))}