Created part of the homepage of the new Figma designs

src/components/Low/ProgressBar.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+interface Props {
+	label: string;
+	percentage: number;
+	color: "blue" | "orange" | "green";
+	className?: string;
+}
+
+export default function ProgressBar({label, percentage, color, className}: Props) {
+	return (
+		<div className={clsx("relative rounded-full bg-gray-200 overflow-hidden flex items-center justify-center", className)}>
+			<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", `bg-mti-${color}-light`)} />
+			<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
+		</div>
+	);
+}