Add a branding/feature panel next to the sign-in form

The login screen was just a bare card on a dark background. Adds a
feature-highlight panel alongside it (tagline, what the app does, a
scripture quote) on wider screens, using only colors already in the
app's palette (slate-900/300/400, white, sky-500) — no new theme.
Collapses to the original single-card layout on mobile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/App.jsx

@@ -3735,9 +3735,37 @@ const deleteProject = (id) => {
     }
 
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-900 px-4">
+      <div className="grid min-h-screen bg-slate-900 lg:grid-cols-2">
-        <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 shadow-panel">
+        {/* Branding / feature panel — hidden on small screens to keep the form front and center there */}
+        <div className="hidden flex-col justify-between p-12 lg:flex">
+          <div>
             <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
+            <h1 className="mt-4 text-3xl font-semibold leading-tight text-white">
+              Deep Bible study,<br />organized chunk by chunk.
+            </h1>
+            <p className="mt-4 max-w-sm text-slate-300">
+              Split any passage into chunks and work through Observation, Interpretation, and
+              Application notes alongside Greek &amp; Hebrew word studies, cross-references, and commentary.
+            </p>
+          </div>
+          <ul className="space-y-4 text-sm text-slate-300">
+            <li className="flex items-center gap-3"><span className="text-lg">📖</span> Chunk-by-chunk OIA notes on any passage</li>
+            <li className="flex items-center gap-3"><span className="text-lg">🔤</span> Greek &amp; Hebrew word studies with pronunciation</li>
+            <li className="flex items-center gap-3"><span className="text-lg">🔗</span> Cross-references and commentary, one click away</li>
+            <li className="flex items-center gap-3"><span className="text-lg">🎙</span> Turn your notes into a podcast-ready script</li>
+            <li className="flex items-center gap-3"><span className="text-lg">🔒</span> Your studies stay private to your account, with optional 2FA</li>
+          </ul>
+          <blockquote className="border-l-2 border-slate-700 pl-4 text-sm italic text-slate-400">
+            "Study to shew thyself approved unto God, a workman that needeth not to be ashamed, rightly
+            dividing the word of truth."
+            <footer className="mt-1 not-italic text-slate-500">— 2 Timothy 2:15</footer>
+          </blockquote>
+        </div>
+
+        {/* Sign in / register form */}
+        <div className="flex items-center justify-center px-4 py-12">
+          <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 shadow-panel">
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-400 lg:hidden">Bible Study Project</p>
             <h1 className="mt-2 text-xl font-semibold text-slate-900">
               {authMode === 'login' ? 'Sign in' : 'Create an account'}
             </h1>
@@ -3786,6 +3814,7 @@ const deleteProject = (id) => {
             </button>
           </div>
         </div>
+      </div>
     );
   }