From 6ea96171addf42843f0a10b9aaba33f5dc179460 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 2 Sep 2026 22:38:36 +0700
Subject: [PATCH] Surface Sponsors & Support up top on the profile

- Move sponsors from a buried sidebar card to a prominent full-width "Backed by"
  bar right under the stats strip, above the About/content grid
- Redesigned as a horizontal pill row with an Award badge + gradient/glow accent,
  so reppin' brands reads as a badge of pride
- Removed the duplicate sidebar Sponsors card

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/NIP19Page.tsx | 56 +++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/pages/NIP19Page.tsx b/src/pages/NIP19Page.tsx
index cfe4ee7..9f93ae5 100644
--- a/src/pages/NIP19Page.tsx
+++ b/src/pages/NIP19Page.tsx
@@ -361,6 +361,35 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
           </div>
         )}
 
+        {/* ── Sponsors & Support — surfaced up top; reppin' is a point of pride ── */}
+        {sponsorItems.length > 0 && (
+          <div className="relative overflow-hidden rounded-2xl border-2 border-pink-500/30 bg-gradient-to-r from-pink-500/15 via-black to-fuchsia-500/5 p-4 sm:p-5 mb-6">
+            <div className="absolute -top-10 -right-10 w-40 h-40 bg-pink-500 opacity-10 rounded-full blur-3xl pointer-events-none" />
+            <div className="relative flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
+              <div className="flex items-center gap-2.5 flex-shrink-0">
+                <div className="h-9 w-9 rounded-xl bg-pink-500/20 flex items-center justify-center">
+                  <Award className="h-5 w-5 text-pink-400" />
+                </div>
+                <div className="leading-tight">
+                  <p className="text-[10px] font-black uppercase tracking-[0.15em] text-pink-400">Backed by</p>
+                  <p className="text-xs text-gray-400">Sponsors &amp; support</p>
+                </div>
+              </div>
+              <div className="flex flex-wrap items-center gap-2 min-w-0">
+                {sponsorItems.map((s, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-pink-500/10 border border-pink-500/25 text-sm font-bold text-gray-100 break-words [overflow-wrap:anywhere]"
+                  >
+                    <span className="h-1.5 w-1.5 rounded-full bg-pink-400 flex-shrink-0" />
+                    {s}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Profile Info */}
         <div className="grid lg:grid-cols-3 gap-6">
           {/* Main Content */}
@@ -779,33 +808,6 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
               </CardContent>
             </Card>
 
-            {/* Sponsors Card — one badge per line */}
-            {sponsorItems.length > 0 && (
-              <Card className="bg-gradient-to-br from-pink-500/10 to-transparent border-2 border-pink-500/30">
-                <CardHeader className="pb-3">
-                  <CardTitle className="text-lg flex items-center gap-2">
-                    <Award className="h-5 w-5 text-pink-400" />
-                    Sponsors & Support
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-col gap-2">
-                    {sponsorItems.map((s, i) => (
-                      <div
-                        key={i}
-                        className="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-pink-500/10 border border-pink-500/20"
-                      >
-                        <span className="h-1.5 w-1.5 rounded-full bg-pink-400 flex-shrink-0" />
-                        <span className="text-sm font-semibold text-gray-200 break-words [overflow-wrap:anywhere]">
-                          {s}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
             {/* Crews Card */}
             {(crewsLoading || crews.length > 0) && (
               <Card id="section-crews" className="scroll-mt-24 bg-black/90 border-2 border-teal-500/30">