From d8e49e7f657798f763be3c6627a32cb473380b7e Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Fri, 24 Jul 2026 02:00:12 +0700 Subject: [PATCH] redesign: /onboarding full rewrite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hero: - "SKATE YOUR WORLD" headline with neon red/lime treatment - Beta badge pill with live pulse dot - Feature pills row (spots, lab, events, gear, stash, radio, zaps) - Primary CTA right in the hero — no scrolling to get started - "No email. No password. Own your identity forever." copy Layout: - Removed mechanical 4-step progress tracker (step 2 auto-completing was confusing) - Replaced with natural scrolling sections with clear headings - Logged-in state shows green confirmation bar with FounderFollow What you can do: - 6-card grid: Map, Lab, Events, Buy/Sell, Stash, Radio — all linked What is Nostr: - Skater-friendly explanation with 4 benefit pills - Deep dive button for relay education modal Zaps & Wallet: - "Optional" badge so new users don't feel overwhelmed - Side-by-side: Cashu (built-in) + External wallet (NWC) FAQ (accordion — 8 questions, no duplicates): - "Is it free?" — combined the two identical free questions - "What is Nostr?" — proper explanation - "What's an nsec?" — key backup warning - "What signers work?" — desktop/Android/iOS with real links - "Can I use it on my phone?" — PWA + Zapstore mention - "What is a zap?" — simple skater framing - "Will my spots be deleted?" — relay permanence - "Private property spots?" — community responsibility - "How to report a bug?" — links to cordn.net beta coordinator Beta section: - cordn.net/p/npub1e2ayjl... as primary beta contact (clickable card) - Founder npub with Copy + DM buttons as secondary - Removed v0.1.0 hardcoded version string Co-authored-by: shakespeare.diy --- src/pages/OnboardingPage.tsx | 891 +++++++++++++++-------------------- 1 file changed, 371 insertions(+), 520 deletions(-) diff --git a/src/pages/OnboardingPage.tsx b/src/pages/OnboardingPage.tsx index 95078c5..9fb31a2 100644 --- a/src/pages/OnboardingPage.tsx +++ b/src/pages/OnboardingPage.tsx @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import { Layout } from '@/components/Layout'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; -import { Progress } from '@/components/ui/progress'; import { Dialog, DialogContent } from '@/components/ui/dialog'; import { useCurrentUser } from '@/hooks/useCurrentUser'; import { useCashu } from '@/hooks/wallet/useCashu'; @@ -17,7 +16,6 @@ import { cn } from '@/lib/utils'; import { CheckCircle2, Globe, - DollarSign, Shield, Video, Zap, @@ -25,89 +23,81 @@ import { Calendar, GraduationCap, AlertCircle, - ShoppingBag, ExternalLink, Wallet, - ChevronRight, + ChevronDown, Nut, BookOpen, - Crown, + ShoppingBag, + Package, + Key, + Smartphone, + MessageCircle, + Radio, + Lock, + Users, } from 'lucide-react'; import { FounderFollow } from '@/components/FounderFollow'; -// Progress tracker component -function OnboardingProgress({ - currentStep, - totalSteps, - completedSteps -}: { - currentStep: number; - totalSteps: number; - completedSteps: number[]; -}) { - const progressPercent = (completedSteps.length / totalSteps) * 100; - +// ─── Accordion FAQ ──────────────────────────────────────────────────────────── +function FAQ({ q, a }: { q: string; a: React.ReactNode }) { + const [open, setOpen] = useState(false); return ( -
-
- - Your Progress - - - {completedSteps.length} of {totalSteps} complete - -
- -
- {[1, 2, 3, 4].map((step) => ( -
-
- {completedSteps.includes(step) ? : step} -
- - {step === 1 && "Login"} - {step === 2 && "Explore"} - {step === 3 && "Wallet"} - {step === 4 && "Go Skate"} - + + ); +} + +// ─── Feature pill ───────────────────────────────────────────────────────────── +function FeaturePill({ emoji, label }: { emoji: string; label: string }) { + return ( +
+ {emoji} + {label}
); } export default function OnboardingPage() { useSeoMeta({ - title: 'Get Started - SkateSpots', - description: 'Learn how to use SkateSpots and join the skateboarding community on Nostr.', + title: 'Get Started — SkateSpots', + description: 'Join the decentralized skateboarding community. Find spots, connect with coaches, send zaps. Free forever.', }); const { user } = useCurrentUser(); const { isInitialized: hasCashu, totalBalance: cashuBalance } = useCashu(); const { toast } = useToast(); const [showRelayEducation, setShowRelayEducation] = useState(false); - const [hasSeenRelayEducation, setHasSeenRelayEducation] = useLocalStorage('seen-relay-education', false); + const [, setHasSeenRelayEducation] = useLocalStorage('seen-relay-education', false); const handleRelayEducationComplete = () => { setShowRelayEducation(false); setHasSeenRelayEducation(true); toast({ title: '🎉 Nice!', - description: 'You now understand how Nostr works. Let\'s go skate!', + description: "You now understand how Nostr works. Let's go skate!", }); }; @@ -115,499 +105,360 @@ export default function OnboardingPage() { navigator.clipboard.writeText('npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx'); toast({ title: 'Copied!', - description: 'npub copied to clipboard. Paste it in your favorite Nostr client to send a DM.', + description: 'npub copied to clipboard.', }); }; - // Bug report template for DM - const bugReportTemplate = `🐛 Bug Report - -What happened: - -What I expected: - -Steps to reproduce: - -Device/Browser: ${navigator.userAgent.includes('Mobile') ? 'Mobile' : 'Desktop'} - ${navigator.userAgent.split(' ').slice(-2).join(' ')} - -Version: v0.1.0`; - - const bugReportUrl = `/messages/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx?message=${encodeURIComponent(bugReportTemplate)}`; - - // Calculate completed steps - const completedSteps: number[] = []; - if (user) completedSteps.push(1); - if (user) completedSteps.push(2); // Exploration is available once logged in - if (hasCashu || (user && cashuBalance > 0)) completedSteps.push(3); // Wallet setup - // Step 4 is always the final action step - - const currentStep = user ? (hasCashu ? 4 : 3) : 1; + const bugReportUrl = `/messages/npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx`; return ( -
- {/* Hero Section with Progress */} -
-

- GET ROLLING +
+ + {/* ── Hero ── */} +
+
+
+ + Beta — Open to skaters worldwide +
+

+ SKATE +
+ YOUR WORLD

-

- Connect with your local scene. Share spots. Find sessions. It's that simple. +

+ A decentralized skate community. No company owns it. + No algorithm buries your spots. No ban hammer. Just skaters.

-
- {/* Progress Tracker */} - - - {/* Login/Signup Section - Step 1 */} - {!user ? ( - - {/* Step indicator */} -
-
- 1 -
-
- -

CREATE YOUR ACCOUNT

-

- Log in with your Nostr account or create a new one. Your identity works across all Nostr apps - no company controls it. -

- - - - ) : ( - - -
- -
-
-

Step 1 Complete!

-

You're logged in and ready to explore.

-
- - {/* Founder Follow - hold for 3s */} -
- -
- - - )} - -
- {/* Quick Info Banner with Learn More */} - - -
-
⚡
-
-

- SkateSpots uses Nostr - - a decentralized protocol where YOU own your data. - No company can delete your spots or ban your account. -

-
-
-
- -
- - - - {/* Step 2: Explore - What You Can Do */} - -
-
- 2 -
-
- -

EXPLORE THE COMMUNITY

-

- Everything is free! Browse spots, find coaches, join events - no Bitcoin required. -

- -
- {[ - { icon: MapPin, label: "Spots & Shops", desc: "Find skate spots worldwide", href: "/map", color: "red" }, - { icon: GraduationCap, label: "The Lab", desc: "Connect with coaches & filmers", href: "/lab", color: "orange" }, - { icon: Calendar, label: "Events", desc: "Join sessions & competitions", href: "/events", color: "lime" }, - ].map((item) => ( - - - - -

{item.label}

-

{item.desc}

- - - - ))} -
- - {user && ( -
- - - - - - -
- )} - - - - {/* Step 3: Wallet Setup */} - -
-
- 3 -
-
- -
-

OPTIONAL: SET UP WALLET

- Optional -
-

- Want to tip skaters who share awesome spots? Set up a wallet to send zaps (Bitcoin tips). - Totally optional! -

- -
- {/* Cashu Wallet - Built-in */} - - -
-
- -
-
-

Cashu Wallet

-

Built into SkateSpots

-
-
-

- No setup needed! Receive Lightning payments directly in the app. -

- {hasCashu && cashuBalance > 0 ? ( -
- Balance: - {cashuBalance.toLocaleString()} sats -
- ) : ( - - - - )} - - - - {/* External Wallet - NWC */} - - -
-
- -
-
-

External Wallet

-

Connect via NWC

-
-
-

- Already have a Lightning wallet? Connect it with Nostr Wallet Connect. -

- {user ? ( - - - - ) : ( - - )} - - -
- -

- 💡 Tip: $5 in Bitcoin = hundreds of zaps to share with the community -

- - - - {/* Step 4: Go Skate! */} - -
-
- 4 -
-
- -

GO SKATE! 🛹

-

- Real skateboarding happens offline. Use SkateSpots to discover spots, then get out there and shred! -

- - {user ? ( -
- - - - - - -
- ) : ( -

Complete the steps above to get started

- )} - - - - {/* 100% Free Banner */} - - -
- -
-

100% FREE TO USE

-

- You don't need any Bitcoin to use SkateSpots. Browse spots, add locations, connect with pros, join events - all free. - Zaps are completely optional for those who want to support creators. -

-
-
- - - - {/* Why Nostr - Compact Version */} - - -
- -

WHY NOSTR FOR SKATERS?

-
- -
-
-
- -

YOUR SPOTS ARE PERMANENT

-
-

- No company can delete the spots you share. Your contributions live on multiple servers. -

-
- -
-
- -

DIRECT TIPS TO CREATORS

-
-

- Zap skaters directly - no platform taking 30%. Money goes straight to them. -

-
- -
-
- -

OWN YOUR IDENTITY

-
-

- Your Nostr profile works everywhere. Build your rep once, take it to any app. -

-
- -
-
-
-

- Show real appreciation with real value - not just likes that mean nothing. -

-
-
- - - - {/* Common Questions */} -
-

COMMON QUESTIONS

- -
- {[ - { - q: 'DO I NEED BITCOIN TO USE THIS APP?', - a: 'No! SkateSpots is 100% free. You can browse spots, add locations, find pros at The Lab, create events, and connect with the community without any Bitcoin. Zaps are optional for those who want to tip creators.' - }, - { - q: 'WHAT\'S AN NSEC AND WHY IS IT IMPORTANT?', - a: 'Your nsec (secret key) is like a password that proves you own your account. Unlike regular passwords, there\'s no "forgot password" option. If you lose it, you lose your account forever. That\'s why you download a backup when you sign up.' - }, - { - q: 'IS THIS FREE?', - a: 'Yes! Creating a Nostr account and using SkateSpots is 100% free. You only need Bitcoin if you want to send zaps (tips), and even then you can receive zaps without having any Bitcoin yourself.' - }, - { - q: 'WHY CAN\'T I RESET MY PASSWORD?', - a: 'Nostr doesn\'t have passwords - it has cryptographic keys. This means no company (including us) can access your account, but it also means no one can reset it for you. Your nsec IS your account. Keep it safe!' - }, - { - q: 'CAN I USE THIS ON MY PHONE?', - a: 'Yes! SkateSpots works on any device with a web browser. On mobile, you can add it to your home screen for an app-like experience. Just visit the site and use the "Add to Home Screen" option in your browser menu.' - } - ].map((faq, i) => ( - - -

{faq.q}

-

{faq.a}

- - - ))} -
+ {/* Feature pills */} +
+ + + + + + +
- {/* CTA */} - - -

READY TO SHRED?

-

Start exploring spots, connecting with skaters, and building the community.

+ {/* Primary CTA */} + {!user ? ( +
+

Create your free account

+ +

No email. No password. Own your identity forever.

+
+ ) : ( +
+ + + + + + +
+ )} +
+ + {/* ── Logged in: step 1 complete ── */} + {user && ( +
+
+ +
+
+

You're in! Account created ✓

+

Your identity is yours — stored in your key, not on our servers.

+
+
+ +
+
+ )} + +
+ + {/* ── What you can do ── */} +
+

Everything you can do — free

+
+ {[ + { icon: MapPin, label: 'Discover Spots', desc: 'Interactive map with thousands of spots worldwide', href: '/map', color: '#ff0040' }, + { icon: GraduationCap,label: 'The Lab', desc: 'Find coaches, filmers & video editors near you', href: '/lab', color: '#ff6600' }, + { 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' }, + ].map(({ icon: Icon, label, desc, href, color }) => ( + +
+ +

{label}

+

{desc}

+
+ + ))} +
+
+ + {/* ── What is Nostr ── */} +
+
+
+ +
+
+

What is Nostr?

+

The protocol that powers SkateSpots

+
+
+

+ Nostr is an open protocol — like email, but for social apps. Your account is a cryptographic key pair that you own. No company can delete your spots, ban your account, or sell your data. Your identity works across every Nostr app. +

+
+ {[ + { icon: Shield, label: 'Your spots are permanent', color: 'text-red-400' }, + { icon: Lock, label: 'No one can ban you', color: 'text-orange-400' }, + { icon: Users, label: 'Identity works everywhere', color: 'text-purple-400' }, + { icon: Zap, label: 'Direct Bitcoin tips', color: 'text-yellow-400' }, + ].map(({ icon: Icon, label, color }) => ( +
+ + {label} +
+ ))} +
+ +
+ + {/* ── Wallet (optional) ── */} +
+
+

⚡ Zaps & Wallet

+ Optional +
+

+ Zaps are Bitcoin tips you send directly to a skater who dropped a sick spot, filmed a banger clip, or ran a great session. No platform fee. No middleman. 100% goes to them. +

+
+
+
+ + Built-in Cashu wallet +
+

Receive Lightning payments right in the app. No setup.

+ {hasCashu && cashuBalance > 0 ? ( +
+ Balance + {cashuBalance.toLocaleString()} sats +
+ ) : ( + + + + )} +
+
+
+ + Connect external wallet +
+

Have Alby, Mutiny, or another wallet? Connect it via NWC.

+ {user ? ( + + + + ) : ( + + )} +
+
+

💡 $5 of Bitcoin = hundreds of zaps to spread across the community

+
+ + {/* ── FAQ ── */} +
+

Common questions

+
+ + 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 you own. 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.} + /> + Your nsec is your private key — it's the only proof you own your account. Unlike passwords, there is no "forgot my password". If you lose your nsec, your account is gone forever. When you create an account, download your backup immediately and store it somewhere safe (password manager, written down offline).} + /> + +

On desktop: Alby or nos2x browser extensions.

+

On Android: Amber (best experience with the native app).

+

On iOS: Nostore or paste your nsec directly (less secure).

+

You can also log in by pasting your nsec directly — but using a signer extension is safer.

+
+ } + /> + Yes! SkateSpots is a PWA (Progressive Web App). Visit skate-spots.org in your phone's browser and tap "Add to Home Screen" for a full app experience. Or download it from Zapstore — a decentralized app store.} + /> + + + + +

DM the SkateSpots team directly on Nostr, or reach out to our beta coordinator:

+ + + Beta feedback → cordn.net + +
+ } + /> +
+ + + {/* ── Final CTA ── */} +
+
+
+
+

READY TO SHRED?

+

Stop scrolling. Get the app. Find a spot. Skate it.

- -
- - +
+
- {/* Beta Testing Notice */} - - -
- -
-

Beta Testing

-

- Thanks for testing SkateSpots! This app is under active development – - you may encounter bugs or security issues. Your feedback helps us improve. -

-
-
-

Report bugs or share feedback:

- - npub1yrnuj56rnen08zp2h9h7p74ghgjx6ma39spmpj6w9hzxywutevsst7k5cx - -
-
- - {user ? ( - - - - ) : ( - - - - )} -
-
+ {/* ── Beta Testing Card ── */} +
+
+
+ +
+
+

Beta — We want your feedback

+

+ SkateSpots is under active development. You may hit rough edges — that's on us, not you. Report bugs, suggest features, tell us what sucks. +

+
+
+ +
+ {/* Beta coordinator */} + +
+ +
+
+

Beta Coordinator

+

cordn.net → message us

+
+ + + + {/* DM founder */} +
+
+ +
+
+

DM on Nostr

+

npub1yrnuj…

+
+
+ + {user && ( + + + + )}
- - +
+ +

+ Found a bug? We fix it same day. Your reports make the app better for every skater. +

+
+
{/* Relay Education Dialog */} - setShowRelayEducation(false)} />