Fix logo size of sponsor

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}