<Card title="JavaScript Fundamentals" subtitle="Instructor: Sarah Chen · Updated March 2025">
<Columns>
<div>
<Stat label="Overall progress" value="62%" icon="chart-line" note="3 of 5 modules complete" tone="info" />
<Stat label="Average learner rating" value="4.8 / 5" icon="star" note="1,204 ratings" tone="success" />
</div>
<div>
<Callout tone="success" title="Next up: Functions & Scope">
Your next lesson is <strong>Lesson 4.2 — Arrow Functions</strong> in Module 4. It takes about 12 minutes to complete.
<Button variant="primary" size="medium">Continue learning →</Button>
</Callout>
</div>
</Columns>
</Card>

<Card title="Course modules">
<Steps>
<Step title="Module 1 — Getting Started" status="done" subtitle="Completed · 3/3 lessons">
Completed on Feb 12, 2025. Covers variables, data types, and basic syntax.
</Step>
<Step title="Module 2 — Control Flow" status="done" subtitle="Completed · 4/4 lessons">
Completed on Feb 20, 2025. Covers conditionals, loops, and error handling.
</Step>
<Step title="Module 3 — Arrays & Objects" status="done" subtitle="Completed · 5/5 lessons">
Completed on Mar 2, 2025. Covers array methods, object manipulation, and destructuring.
</Step>
<Step title="Module 4 — Functions" status="current" subtitle="In progress · 2/5 lessons">
Currently on <strong>Lesson 4.2 — Arrow Functions</strong>. Next up after that: Closures and the `this` keyword.
</Step>
<Step title="Module 5 — DOM & Events" status="todo" subtitle="Not started · 0/6 lessons">
Covers selecting elements, event listeners, and building interactive pages.
</Step>
</Steps>
</Card>

<Card title="Module completion breakdown">
<Columns>
<div>
<Progress value="100" max="100" label="Module 1" tone="success" />
<Progress value="100" max="100" label="Module 2" tone="success" />
<Progress value="100" max="100" label="Module 3" tone="success" />
<Progress value="40" max="100" label="Module 4" tone="info" />
<Progress value="0" max="100" label="Module 5" tone="neutral" />
</div>
<div>
| Module | Status | Lessons done |
|---|---|---|
| 1 — Getting Started | <Badge tone="success">Done</Badge> | 3/3 |
| 2 — Control Flow | <Badge tone="success">Done</Badge> | 4/4 |
| 3 — Arrays & Objects | <Badge tone="success">Done</Badge> | 5/5 |
| 4 — Functions | <Badge tone="info">In progress</Badge> | 2/5 |
| 5 — DOM & Events | <Badge tone="neutral">Not started</Badge> | 0/6 |
</div>
</Columns>
</Card>

<Card title="Continue learning">
<Columns>
<div>
<strong>Next lesson: Arrow Functions</strong>
<p>Module 4, Lesson 2 · 12 minutes</p>
<p>Learn how to write concise function expressions with arrow syntax, understand lexical `this`, and see practical examples.</p>
<Button variant="primary">Start lesson →</Button>
</div>
<div>
<Details title="What's coming after that?" open="false">
<ul>
<li><strong>Lesson 4.3 — Closures</strong> (15 min)</li>
<li><strong>Lesson 4.4 — The `this` Keyword</strong> (18 min)</li>
<li><strong>Lesson 4.5 — Higher-Order Functions</strong> (20 min)</li>
</ul>
</Details>
</div>
</Columns>
</Card>

<FollowUps>
- Show me the quiz for Module 4
- What are the prerequisites for Module 5?
- Can I see my certificate progress?
- How do the ratings break down by module?
</FollowUps>