Fix logo size of sponsor (#2401)

AirBnB's logo was rendering very small due to embedded padding. This PR
renders logos with updated viewBox so that padding is removed to give
logos equivalent sizes in the same tier. It also matches the rank of the
silver and open source sponsor tiers, and improves padding between the
logos and the tier division lines.

I've also noted why we couldn't do the same treatment to Meta.

Author: benjie

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

@@ -5,6 +5,7 @@ import Apollo from "public/img/conf/Sponsors/Apollo.svg?svgr"
 import Wundergraph from "public/img/conf/Sponsors/WunderGraph-graded.svg?svgr"
 import Grafast from "public/img/conf/Sponsors/Grafast.svg?svgr"
 import Chillicream from "public/img/conf/Sponsors/Chillicream.svg?svgr"
+import Airbnb from "public/img/conf/Sponsors/airbnb.svg?svgr"
 
 interface Sponsor {
   icon:
@@ -18,6 +19,9 @@ interface Sponsor {
 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")}
@@ -105,6 +109,7 @@ const sponsorBronze: Sponsor[] = [
     icon: (props: React.SVGProps<SVGElement>) => (
       <Grafast
         {...props}
+        viewBox="2.5 4 80 24"
         className={clsx(
           props.className,
           "[&_path]:fill-[#15252D] dark:[&_path]:fill-white",
@@ -118,26 +123,8 @@ const sponsorBronze: Sponsor[] = [
 
 const sponsorCommunity: Sponsor[] = [
   {
-    icon: (props: React.HTMLAttributes<HTMLDivElement>) => (
-      <div
-        {...props}
-        className={clsx(props.className, "relative aspect-video flex-shrink-0")}
-      >
-        <img
-          src={
-            new URL("/public/img/conf/Sponsors/airbnb.svg", import.meta.url)
-              .href
-          }
-          className="absolute inset-0 size-full object-contain dark:hidden"
-        />
-        <img
-          src={
-            new URL("/public/img/conf/Sponsors/airbnb.svg", import.meta.url)
-              .href
-          }
-          className="absolute inset-0 hidden size-full object-contain dark:block"
-        />
-      </div>
+    icon: (props: React.SVGProps<SVGElement>) => (
+      <Airbnb {...props} viewBox="567 570 1979.77 660.012" />
     ),
     name: "Airbnb",
     link: "https://www.airbnb.com/",
@@ -149,28 +136,34 @@ export interface SponsorsProps {
 }
 
 interface Tier {
+  rank: number
   name: string
   items: Sponsor[]
 }
 
 const sponsorTiers: Tier[] = [
   {
+    rank: 0,
     name: "Platinum",
     items: sponsorPlatinum,
   },
   {
+    rank: 1,
     name: "Gold",
     items: sponsorGold,
   },
   {
+    rank: 2,
     name: "Silver",
     items: sponsorSilver,
   },
   {
+    rank: 2,
     name: "Open Source Community Sponsor",
     items: sponsorCommunity,
   },
   {
+    rank: 3,
     name: "Bronze",
     items: sponsorBronze,
   },
@@ -188,7 +181,7 @@ export function Sponsors({ heading }: SponsorsProps) {
               <Tier
                 key={tier.name}
                 tier={tier}
-                logoHeight={236 - sponsorTiers.indexOf(tier) * 32}
+                logoHeight={(7 - tier.rank) * 32}
               />
             ),
         )}
@@ -199,12 +192,12 @@ export function Sponsors({ heading }: SponsorsProps) {
 
 function Tier({ tier, logoHeight }: { tier: Tier; logoHeight: number }) {
   return (
-    <div className="flex gap-x-12 gap-y-4 border-t border-neu-200 py-4 dark:border-neu-50 max-md:flex-col">
+    <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">
         <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
         {tier.name}
       </h3>
-      <div className="flex min-w-[70%] flex-wrap justify-center gap-y-4 lg:grid lg:w-full lg:grid-cols-2 lg:gap-4">
+      <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) => (
           <a
             key={i}