# Course Home

<Card title="Advanced React Patterns" subtitle="by Sarah Chen, Senior Engineer at Vercel">
<Columns>
<Stat label="Overall Progress" value="68%" change="+12% this week" tone="success" icon="chart-line" />
<Stat label="Avg Rating" value="4.8" change="2,341 reviews" tone="info" icon="star" />
</Columns>
</Card>

<Card title="Your Progress">
<Progress value="68" max="100" label="68% complete — 17 of 25 lessons" tone="success" />
</Card>

<Card title="Modules">
<Tabs>
<Tab title="All Modules (5)">
| Module | Lessons | Completed | Status |
|---|---|---|---|
| 1. Compound Components | 5 | 5/5 | ✅ Done |
| 2. Render Props & Hooks | 6 | 4/6 | 🔄 In Progress |
| 3. State Machines | 4 | 2/4 | 🔄 In Progress |
| 4. Performance Optimization | 5 | 1/5 | ⏳ Not Started |
| 5. Testing Strategies | 5 | 0/5 | ⏳ Not Started |
</Tab>
<Tab title="In Progress (2)">
| Module | Lessons | Completed | Next Lesson |
|---|---|---|---|
| 2. Render Props & Hooks | 6 | 4/6 | **Custom Hooks for Data Fetching** |
| 3. State Machines | 4 | 2/4 | **Parallel & Hierarchical States** |
</Tab>
</Tabs>
</Card>

<Card title="Next Up">
<Callout tone="info" title="🎯 Continue where you left off">
<strong>Module 2, Lesson 5: Custom Hooks for Data Fetching</strong><br />
Learn to build reusable data-fetching hooks with loading, error, and retry states. Estimated 18 min.
</Callout>
<Button size="large" variant="primary" icon="play">Continue Learning</Button>
<Button variant="secondary" href="#">View All Lessons</Button>
</Card>

<FollowUps>
- What's covered in Module 4?
- How do I get a certificate?
- Can I download videos for offline viewing?
</FollowUps>