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

Pin "Save your login" banner above the fold after signup (1.3.14)

Browse source 
New skaters landed on the onboarding page with the recovery/backup
prompt below the fold, so it read as "nothing about recovery". Moved the
critical "Save your login" banner ABOVE the hero (stronger border, glow,
uppercase headline) so it's the first thing a newly-signed-up user sees.
Removed the duplicate lower banner. Still non-blocking and stays until
backup-confirmed; the post-login bottom sheet remains as a second net.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-09 11:27:16 +07:00
parent 4dc2b0129e
commit d8adf0746d
1 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/pages/OnboardingPage.tsx
View file

@ -160,6 +160,32 @@ export default function OnboardingPage() {
<Layout>
<div className="container px-4 py-10 max-w-3xl">
{/* ── Save your login (critical) — pinned ABOVE the hero right after
signup so a new skater sees it immediately, not below the fold.
Stays until the login is actually saved (backup-confirmed). ── */}
{user && !backupConfirmed && (
<Link to="/settings?section=security" className="block mb-6 group">
<div className="flex items-center gap-4 p-4 rounded-2xl bg-amber-500/15 border-2 border-amber-500/50 hover:bg-amber-500/20 hover:border-amber-500/70 transition-all shadow-[0_0_24px_rgba(245,158,11,0.15)]">
<div className="relative flex-shrink-0">
<div className="w-10 h-10 rounded-full bg-amber-500/25 flex items-center justify-center">
<Key className="h-5 w-5 text-amber-400" />
</div>
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-amber-500 border-2 border-black animate-pulse motion-reduce:animate-none" />
</div>
<div className="flex-1 min-w-0">
<p className="font-black text-amber-300 text-sm uppercase tracking-wide">Save your login — do this now</p>
<p className="text-xs text-amber-100/80 leading-snug mt-0.5">
Your recovery code is the only way back into your account. No email, no password reset.
</p>
</div>
<div className="flex-shrink-0 flex items-center gap-1.5 rounded-full bg-amber-500 px-3 py-1.5 text-[11px] font-black uppercase tracking-wide text-black group-hover:bg-amber-400 transition-colors">
<Download className="h-3.5 w-3.5" />
Save
</div>
</div>
</Link>
)}
{/* ── Hero ── */}
<div className="text-center mb-12 relative">
<div className="absolute inset-0 -z-10 blur-[120px] opacity-20 pointer-events-none"
@ -229,29 +255,6 @@ export default function OnboardingPage() {
</div>
)}
{/* ── Save your login (critical) — stays until actually backed up ── */}
{user && !backupConfirmed && (
<Link to="/settings?section=security" className="block mb-8 group">
<div className="flex items-center gap-4 p-4 rounded-2xl bg-amber-500/10 border border-amber-500/30 hover:bg-amber-500/15 hover:border-amber-500/45 transition-all">
<div className="relative flex-shrink-0">
<div className="w-9 h-9 rounded-full bg-amber-500/20 flex items-center justify-center">
<Key className="h-4 w-4 text-amber-400" />
</div>
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-amber-500 border-2 border-black animate-pulse motion-reduce:animate-none" />
</div>
<div className="flex-1 min-w-0">
<p className="font-bold text-amber-300 text-sm">Save your login — do this now</p>
<p className="text-xs text-amber-100/70 leading-snug mt-0.5">
It's the only way back into your account. Lose it and there's no reset — no email, no password recovery.
</p>
</div>
<div className="flex-shrink-0 flex items-center gap-1.5 rounded-full bg-amber-500 px-3 py-1.5 text-[11px] font-black uppercase tracking-wide text-black group-hover:bg-amber-400 transition-colors">
<Download className="h-3.5 w-3.5" />
Save
</div>
</div>
</Link>
)}
{/* ── Login saved confirmation ── */}
{user && backupConfirmed && (