{% load static %}

<div class="w-full bg-emerald-600 dark:bg-emerald-700 py-10 text-white">
    <div class="w-[90%] md:w-[80%] max-w-[1280px] mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center gap-6 text-center md:text-left">
            <div>
                <h2 class="text-xl md:text-2xl lg:text-3xl font-bold">
                    Don't Wait! Start Practicing Today!
                </h2>
                <p class="mt-2 text-emerald-100 text-sm md:text-base">
                    Join thousands of students already preparing for success
                </p>
            </div>
            <div>
                <a href="{% url 'subscription' %}#subscription" 
                   data-turbo="false" 
                   class="inline-flex items-center gap-2 bg-white hover:bg-gray-100 text-emerald-700 font-semibold px-8 py-3 rounded-xl transition-colors shadow-lg hover:shadow-xl">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                    View Our Plans
                </a>
            </div>
        </div>
    </div>
</div>