From 4ffad8072834292c1f2b41a28ea86f7aa1714edb Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Mon, 5 Oct 2026 19:44:31 +0700
Subject: [PATCH] feat(supporters): ways-to-support trio (purpose per rail,
 scrolls to each)

---
 src/i18n/en.ts               |  6 ++++++
 src/i18n/es.ts               |  6 ++++++
 src/pages/SupportersPage.tsx | 29 ++++++++++++++++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 0e7df0d..00464a3 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -6505,6 +6505,12 @@ walletUi: {
       silentCopyName: 'Copy name',
       silentCopied: 'Copied',
       silentWallets: 'Needs a wallet that supports payment names / silent payments: Sparrow, Cake, Dana, Phoenix, BlueWallet, Wasabi, Nunchuk or BitBox02.',
+      wayLightningTitle: 'Instant & public',
+      wayLightningDesc: 'Zap SkateSpots, or pay quietly. Works logged-out.',
+      waySilentTitle: 'Private on-chain',
+      waySilentDesc: 'A silent-payments name — a new address for every payment.',
+      wayAngorTitle: 'Fund the build',
+      wayAngorDesc: 'Angor — staged release, refundable above 100k sats.',
       tiersNote: 'Tiers: Supporter under 100k sats · Patron 100k–1M · Legend 1M+',
       tierEmpty: 'No one yet — be the first.',
       joinSupporters: 'Join {{count}} supporters',
diff --git a/src/i18n/es.ts b/src/i18n/es.ts
index 39b37b8..eb5c3e0 100644
--- a/src/i18n/es.ts
+++ b/src/i18n/es.ts
@@ -6505,6 +6505,12 @@ walletUi: {
       silentCopyName: 'Copiar nombre',
       silentCopied: 'Copiado',
       silentWallets: 'Requiere una cartera compatible con nombres de pago / silent payments: Sparrow, Cake, Dana, Phoenix, BlueWallet, Wasabi, Nunchuk o BitBox02.',
+      wayLightningTitle: 'Instantáneo y público',
+      wayLightningDesc: 'Zapea SkateSpots, o paga en silencio. Funciona sin cuenta.',
+      waySilentTitle: 'On-chain privado',
+      waySilentDesc: 'Un nombre de silent payments — una dirección nueva en cada pago.',
+      wayAngorTitle: 'Financia el proyecto',
+      wayAngorDesc: 'Angor — liberación por etapas, reembolsable por encima de 100k sats.',
       tiersNote: 'Niveles: Colaborador menos de 100k sats · Patrón 100k–1M · Leyenda 1M+',
       tierEmpty: 'Nadie todavía — sé el primero.',
       joinSupporters: 'Únete a {{count}} patrocinadores',
diff --git a/src/pages/SupportersPage.tsx b/src/pages/SupportersPage.tsx
index a676129..8c7736f 100644
--- a/src/pages/SupportersPage.tsx
+++ b/src/pages/SupportersPage.tsx
@@ -612,7 +612,26 @@ export default function SupportersPage() {
             color="#f7931a"
           />
 
-          <div className="rounded-2xl border-2 border-[#f7931a]/30 bg-black/60 p-8 text-center">
+          {/* Ways to support — purpose-first trio (each scrolls to its rail). */}
+          <div className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
+            {[
+              { id: 'support-lightning', emoji: '⚡', title: t('walletUi.supporters.wayLightningTitle'), desc: t('walletUi.supporters.wayLightningDesc') },
+              { id: 'support-silent', emoji: '🕵️', title: t('walletUi.supporters.waySilentTitle'), desc: t('walletUi.supporters.waySilentDesc') },
+              { id: 'support-angor', emoji: '⛓', title: t('walletUi.supporters.wayAngorTitle'), desc: t('walletUi.supporters.wayAngorDesc') },
+            ].map((w) => (
+              <button
+                key={w.id}
+                onClick={() => document.getElementById(w.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
+                className="min-h-0 min-w-0 rounded-xl border border-white/10 bg-black/60 p-4 text-left transition-colors hover:border-[#ccff00]/40 hover:bg-white/5"
+              >
+                <span className="text-2xl">{w.emoji}</span>
+                <p className="mt-2 text-sm font-black uppercase text-white">{w.title}</p>
+                <p className="mt-1 text-xs text-gray-400">{w.desc}</p>
+              </button>
+            ))}
+          </div>
+
+          <div id="support-angor" className="scroll-mt-24 rounded-2xl border-2 border-[#f7931a]/30 bg-black/60 p-8 text-center">
             <div className="text-5xl mb-4">🧡⚡</div>
             <h3 className="text-xl font-black uppercase mb-2 text-white">{t('walletUi.supporters.backTitle')}</h3>
             <p className="text-sm text-gray-400 max-w-lg mx-auto mb-6 leading-relaxed">
@@ -641,10 +660,14 @@ export default function SupportersPage() {
           </div>
 
           {/* Lightning rail — the in-app way to chip in (zap publicly or pay quietly). */}
-          <SupportSkateSpots className="mt-4" />
+          <div id="support-lightning" className="scroll-mt-24">
+            <SupportSkateSpots className="mt-4" />
+          </div>
 
           {/* Silent payments — private on-chain (and Lightning) via a BIP-353 name. */}
-          <SilentPaymentsCard className="mt-4" />
+          <div id="support-silent" className="scroll-mt-24">
+            <SilentPaymentsCard className="mt-4" />
+          </div>
         </section>
 
         {/* ── 2. What your support pays for (words only) ── */}