Alumni Testimonial Spotlight Section

<section class="overflow-hidden text-white bg-[#18181B] rounded-t-[3rem] pt-24 pb-24 relative">
        <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
            
            <div class="">
                <div class="flex items-center gap-3 mb-8">
                    <div class="h-px w-8 bg-[#9EF0A0]"></div>
                    <span class="text-sm font-semibold uppercase tracking-wider text-[#9EF0A0]">Alumni Stories</span>
                </div>
                <h2 class="text-4xl lg:text-6xl mb-8 text-white font-medium tracking-tight">Where Are Our Grads Now?</h2>
                
                <!-- Animated Testimonial Card -->
                <div class="bg-[#27272A] border border-white/5 p-10 rounded-[2rem] max-w-lg relative mb-10 min-h-[300px] flex flex-col justify-between transition-all" id="testimonial-card">
                    <div class="">
                        <span class="iconify text-[#B2A5FE] text-4xl mb-6" data-icon="solar:quote-up-square-bold-duotone"></span>
                        <div id="testimonial-content" class="transition-opacity duration-500 opacity-100">
                            <p class="text-xl text-[#D4D4D8] italic mb-6 leading-relaxed font-light">
                                "DevForge didn't just teach me to code; they taught me how to think like an engineer. I landed my dream job at a major fintech company 3 weeks after demo day."
                            </p>
                            <div>
                                <div class="font-medium text-white text-lg">Marcus Chen</div>
                                <div class="text-[#71717A] text-sm">Software Engineer, Stripe</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Progress Indicators -->
                    <div class="flex gap-2 mt-8">
                        <div class="h-1 rounded-full bg-[#9EF0A0] w-8 transition-all duration-300" id="indicator-0"></div>
                        <div class="h-1 rounded-full bg-white/20 w-8 transition-all duration-300" id="indicator-1"></div>
                        <div class="h-1 rounded-full bg-white/20 w-8 transition-all duration-300" id="indicator-2"></div>
                    </div>
                </div>

                <a href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-[#B2A5FE] text-[#18181B] rounded-full font-medium hover:bg-[#A597FF] transition-colors">
                    Read Success Stories
                    <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="relative h-full min-h-[500px]">
                <!-- Large Background Image -->
                <div class="absolute inset-0 rounded-[2.5rem] overflow-hidden">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1ba198c4-eafe-4d01-8017-63537641710a_1600w.webp" class="opacity-40 mix-blend-overlay w-full h-full object-cover grayscale">
                    <div class="bg-gradient-to-t from-[#18181B] via-[#18181B]/50 to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
                </div>

                <!-- Floating Bubble (Animated) -->
                <div class="absolute top-20 -left-10 bg-white text-[#18181B] p-6 rounded-[2rem] shadow-2xl max-w-xs hidden lg:block transform transition-all duration-700 hover:-translate-y-2" id="bubble-card">
                     <p class="text-sm font-medium leading-relaxed mb-4" id="bubble-text">"The mentorship I received was world-class. I felt supported every step of the way."</p>
                     <div class="flex items-center gap-3">
                         <img id="bubble-img" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=50&amp;h=50" class="w-10 h-10 rounded-full object-cover">
                         <div>
                             <div class="font-bold text-xs" id="bubble-name">Sarah Jenkins</div>
                             <div class="text-xs text-[#52525B]" id="bubble-role">Frontend Dev, Vercel</div>
                         </div>
                     </div>
                </div>

                <!-- Bottom Team List -->
                <div class="absolute bottom-6 right-6 flex flex-col gap-4 items-end">
                    <div class="flex items-center gap-3 text-right bg-[#18181B]/80 backdrop-blur px-4 py-2 rounded-full border border-white/10">
                        <div class="text-xs text-[#A1A1AA]">
                            <div class="font-bold text-white">Google</div>
                            <div class="">Senior Eng</div>
                        </div>
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&amp;fit=crop&amp;w=50&amp;h=50" class="w-8 h-8 rounded-full border border-white/20">
                    </div>
                     <div class="flex items-center gap-3 text-right bg-[#18181B]/80 backdrop-blur px-4 py-2 rounded-full border border-white/10">
                        <div class="text-xs text-[#A1A1AA]">
                            <div class="font-bold text-white">Amazon</div>
                            <div class="">Backend Dev</div>
                        </div>
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&amp;fit=crop&amp;w=50&amp;h=50" class="w-8 h-8 rounded-full border border-white/20">
                    </div>
                </div>
            </div>
        </div>
    </section>