add: implement UI for student dashboard

src/app/(learners)/dashboard/page.tsx

@@ -18,12 +18,18 @@
  *
  *  ======================================================================
  */
-import { Dashboard } from '@/components/learners/Dashboard';
+import NavigationBar from '@/components/commons/learners/NavigationBar';
+import Profile from '@/components/commons/learners/Profile';
+import CoursesSection from '@/components/learners/dashboard/CoursesSection';
+import StatsSection from '@/components/learners/dashboard/StatsSection';
 
 export default function Home() {
 	return (
 		<div>
-			<Dashboard />
+			<Profile />
+			<NavigationBar />
+			<StatsSection />
+			<CoursesSection />
 		</div>
 	);
 }

src/components/learners/dashboard/CourseCard.tsx

@@ -0,0 +1,71 @@
+import Image from 'next/image';
+import React from 'react';
+
+// Import Image từ next/image
+
+interface CourseCardProps {
+	title: string;
+	currentLesson: string;
+	thumbnail: string;
+	completed: string;
+}
+
+const CourseCard: React.FC<CourseCardProps> = ({
+	title,
+	currentLesson,
+	thumbnail,
+	completed,
+}) => {
+	// Kiểm tra nếu completed là "0%"
+	const isCompletedZero = completed === '0%';
+
+	return (
+		<div className="p-6 bg-white border rounded-lg shadow-md mb-0 flex flex-col justify-between h-full">
+			{/* Phần 1: Hình ảnh và nội dung */}
+			<div>
+				{/* Sử dụng Image thay cho img */}
+				<div className="relative w-full h-40 mb-4">
+					<Image
+						src={thumbnail}
+						alt={title}
+						layout="fill" // Đặt layout fill để tự động phù hợp với container
+						objectFit="cover" // Đảm bảo hình ảnh không bị méo
+						className="rounded-lg"
+					/>
+				</div>
+
+				<h3 className="text-xl font-semibold text-gray-900">{title}</h3>
+				<p className="text-gray-500 mt-1">{currentLesson}</p>
+			</div>
+
+			{/* Phần 2: Nút và tiến độ (được đẩy xuống dưới cùng) */}
+			<div className="mt-auto">
+				<hr className="my-4 border-gray-300 w-full" />
+
+				<div className="mt-6">
+					<div className="flex flex-col items-start space-y-4">
+						{/* Thanh tiến độ */}
+						<div className="w-full">
+							<p
+								className={`font-semibold mb-2 ${isCompletedZero ? 'text-gray-500' : ''}`}
+							>
+								{isCompletedZero ? 'Not Started' : `${completed} Completed`}
+							</p>
+							<div className="w-full h-2 bg-gray-300 rounded-full">
+								<div
+									className={`h-2 ${isCompletedZero ? 'bg-gray-300' : 'bg-green-600'} rounded-full`}
+									style={{ width: isCompletedZero ? '100%' : completed }}
+								></div>
+							</div>
+						</div>
+						<button className="bg-orange-500 text-white w-full py-2 rounded-lg mt-0">
+							Watch Lecture
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CourseCard;

src/components/learners/dashboard/CoursesSection.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import CourseCard from './CourseCard';
+
+const courses = [
+	{
+		id: 1,
+		title: 'Reiki Level I, II and Master/Teacher Program',
+		currentLesson: '1. Introductions',
+		thumbnail: '/app/course/course01.png',
+		completed: '0%',
+	},
+	{
+		id: 2,
+		title: 'The Complete 2021 Web Development Bootcamp',
+		currentLesson: "167. What You'll Need to Get Started",
+		thumbnail: '/app/course/course02.png',
+		completed: '61%',
+	},
+	{
+		id: 3,
+		title: 'Copywriting - Become a Freelance Copywriter',
+		currentLesson: '1. How to get started with figma',
+		thumbnail: '/app/course/course03.png',
+		completed: '0%',
+	},
+	{
+		id: 4,
+		title: '2021 Complete Python Bootcamp From Zero to Mastery',
+		currentLesson: '9. Advanced CSS - Selector Priority',
+		thumbnail: '/app/course/course04.png',
+		completed: '12%',
+	},
+];
+
+const CoursesSection = () => (
+	<div className="bg-white p-6 rounded-lg shadow-md">
+		<h2 className="text-2xl font-semibold">Lets start learning</h2>
+		<div className="grid grid-cols-4 gap-6 mt-4">
+			{courses.map((course) => (
+				<CourseCard key={course.id} {...course} />
+			))}
+		</div>
+	</div>
+);
+
+export default CoursesSection;

src/components/learners/dashboard/Stat.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface StatProps {
+	icon: React.ReactNode;
+	value: string | number;
+	label: string;
+	bgColor: string;
+}
+
+const Stat: React.FC<StatProps> = ({ icon, value, label, bgColor }) => (
+	<div className={`p-6 rounded-lg ${bgColor} flex items-center space-x-4`}>
+		<div className="bg-white p-4 rounded-full text-orange-500 text-2xl">
+			{icon}
+		</div>
+		<div>
+			<h2 className="text-xl font-semibold">{value}</h2>
+			<p className="text-gray-500">{label}</p>
+		</div>
+	</div>
+);
+
+export default Stat;