Created part of the homepage of the new Figma designs

src/components/Low/Button.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import {ReactNode} from "react";
+
+interface Props {
+	children: ReactNode;
+	color?: "orange" | "green" | "blue";
+	variant?: "outline" | "solid";
+	onClick: () => void;
+}
+
+export default function Button({color = "green", variant = "solid", children, onClick}: Props) {
+	const colorClassNames: {[key in typeof color]: string} = {
+		green: "bg-mti-green hover:bg-mti-green-dark disabled:text-mti-green disabled:bg-mti-green-ultralight",
+		blue: "bg-mti-blue hover:bg-mti-blue-dark disabled:text-mti-blue disabled:bg-mti-blue-ultralight",
+		orange: "bg-mti-orange hover:bg-mti-orange-dark disabled:text-mti-orange disabled:bg-mti-orange-ultralight",
+	};
+
+	return (
+		<button onClick={onClick} className={clsx("py-3 px-6 text-white", colorClassNames[color])}>
+			{children}
+		</button>
+	);
+}

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>
+	);
+}

src/components/Sidebar.tsx

@@ -24,11 +24,11 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
 	<Link
 		href={keyPath}
 		className={clsx(
-			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:bg-mti-green hover:text-white transition duration-300 ease-in-out",
-			path === keyPath && "bg-mti-green text-white",
+			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-green-light hover:text-white transition duration-300 ease-in-out",
+			path === keyPath && "bg-mti-green-light text-white",
 		)}>
 		<Icon size={20} />
-		<span className="text-lg font-medium">{label}</span>
+		<span className="text-lg font-semibold">{label}</span>
 	</Link>
 );