Interactive Soccer Training Course Card

<div class="relative overflow-hidden w-80 h-80 sm:h-[28rem] shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] rounded-3xl">
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b2ca5b54-d478-40c0-9c54-a2735e395b78_1600w.jpg" alt="Soccer training" class="absolute inset-0 w-full h-full object-cover" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
    
    <div class="absolute top-4 left-4 text-white">
        <div class="flex items-center gap-2 mb-2">
            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=80&amp;h=80&amp;fit=crop&amp;crop=face" class="w-6 h-6 rounded-full border-2 border-white object-cover" alt="Coach" style="">
            <span class="text-xs font-medium font-sans" style="">Carlos Martinez, Elite Coach</span>
        </div>
        <p class="text-xs leading-4 max-w-[200px] backdrop-blur-sm rounded-lg p-2 bg-black/20 font-sans" style="">
            "Master the beautiful game. Learn from champions who've competed at the highest levels!"
        </p>
    </div>
    
    <div class="absolute top-4 right-4 flex gap-2">
        <button class="backdrop-blur-sm rounded-full p-2 transition-colors bg-white/20 hover:bg-white/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-4 h-4 text-white" style="stroke-width: 1.5;"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
        </button>
        <button class="backdrop-blur-sm rounded-full p-2 transition-colors bg-white/20 hover:bg-white/30">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bookmark" class="lucide lucide-bookmark w-4 h-4 text-white" style="stroke-width: 1.5;"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg>
        </button>
    </div>

    <div class="absolute bottom-4 left-4 right-4">
        <div class="backdrop-blur-sm rounded-lg p-3 bg-white/10">
            <div class="flex items-center justify-between text-sm text-white">
                <span class="font-sans" style="">Current Module: Ball Control Mastery</span>
                <span class="flex items-center gap-1 font-sans" style="">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-3 h-3" style="stroke-width: 1.5;"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
                    28 min
                </span>
            </div>
            <div class="mt-2 rounded-full h-1 bg-white/20">
                <div class="rounded-full h-1 w-3/4 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
            </div>
        </div>
    </div>
</div>