Move Why Sign Up section to sticky sidebar on study landing page

src/App.css

@@ -1084,10 +1084,6 @@
   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));
@@ -1182,6 +1178,65 @@
   padding: 1rem 0 0;
 }
 
+.study-tracks-with-sidebar {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 2.5rem;
+  align-items: start;
+}
+
+.study-tracks-main {
+  min-width: 0;
+}
+
+.study-signup-sidebar {
+  position: sticky;
+  top: 5.75rem;
+  background: rgba(20, 20, 18, 0.92);
+  border: 1px solid rgba(201, 168, 76, 0.2);
+  border-radius: 16px;
+  padding: 1.5rem;
+  height: fit-content;
+}
+
+.study-signup-sidebar-header {
+  margin-bottom: 1rem;
+}
+
+.study-signup-sidebar-label {
+  margin: 0 0 0.3rem;
+  color: var(--brand-gold);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.study-signup-sidebar-header h3 {
+  margin: 0;
+  font-family: var(--brand-font-heading);
+  font-size: 1.35rem;
+  color: var(--brand-warm-white);
+}
+
+.study-signup-sidebar-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.study-signup-sidebar .study-signup-why-card {
+  padding: 1rem;
+  margin: 0;
+}
+
+.study-signup-sidebar .study-signup-why-card h4 {
+  margin: 0.35rem 0 0.25rem;
+  font-family: var(--brand-font-heading);
+  font-size: 0.95rem;
+  color: var(--brand-warm-white);
+}
+
 .study-module-header {
   margin-bottom: 0.85rem;
 }
@@ -1518,6 +1573,16 @@
     flex-basis: 100%;
   }
 
+  .study-tracks-with-sidebar {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .study-signup-sidebar {
+    position: static;
+    top: auto;
+  }
+
   .study-hub-flow-grid {
     grid-template-columns: 1fr;
   }

src/colossiansStudy.tsx

@@ -152,29 +152,62 @@ export function StudyLandingPage({ content }: Props) {
 
       <section id="study-tracks" className="section-study-module" aria-label="Available studies">
         <div className="section-inner">
-          <div className="study-module-header">
+          <div className="study-tracks-with-sidebar">
-            <p>Available Now</p>
+            <div className="study-tracks-main">
-            <h2>Current Study Tracks</h2>
+              <div className="study-module-header">
-          </div>
+                <p>Available Now</p>
-          <div className="study-module-list">
+                <h2>Current Study Tracks</h2>
-            {activeStudies.map(study => (
+              </div>
-              <Link key={study.id} to={`/study/${study.slug}`} className="study-module-row">
+              <div className="study-module-list">
-                <div className="study-module-row-left">
+                {activeStudies.map(study => (
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
+                  <Link key={study.id} to={`/study/${study.slug}`} className="study-module-row">
-                    <p className="study-module-lesson">Start Anytime</p>
+                    <div className="study-module-row-left">
-                    {study.difficulty && <span style={{ backgroundColor: study.difficulty === 'advanced' ? '#d32f2f' : (study.difficulty === 'intermediate' ? '#f57c00' : '#388e3c'), color: '#fff', padding: '0.25rem 0.75rem', borderRadius: '16px', fontSize: '0.75rem', fontWeight: '600', textTransform: 'capitalize' }}>{study.difficulty}</span>}
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
-                  </div>
+                        <p className="study-module-lesson">Start Anytime</p>
-                  <h3>{study.title}</h3>
+                        {study.difficulty && <span style={{ backgroundColor: study.difficulty === 'advanced' ? '#d32f2f' : (study.difficulty === 'intermediate' ? '#f57c00' : '#388e3c'), color: '#fff', padding: '0.25rem 0.75rem', borderRadius: '16px', fontSize: '0.75rem', fontWeight: '600', textTransform: 'capitalize' }}>{study.difficulty}</span>}
-                  <p>{study.description}</p>
+                      </div>
-                  {study.estimatedHours && <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>⏱ {study.estimatedHours} hours</p>}
+                      <h3>{study.title}</h3>
-                </div>
+                      <p>{study.description}</p>
-                <div className="study-module-row-right">
+                      {study.estimatedHours && <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>⏱ {study.estimatedHours} hours</p>}
-                  <p className="study-module-focus">Track Snapshot</p>
+                    </div>
-                  <p>{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}</p>
+                    <div className="study-module-row-right">
-                  <p>{study.sections.length > 0 ? 'Estimated pace: 1-2 lessons per week' : 'Pacing details coming with first lesson release.'}</p>
+                      <p className="study-module-focus">Track Snapshot</p>
-                </div>
+                      <p>{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}</p>
-              </Link>
+                      <p>{study.sections.length > 0 ? 'Estimated pace: 1-2 lessons per week' : 'Pacing details coming with first lesson release.'}</p>
-            ))}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+            <aside className="study-signup-sidebar">
+              <div className="study-signup-sidebar-header">
+                <p className="study-signup-sidebar-label">Free Student Account</p>
+                <h3>Why Sign Up?</h3>
+              </div>
+              <div className="study-signup-sidebar-cards">
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">📝</p>
+                  <h4>Personal Notes</h4>
+                  <p>Save notes per lesson — up to 500 across all tracks.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">📖</p>
+                  <h4>Space to Go Deep</h4>
+                  <p>~2,000 words per note. Write as much as you need.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">🔒</p>
+                  <h4>Private to You</h4>
+                  <p>Your notes stay with your account. Nobody else sees them.</p>
+                </article>
+                <article className="study-signup-why-card">
+                  <p className="study-signup-why-icon" aria-hidden="true">⚡</p>
+                  <h4>Instant Sign Up</h4>
+                  <p>No email needed. Stay signed in 30 days.</p>
+                </article>
+              </div>
+              <Link to="/study/signup" className="btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: '1rem' }}>Create Account</Link>
+            </aside>
           </div>
         </div>
       </section>
@@ -205,36 +238,7 @@ export function StudyLandingPage({ content }: Props) {
         </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>
   )
 }