feat(ui): add direct links to sponsorship tiers

[BittuBarnwal7479]

🔗 Linked issue

🧭 Context

The sponsorship tiers didn't provide direct links to their respective OpenCollective checkout pages, making it less convenient for users to sponsor.

📚 Description

Changes

• Added tier-specific OpenCollective links
• Kept the existing UI unchanged
• Improved the sponsorship flow by making each tier directly accessible

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 17, 2026 10:55am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 17, 2026 10:55am
npmx-lunaria	Ignored		Jul 17, 2026 10:55am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 81301ca6-02a6-4b7c-aacd-461403361eb3

📥 Commits

Reviewing files that changed from the base of the PR and between f126cf7 and 67f9bf7.

📒 Files selected for processing (1)

• app/pages/sponsors.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/sponsors.vue

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Sponsorship tiers are now clickable, linking directly to their respective checkout or donation pages.
  • Added external-link indicators to tier cards.
  • Improved hover and keyboard focus styling for better interaction and accessibility.

Walkthrough

The sponsors page adds external checkout or donation URLs for silver, gold, and platinum tiers. Tier cards now use LinkBase, include external-link icons, and provide updated hover and focus styling while preserving existing pricing displays.

Changes

Sponsorship tier linking

Layer / File(s)	Summary
Tier card destinations and interaction app/pages/sponsors.vue	Adds external URLs for each sponsorship tier and converts the tier cards into styled LinkBase links with external-link icons and focus-visible interaction styling.

Possibly related PRs

• npmx-dev/npmx.dev#2967: Introduced the sponsors page and its sponsorship tier section.

Suggested reviewers: ghostdevv, patak-cat

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding direct links to sponsorship tiers.
Description check	✅ Passed	The description matches the change by explaining tier-specific OpenCollective links and the improved sponsorship flow.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/sponsors.vue (1)

169-227: 📐 Maintainability & Code Quality | 🔵 Trivial

no-new-tab-icon is a deprecated prop on LinkBase.

The prop carries a @deprecated tag with a todo to "remove this property and add separate clean component without this logic." Using it in new code is acceptable short-term since no alternative component exists yet, but track the migration so these cards can be updated when the prop is removed.

As per coding guidelines, keep functions focused and manageable — the three LinkBase blocks share near-identical structure with only colour/price differences, which could be extracted into a small TierCard component to reduce duplication and ease the eventual noNewTabIcon migration.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/pages/sponsors.vue` around lines 169 - 227, Extract the repeated silver,
gold, and platinum LinkBase markup into a focused TierCard component, passing
the tier-specific link, name, icon, styling, and price/custom-content values as
props. Centralize the temporary no-new-tab-icon usage there so the eventual
LinkBase migration can be made in one place, while preserving each card’s
existing appearance, links, translations, and pricing.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/pages/sponsors.vue`:
- Around line 169-227: Extract the repeated silver, gold, and platinum LinkBase
markup into a focused TierCard component, passing the tier-specific link, name,
icon, styling, and price/custom-content values as props. Centralize the
temporary no-new-tab-icon usage there so the eventual LinkBase migration can be
made in one place, while preserving each card’s existing appearance, links,
translations, and pricing.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7e57132d-c44f-48dd-a2a7-f20a2596e761

📥 Commits

Reviewing files that changed from the base of the PR and between 1c2f4ba and f126cf7.

📒 Files selected for processing (1)

• app/pages/sponsors.vue