Student Capstone Project Showcase Section

<section class="bg-[#E4E9E5] pt-24 pb-24">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16">
                <div class="">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="h-px w-8 bg-[#18181B]"></div>
                        <span class="text-sm font-semibold uppercase tracking-wider text-[#18181B]">Student Portfolio</span>
                    </div>
                    <h2 class="text-4xl lg:text-5xl text-[#18181B] font-medium tracking-tight">Capstone Projects Built by Recent Grads</h2>
                </div>
                <a href="#" class="px-6 py-3 bg-[#18181B] text-white rounded-full text-sm font-medium hover:bg-[#27272A] transition-colors flex items-center gap-2 mt-6 md:mt-0">
                    View All Capstones
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z" class=""></path></svg>
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- Project Card 1 -->
                <div class="group cursor-pointer bg-white p-4 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-all duration-300">
                    <div class="bg-[#F2F4F3] rounded-[2rem] overflow-hidden mb-6 relative aspect-[4/3]">
                        <div class="group-hover:bg-black/10 transition-colors z-10 bg-center bg-black/0 absolute top-0 right-0 bottom-0 left-0"></div>
                        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6f627dda-22f9-4cd4-bde1-95bafd0aca99_1600w.jpg" alt="Dashboard" class="group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
                        <div class="absolute bottom-6 left-6 z-20">
                            <span class="inline-block px-4 py-1 rounded-full bg-[#18181B] text-white text-xs font-medium">FinTech</span>
                        </div>
                    </div>
                    <div class="flex justify-between items-start px-2 pb-2">
                        <div>
                            <h3 class="text-2xl mb-1 text-[#18181B] font-medium tracking-tight">Nexus Financial</h3>
                            <p class="text-[#71717A] text-lg font-light">React, D3.js, Node.js</p>
                        </div>
                        <div class="p-3 rounded-full bg-[#E4E9E5] text-[#18181B] group-hover:bg-[#9EF0A0] transition-colors">
                             <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class="iconify text-xl iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg>
                        </div>
                    </div>
                </div>

                <!-- Project Card 2 -->
                <div class="group cursor-pointer bg-white p-4 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-all duration-300">
                    <div class="bg-[#F2F4F3] rounded-[2rem] overflow-hidden mb-6 relative aspect-[4/3]">
                        <div class="group-hover:bg-black/10 transition-colors bg-center z-10 bg-black/0 absolute top-0 right-0 bottom-0 left-0"></div>
                        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4c09acd3-7179-4b95-af05-00bfbe62e6c4_1600w.jpg" alt="Code" class="group-hover:scale-105 transition-transform duration-700 w-full h-full object-cover">
                         <div class="absolute bottom-6 left-6 z-20">
                            <span class="inline-block px-4 py-1 rounded-full bg-[#18181B] text-white text-xs font-medium">Social</span>
                        </div>
                    </div>
                    <div class="flex justify-between items-start px-2 pb-2">
                        <div class="">
                            <h3 class="text-2xl mb-1 text-[#18181B] font-medium tracking-tight">DevConnect App</h3>
                            <p class="text-[#71717A] text-lg font-light">MERN Stack, Socket.io</p>
                        </div>
                        <div class="p-3 rounded-full bg-[#E4E9E5] text-[#18181B] group-hover:bg-[#9EF0A0] transition-colors">
                             <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class="iconify text-xl iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>