root = Card([header, badgeRow, progressSection, nextSection, modulesSection, ratingSection])
header = CardHeader("Advanced JavaScript Patterns", "Instructor: Sarah Chen")
badgeRow = Card([levelBadge, categoryBadge], "clear", "row", "xs")
levelBadge = Badge("Advanced", "secondary")
categoryBadge = Badge("JavaScript", "outline")
progressSection = Card([progressHeading, progressBar, progressMeta], "sunk")
progressHeading = Heading("Overall progress", "h3")
progressBar = Progress(72, "72% complete")
progressMeta = TextContent("18 of 25 lessons completed · 2 of 4 modules", "small")
nextSection = Card([nextCallout, nextActions], "sunk")
nextCallout = Callout("info", "Next lesson", "Module 3 · Lesson 5: Debouncing & Throttling (12 min)")
nextActions = Buttons([continueBtn, browseBtn])
continueBtn = Button("Continue learning", null, "primary")
browseBtn = Button("Browse all lessons", null, "secondary")
modulesSection = Card([modulesHeading, moduleTable], "sunk")
modulesHeading = Heading("Modules", "h3")
moduleTable = Table([moduleCol, statusCol, lessonsCol])
moduleCol = Col("Module", ["1 · JavaScript Foundations", "2 · Async Patterns", "3 · Modules & Bundlers", "4 · Performance Optimization"])
statusCol = Col("Status", ["Completed", "Completed", "In progress", "Not started"])
lessonsCol = Col("Lessons", ["6 / 6", "8 / 8", "4 / 7", "0 / 4"])
ratingSection = Card([ratingHeading, ratingValue, ratingTag, ratingMeta], "sunk")
ratingHeading = Heading("Learner rating", "h3")
ratingValue = TextContent("4.8 / 5", "large-heavy")
ratingTag = Tag("Excellent", null, null, "success")
ratingMeta = TextContent("Based on 2,341 learner reviews", "small")