Vertical learning path with done, current, and locked steps connected by a colored rail.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Education7 } from "@/components/beste/piece/education7";
<Education7
title="Your learning path"
steps={[
{
"title": "Foundations",
"status": "done"
},
{
"title": "Patterns & hooks",
"status": "done"
},
{
"title": "Performance tuning",
"status": "current"
},
{
"title": "Shipping at scale",
"status": "locked"
}
]}
/>Multi-course path card listing numbered steps, per-step hours, and a primary Path tag in the header.
Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.
Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.
Collapsible course module header that reveals a timed lesson list underneath when expanded.
Circular ring showing percent complete next to a course label and a lessons-done caption.
Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.