<?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">
                    Task Managment
                </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">

        
        <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">All Tasks</h2>
            </div>

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

        </div>


     
        <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">Pending Approvals</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">
                <a href="pending_approvals.php" class="block bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-xl transition">
                    Pending Approvals
                </a>
            </div>
            
        </div>
        
        <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-red-500 to-orange-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold"> In Progress</h2>
            </div>

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

        </div>
        
  
        <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-slate-700 to-slate-900 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Put On Hold</h2>
            </div>

            <!-- Links -->
            <div class="p-5 space-y-3">
                <a href="on_hold.php" class="block bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-xl transition">
                   Put On Hold
                </a>
            </div>
            
        </div>
        

        <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-rose-500 to-pink-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Resume Task</h2>
            </div>

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

        <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-emerald-500 to-teal-500 px-5 py-4">
                <h2 class="text-white text-2xl font-bold">Completed Task</h2>
            </div>

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

    </div>
</div>

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