nate/study-bible-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
nmemmert
2026-07-06 13:50:06 -04:00
parent 7006fbf544
commit 5006d0bfbe
1 changed files with 75 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+75 -46
View File
@@ -3735,55 +3735,84 @@ const deleteProject = (id) => {
} }
return ( 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 */}
<p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p> <div className="hidden flex-col justify-between p-12 lg:flex">
<h1 className="mt-2 text-xl font-semibold text-slate-900"> <div>
{authMode === 'login' ? 'Sign in' : 'Create an account'} <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
</h1> <h1 className="mt-4 text-3xl font-semibold leading-tight text-white">
<form onSubmit={submitAuth} className="mt-6 space-y-4"> Deep Bible study,<br />organized chunk by chunk.
<label className="block text-sm font-medium text-slate-700"> </h1>
Email <p className="mt-4 max-w-sm text-slate-300">
<input Split any passage into chunks and work through Observation, Interpretation, and
type="email" Application notes alongside Greek &amp; Hebrew word studies, cross-references, and commentary.
required </p>
autoComplete="email" </div>
value={authForm.email} <ul className="space-y-4 text-sm text-slate-300">
onChange={(e) => setAuthForm((f) => ({ ...f, email: e.target.value }))} <li className="flex items-center gap-3"><span className="text-lg">📖</span> Chunk-by-chunk OIA notes on any passage</li>
className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200" <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>
</label> <li className="flex items-center gap-3"><span className="text-lg">🎙</span> Turn your notes into a podcast-ready script</li>
<label className="block text-sm font-medium text-slate-700"> <li className="flex items-center gap-3"><span className="text-lg">🔒</span> Your studies stay private to your account, with optional 2FA</li>
Password </ul>
<input <blockquote className="border-l-2 border-slate-700 pl-4 text-sm italic text-slate-400">
type="password" "Study to shew thyself approved unto God, a workman that needeth not to be ashamed, rightly
required dividing the word of truth."
minLength={8} <footer className="mt-1 not-italic text-slate-500">— 2 Timothy 2:15</footer>
autoComplete={authMode === 'login' ? 'current-password' : 'new-password'} </blockquote>
value={authForm.password} </div>
onChange={(e) => setAuthForm((f) => ({ ...f, password: e.target.value }))}
className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200" {/* Sign in / register form */}
/> <div className="flex items-center justify-center px-4 py-12">
</label> <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 shadow-panel">
{authError && <p className="text-sm text-rose-600">{authError}</p>} <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>
<form onSubmit={submitAuth} className="mt-6 space-y-4">
<label className="block text-sm font-medium text-slate-700">
Email
<input
type="email"
required
autoComplete="email"
value={authForm.email}
onChange={(e) => setAuthForm((f) => ({ ...f, email: e.target.value }))}
className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
/>
</label>
<label className="block text-sm font-medium text-slate-700">
Password
<input
type="password"
required
minLength={8}
autoComplete={authMode === 'login' ? 'current-password' : 'new-password'}
value={authForm.password}
onChange={(e) => setAuthForm((f) => ({ ...f, password: e.target.value }))}
className="mt-1 block w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
/>
</label>
{authError && <p className="text-sm text-rose-600">{authError}</p>}
<button
type="submit"
disabled={authBusy}
className="w-full rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400 disabled:cursor-not-allowed disabled:bg-slate-300"
>
{authBusy ? 'Please wait…' : authMode === 'login' ? 'Sign in' : 'Create account'}
</button>
</form>
<button <button
type="submit" type="button"
disabled={authBusy} onClick={() => {
className="w-full rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400 disabled:cursor-not-allowed disabled:bg-slate-300" setAuthMode((m) => (m === 'login' ? 'register' : 'login'));
setAuthError('');
}}
className="mt-4 w-full text-center text-sm text-slate-500 underline hover:text-slate-700"
> >
{authBusy ? 'Please wait…' : authMode === 'login' ? 'Sign in' : 'Create account'} {authMode === 'login' ? "Need an account? Sign up" : 'Already have an account? Sign in'}
</button> </button>
</form> </div>
<button
type="button"
onClick={() => {
setAuthMode((m) => (m === 'login' ? 'register' : 'login'));
setAuthError('');
}}
className="mt-4 w-full text-center text-sm text-slate-500 underline hover:text-slate-700"
>
{authMode === 'login' ? "Need an account? Sign up" : 'Already have an account? Sign in'}
</button>
</div> </div>
</div> </div>
); );