From f126cf72db581d48d88bf374e874302a2167d2a3 Mon Sep 17 00:00:00 2001
From: BittuBarnwal7479 <bk8379903@gmail.com>
Date: Mon, 13 Jul 2026 01:48:00 +0530
Subject: [PATCH 1/3] feat(sponsors): add community support links to sponsors
 page

---
 app/pages/sponsors.vue | 49 ++++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/app/pages/sponsors.vue b/app/pages/sponsors.vue
index 87d265cb63..012c84310f 100644
--- a/app/pages/sponsors.vue
+++ b/app/pages/sponsors.vue
@@ -6,6 +6,13 @@ const SPONSORSHIP_TIER_PRICES = {
   gold: 1000,
 } as const
 
+const SPONSORSHIP_TIER_LINKS = {
+  silver:
+    'https://opencollective.com/npmx/contribute/patron-98135/checkout?interval=month&amount=500&contributeAs=me',
+  gold: 'https://opencollective.com/npmx/contribute/patron-98135/checkout?interval=month&amount=1000&contributeAs=me',
+  platinum: 'https://opencollective.com/npmx/donate?interval=oneTime&amount=20&contributeAs=me',
+} as const
+
 const { t } = useI18n()
 const currencyFormatter = useNumberFormatter({
   style: 'currency',
@@ -159,45 +166,65 @@ defineOgImage(
             {{ $t('sponsors_page.tiers.title') }}
           </h2>
 
-          <div class="border border-fg/80 rounded-xl p-5 bg-bg-muted">
+          <LinkBase
+            :to="SPONSORSHIP_TIER_LINKS.silver"
+            no-new-tab-icon
+            no-underline
+            class="block border border-fg/80 rounded-xl p-5 bg-bg-muted transition-colors hover:bg-bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg"
+          >
             <div class="flex items-center justify-between gap-3 mb-2">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">
                 {{ $t('sponsors_page.tiers.silver.name') }}
               </h3>
-              <span class="i-lucide:coins size-4 text-fg-subtle" aria-hidden="true" />
+              <span class="flex items-center gap-2 text-fg-subtle" aria-hidden="true">
+                <span class="i-lucide:coins size-4" />
+                <span class="i-lucide:external-link size-3.5" />
+              </span>
             </div>
             <p class="text-sm text-fg-subtle font-mono">
               {{ formatTierPrice(SPONSORSHIP_TIER_PRICES.silver) }}
             </p>
-          </div>
+          </LinkBase>
 
-          <div
-            class="border border-badge-yellow/80 rounded-xl p-5 bg-linear-to-br from-badge-yellow/8 to-bg-subtle/40 relative overflow-hidden mt-4"
+          <LinkBase
+            :to="SPONSORSHIP_TIER_LINKS.gold"
+            no-new-tab-icon
+            no-underline
+            class="block border border-badge-yellow/80 rounded-xl p-5 bg-linear-to-br from-badge-yellow/8 to-bg-subtle/40 relative overflow-hidden mt-4 transition-colors hover:from-badge-yellow/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-yellow"
           >
             <div class="flex items-center justify-between gap-3 mb-2 relative">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">
                 {{ $t('sponsors_page.tiers.gold.name') }}
               </h3>
-              <span class="i-lucide:medal size-4 text-badge-yellow" aria-hidden="true" />
+              <span class="flex items-center gap-2" aria-hidden="true">
+                <span class="i-lucide:medal size-4 text-badge-yellow" />
+                <span class="i-lucide:external-link size-3.5 text-fg-subtle" />
+              </span>
             </div>
             <p class="text-sm text-fg-subtle font-mono">
               {{ formatTierPrice(SPONSORSHIP_TIER_PRICES.gold) }}
             </p>
-          </div>
+          </LinkBase>
 
-          <div
-            class="border border-badge-blue/80 rounded-xl p-5 bg-linear-to-br from-badge-blue/8 to-bg-subtle/40 relative overflow-hidden mt-4"
+          <LinkBase
+            :to="SPONSORSHIP_TIER_LINKS.platinum"
+            no-new-tab-icon
+            no-underline
+            class="block border border-badge-blue/80 rounded-xl p-5 bg-linear-to-br from-badge-blue/8 to-bg-subtle/40 relative overflow-hidden mt-4 transition-colors hover:from-badge-blue/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-blue"
           >
             <div class="flex items-center justify-between gap-3 mb-2">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">
                 {{ $t('sponsors_page.tiers.platinum.name') }}
               </h3>
-              <span class="i-lucide:crown size-4 text-badge-blue" aria-hidden="true" />
+              <span class="flex items-center gap-2" aria-hidden="true">
+                <span class="i-lucide:crown size-4 text-badge-blue" />
+                <span class="i-lucide:external-link size-3.5 text-fg-subtle" />
+              </span>
             </div>
             <p class="text-sm text-fg-subtle font-mono">
               {{ $t('sponsors_page.tiers.custom') }}
             </p>
-          </div>
+          </LinkBase>
         </div>
       </section>
     </div>

From 67f9bf7c4f0b69e84905f423e49acb69ad29a974 Mon Sep 17 00:00:00 2001
From: BittuBarnwal7479 <bk8379903@gmail.com>
Date: Mon, 13 Jul 2026 17:42:42 +0530
Subject: [PATCH 2/3] fix(sponsors): remove unnecessary transition classes for
 sponsorship links

---
 app/pages/sponsors.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/sponsors.vue b/app/pages/sponsors.vue
index 012c84310f..041101bdd6 100644
--- a/app/pages/sponsors.vue
+++ b/app/pages/sponsors.vue
@@ -170,7 +170,7 @@ defineOgImage(
             :to="SPONSORSHIP_TIER_LINKS.silver"
             no-new-tab-icon
             no-underline
-            class="block border border-fg/80 rounded-xl p-5 bg-bg-muted transition-colors hover:bg-bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg"
+            class="block border border-fg/80 rounded-xl p-5 bg-bg-muted hover:bg-bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg"
           >
             <div class="flex items-center justify-between gap-3 mb-2">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">
@@ -190,7 +190,7 @@ defineOgImage(
             :to="SPONSORSHIP_TIER_LINKS.gold"
             no-new-tab-icon
             no-underline
-            class="block border border-badge-yellow/80 rounded-xl p-5 bg-linear-to-br from-badge-yellow/8 to-bg-subtle/40 relative overflow-hidden mt-4 transition-colors hover:from-badge-yellow/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-yellow"
+            class="block border border-badge-yellow/80 rounded-xl p-5 bg-linear-to-br from-badge-yellow/8 to-bg-subtle/40 relative overflow-hidden mt-4 hover:from-badge-yellow/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-yellow"
           >
             <div class="flex items-center justify-between gap-3 mb-2 relative">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">
@@ -210,7 +210,7 @@ defineOgImage(
             :to="SPONSORSHIP_TIER_LINKS.platinum"
             no-new-tab-icon
             no-underline
-            class="block border border-badge-blue/80 rounded-xl p-5 bg-linear-to-br from-badge-blue/8 to-bg-subtle/40 relative overflow-hidden mt-4 transition-colors hover:from-badge-blue/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-blue"
+            class="block border border-badge-blue/80 rounded-xl p-5 bg-linear-to-br from-badge-blue/8 to-bg-subtle/40 relative overflow-hidden mt-4 hover:from-badge-blue/12 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-badge-blue"
           >
             <div class="flex items-center justify-between gap-3 mb-2">
               <h3 class="font-mono text-base text-fg uppercase tracking-wider">

From 60d0333f1bdccecc1fec04d151d921835e41dbf6 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 22 Jul 2026 12:21:25 +0100
Subject: [PATCH 3/3] chore: update platinum link

Makes it higher than the previous tier which I believe is the intention
---
 app/pages/sponsors.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/sponsors.vue b/app/pages/sponsors.vue
index 041101bdd6..8ba7321381 100644
--- a/app/pages/sponsors.vue
+++ b/app/pages/sponsors.vue
@@ -10,7 +10,7 @@ const SPONSORSHIP_TIER_LINKS = {
   silver:
     'https://opencollective.com/npmx/contribute/patron-98135/checkout?interval=month&amount=500&contributeAs=me',
   gold: 'https://opencollective.com/npmx/contribute/patron-98135/checkout?interval=month&amount=1000&contributeAs=me',
-  platinum: 'https://opencollective.com/npmx/donate?interval=oneTime&amount=20&contributeAs=me',
+  platinum: 'https://opencollective.com/npmx/donate?interval=month&amount=1250&contributeAs=me',
 } as const
 
 const { t } = useI18n()