# Course Home

<Card title="Course Overview">
<Columns>
<div>
<Badge tone="info">In progress</Badge>

## Advanced JavaScript: Patterns & Performance

**Instructor:** <Avatar name="Sarah Chen" src="find" subtitle="Senior Frontend Engineer" />

Master design patterns, performance optimization, and modern JavaScript techniques with hands-on projects.

<Button variant="primary" icon="play">Continue Learning</Button>
<Button variant="secondary" icon="bookmark">Save for Later</Button>
</div>
<div>
<Stat label="Overall Progress" value="64%" icon="chart-line" tone="info" />

<Progress value="64" max="100" label="64% complete" tone="info" />

<Stat label="Average Rating" value="4.8 / 5" icon="star" note="Based on 2,341 learner reviews" tone="success" />
</div>
</Columns>
</Card>

<Card title="Course Modules">
<Steps>
<Step title="Module 1: Foundations Review" status="done" subtitle="Completed · 98% score on quiz">
- Variables, scope, and closures
- Prototypes and `this` binding
- ES6+ syntax essentials
</Step>
<Step title="Module 2: Design Patterns" status="done" subtitle="Completed · Quiz score: 92%">
- Module, Factory, and Observer patterns
- Singleton and Proxy patterns
- Pattern selection guide
</Step>
<Step title="Module 3: Async & Event Loop" status="done" subtitle="Completed · Quiz score: 95%">
- Promises, async/await, and generators
- Microtasks vs. macrotasks
- Error handling strategies
</Step>
<Step title="Module 4: Performance Optimization" status="current" subtitle="Next up: Lesson 4.3 — Memory Leaks">
- <Badge tone="warning">In progress</Badge> 2 of 5 lessons complete
- Lesson 4.1: Rendering bottlenecks ✅
- Lesson 4.2: Network optimization ✅
- **Lesson 4.3: Memory Leaks** ← Continue here
- Lesson 4.4: Bundle size reduction
- Lesson 4.5: Performance profiling lab
</Step>
<Step title="Module 5: Advanced Patterns" status="todo" subtitle="Not started yet">
- Composition vs. inheritance
- Reactive programming with RxJS
- Micro-frontend architecture
</Step>
<Step title="Module 6: Final Project" status="todo" subtitle="Not started yet">
- Build a performance-optimized app
- Peer review and feedback
- Certificate of completion
</Step>
</Steps>
</Card>

<Card title="Next Lesson">
<Callout tone="info" title="Continue where you left off">
**Module 4, Lesson 3: Memory Leaks** — 12 min · Video + Quiz

You were last watching at 3:24. Pick up right where you stopped, or restart the lesson.

<Columns>
<Button variant="primary">Resume at 3:24</Button>
<Button variant="secondary">Restart lesson</Button>
</Columns>
</Callout>
</Card>

<Card title="Learner Ratings">
<Columns>
<div>
<Rating value="4.8" max="5" count="2341" />

**4.8 out of 5** — Excellent course

| Rating | Share |
|---|---|
| 5 stars | 78% |
| 4 stars | 17% |
| 3 stars | 3% |
| 2 stars | 1% |
| 1 star | 1% |
</div>
<div>
**Recent reviews:**

> "The performance module alone is worth the price. Sarah explains memory leaks better than any book I've read." — **Miguel R.**

> "Clear, practical, and well-paced. The quiz feedback really helps reinforce each concept." — **Priya K.**

<Button variant="secondary" icon="star">View All Reviews</Button>
</div>
</Columns>
</Card>

<Card title="Quick Actions">
<Columns>
<Button variant="primary" icon="play">Continue Learning</Button>
<Button variant="secondary" icon="download">Download Resources</Button>
<Button variant="secondary" icon="chat">Ask Instructor</Button>
<Button variant="secondary" icon="certificate">View Certificate</Button>
</Columns>
</Card>

<FollowUps>
- Show me the quiz for Module 4, Lesson 3
- What topics are covered in the final project?
- How does my progress compare to other learners?
- Can I download the course materials?
</FollowUps>