First commit

components/CourseCard.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import type { Course } from "@/types/course";
+import ProgressBar from "@/components/ProgressBar";
+
+type CourseCardProps = {
+  course: Course;
+  progress?: number;
+};
+
+export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
+  return (
+    <Link
+      href={`/courses/${course.slug}`}
+      className="group flex h-full flex-col justify-between rounded-2xl border border-slate-300 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-brand/60"
+    >
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="rounded-full bg-[#ead7a0] px-3 py-1 text-xs font-semibold text-[#8a6b00]">{course.level}</span>
+          <span className="text-sm font-semibold text-slate-700">Rating {course.rating.toFixed(1)}</span>
+        </div>
+        <h3 className="text-2xl leading-tight text-[#212937] md:text-4xl">{course.title}</h3>
+        <p className="text-base text-slate-600 md:text-lg">{course.summary}</p>
+      </div>
+
+      <div className="mt-5 border-t border-slate-200 pt-4 text-base text-slate-600 md:text-lg">
+        {progress > 0 ? (
+          <div className="mb-4">
+            <ProgressBar value={progress} label={`Progress ${progress}%`} />
+          </div>
+        ) : null}
+        <div className="mb-1 flex items-center justify-between">
+          <span>{course.weeks} weeks</span>
+          <span>{course.lessonsCount} lessons</span>
+        </div>
+        <div className="mb-3 flex items-center justify-between">
+          <span>{course.students.toLocaleString()} students</span>
+          <span className="text-brand transition-transform group-hover:translate-x-1">{">"}</span>
+        </div>
+        <div className="text-sm font-semibold text-slate-700 md:text-base">By {course.instructor}</div>
+      </div>
+    </Link>
+  );
+}