From 29ef1abb741aaa4abb36957392385c4bb0871d2e Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Tue, 12 May 2026 13:21:54 -0400
Subject: [PATCH] Add Why Sign Up section to study landing page and auth hint
 to lesson sidebar

---
 src/App.css             | 49 +++++++++++++++++++++++++++++++++++++++++
 src/colossiansStudy.tsx | 32 +++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/src/App.css b/src/App.css
index 204cbd1..29179d0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1048,6 +1048,51 @@
   padding: 0.5rem 0 0.25rem;
 }
 
+.section-study-signup-why {
+  padding: 1.5rem 0 2.5rem;
+}
+
+.study-signup-why-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+  margin-top: 1.5rem;
+}
+
+.study-signup-why-card {
+  padding: 1.25rem 1.15rem;
+  border-radius: 12px;
+  border: 1px solid rgba(201, 168, 76, 0.18);
+  background: rgba(14, 14, 12, 0.9);
+}
+
+.study-signup-why-icon {
+  margin: 0 0 0.4rem;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.study-signup-why-card h3 {
+  margin: 0 0 0.4rem;
+  font-family: var(--brand-font-heading);
+  color: var(--brand-warm-white);
+  font-size: 1.05rem;
+}
+
+.study-signup-why-card p {
+  margin: 0;
+  color: var(--brand-muted);
+  line-height: 1.55;
+  font-size: 0.95rem;
+}
+
+.study-auth-why {
+  margin: 0 0 0.85rem;
+  font-size: 0.88rem;
+  color: var(--brand-muted);
+  line-height: 1.5;
+}
+
 .study-hub-flow-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1423,6 +1468,10 @@
     grid-template-columns: 1fr;
   }
 
+  .study-signup-why-grid {
+    grid-template-columns: 1fr;
+  }
+
   .study-module-row {
     grid-template-columns: 1fr;
   }
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 579c18a..d9322f3 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -203,6 +203,37 @@ export function StudyLandingPage({ content }: Props) {
           </div>
         </section>
       )}
+
+      <section className="section-study-signup-why" aria-label="Why create a free account">
+        <div className="section-inner">
+          <div className="study-module-header">
+            <p>Free Student Account</p>
+            <h2>Why Sign Up?</h2>
+          </div>
+          <div className="study-signup-why-grid">
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">📝</p>
+              <h3>Personal Notes on Every Lesson</h3>
+              <p>Write and save your own notes directly on each lesson — up to 500 notes across all study tracks.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">📖</p>
+              <h3>Space to Go Deep</h3>
+              <p>Each note holds up to 12,000 characters — roughly 2,000 words — so you can write as much as you need.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">🔒</p>
+              <h3>Private to You</h3>
+              <p>Your notes are tied to your account, not your device. Nobody else can read them — only you.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">⚡</p>
+              <h3>Instant — No Email Required</h3>
+              <p>Just pick a username and password. Free forever. Stay signed in for 30 days automatically.</p>
+            </article>
+          </div>
+        </div>
+      </section>
     </main>
   )
 }
@@ -530,6 +561,7 @@ export function ColossiansStudySectionPage({ content }: Props) {
               {!auth.checked && <p className="study-detail-copy">Checking sign-in status...</p>}
               {auth.checked && !auth.authenticated && (
                 <div className="study-auth-box">
+                  <p className="study-auth-why">Create a free account to save notes for this lesson. No email needed — just a username and password.</p>
                   <label htmlFor="study-username">Username</label>
                   <input id="study-username" type="text" value={usernameInput} onChange={e => setUsernameInput(e.target.value)} placeholder="yourname" autoComplete="username" />
                   <label htmlFor="study-password">Password</label>