<?php include 'header.php'; ?>

<div class="bg-gray-100 py-10 px-4">

    <!-- Compact Page Heading -->
    <div class="max-w-7xl mx-auto mb-5">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-black">
                    HRMS
                </h1>
            </div>
        </div>
    </div>

    <!-- Responsive Grid -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

        <!-- Card 1 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-purple-500 to-indigo-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Dashboard</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">
                <a href="employee_dashboard.php"
                    class="block bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-xl transition">Employess Dashboard</a>
            </div>

        </div>

        <!-- Card 2 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Employess List</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="employee_list.php" class="block bg-pink-100 hover:bg-pink-200 text-pink-800 px-4 py-2 rounded-xl transition">
                    Employess
                </a>

            </div>

        </div>

        <!-- Card 3-->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-blue-500 to-sky-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Interns List</h2>
            </div>

            <!-- Account Links -->
            <div class="p-5 space-y-3">

                <a href="interns_list.php" class="block bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-xl transition">
                    Interns
                </a>

            </div>
        </div>

        <!-- Card 4 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <!-- Header -->
            <div class="bg-gradient-to-r from-green-500 to-emerald-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Leave List</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">

                <a href="leave_list.php"
                    class="block bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded-xl transition">
                    Leave
                </a>

            </div>

        </div>

        <!-- Card 5 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Payroll</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="payroll_list.php"
                    class="block bg-emerald-100 hover:bg-emerald-200 text-emerald-800 px-4 py-2 rounded-xl transition">
                    Payroll
                </a>

            </div>

        </div>

        <!-- Card 6 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-emerald-500 to-lime-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Attendance List</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="attendance_list.php"
                    class="block bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-xl transition">
                    Attendance List
                </a>

            </div>

        </div>

        <!-- Card 7 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-red-500 to-amber-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Payslips</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="payslips.php"
                    class="block bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-xl transition">
                    Payslips
                </a>

            </div>

        </div>


        <!-- Card 8 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Manage Applicants</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="manage_applicants.php"
                    class="block bg-cyan-100 hover:bg-cyan-200 text-cyan-800 px-4 py-2 rounded-xl transition">
                    Applicants
                </a>

            </div>

        </div>


        <!-- Card 9 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-violet-500 to-fuchsia-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Letters</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="letters.php"
                    class="block bg-violet-100 hover:bg-violet-200 text-violet-800 px-4 py-2 rounded-xl transition">
                    Letters
                </a>

            </div>

        </div>
        
                <!-- Card 10 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">

            <div class="bg-gradient-to-r from-orange-500 to-yellow-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Paid Leave List</h2>
            </div>

            <div class="p-5 space-y-3">

                <a href="paid_leave_list.php"
                    class="block bg-orange-100 hover:bg-orange-200 text-orange-800 px-4 py-2 rounded-xl transition">
                    Paid Leave
                </a>

            </div>

        </div>
        
        <!-- Card 11 -->
        <div
            class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden border border-white hover:scale-105 transition duration-300">
        
            <div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Holiday List</h2>
            </div>
        
            <div class="p-5 space-y-3">
        
                <a href="holiday_list.php"
                    class="block bg-pink-100 hover:bg-pink-200 text-pink-800 px-4 py-2 rounded-xl transition">
                    Holiday
                </a>
        
            </div>
        
        </div>

    </div>

</div>

<?php include 'footer.php'; ?>