skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

Surface Sponsors & Support up top on the profile

Browse source 
- 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>
This commit is contained in:
shakespeare.diy 2026-09-02 22:38:36 +07:00
parent 2bb0f98f45
commit 6ea96171ad
1 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/pages/NIP19Page.tsx
View file

@ -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">