www_duniayetu/templates/shortcodes/hero.html
2023-12-15 21:12:07 +01:00

23 lines
1.5 KiB
HTML

<section class="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row">
<!-- content - start -->
<div class="flex flex-col justify-center sm:text-center lg:py-12 lg:text-left xl:w-5/12 xl:py-24">
<p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">{{ hero_subtitle }}</p>
<h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">{{ hero_title }}</h1>
<p class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg">{{ hero_text }}</p>
<div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center lg:justify-start">
<a href="{{ hero_link1 }}" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">{{ hero_link1_name }}</a>
<a href="{{ hero_link2 }}" class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base">{{ hero_link2_name }}</a>
</div>
</div>
<!-- content - end -->
<!-- image - start -->
<div class="h-48 overflow-hidden rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12">
<img src="{{ hero_img }}<" loading="lazy" alt="Photo by Fakurian Design" class="h-full w-full object-cover object-center" />
</div>
<!-- image - end -->
</section>