From d8adf0746d22f7df479a82f9dd7cd8e000ffe39f Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 9 Sep 2026 11:27:16 +0700
Subject: [PATCH] Pin "Save your login" banner above the fold after signup
 (1.3.14)

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>
---
 src/pages/OnboardingPage.tsx | 49 +++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/pages/OnboardingPage.tsx b/src/pages/OnboardingPage.tsx
index d9ba0d1..12b01db 100644
--- a/src/pages/OnboardingPage.tsx
+++ b/src/pages/OnboardingPage.tsx
@@ -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 && (