root = Card([header, progressSection, modulesSection, nextLesson, ratingSection, continueSection])
header = CardHeader("Full-Stack Web Development", "Instructor: Sarah Chen, Senior Engineer at TechCorp")
progressSection = Card([progressLabel, progressBar], "sunk", "column", "s")
progressLabel = TextContent("Overall Progress", "large-heavy")
progressBar = Progress(68, "68% complete")
modulesSection = Card([modulesLabel, modulesList], "clear", "column", "s")
modulesLabel = TextContent("Course Modules", "large-heavy")
modulesList = ListBlock([mod1, mod2, mod3, mod4, mod5], "number")
mod1 = ListItem("Module 1: HTML & CSS Fundamentals", "✓ Completed · 12 lessons · 8h 30m", null, "Review")
mod2 = ListItem("Module 2: JavaScript Core Concepts", "✓ Completed · 15 lessons · 10h 15m", null, "Review")
mod3 = ListItem("Module 3: React Basics", "✓ Completed · 10 lessons · 7h 45m", null, "Review")
mod4 = ListItem("Module 4: State Management with Redux", "In Progress · 5 of 8 lessons · 4h 20m", null, "Continue")
mod5 = ListItem("Module 5: Backend Integration", "Not Started · 12 lessons · 9h 10m", null, "Start")
nextLesson = Callout("info", "Next Lesson", "Module 4, Lesson 6: Async Actions with Redux Thunk — Learn to handle asynchronous operations in your Redux store")
ratingSection = Card([ratingLabel, ratingDisplay], "sunk", "column", "s")
ratingLabel = TextContent("Learner Rating", "large-heavy")
ratingDisplay = TextContent("★★★★☆ 4.7/5 (1,234 ratings)", "large")
continueSection = Buttons([continueBtn])
continueBtn = Button("Continue Learning", null, "primary", "normal", "large")