root = Card([header, progressSection, modulesSection, nextLesson, ratingSection, continueButton])
header = CardHeader("Advanced React Patterns", "Instructor: Sarah Chen")
progressSection = Card([progressLabel, progressBar], "sunk", "column", "s")
progressLabel = TextContent("Overall Progress", "small-heavy")
progressBar = Progress(68, "68% complete")
modulesSection = Card([modulesLabel, modulesList], "clear", "column", "m")
modulesLabel = TextContent("Course Modules", "large-heavy")
modulesList = ListBlock([mod1, mod2, mod3, mod4, mod5], "number")
mod1 = ListItem("Module 1: React Fundamentals Refresher", "Completed • 8 lessons", null, null)
mod2 = ListItem("Module 2: Advanced Hooks & Patterns", "Completed • 12 lessons", null, null)
mod3 = ListItem("Module 3: State Management with Zustand", "In Progress • 6 of 10 lessons", null, null)
mod4 = ListItem("Module 4: Performance Optimization", "Locked • 8 lessons", null, null)
mod5 = ListItem("Module 5: Testing Strategies", "Locked • 7 lessons", null, null)
nextLesson = Callout("info", "Next Lesson", "Module 3, Lesson 7: \"Derived State & Memoization\" — Learn when to derive state vs. when to memoize expensive computations")
ratingSection = Card([ratingLabel, ratingValue, ratingDetail], "sunk", "column", "xs")
ratingLabel = TextContent("Average Learner Rating", "small-heavy")
ratingValue = TextContent("4.8 ★", "large-heavy")
ratingDetail = TextContent("Based on 1,247 reviews", "small")
continueButton = Buttons([continueBtn])
continueBtn = Button("Continue Learning", null, "primary", "normal", "large")