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",
+			"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 text-white",
+			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>
 );
 

src/pages/index.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import SingleDatasetChart from "@/components/UserResultChart";
 import Navbar from "@/components/Navbar";
 import ProfileCard from "@/components/ProfileCard";
+import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {User} from "@/interfaces/user";
@@ -17,6 +18,7 @@ import {ToastContainer} from "react-toastify";
 import {capitalize} from "lodash";
 import {Module} from "@/interfaces";
 import clsx from "clsx";
+import ProgressBar from "@/components/Low/ProgressBar";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -40,6 +42,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function Home() {
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
 	const {user} = useUser({redirectTo: "/login"});
+	const {stats} = useStats(user?.id);
 
 	useEffect(() => {
 		if (user) setShowDiagnostics(user.isFirstLogin);
@@ -87,21 +90,48 @@ export default function Home() {
 						<Sidebar path="/" />
 						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12">
 							<section className="w-full flex gap-8">
-								<img src={user.profilePicture} alt={user.name} className="w-44 aspect-square rounded-3xl" />
+								<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
-								<div className="flex flex-col gap-8 py-4 w-full">
+								<div className="flex flex-col gap-4 py-4 w-full">
 									<div className="flex justify-between w-full gap-8">
-										<div className="flex flex-col gap-2">
+										<div className="flex flex-col gap-2 py-2">
 											<h2 className="font-bold text-3xl">{user.name}</h2>
 											<span className="font-thin text-2xl text-neutral-500">{capitalize(user.type)}</span>
 										</div>
-										<div className="relative w-32 max-w-xs self-end h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
+										<ProgressBar
-											<div
+											label={`Level ${calculateAverageLevel().toFixed(1)}`}
-												style={{width: `${Math.round((calculateAverageLevel() * 100) / 9)}%`}}
+											percentage={Math.round((calculateAverageLevel() * 100) / 9)}
-												className="absolute top-0 left-0 h-full overflow-hidden bg-mti-orange"
+											color="blue"
-											/>
+											className="max-w-xs w-32 self-end h-10"
-											<span className="z-10 justify-self-center text-white text-sm font-bold">
+										/>
-												Level {calculateAverageLevel().toFixed(1)}
+									</div>
-											</span>
+									<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-xl" />
+									<div className="flex justify-between w-full mt-8">
+										<div className="flex gap-4 items-center">
+											<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl">
+												<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
+											</div>
+											<div className="flex flex-col">
+												<span className="font-bold text-xl">{totalExams(stats)}</span>
+												<span className="font-normal text-base">Exams</span>
+											</div>
+										</div>
+										<div className="flex gap-4 items-center">
+											<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl">
+												<BsPencil className="w-8 h-8 text-mti-blue-light" />
+											</div>
+											<div className="flex flex-col">
+												<span className="font-bold text-xl">{stats.length}</span>
+												<span className="font-normal text-base">Exercises</span>
+											</div>
+										</div>
+										<div className="flex gap-4 items-center">
+											<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl">
+												<BsStar className="w-8 h-8 text-mti-blue-light" />
+											</div>
+											<div className="flex flex-col">
+												<span className="font-bold text-xl">{averageScore(stats)}%</span>
+												<span className="font-normal text-base">Average Score</span>
+											</div>
 										</div>
 									</div>
 								</div>

tailwind.config.js

@@ -5,16 +5,16 @@ module.exports = {
 		extend: {
 			colors: {
 				mti: {
-					orange: "#FF6000",
+					orange: {DEFAULT: "#FF6000", dark: "#cc4402", light: "#ff790a", ultralight: "#ffdaa5"},
-					green: "#51C21A",
+					green: {DEFAULT: "#307912", dark: "#2a6014", light: "#3d9f11", ultralight: "#c6edaf"},
-					blue: "#007FF8",
+					blue: {DEFAULT: "#0696ff", dark: "#007ff8", light: "#1eb3ff", ultralight: "#b5edff"},
 					gray: {light: "#F9F9F9", dark: "#E0E0E0"},
 				},
 				ielts: {
-					reading: {DEFAULT: "#FF6384", transparent: "rgba(255, 99, 132, 0.5)"},
+					reading: {DEFAULT: "#1EB3FF", transparent: "rgba(255, 99, 132, 0.5)"},
-					listening: {DEFAULT: "#36A2EB", transparent: "rgba(54, 162, 235, 0.5)"},
+					listening: {DEFAULT: "#FF790A", transparent: "rgba(54, 162, 235, 0.5)"},
-					writing: {DEFAULT: "#FFCE56", transparent: "rgba(255, 206, 86, 0.5)"},
+					writing: {DEFAULT: "#3D9F11", transparent: "rgba(255, 206, 86, 0.5)"},
-					speaking: {DEFAULT: "#4bc0c0", transparent: "rgba(75, 192, 192, 0.5)"},
+					speaking: {DEFAULT: "#EF5DA8", transparent: "rgba(75, 192, 192, 0.5)"},
 				},
 			},
 		},