Make the sponsor logos bigger

Author: hasparus

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

@@ -12,6 +12,8 @@ interface Sponsor {
 
 const sponsorDiamond: Sponsor[] = []
 
+const sponsorPlatinum: Sponsor[] = []
+
 const sponsorGold: Sponsor[] = [
   { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com" },
 ]
@@ -34,6 +36,10 @@ const sponsorTiers: Tier[] = [
     name: "Diamond",
     items: sponsorDiamond,
   },
+  {
+    name: "Platinum",
+    items: sponsorPlatinum,
+  },
   {
     name: "Gold",
     items: sponsorGold,
@@ -51,23 +57,31 @@ 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} />,
+          tier =>
+            tier.items.length > 0 && (
+              <Tier
+                key={tier.name}
+                tier={tier}
+                logoHeight={220 - sponsorTiers.indexOf(tier) * 24}
+              />
+            ),
         )}
       </div>
     </section>
   )
 }
 
-function Tier({ tier }: { tier: Tier }) {
+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">
-      <h3 className="flex w-[80px] items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-primary">
+      <h3 className="flex w-[80px] shrink-0 items-center gap-1 self-start whitespace-nowrap font-mono text-sm/none font-normal uppercase text-primary">
         <ChevronRight className="shrink-0 translate-y-[-0.5px]" />
         {tier.name}
       </h3>
       <div
         className={clsx(
-          "grid justify-center gap-x-8 gap-y-4 sm:grid-cols-2 xl:grid-cols-3",
+          "grid justify-center gap-x-8 gap-y-4",
+          tier.items.length > 2 && "sm:grid-cols-2 xl:grid-cols-3",
         )}
       >
         {tier.items.map(({ link, icon: Icon, name }, i) => (
@@ -77,9 +91,14 @@ function Tier({ tier }: { tier: Tier }) {
             target="_blank"
             rel="noreferrer"
             title={name}
-            className="group flex h-24 w-72 items-center justify-center opacity-75 [--fill:hsl(var(--color-neu-700))] hover:bg-neu-500/10 hover:[--fill:hsl(var(--color-neu-800))] dark:opacity-90"
+            className="group flex min-h-24 items-center justify-center opacity-75 [--fill:hsl(var(--color-neu-700))] hover:bg-neu-500/10 hover:[--fill:hsl(var(--color-neu-800))] dark:opacity-90"
           >
-            <Icon className="h-16 w-auto max-w-[80%] shrink-0 fill-[--fill] [&_path]:fill-[--fill]" />
+            <Icon
+              className="aspect-[3] w-auto max-w-[80%] shrink-0 fill-[--fill] [&_path]:fill-[--fill]"
+              style={{
+                height: logoHeight,
+              }}
+            />
           </a>
         ))}
       </div>