forked from duniayetu/www_duniayetu
23 lines
1.5 KiB
HTML
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> |