Animated Product Collection Card

<div class="card-animate flex flex-col w-full max-w-sm aspect-[3/5] hover:scale-105 transition-all duration-300 hover:shadow-xl group animate-in text-white bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a055708e-5727-4345-b339-0737966db630_1600w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-lg justify-between">
        <div class="space-y-6">
            <div class="flex items-center justify-between">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette w-8 h-8 group-hover:scale-110 transition-transform text-violet-100"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
                <span class="text-xs px-3 py-1.5 rounded-full font-medium bg-white/20 text-violet-100 font-sans">Collection</span>
            </div>
            <h2 class="text-4xl sm:text-5xl tracking-tighter font-semibold" style="font-family: 'Instrument Serif', serif;">Products</h2>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between items-center p-2 rounded-xl transition-colors hover:bg-white/10">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-rose-400"></div>
                        <span class="font-normal font-sans">Serums</span>
                    </div>
                    <span class="font-medium text-rose-300 font-sans">8 products <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right inline w-3 h-3 ml-1"><path d="m9 18 6-6-6-6"></path></svg></span>
                </div>
                <div class="flex justify-between items-center p-2 rounded-xl transition-colors hover:bg-white/10">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-amber-400"></div>
                        <span class="font-normal font-sans">Moisturizers</span>
                    </div>
                    <span class="font-medium text-amber-300 font-sans">12 products <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right inline w-3 h-3 ml-1"><path d="m9 18 6-6-6-6"></path></svg></span>
                </div>
                <div class="flex justify-between items-center p-2 rounded-xl transition-colors hover:bg-white/10">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
                        <span class="font-normal font-sans">Cleansers</span>
                    </div>
                    <span class="font-medium text-emerald-300 font-sans">6 products <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right inline w-3 h-3 ml-1"><path d="m9 18 6-6-6-6"></path></svg></span>
                </div>
                <div class="flex justify-between items-center p-2 rounded-xl transition-colors hover:bg-white/10">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-blue-400"></div>
                        <span class="font-normal font-sans">SPF &amp; Protection</span>
                    </div>
                    <span class="font-medium text-blue-300 font-sans">5 products <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right inline w-3 h-3 ml-1"><path d="m9 18 6-6-6-6"></path></svg></span>
                </div>
            </div>
        </div>
        <div class="space-y-4 border-t pt-6 border-violet-400/30">
            <p class="text-sm leading-relaxed font-light text-violet-100 font-sans">Curated collection of premium beauty products for your personalized routine.</p>
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <span class="font-medium text-xs tracking-wider font-sans">GLOW</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-violet-100"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
                </div>
                <a href="#" class="text-sm hover:underline transition-colors font-medium text-violet-100 font-sans">View all</a>
            </div>
        </div>
    </div>