<div class="bg-gradient-to-r from-[#eff4ff] to-[#faeffa] rounded-[24px] p-6 md:p-10 flex flex-col md:flex-row items-center justify-between w-full h-full border border-white shadow-sm overflow-hidden relative">
    
    <!-- Content Left -->
    <div class="flex-1 relative z-10 w-full md:pr-4">
        <h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] flex items-center gap-3 mb-3 leading-none tracking-tight">
            Thanks <span class="text-[#8b98e8] font-medium tracking-wider text-[38px] md:text-[52px]" style="font-family: 'Caveat', cursive, sans-serif; transform: translateY(-4px);">Card</span>
            <svg class="w-8 h-8 text-[#8b98e8]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
        </h2>
        <p class="text-[16px] text-gray-600 font-medium mb-8 leading-relaxed max-w-[320px]">
            Một lời cảm ơn chân thành<br>có thể tạo nên ngày tuyệt vời của ai đó!
        </p>
        <a href="{{ route('user.send') }}" class="inline-flex items-center gap-2 px-8 py-3.5 bg-[#3462f7] hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/25 transition-all text-[15px]">
            Gửi lời cảm ơn ngay
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
        </a>
    </div>

    <!-- Illustration Right -->
    <div class="w-full max-w-[280px] md:w-[340px] md:max-w-none shrink-0 relative flex justify-center md:justify-end mt-6 md:mt-0">
        <img src="{{ asset('images/hero_banner_illustration.png') }}" alt="Illustration" class="w-full max-w-[320px] object-contain drop-shadow-xl z-10 mix-blend-multiply">
    </div>

    <!-- Background Elements -->
    <div class="absolute inset-0 z-0 opacity-50 pointer-events-none overflow-hidden">
        <div class="absolute top-10 left-1/3 w-2 h-2 bg-pink-400 rounded-full blur-[1px]"></div>
        <div class="absolute bottom-12 left-[40%] w-3 h-3 bg-blue-400 rounded-full blur-[1px]"></div>
        <div class="absolute top-1/4 right-[45%] w-3 h-3 bg-yellow-400 rounded-full blur-[1px]"></div>
    </div>
</div>
