#1 Onboarding polish: add 'Why bother?' skater value-prop section, fix dead /radio link (-> Crews), soften Nostr FAQ overclaim
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
parent
49325be38e
commit
b5b9faeec8
1 changed files with 40 additions and 4 deletions
|
|
@ -33,7 +33,6 @@ import {
|
|||
Key,
|
||||
Smartphone,
|
||||
MessageCircle,
|
||||
Radio,
|
||||
Lock,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
|
|
@ -141,7 +140,7 @@ export default function OnboardingPage() {
|
|||
<FeaturePill emoji="🛒" label="Buy/sell gear" />
|
||||
<FeaturePill emoji="⚡" label="Bitcoin zaps" />
|
||||
<FeaturePill emoji="🎒" label="Gear stash" />
|
||||
<FeaturePill emoji="🎵" label="NoGood Radio" />
|
||||
<FeaturePill emoji="👥" label="Crews" />
|
||||
</div>
|
||||
|
||||
{/* Primary CTA */}
|
||||
|
|
@ -186,6 +185,43 @@ export default function OnboardingPage() {
|
|||
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* ── Why skaters care ── */}
|
||||
<section>
|
||||
<h2 className="text-xs font-black uppercase tracking-widest text-gray-600 mb-4">Why bother?</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
{
|
||||
emoji: '🗺️',
|
||||
title: 'Every spot, one map',
|
||||
body: 'Ledges, rails, DIY, parks — mapped by skaters who actually ride them. Check the status before you roll out so you don\u2019t waste a session on a bust.',
|
||||
},
|
||||
{
|
||||
emoji: '🤙',
|
||||
title: 'Built by skaters, not suits',
|
||||
body: 'No ads, no algorithm shoving junk in your face, no data harvesting. Open source. The map belongs to the community — including you.',
|
||||
},
|
||||
{
|
||||
emoji: '⚡',
|
||||
title: 'Get paid to put on',
|
||||
body: 'Map a gem, film a banger, run a session — and get zapped real Bitcoin straight to your wallet. No platform cut, no middleman.',
|
||||
},
|
||||
{
|
||||
emoji: '🔑',
|
||||
title: 'Your account is actually yours',
|
||||
body: 'One key logs you into every Nostr app. No company can lock you out or delete your account on a whim. Take your identity anywhere.',
|
||||
},
|
||||
].map(({ emoji, title, body }) => (
|
||||
<div key={title} className="p-4 rounded-2xl bg-white/3 border border-white/8">
|
||||
<div className="flex items-center gap-2.5 mb-1.5">
|
||||
<span className="text-xl">{emoji}</span>
|
||||
<span className="font-black text-sm text-white uppercase tracking-wide">{title}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 leading-relaxed">{body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── What you can do ── */}
|
||||
<section>
|
||||
<h2 className="text-xs font-black uppercase tracking-widest text-gray-600 mb-4">Everything you can do — free</h2>
|
||||
|
|
@ -196,7 +232,7 @@ export default function OnboardingPage() {
|
|||
{ icon: Calendar, label: 'Events', desc: 'Competitions, sessions, meetups', href: '/events', color: '#ccff00' },
|
||||
{ icon: ShoppingBag, label: 'Buy / Sell Gear', desc: 'Peer-to-peer marketplace for used skate gear', href: '/marketplace',color: '#00cc66' },
|
||||
{ icon: Package, label: 'My Stash', desc: 'Private encrypted inventory of everything you own', href: '/stash', color: '#a855f7' },
|
||||
{ icon: Radio, label: 'NoGood Radio', desc: '24/7 lofi/synthwave/electronica while you skate', href: '/radio', color: '#06b6d4' },
|
||||
{ icon: Users, label: 'Crews', desc: 'Roll with your crew — shared spots, chat & sessions', href: '/crews', color: '#06b6d4' },
|
||||
].map(({ icon: Icon, label, desc, href, color }) => (
|
||||
<Link key={href} to={href}>
|
||||
<div className="h-full p-3.5 rounded-2xl bg-white/3 border border-white/8 hover:bg-white/6 hover:border-white/15 transition-all group">
|
||||
|
|
@ -310,7 +346,7 @@ export default function OnboardingPage() {
|
|||
/>
|
||||
<FAQ
|
||||
q="What is Nostr and why does SkateSpots use it?"
|
||||
a={<>Nostr is an open protocol for decentralized apps — think of it like the internet itself, not owned by any company. Your SkateSpots account is a cryptographic key pair that <strong className="text-white">you own</strong>. No one can delete your spots, ban your account, or hold your data hostage. Your identity also works on other Nostr apps like Primal, Damus, or Amethyst.</>}
|
||||
a={<>Nostr is an open protocol for decentralized apps — think of it like the internet itself, not owned by any company. Your SkateSpots account is a cryptographic key pair that <strong className="text-white">you own</strong>. No single company can ban your account or hold your data hostage — you choose which relays store your data, and you can even run your own. Your identity also works on other Nostr apps like Primal, Damus, or Amethyst.</>}
|
||||
/>
|
||||
<FAQ
|
||||
q="What's an nsec and why is it important?"
|
||||
|
|
|
|||
Loading…
Reference in a new issue