feat: enhance verification banner with clear messaging and resend button

src/components/Login.tsx

@@ -248,9 +248,43 @@ export default function Login() {
             )}
           </button>
           {showVerificationBanner && (
-            <div className="bg-blue-900 border border-blue-700 text-blue-200 px-4 py-3 rounded-lg text-sm">
-              <p className="font-semibold mb-1">✓ Account created!</p>
-              <p>A verification email has been sent. Please check your inbox to verify your email address.</p>
+            <div className="bg-blue-900 border-2 border-blue-600 text-blue-100 px-5 py-4 rounded-lg">
+              <div className="flex items-start gap-3 mb-3">
+                <svg className="w-6 h-6 text-blue-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+                </svg>
+                <div className="flex-1">
+                  <p className="font-bold text-lg mb-2">⚠️ Email Verification Required</p>
+                  <p className="mb-2">Your account has been created, but <strong>you must verify your email before you can sign in</strong>.</p>
+                  <p className="text-sm text-blue-300 mb-3">A verification email has been sent to <strong>{email}</strong>. Please check your inbox (and spam folder) and click the verification link.</p>
+                  <div className="bg-blue-950 border border-blue-700 rounded p-3 mb-3 text-sm">
+                    <p className="font-semibold mb-1">📧 Didn't receive the email?</p>
+                    <p className="text-blue-300 text-xs">It may take a few minutes to arrive. Check your spam/junk folder.</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      setLoading(true);
+                      try {
+                        const { signInWithEmailAndPassword, signOut } = await import('firebase/auth');
+                        const { auth } = await import('@/lib/firebase');
+                        const userCred = await signInWithEmailAndPassword(auth, email, password);
+                        await sendVerificationEmailToUser(userCred.user);
+                        await signOut(auth);
+                        setError('');
+                        alert('✓ Verification email resent! Check your inbox.');
+                      } catch (err: unknown) {
+                        setError(err instanceof Error ? err.message : 'Failed to resend email');
+                      }
+                      setLoading(false);
+                    }}
+                    disabled={loading}
+                    className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
+                  >
+                    {loading ? 'Resending...' : '📨 Resend Verification Email'}
+                  </button>
+                </div>
+              </div>
             </div>
           )}
           <div className="text-center">