diff --git a/src/App.css b/src/App.css index 098dbb6..7e4d6c1 100644 --- a/src/App.css +++ b/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; } diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx index 4d3a861..6a9e2f3 100644 --- a/src/colossiansStudy.tsx +++ b/src/colossiansStudy.tsx @@ -152,29 +152,62 @@ export function StudyLandingPage({ content }: Props) {
-
-

Available Now

-

Current Study Tracks

-
-
- {activeStudies.map(study => ( - -
-
-

Start Anytime

- {study.difficulty && {study.difficulty}} -
-

{study.title}

-

{study.description}

- {study.estimatedHours &&

⏱ {study.estimatedHours} hours

} -
-
-

Track Snapshot

-

{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}

-

{study.sections.length > 0 ? 'Estimated pace: 1-2 lessons per week' : 'Pacing details coming with first lesson release.'}

-
- - ))} +
+
+
+

Available Now

+

Current Study Tracks

+
+
+ {activeStudies.map(study => ( + +
+
+

Start Anytime

+ {study.difficulty && {study.difficulty}} +
+

{study.title}

+

{study.description}

+ {study.estimatedHours &&

⏱ {study.estimatedHours} hours

} +
+
+

Track Snapshot

+

{study.sections.length > 0 ? `${study.sections.length} lessons available` : 'Lessons will be published soon.'}

+

{study.sections.length > 0 ? 'Estimated pace: 1-2 lessons per week' : 'Pacing details coming with first lesson release.'}

+
+ + ))} +
+
+
@@ -205,36 +238,7 @@ export function StudyLandingPage({ content }: Props) { )} -
-
-
-

Free Student Account

-

Why Sign Up?

-
-
-
- -

Personal Notes on Every Lesson

-

Write and save your own notes directly on each lesson — up to 500 notes across all study tracks.

-
-
- -

Space to Go Deep

-

Each note holds up to 12,000 characters — roughly 2,000 words — so you can write as much as you need.

-
-
- -

Private to You

-

Your notes are tied to your account, not your device. Nobody else can read them — only you.

-
-
- -

Instant — No Email Required

-

Just pick a username and password. Free forever. Stay signed in for 30 days automatically.

-
-
-
-
+ ) }