{# Reusable component for creating custom buttons #}
{% macro PrimaryButton(text, url, icon = "", target = "_self") %}
    <div class="relative inline-flex  group">
        <div
                class="absolute transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt">
        </div>

        <a href="{{ url }}"
           class="relative inline-flex gap-4 items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
           target="{{ target }}"
           role="button">
            {{ text }}
            {% if icon %}
                <i class="{{ icon }}"></i>
            {% endif %}
        </a>
    </div>
{% endmacro %}