Video lesson card with a play thumbnail, duration badge, watched bar, and a chapter eyebrow.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Education4 } from "@/components/beste/piece/education4";
<Education4
title="Refactoring a big list into virtualized rows"
duration="12:48"
chapter="Chapter 4 · Performance"
watched={40}
imageSrc="https://images.unsplash.com/photo-1558865869-c93f6f8482af?auto=format&fit=crop&w=640&q=80"
alt="Refactoring a big list · lesson"
/>Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.
Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.
Spaced-repetition deck summary with italic card fronts and new, learning, review, or mastered pills.
Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.
Resume-the-lesson banner with a play tile, eyebrow label, title, time remaining, and a Resume button.
Multiple-choice card with a progress bar in the header, stem text, and four lettered option rows.