www_zola_template/templates/shortcodes/hero.html
2025-03-18 16:37:12 +02:00

36 lines
1.6 KiB
HTML

{% 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>