Interactive Self-Care Journal Promo Card

<div class="flex flex-col w-full max-w-sm aspect-[3/5] hover:scale-105 transition-all duration-500 hover:shadow-2xl group text-zinc-800 bg-white/60 border-white/50 border rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-lg backdrop-blur-lg justify-between">
        
        <!-- Main image section -->
        <div class="flex flex-1 bg-cover bg-center border rounded-2xl p-8 items-center justify-center border-amber-200/50 shadow-inner relative overflow-hidden group-hover:border-amber-300/70 transition-all duration-300" style="background-image: url('https://cdn.midjourney.com/5173059c-1c53-4bfb-9640-aae383e573fa/0_0.png');">
            <div class="absolute inset-0 bg-gradient-to-t from-amber-100/20 to-transparent"></div>
        </div>
        
        <!-- Content section -->
        <div class="space-y-6 mt-8">
            <!-- Header with progress dots -->
            <div class="flex items-center justify-between">
                <span class="text-xs uppercase tracking-widest text-zinc-500 font-medium font-sans">Self-Care Journal</span>
                <div class="flex gap-1">
                    <div class="w-2 h-2 bg-amber-500 rounded-full shadow-sm"></div>
                    <div class="w-2 h-2 rounded-full bg-amber-300 shadow-sm"></div>
                    <div class="w-2 h-2 rounded-full bg-amber-200 shadow-sm"></div>
                </div>
            </div>
            
            <!-- Title -->
            <h2 class="text-xl sm:text-2xl leading-tight tracking-tight font-serif font-semibold text-zinc-800">
                Reflect on your beauty journey
            </h2>
            
            <!-- Footer with features and arrow -->
            <div class="flex items-center justify-between pt-2">
                <div class="text-sm text-zinc-500 space-y-1 font-light font-sans">
                    <p>Daily gratitude &amp; affirmations</p>
                    <p>Track mood &amp; energy levels</p>
                </div>
                <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="arrow-up-right" class="lucide lucide-arrow-up-right w-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 text-zinc-400 group-hover:text-zinc-600"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
            </div>
        </div>
    </div>