<!DOCTYPE html>
<html lang="en">
<!-- including head -->
<%- include('./partials/head.ejs') %>

    <body class=" bg-[#effaff] font-quickSand">

        <!-- including header -->
        <%- include('./partials/header.ejs') %>

            <div id="blurContentMca" class="pt-[88px]">
                <!-- first year -->
                <div class="container justify-center">
                    <div class="text:lg md:text-xl text-center text-[#1c2541] font-semibold mx-4 mt-6 mb-2">Resources for First
                        Year
                    </div>
                    <!-- boxes -->
                    <div class="flex items-center justify-center flex-row">
                        <!-- box 1 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 1</b></div>
                                <a href="/resource/mca/semester1" 
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                        <!-- box 2 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 2</b></div>
                                <a href="/resource/mca/semester2"
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Second Year -->
                <div class="container justify-center">
                    <div class="text:lg md:text-xl text-center text-[#1c2541] font-semibold mx-4 mt-6 mb-2">Resources for Second
                        Year
                    </div>
                    <!-- boxes -->
                    <div class="flex items-center justify-center flex-row">
                        <!-- box 1 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 3</b></div>
                                <a href="/resource/mca/semester3" 
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                        <!-- box 2 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 4</b></div>
                                <a href="/resource/mca/semester4"
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Third Year -->
                <div class="container justify-center mb-10">
                    <div class="text:lg md:text-xl text-center text-[#1c2541] font-semibold mx-4 mt-6 mb-2">Resources for Third
                        Year
                    </div>
                    <!-- boxes -->
                    <div class="flex items-center justify-center flex-row">
                        <!-- box 1 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 5</b></div>
                                <a href="/resource/mca/semester5" 
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                        <!-- box 2 -->
                        <div class="bg-[#bce7fd] rounded-lg my-4 mx-2 md:mx-6">
                            <div class="flex flex-col p-3 md:p-8 rounded-lg bg-white shadow-xl md:w-96">
                                <div class="mt-3 font-semibold text-xs md:text-lg text-center p-3 ">M.C.A. <b
                                        class="font-semibold bg-[#bce7fd] p-2 md:p-3 rounded-md">Semester 6</b></div>
                                <a href="/resource/mca/semester6"
                                    class="bg-transparent text-xs md:text-lg px-3 py-2 md:px-4 md:py-3 rounded-xl text-center border border-black shadow-xl mt-4 hover:bg-red-400 hover:text-white transition-all">
                                    View resources
                                </a>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- including footer -->
                <%- include('./partials/footer.ejs') %>
            </div>
            <!-- script for toggle menu -->
            <script>
                const dropdownMenu = document.querySelector(".dropdown-menu");
                function onToggleMenu(e) {
                    e.name = e.name === "menu" ? "close" : "menu";
                    dropdownMenu.classList.toggle("left-[0%]");
                }
                document.addEventListener('DOMContentLoaded', function () {
                    const menuIcon = document.getElementById('toggle-button-mca');
                    const blurContent = document.getElementById('blurContentMca');

                    menuIcon.addEventListener('click', function () {
                        blurContent.classList.toggle('blur-sm');
                        setTimeout(function () {
                            blurContent.classList.toggle('in-trans');
                        }, 300);
                    });
                }); 
            </script>

    </body>

</html>