front page enhancements

This commit is contained in:
2026-06-11 06:42:50 -04:00
parent e44f19fd07
commit 1648454f94
11 changed files with 234 additions and 51 deletions

View File

@@ -14,7 +14,6 @@ export default function LessonsOverview() {
<div className="mb-4 flex items-center gap-3">
<Badge variant={unit.color}>Unit {unit.number}</Badge>
<h2 className="text-xl font-semibold">{unit.title}</h2>
<span className="hidden text-sm text-muted sm:inline">{unit.weeks}</span>
</div>
<div className="grid gap-4 sm:grid-cols-2">
{unit.topics.map((topic) => (
@@ -22,8 +21,7 @@ export default function LessonsOverview() {
<Card accent={unit.color} hover className="group h-full">
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
<div className="flex items-center justify-between text-xs text-muted">
<span>Week {topic.week}</span>
<div className="flex items-center justify-end text-xs text-muted">
<span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
Explore
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

View File

@@ -16,7 +16,7 @@ export default function Unit1Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-1" className="mb-3">Unit 1 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-1" className="mb-3">Unit 1</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit1Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-1-light text-xs font-bold text-unit-1-dark shadow-[var(--shadow-sm)]">
{i + 1}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>

View File

@@ -16,7 +16,7 @@ export default function Unit2Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-2" className="mb-3">Unit 2 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-2" className="mb-3">Unit 2</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit2Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-2-light text-xs font-bold text-unit-2-dark shadow-[var(--shadow-sm)]">
{i + 7}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>

View File

@@ -16,7 +16,7 @@ export default function Unit3Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-3" className="mb-3">Unit 3 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-3" className="mb-3">Unit 3</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit3Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-3-light text-xs font-bold text-unit-3-dark shadow-[var(--shadow-sm)]">
{i + 10}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>

View File

@@ -16,7 +16,7 @@ export default function Unit4Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-4" className="mb-3">Unit 4 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-4" className="mb-3">Unit 4</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit4Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-4-light text-xs font-bold text-unit-4-dark shadow-[var(--shadow-sm)]">
{String.fromCharCode(97 + i)}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>

View File

@@ -16,7 +16,7 @@ export default function Unit5Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-5" className="mb-3">Unit 5 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-5" className="mb-3">Unit 5</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit5Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-5-light text-xs font-bold text-unit-5-dark shadow-[var(--shadow-sm)]">
{i + 1}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>

View File

@@ -16,7 +16,7 @@ export default function Unit6Overview() {
]}
/>
<div className="mb-10">
<Badge variant="unit-6" className="mb-3">Unit 6 &mdash; {unit.weeks}</Badge>
<Badge variant="unit-6" className="mb-3">Unit 6</Badge>
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
<p className="text-muted leading-relaxed">{unit.description}</p>
</div>
@@ -28,7 +28,6 @@ export default function Unit6Overview() {
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-6-light text-xs font-bold text-unit-6-dark shadow-[var(--shadow-sm)]">
{i + 1}
</span>
<span className="text-xs text-muted">Week {topic.week}</span>
</div>
<h3 className="mb-1 font-semibold">{topic.title}</h3>
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>