nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nmemmert
2026-05-12 13:38:07 -04:00
parent c91e23a0bb
commit 3e38785709
2 changed files with 126 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/colossiansStudy.tsx
+57 -53
View File
@@ -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">
<p>Available Now</p>
<h2>Current Study Tracks</h2>
</div>
<div className="study-module-list">
{activeStudies.map(study => (
<Link key={study.id} to={`/study/${study.slug}`} className="study-module-row">
<div className="study-module-row-left">
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
<p className="study-module-lesson">Start Anytime</p>
{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>
<h3>{study.title}</h3>
<p>{study.description}</p>
{study.estimatedHours && <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>⏱ {study.estimatedHours} hours</p>}
</div>
<div className="study-module-row-right">
<p className="study-module-focus">Track Snapshot</p>
<p>{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}</p>
<p>{study.sections.length > 0 ? 'Estimated pace: 1-2 lessons per week' : 'Pacing details coming with first lesson release.'}</p>
</div>
</Link>
))}
<div className="study-tracks-with-sidebar">
<div className="study-tracks-main">
<div className="study-module-header">
<p>Available Now</p>
<h2>Current Study Tracks</h2>
</div>
<div className="study-module-list">
{activeStudies.map(study => (
<Link key={study.id} to={`/study/${study.slug}`} className="study-module-row">
<div className="study-module-row-left">
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
<p className="study-module-lesson">Start Anytime</p>
{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>
<h3>{study.title}</h3>
<p>{study.description}</p>
{study.estimatedHours && <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>⏱ {study.estimatedHours} hours</p>}
</div>
<div className="study-module-row-right">
<p className="study-module-focus">Track Snapshot</p>
<p>{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}</p>
<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>
)
}