{% macro jumbotron(id='', title='', text='') %}
<section class="w-full">
    <div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
        <h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
            {{ title }}
        </h1>
        <p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
            {{ text }}
        </p>
        {{ caller() }}
    </div>
</section>
{% endmacro %}

{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
    {{ caller() }}
</div>
{% endmacro %}

{% macro grid(id='', title='', columns=3) %}
<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
    {{ caller() }}
</div>
{% endmacro %}

{% macro link(id='', link='#', title='New Link', description='Description') %}
<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
    <h4 class="font-medium text-gray-700 text-lg mb-4">
        {{ title }}
    </h4>
    <p class="font-normal text-gray-500 text-md">
        {{ description }}
    </p>
</a>
{% endmacro %}