{% set title = title | default(value="Welcome") %}
{% set subtitle = subtitle | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
{% set bg_color = bg_color | default(value="bg-indigo-600") %}
{% set text_color = text_color | default(value="text-white") %}

<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
  <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-20">
    <div class="lg:grid lg:grid-cols-12 lg:gap-8">
      <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
        <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl">
          {{ title }}
        </h1>
        {% if subtitle %}
        <p class="mt-3 text-base sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
          {{ subtitle }}
        </p>
        {% endif %}
        {% if button_text and button_link %}
        <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
          <a href="{{ button_link }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            {{ button_text }}
          </a>
        </div>
        {% endif %}
      </div>
      <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
        {% if caller %}
          {{ caller() }}
        {% endif %}
      </div>
    </div>
  </div>
</div>