@burdenoff/microfe-crewfoundry 2026.624.1 → 2026.625.2

package/dist/crewfoundry/pages/LearningCourseDetailsPagePage.js

@@ -1,93 +1,131 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { BookOpen as t, Clock as n, Play as r, Star as i, Users as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Badge as c, Button as l, Card as u, CardContent as d, CardHeader as f, CardTitle as p } from "@burdenoff/fe-libs/ui";
+import { BookOpen as t, Clock as n, GraduationCap as r, Play as i, Star as a, Users as o } from "lucide-react";
+import { useNavigate as s } from "react-router-dom";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Badge as u, Button as d, Card as f, CardContent as p, CardHeader as m, CardTitle as h, EmphasisPanel as g, GradientText as _, IllustratedEmptyState as v, NextSteps as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx
-function m() {
-	let { courses: m } = e(), h = m[0];
-	if (!h) return /* @__PURE__ */ o("div", {
-		className: "p-6 text-text-secondary",
-		children: "No course found."
+function x() {
+	let x = s(), { courses: S } = e(), C = S[0];
+	if (!C) return /* @__PURE__ */ c("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ c(v, {
+			illustration: "empty-search",
+			title: "Course not found",
+			description: "This course is no longer available."
+		})
 	});
-	let g = Math.round(h.completed / h.enrolled * 100);
-	return /* @__PURE__ */ s("div", {
+	let w = Math.round(C.completed / C.enrolled * 100);
+	return /* @__PURE__ */ l("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ s("div", {
-					className: "flex items-center gap-2 mb-1",
-					children: [/* @__PURE__ */ o("h1", {
-						className: "text-2xl font-semibold",
-						children: h.title
-					}), /* @__PURE__ */ o(c, {
-						variant: h.level === "beginner" ? "secondary" : h.level === "intermediate" ? "default" : "destructive",
-						children: h.level
-					})]
-				}), /* @__PURE__ */ s("p", {
-					className: "text-sm text-text-secondary",
-					children: [
-						"by ",
-						h.instructor,
-						" · ",
-						h.category
-					]
-				})] }), /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ o(r, { className: "h-4 w-4 mr-1" }), "Start Course"] })]
+				children: [/* @__PURE__ */ l("div", { children: [
+					/* @__PURE__ */ l("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [/* @__PURE__ */ c("h1", {
+							className: "text-2xl font-semibold",
+							children: /* @__PURE__ */ c(_, { children: C.title })
+						}), /* @__PURE__ */ c(u, {
+							variant: C.level === "beginner" ? "secondary" : C.level === "intermediate" ? "default" : "destructive",
+							children: C.level
+						})]
+					}),
+					/* @__PURE__ */ l("p", {
+						className: "text-sm text-text-secondary",
+						children: [
+							"by ",
+							C.instructor,
+							" · ",
+							C.category
+						]
+					}),
+					/* @__PURE__ */ c(b, {
+						className: "mt-2",
+						children: "Everything you need to decide on and start this course — what it covers, who it's for, and how others have done — so you can enroll with confidence and build the right skills."
+					})
+				] }), /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ c(i, { className: "h-4 w-4 mr-1" }), "Start Course"] })]
+			}),
+			/* @__PURE__ */ c(y, {
+				storageKey: "crewfoundry-course-details",
+				steps: [
+					{
+						id: "start",
+						label: "Start the first module",
+						description: "Begin learning and track your progress as you go.",
+						icon: /* @__PURE__ */ c(i, { className: "h-4 w-4" }),
+						onClick: () => x("../../learning/course-learning-page")
+					},
+					{
+						id: "my-learning",
+						label: "See all your learning",
+						description: "Review everything you are currently enrolled in.",
+						icon: /* @__PURE__ */ c(r, { className: "h-4 w-4" }),
+						onClick: () => x("../../learning/my-learning-page")
+					},
+					{
+						id: "browse",
+						label: "Browse more courses",
+						description: "Find related training to round out your skills.",
+						icon: /* @__PURE__ */ c(t, { className: "h-4 w-4" }),
+						onClick: () => x("../../learning/courses-page")
+					}
+				]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "grid gap-4 md:grid-cols-4",
 				children: [
-					/* @__PURE__ */ o(u, { children: /* @__PURE__ */ s(d, {
+					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ o(n, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c(n, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ c("p", {
 								className: "text-lg font-bold",
-								children: h.duration
+								children: C.duration
 							}),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
 								children: "Duration"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ o(u, { children: /* @__PURE__ */ s(d, {
+					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ o(t, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c(t, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ c("p", {
 								className: "text-lg font-bold",
-								children: h.modules
+								children: C.modules
 							}),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
 								children: "Modules"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ o(u, { children: /* @__PURE__ */ s(d, {
+					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ o(a, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c(o, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
+							/* @__PURE__ */ c("p", {
 								className: "text-lg font-bold",
-								children: h.enrolled
+								children: C.enrolled
 							}),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
 								children: "Enrolled"
 							})
 						]
 					}) }),
-					/* @__PURE__ */ o(u, { children: /* @__PURE__ */ s(d, {
+					/* @__PURE__ */ c(f, { children: /* @__PURE__ */ l(p, {
 						className: "p-4 text-center",
 						children: [
-							/* @__PURE__ */ o(i, { className: "h-5 w-5 mx-auto text-yellow-500 mb-1" }),
-							/* @__PURE__ */ s("p", {
+							/* @__PURE__ */ c(a, { className: "h-5 w-5 mx-auto text-status-warning-text mb-1" }),
+							/* @__PURE__ */ l("p", {
 								className: "text-lg font-bold",
-								children: [h.rating, "/5"]
+								children: [C.rating, "/5"]
 							}),
-							/* @__PURE__ */ o("p", {
+							/* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
 								children: "Rating"
 							})
@@ -95,34 +133,41 @@ function m() {
 					}) })
 				]
 			}),
-			/* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(p, { children: "About this Course" }) }), /* @__PURE__ */ s(d, { children: [/* @__PURE__ */ o("p", {
-				className: "text-sm text-text-secondary",
-				children: h.description
-			}), /* @__PURE__ */ o("div", {
-				className: "flex flex-wrap gap-1 mt-3",
-				children: h.skills.map((e) => /* @__PURE__ */ o(c, {
-					variant: "outline",
-					children: e
-				}, e))
-			})] })] }),
-			/* @__PURE__ */ s(u, { children: [/* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(p, { children: "Completion Statistics" }) }), /* @__PURE__ */ o(d, { children: /* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l(g, { children: [
+				/* @__PURE__ */ c("div", {
+					className: "mb-2 text-lg font-semibold",
+					children: "About this Course"
+				}),
+				/* @__PURE__ */ c("p", {
+					className: "text-sm text-text-secondary",
+					children: C.description
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "flex flex-wrap gap-1 mt-3",
+					children: C.skills.map((e) => /* @__PURE__ */ c(u, {
+						variant: "outline",
+						children: e
+					}, e))
+				})
+			] }),
+			/* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c(h, { children: "Completion Statistics" }) }), /* @__PURE__ */ c(p, { children: /* @__PURE__ */ l("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ s("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "flex justify-between text-sm",
-					children: [/* @__PURE__ */ s("span", { children: [
-						h.completed,
+					children: [/* @__PURE__ */ l("span", { children: [
+						C.completed,
 						" of ",
-						h.enrolled,
+						C.enrolled,
 						" students completed"
-					] }), /* @__PURE__ */ s("span", {
+					] }), /* @__PURE__ */ l("span", {
 						className: "font-medium",
-						children: [g, "%"]
+						children: [w, "%"]
 					})]
-				}), /* @__PURE__ */ o("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: "h-3 bg-bg-sunken rounded overflow-hidden",
-					children: /* @__PURE__ */ o("div", {
-						className: "h-3 bg-green-500 rounded",
-						style: { width: `${g}%` }
+					children: /* @__PURE__ */ c("div", {
+						className: "h-3 bg-status-success-text rounded",
+						style: { width: `${w}%` }
 					})
 				})]
 			}) })] })
@@ -130,6 +175,6 @@ function m() {
 	});
 }
 //#endregion
-export { m as LearningCourseDetailsPagePage };
+export { x as LearningCourseDetailsPagePage };
 
 //# sourceMappingURL=LearningCourseDetailsPagePage.js.map

package/dist/crewfoundry/pages/LearningCourseDetailsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LearningCourseDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, CheckCircle, Clock, Play, Star, Users } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCourseDetailsPagePage() {\n  const { courses } = useCrewFoundryStore();\n  const course = courses[0];\n  if (!course) return <div className=\"p-6 text-text-secondary\">No course found.</div>;\n  const completionRate = Math.round((course.completed / course.enrolled) * 100);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2 mb-1\">\n            <h1 className=\"text-2xl font-semibold\">{course.title}</h1>\n            <Badge\n              variant={\n                course.level === 'beginner'\n                  ? 'secondary'\n                  : course.level === 'intermediate'\n                    ? 'default'\n                    : 'destructive'\n              }\n            >\n              {course.level}\n            </Badge>\n          </div>\n          <p className=\"text-sm text-text-secondary\">\n            by {course.instructor} · {course.category}\n          </p>\n        </div>\n        <Button>\n          <Play className=\"h-4 w-4 mr-1\" />\n          Start Course\n        </Button>\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.duration}</p>\n            <p className=\"text-xs text-text-secondary\">Duration</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <BookOpen className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.modules}</p>\n            <p className=\"text-xs text-text-secondary\">Modules</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.enrolled}</p>\n            <p className=\"text-xs text-text-secondary\">Enrolled</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Star className=\"h-5 w-5 mx-auto text-yellow-500 mb-1\" />\n            <p className=\"text-lg font-bold\">{course.rating}/5</p>\n            <p className=\"text-xs text-text-secondary\">Rating</p>\n          </CardContent>\n        </Card>\n      </div>\n      <Card>\n        <CardHeader>\n          <CardTitle>About this Course</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <p className=\"text-sm text-text-secondary\">{course.description}</p>\n          <div className=\"flex flex-wrap gap-1 mt-3\">\n            {course.skills.map((s) => (\n              <Badge key={s} variant=\"outline\">\n                {s}\n              </Badge>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardHeader>\n          <CardTitle>Completion Statistics</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            <div className=\"flex justify-between text-sm\">\n              <span>\n                {course.completed} of {course.enrolled} students completed\n              </span>\n              <span className=\"font-medium\">{completionRate}%</span>\n            </div>\n            <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n              <div className=\"h-3 bg-green-500 rounded\" style={{ width: `${completionRate}%` }} />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningCourseDetailsPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseDetailsPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  NextSteps,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Clock, GraduationCap, Play, Star, Users } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function LearningCourseDetailsPagePage() {\n  const navigate = useNavigate();\n  const { courses } = useCrewFoundryStore();\n  const course = courses[0];\n  if (!course)\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Course not found\"\n          description=\"This course is no longer available.\"\n        />\n      </div>\n    );\n  const completionRate = Math.round((course.completed / course.enrolled) * 100);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2 mb-1\">\n            <h1 className=\"text-2xl font-semibold\">\n              <GradientText>{course.title}</GradientText>\n            </h1>\n            <Badge\n              variant={\n                course.level === 'beginner'\n                  ? 'secondary'\n                  : course.level === 'intermediate'\n                    ? 'default'\n                    : 'destructive'\n              }\n            >\n              {course.level}\n            </Badge>\n          </div>\n          <p className=\"text-sm text-text-secondary\">\n            by {course.instructor} · {course.category}\n          </p>\n          <PagePurpose className=\"mt-2\">\n            Everything you need to decide on and start this course — what it covers, who it&apos;s\n            for, and how others have done — so you can enroll with confidence and build the right\n            skills.\n          </PagePurpose>\n        </div>\n        <Button>\n          <Play className=\"h-4 w-4 mr-1\" />\n          Start Course\n        </Button>\n      </div>\n\n      <NextSteps\n        storageKey=\"crewfoundry-course-details\"\n        steps={[\n          {\n            id: 'start',\n            label: 'Start the first module',\n            description: 'Begin learning and track your progress as you go.',\n            icon: <Play className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/course-learning-page'),\n          },\n          {\n            id: 'my-learning',\n            label: 'See all your learning',\n            description: 'Review everything you are currently enrolled in.',\n            icon: <GraduationCap className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/my-learning-page'),\n          },\n          {\n            id: 'browse',\n            label: 'Browse more courses',\n            description: 'Find related training to round out your skills.',\n            icon: <BookOpen className=\"h-4 w-4\" />,\n            onClick: () => navigate('../../learning/courses-page'),\n          },\n        ]}\n      />\n\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.duration}</p>\n            <p className=\"text-xs text-text-secondary\">Duration</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <BookOpen className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.modules}</p>\n            <p className=\"text-xs text-text-secondary\">Modules</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{course.enrolled}</p>\n            <p className=\"text-xs text-text-secondary\">Enrolled</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Star className=\"h-5 w-5 mx-auto text-status-warning-text mb-1\" />\n            <p className=\"text-lg font-bold\">{course.rating}/5</p>\n            <p className=\"text-xs text-text-secondary\">Rating</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"mb-2 text-lg font-semibold\">About this Course</div>\n        <p className=\"text-sm text-text-secondary\">{course.description}</p>\n        <div className=\"flex flex-wrap gap-1 mt-3\">\n          {course.skills.map((s) => (\n            <Badge key={s} variant=\"outline\">\n              {s}\n            </Badge>\n          ))}\n        </div>\n      </EmphasisPanel>\n      <Card>\n        <CardHeader>\n          <CardTitle>Completion Statistics</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            <div className=\"flex justify-between text-sm\">\n              <span>\n                {course.completed} of {course.enrolled} students completed\n              </span>\n              <span className=\"font-medium\">{completionRate}%</span>\n            </div>\n            <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n              <div\n                className=\"h-3 bg-status-success-text rounded\"\n                style={{ width: `${completionRate}%` }}\n              />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/crewfoundry/pages/LearningCourseLearningPagePage.js

@@ -2,78 +2,90 @@ import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useMemo as t } from "react";
 import { CheckCircle as n, Clock as r, Play as i } from "lucide-react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Badge as s, Button as c, Card as l, CardContent as u, CardHeader as d, CardTitle as f } from "@burdenoff/fe-libs/ui";
+import { Badge as s, Button as c, Card as l, CardContent as u, CardHeader as d, CardTitle as f, GlassCard as p, GradientText as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/LearningCourseLearningPagePage.tsx
-function p() {
-	let { courses: p } = e(), m = p[0], h = t(() => {
-		let e = Math.max(m?.modules || 0, 6);
+function g() {
+	let { courses: g } = e(), _ = g[0], v = t(() => {
+		let e = Math.max(_?.modules || 0, 6);
 		return Array.from({ length: e }, (e, t) => {
 			let n = t < 2 ? "completed" : t === 2 ? "in_progress" : "locked";
 			return {
 				id: `module-${t + 1}`,
-				title: `${m?.title || "Learning"} Module ${t + 1}`,
+				title: `${_?.title || "Learning"} Module ${t + 1}`,
 				duration: `${25 + t % 4 * 10} min`,
 				status: n
 			};
 		});
-	}, [m]), g = h.filter((e) => e.status === "completed").length, _ = Math.round(g / Math.max(h.length, 1) * 100);
+	}, [_]), y = v.filter((e) => e.status === "completed").length, b = Math.round(y / Math.max(v.length, 1) * 100);
 	return /* @__PURE__ */ o("div", {
 		className: "max-w-3xl space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
-				className: "text-2xl font-semibold",
-				children: m?.title || "Leadership Fundamentals for Tech Managers"
-			}), /* @__PURE__ */ o("p", {
-				className: "text-sm text-text-secondary",
-				children: [
-					"by ",
-					m?.instructor || "CrewFoundry Academy",
-					" · Module ",
-					g + 1,
-					" of",
-					" ",
-					h.length
-				]
-			})] }),
-			/* @__PURE__ */ a(l, { children: /* @__PURE__ */ o(u, {
-				className: "p-4",
-				children: [
-					/* @__PURE__ */ o("div", {
-						className: "mb-2 flex items-center justify-between",
-						children: [/* @__PURE__ */ a("span", {
-							className: "text-sm font-medium",
-							children: "Progress"
-						}), /* @__PURE__ */ o("span", {
-							className: "text-sm",
-							children: [_, "%"]
-						})]
-					}),
-					/* @__PURE__ */ a("div", {
-						className: "h-3 overflow-hidden rounded bg-bg-sunken",
-						children: /* @__PURE__ */ a("div", {
-							className: "h-3 rounded bg-action-primary-bg",
-							style: { width: `${_}%` }
+			/* @__PURE__ */ o("div", { children: [
+				/* @__PURE__ */ a("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ a(m, { children: _?.title || "Leadership Fundamentals for Tech Managers" })
+				}),
+				/* @__PURE__ */ o("p", {
+					className: "text-sm text-text-secondary",
+					children: [
+						"by ",
+						_?.instructor || "CrewFoundry Academy",
+						" · Module ",
+						y + 1,
+						" of",
+						" ",
+						v.length
+					]
+				}),
+				/* @__PURE__ */ a(h, {
+					className: "mt-1",
+					children: "Work through a course lesson-by-lesson — track your progress and complete modules to build the skill at hand."
+				})
+			] }),
+			/* @__PURE__ */ a(p, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: /* @__PURE__ */ o(u, {
+					className: "p-4",
+					children: [
+						/* @__PURE__ */ o("div", {
+							className: "mb-2 flex items-center justify-between",
+							children: [/* @__PURE__ */ a("span", {
+								className: "text-sm font-medium",
+								children: "Progress"
+							}), /* @__PURE__ */ o("span", {
+								className: "text-sm",
+								children: [b, "%"]
+							})]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "h-3 overflow-hidden rounded bg-bg-sunken",
+							children: /* @__PURE__ */ a("div", {
+								className: "h-3 rounded bg-action-primary-bg",
+								style: { width: `${b}%` }
+							})
+						}),
+						/* @__PURE__ */ o("p", {
+							className: "mt-1 text-xs text-text-secondary",
+							children: [
+								y,
+								" of ",
+								v.length,
+								" modules completed"
+							]
 						})
-					}),
-					/* @__PURE__ */ o("p", {
-						className: "mt-1 text-xs text-text-secondary",
-						children: [
-							g,
-							" of ",
-							h.length,
-							" modules completed"
-						]
-					})
-				]
-			}) }),
+					]
+				})
+			}),
 			/* @__PURE__ */ o(l, { children: [/* @__PURE__ */ a(d, { children: /* @__PURE__ */ a(f, { children: "Course Modules" }) }), /* @__PURE__ */ a(u, {
 				className: "space-y-2",
-				children: h.map((e, t) => /* @__PURE__ */ o("div", {
+				children: v.map((e, t) => /* @__PURE__ */ o("div", {
 					className: `flex items-center gap-3 rounded border p-3 ${e.status === "locked" ? "opacity-50" : ""}`,
 					children: [
 						/* @__PURE__ */ a("div", {
 							className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-bold",
-							children: e.status === "completed" ? /* @__PURE__ */ a(n, { className: "h-5 w-5 text-green-500" }) : t + 1
+							children: e.status === "completed" ? /* @__PURE__ */ a(n, { className: "h-5 w-5 text-status-success-text" }) : t + 1
 						}),
 						/* @__PURE__ */ o("div", {
 							className: "flex-1",
@@ -106,6 +118,6 @@ function p() {
 	});
 }
 //#endregion
-export { p as LearningCourseLearningPagePage };
+export { g as LearningCourseLearningPagePage };
 
 //# sourceMappingURL=LearningCourseLearningPagePage.js.map

package/dist/crewfoundry/pages/LearningCourseLearningPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LearningCourseLearningPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseLearningPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { CheckCircle, Clock, Play } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype CourseModule = {\n  id: string;\n  title: string;\n  duration: string;\n  status: 'completed' | 'in_progress' | 'locked';\n};\n\nexport function LearningCourseLearningPagePage() {\n  const { courses } = useCrewFoundryStore();\n\n  const currentCourse = courses[0];\n\n  const courseModules = useMemo<CourseModule[]>(() => {\n    const moduleCount = Math.max(currentCourse?.modules || 0, 6);\n    return Array.from({ length: moduleCount }, (_, index) => {\n      const status: CourseModule['status'] =\n        index < 2 ? 'completed' : index === 2 ? 'in_progress' : 'locked';\n      return {\n        id: `module-${index + 1}`,\n        title: `${currentCourse?.title || 'Learning'} Module ${index + 1}`,\n        duration: `${25 + (index % 4) * 10} min`,\n        status,\n      };\n    });\n  }, [currentCourse]);\n\n  const completedCount = courseModules.filter((module) => module.status === 'completed').length;\n  const progress = Math.round((completedCount / Math.max(courseModules.length, 1)) * 100);\n\n  return (\n    <div className=\"max-w-3xl space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          {currentCourse?.title || 'Leadership Fundamentals for Tech Managers'}\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          by {currentCourse?.instructor || 'CrewFoundry Academy'} · Module {completedCount + 1} of{' '}\n          {courseModules.length}\n        </p>\n      </div>\n\n      <Card>\n        <CardContent className=\"p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-sm font-medium\">Progress</span>\n            <span className=\"text-sm\">{progress}%</span>\n          </div>\n          <div className=\"h-3 overflow-hidden rounded bg-bg-sunken\">\n            <div className=\"h-3 rounded bg-action-primary-bg\" style={{ width: `${progress}%` }} />\n          </div>\n          <p className=\"mt-1 text-xs text-text-secondary\">\n            {completedCount} of {courseModules.length} modules completed\n          </p>\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Course Modules</CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-2\">\n          {courseModules.map((module, index) => (\n            <div\n              key={module.id}\n              className={`flex items-center gap-3 rounded border p-3 ${module.status === 'locked' ? 'opacity-50' : ''}`}\n            >\n              <div className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-bold\">\n                {module.status === 'completed' ? (\n                  <CheckCircle className=\"h-5 w-5 text-green-500\" />\n                ) : (\n                  index + 1\n                )}\n              </div>\n              <div className=\"flex-1\">\n                <p\n                  className={`text-sm ${module.status === 'completed' ? 'text-text-secondary line-through' : 'font-medium'}`}\n                >\n                  {module.title}\n                </p>\n                <p className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                  <Clock className=\"h-3 w-3\" />\n                  {module.duration}\n                </p>\n              </div>\n              {module.status === 'in_progress' ? (\n                <Button size=\"sm\">\n                  <Play className=\"mr-1 h-3 w-3\" />\n                  Continue\n                </Button>\n              ) : null}\n              {module.status === 'completed' ? (\n                <Badge variant=\"default\" className=\"text-[10px]\">\n                  Completed\n                </Badge>\n              ) : null}\n              {module.status === 'locked' ? (\n                <Badge variant=\"secondary\" className=\"text-[10px]\">\n                  Locked\n                </Badge>\n              ) : null}\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,IAAiC;CAC/C,IAAM,EAAE,eAAY,GAAqB,EAEnC,IAAgB,EAAQ,IAExB,IAAgB,QAA8B;EAClD,IAAM,IAAc,KAAK,IAAI,GAAe,WAAW,GAAG,EAAE;AAC5D,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAa,GAAG,GAAG,MAAU;GACvD,IAAM,IACJ,IAAQ,IAAI,cAAc,MAAU,IAAI,gBAAgB;AAC1D,UAAO;IACL,IAAI,UAAU,IAAQ;IACtB,OAAO,GAAG,GAAe,SAAS,WAAW,UAAU,IAAQ;IAC/D,UAAU,GAAG,KAAM,IAAQ,IAAK,GAAG;IACnC;IACD;IACD;IACD,CAAC,EAAc,CAAC,EAEb,IAAiB,EAAc,QAAQ,MAAW,EAAO,WAAW,YAAY,CAAC,QACjF,IAAW,KAAK,MAAO,IAAiB,KAAK,IAAI,EAAc,QAAQ,EAAE,GAAI,IAAI;AAEvF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cACX,GAAe,SAAS;IACtB,CAAA,EACL,kBAAC,KAAD;IAAG,WAAU;cAAb;KAA2C;KACrC,GAAe,cAAc;KAAsB;KAAW,IAAiB;KAAE;KAAI;KACxF,EAAc;KACb;MACA,EAAA,CAAA;GAEN,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IAAa,WAAU;cAAvB;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAsB;OAAe,CAAA,EACrD,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CAA2B,GAAS,IAAQ;SACxC;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OAAK,WAAU;OAAmC,OAAO,EAAE,OAAO,GAAG,EAAS,IAAI;OAAI,CAAA;MAClF,CAAA;KACN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG;OAAe;OAAK,EAAc;OAAO;OACxC;;KACQ;OACT,CAAA;GAEP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAW,kBAA0B,CAAA,EAC1B,CAAA,EACb,kBAAC,GAAD;IAAa,WAAU;cACpB,EAAc,KAAK,GAAQ,MAC1B,kBAAC,OAAD;KAEE,WAAW,8CAA8C,EAAO,WAAW,WAAW,eAAe;eAFvG;MAIE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAO,WAAW,cACjB,kBAAC,GAAD,EAAa,WAAU,0BAA2B,CAAA,GAElD,IAAQ;OAEN,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QACE,WAAW,WAAW,EAAO,WAAW,cAAc,qCAAqC;kBAE1F,EAAO;QACN,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAC5B,EAAO,SACN;UACA;;MACL,EAAO,WAAW,gBACjB,kBAAC,GAAD;OAAQ,MAAK;iBAAb,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,WAE1B;WACP;MACH,EAAO,WAAW,cACjB,kBAAC,GAAD;OAAO,SAAQ;OAAU,WAAU;iBAAc;OAEzC,CAAA,GACN;MACH,EAAO,WAAW,WACjB,kBAAC,GAAD;OAAO,SAAQ;OAAY,WAAU;iBAAc;OAE3C,CAAA,GACN;MACA;OArCC,EAAO,GAqCR,CACN;IACU,CAAA,CACT,EAAA,CAAA;GACH"}
+{"version":3,"file":"LearningCourseLearningPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningCourseLearningPagePage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { CheckCircle, Clock, Play } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\ntype CourseModule = {\n  id: string;\n  title: string;\n  duration: string;\n  status: 'completed' | 'in_progress' | 'locked';\n};\n\nexport function LearningCourseLearningPagePage() {\n  const { courses } = useCrewFoundryStore();\n\n  const currentCourse = courses[0];\n\n  const courseModules = useMemo<CourseModule[]>(() => {\n    const moduleCount = Math.max(currentCourse?.modules || 0, 6);\n    return Array.from({ length: moduleCount }, (_, index) => {\n      const status: CourseModule['status'] =\n        index < 2 ? 'completed' : index === 2 ? 'in_progress' : 'locked';\n      return {\n        id: `module-${index + 1}`,\n        title: `${currentCourse?.title || 'Learning'} Module ${index + 1}`,\n        duration: `${25 + (index % 4) * 10} min`,\n        status,\n      };\n    });\n  }, [currentCourse]);\n\n  const completedCount = courseModules.filter((module) => module.status === 'completed').length;\n  const progress = Math.round((completedCount / Math.max(courseModules.length, 1)) * 100);\n\n  return (\n    <div className=\"max-w-3xl space-y-6 p-6\">\n      <div>\n        <h1 className=\"text-2xl font-semibold\">\n          <GradientText>\n            {currentCourse?.title || 'Leadership Fundamentals for Tech Managers'}\n          </GradientText>\n        </h1>\n        <p className=\"text-sm text-text-secondary\">\n          by {currentCourse?.instructor || 'CrewFoundry Academy'} · Module {completedCount + 1} of{' '}\n          {courseModules.length}\n        </p>\n        <PagePurpose className=\"mt-1\">Work through a course lesson-by-lesson — track your progress and complete modules to build the skill at hand.</PagePurpose>\n      </div>\n\n      <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n        <CardContent className=\"p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-sm font-medium\">Progress</span>\n            <span className=\"text-sm\">{progress}%</span>\n          </div>\n          <div className=\"h-3 overflow-hidden rounded bg-bg-sunken\">\n            <div className=\"h-3 rounded bg-action-primary-bg\" style={{ width: `${progress}%` }} />\n          </div>\n          <p className=\"mt-1 text-xs text-text-secondary\">\n            {completedCount} of {courseModules.length} modules completed\n          </p>\n        </CardContent>\n      </GlassCard>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>Course Modules</CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-2\">\n          {courseModules.map((module, index) => (\n            <div\n              key={module.id}\n              className={`flex items-center gap-3 rounded border p-3 ${module.status === 'locked' ? 'opacity-50' : ''}`}\n            >\n              <div className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-bold\">\n                {module.status === 'completed' ? (\n                  <CheckCircle className=\"h-5 w-5 text-status-success-text\" />\n                ) : (\n                  index + 1\n                )}\n              </div>\n              <div className=\"flex-1\">\n                <p\n                  className={`text-sm ${module.status === 'completed' ? 'text-text-secondary line-through' : 'font-medium'}`}\n                >\n                  {module.title}\n                </p>\n                <p className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                  <Clock className=\"h-3 w-3\" />\n                  {module.duration}\n                </p>\n              </div>\n              {module.status === 'in_progress' ? (\n                <Button size=\"sm\">\n                  <Play className=\"mr-1 h-3 w-3\" />\n                  Continue\n                </Button>\n              ) : null}\n              {module.status === 'completed' ? (\n                <Badge variant=\"default\" className=\"text-[10px]\">\n                  Completed\n                </Badge>\n              ) : null}\n              {module.status === 'locked' ? (\n                <Badge variant=\"secondary\" className=\"text-[10px]\">\n                  Locked\n                </Badge>\n              ) : null}\n            </div>\n          ))}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,IAAiC;CAC/C,IAAM,EAAE,eAAY,GAAqB,EAEnC,IAAgB,EAAQ,IAExB,IAAgB,QAA8B;EAClD,IAAM,IAAc,KAAK,IAAI,GAAe,WAAW,GAAG,EAAE;AAC5D,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAa,GAAG,GAAG,MAAU;GACvD,IAAM,IACJ,IAAQ,IAAI,cAAc,MAAU,IAAI,gBAAgB;AAC1D,UAAO;IACL,IAAI,UAAU,IAAQ;IACtB,OAAO,GAAG,GAAe,SAAS,WAAW,UAAU,IAAQ;IAC/D,UAAU,GAAG,KAAM,IAAQ,IAAK,GAAG;IACnC;IACD;IACD;IACD,CAAC,EAAc,CAAC,EAEb,IAAiB,EAAc,QAAQ,MAAW,EAAO,WAAW,YAAY,CAAC,QACjF,IAAW,KAAK,MAAO,IAAiB,KAAK,IAAI,EAAc,QAAQ,EAAE,GAAI,IAAI;AAEvF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UACG,GAAe,SAAS,6CACZ,CAAA;KACZ,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACrC,GAAe,cAAc;MAAsB;MAAW,IAAiB;MAAE;MAAI;MACxF,EAAc;MACb;;IACJ,kBAAC,GAAD;KAAa,WAAU;eAAO;KAA2H,CAAA;IACrJ,EAAA,CAAA;GAEN,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAC1C,kBAAC,GAAD;KAAa,WAAU;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAsB;QAAe,CAAA,EACrD,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA2B,GAAS,IAAQ;UACxC;;MACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;QAAmC,OAAO,EAAE,OAAO,GAAG,EAAS,IAAI;QAAI,CAAA;OAClF,CAAA;MACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG;QAAe;QAAK,EAAc;QAAO;QACxC;;MACQ;;IACJ,CAAA;GAEZ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAW,kBAA0B,CAAA,EAC1B,CAAA,EACb,kBAAC,GAAD;IAAa,WAAU;cACpB,EAAc,KAAK,GAAQ,MAC1B,kBAAC,OAAD;KAEE,WAAW,8CAA8C,EAAO,WAAW,WAAW,eAAe;eAFvG;MAIE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAO,WAAW,cACjB,kBAAC,GAAD,EAAa,WAAU,oCAAqC,CAAA,GAE5D,IAAQ;OAEN,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QACE,WAAW,WAAW,EAAO,WAAW,cAAc,qCAAqC;kBAE1F,EAAO;QACN,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAC5B,EAAO,SACN;UACA;;MACL,EAAO,WAAW,gBACjB,kBAAC,GAAD;OAAQ,MAAK;iBAAb,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,WAE1B;WACP;MACH,EAAO,WAAW,cACjB,kBAAC,GAAD;OAAO,SAAQ;OAAU,WAAU;iBAAc;OAEzC,CAAA,GACN;MACH,EAAO,WAAW,WACjB,kBAAC,GAAD;OAAO,SAAQ;OAAY,WAAU;iBAAc;OAE3C,CAAA,GACN;MACA;OArCC,EAAO,GAqCR,CACN;IACU,CAAA,CACT,EAAA,CAAA;GACH"}

package/dist/crewfoundry/pages/LearningCoursesPagePage.js

@@ -2,34 +2,50 @@ import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useState as t } from "react";
 import { Search as n, Star as r, Users as i } from "lucide-react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Badge as s, Card as c, CardContent as l, CardDescription as u, CardHeader as d, CardTitle as f, Input as p } from "@burdenoff/fe-libs/ui";
+import { Badge as s, CardContent as c, CardDescription as l, CardHeader as u, CardTitle as d, GlassCard as f, GradientText as p, IllustratedEmptyState as m, Input as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/LearningCoursesPagePage.tsx
-function m() {
-	let { courses: m } = e(), [h, g] = t(""), _ = m.filter((e) => `${e.title} ${e.category} ${e.instructor}`.toLowerCase().includes(h.toLowerCase()));
+function _() {
+	let { courses: _ } = e(), [v, y] = t(""), b = _.filter((e) => `${e.title} ${e.category} ${e.instructor}`.toLowerCase().includes(v.toLowerCase()));
 	return /* @__PURE__ */ o("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
-				className: "text-2xl font-semibold",
-				children: "Course Catalog"
-			}), /* @__PURE__ */ o("p", {
-				className: "text-sm text-text-secondary",
-				children: [m.length, " courses available"]
-			})] }),
+			/* @__PURE__ */ o("div", { children: [
+				/* @__PURE__ */ a("h1", {
+					className: "text-2xl font-semibold",
+					children: /* @__PURE__ */ a(p, { children: "Course Catalog" })
+				}),
+				/* @__PURE__ */ o("p", {
+					className: "text-sm text-text-secondary",
+					children: [_.length, " courses available"]
+				}),
+				/* @__PURE__ */ a(g, {
+					className: "mt-1",
+					children: "Browse the course catalog — find training to grow your team's skills and enroll in the programs that fit your goals."
+				})
+			] }),
 			/* @__PURE__ */ o("div", {
 				className: "relative max-w-sm",
-				children: [/* @__PURE__ */ a(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ a(p, {
+				children: [/* @__PURE__ */ a(n, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ a(h, {
 					placeholder: "Search courses...",
 					className: "pl-9",
-					value: h,
-					onChange: (e) => g(e.target.value)
+					value: v,
+					onChange: (e) => y(e.target.value)
 				})]
 			}),
 			/* @__PURE__ */ a("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: _.map((e) => /* @__PURE__ */ o(c, {
+				children: b.length === 0 ? /* @__PURE__ */ a("div", {
+					className: "col-span-full",
+					children: /* @__PURE__ */ a(m, {
+						illustration: "empty-search",
+						title: "No courses found",
+						description: "Try a different search term to find training."
+					})
+				}) : b.map((e, t) => /* @__PURE__ */ o(f, {
+					treatment: t === 0 ? "glass" : "plain",
+					glow: t === 0,
 					className: "hover:shadow-md transition-shadow cursor-pointer",
-					children: [/* @__PURE__ */ o(d, { children: [
+					children: [/* @__PURE__ */ o(u, { children: [
 						/* @__PURE__ */ o("div", {
 							className: "flex items-center justify-between",
 							children: [/* @__PURE__ */ a(s, {
@@ -42,11 +58,11 @@ function m() {
 								children: e.level
 							})]
 						}),
-						/* @__PURE__ */ a(f, {
+						/* @__PURE__ */ a(d, {
 							className: "text-base mt-2",
 							children: e.title
 						}),
-						/* @__PURE__ */ o(u, { children: [
+						/* @__PURE__ */ o(l, { children: [
 							e.instructor,
 							" · ",
 							e.duration,
@@ -54,7 +70,7 @@ function m() {
 							e.modules,
 							" modules"
 						] })
-					] }), /* @__PURE__ */ o(l, { children: [
+					] }), /* @__PURE__ */ o(c, { children: [
 						/* @__PURE__ */ a("p", {
 							className: "text-sm text-text-secondary mb-3",
 							children: e.description
@@ -72,7 +88,7 @@ function m() {
 							children: [
 								/* @__PURE__ */ o("span", {
 									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ a(r, { className: "h-3 w-3 text-yellow-500" }), e.rating]
+									children: [/* @__PURE__ */ a(r, { className: "h-3 w-3 text-status-warning-text" }), e.rating]
 								}),
 								/* @__PURE__ */ o("span", {
 									className: "flex items-center gap-1",
@@ -92,6 +108,6 @@ function m() {
 	});
 }
 //#endregion
-export { m as LearningCoursesPagePage };
+export { _ as LearningCoursesPagePage };
 
 //# sourceMappingURL=LearningCoursesPagePage.js.map