Project Grid Card

<div
        class="max-w-sm rounded-[2.5rem] p-2 bg-gradient-to-br from-gray-50 to-gray-200 group cursor-pointer transition-all hover:scale-[1.02] shadow-xl">
        <div class="bg-white rounded-[2.2rem] overflow-hidden">
            <div class="h-56 bg-indigo-100 relative">
                <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=400"
                    class="w-full h-full object-cover group-hover:opacity-80 transition-opacity">
                <div
                    class="absolute top-6 right-6 bg-white/90 backdrop-blur-md px-4 py-1.5 rounded-full text-[10px] font-bold tracking-widest uppercase">
                    Mobile App</div>
            </div>
            <div class="p-8">
                <h4 class="font-bold text-2xl mb-3 text-slate-900">HealthTrack AI</h4>
                <p class="text-sm text-slate-500 leading-relaxed mb-8">Revolutionizing personal health monitoring using
                    deep learning models.</p>
                <div class="flex items-center justify-between pt-6 border-t border-slate-50">
                    <div class="flex -space-x-3">
                        <div
                            class="w-10 h-10 rounded-full bg-indigo-500 border-2 border-white flex items-center justify-center text-xs text-white font-bold">
                            A</div>
                        <div
                            class="w-10 h-10 rounded-full bg-slate-300 border-2 border-white flex items-center justify-center text-xs text-white font-bold">
                            B</div>
                    </div>
                    <span
                        class="text-indigo-600 font-bold text-sm flex items-center gap-2 hover:gap-3 transition-all">View
                        Project <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg></span>
                </div>
            </div>
        </div>
    </div>