feat: add dashboard landing page

package.json

@@ -24,6 +24,7 @@
 		"next": "^14.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"react-icons": "^4.12.0",
 		"superjson": "^2.2.1",
 		"zod": "^3.22.4"
 	},

src/pages/index.tsx

@@ -1,21 +1,91 @@
+import Link from 'next/link'
+import { FaHome, FaUser, FaBook, FaNewspaper, FaChartBar } from 'react-icons/fa'
+
+const navItems = [
+	{
+		label: 'Home',
+		icon: <FaHome />,
+		href: '/',
+	},
+	{
+		label: 'Akun',
+		icon: <FaUser />,
+		href: '/',
+	},
+	{
+		label: 'Peminjaman',
+		icon: <FaBook />,
+		href: '/',
+	},
+	{
+		label: 'Berita Acara',
+		icon: <FaNewspaper />,
+		href: '/',
+	},
+	{
+		label: 'Lab dalam Angka',
+		icon: <FaChartBar />,
+		href: '/',
+	},
+]
+
+interface NavItemProps {
+	item: {
+		label: string
+		icon: JSX.Element
+		href: string
+	}
+}
+
+const NavItem: React.FC<NavItemProps> = ({ item }) => (
+	<li key={item.label}>
+		<Link
+			className='flex items-center space-x-2 p-2 text-slate-800 hover:bg-blue-500 hover:text-white rounded transition-colors'
+			href={item.href}
+		>
+			{item.icon}
+			<span>{item.label}</span>
+		</Link>
+	</li>
+)
+
 export default function Home() {
 	return (
-		<main className='flex min-h-screen flex-col justify-between p-6'>
-			<div className='flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52'>
-				{/* <AcmeLogo /> */}
-				<h1 className='text-white'>Peminjaman Lab</h1>
-			</div>
-			<div className='mt-4 flex grow flex-col gap-4 md:flex-row'>
-				<div className='flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20'>
-					<h1>
-						<span className='text-3xl font-bold'>
-							Peminjaman Lab
-						</span>
-					</h1>
-
-					<p>Welcome to dashboard Laboratory Departemen Informatic</p>
-				</div>
+		<div className='min-h-screen bg-gray-100 flex flex-col'>
+			<nav className='bg-blue-800 p-4 flex justify-between items-center shadow-md sticky top-0 z-50'>
+				<div className='text-white text-lg font-bold'>PinjamLab</div>
+			</nav>
+			<div className='flex flex-grow overflow-y-hidden'>
+				<aside className='w-full md:w-64 bg-white p-4 border-r border-gray-200 pt-12 md:pt-6 md:sticky md:top-0 h-[calc(100vh-4rem)] overflow-y-auto'>
+					<nav>
+						<ul className='space-y-2 text-sm'>
+							{navItems.map((item) => (
+								<NavItem item={item} />
+							))}
+						</ul>
+					</nav>
+				</aside>
+				<main className='flex-grow p-8'>
+					<header className='mb-8'>
+						<div className='flex flex-col items-center justify-center bg-gray-100 p-5'>
+							<p className='text-sm text-gray-500 mb-4 text-center'>
+								{new Date().toLocaleDateString('id-ID', {
+									weekday: 'long',
+									year: 'numeric',
+									month: 'long',
+									day: 'numeric',
+								})}
+							</p>
+							<h1 className='text-3xl font-bold text-center'>
+								Selamat Datang di PinjamLab
+							</h1>
+							<p className='text-lg text-gray-700 text-center'>
+								Sistem Informasi Peminjaman Laboratorium
+							</p>
+						</div>
+					</header>
+				</main>
 			</div>
-		</main>
+		</div>
 	)
 }