<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="hero-header section panel overflow-hidden" id="hero_header">
<div class="section-outer py-9 lg:py-10 min-h-650px sm:min-h-600px lg:min-h-750px xl:min-h-1170px">
<img alt="تصویر" class="position-absolute start-0 top-0 w-100 d-none sm:d-block" src="%%SHCD_IMG_i0%%"/>
<img alt="تصویر" class="position-absolute start-0 top-0 w-100 mt-8 sm:d-none" src="%%SHCD_IMG_i1%%"/>
<img alt="تصویر" class="position-absolute start-0 bottom-0 w-100 sm:d-none" src="%%SHCD_IMG_i2%%"/>
<div class="container">
<div class="section-inner panel">
<div class="panel vstack items-center gap-2 lg:gap-3 xl:gap-4 sm:max-w-650px lg:max-w-800px xl:max-w-1000px mx-auto text-center px-2 lg:px-0 mt-7 sm:mt-9 xl:mt-10" data-anime="targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
<h1 class="h5 sm:h2 lg:h1 xl:display-6 mb-0 ls-0 text-white text-uppercase ls-0 xl:mt-4"><span class="text-tertiary">%%SHCD_TEXT_t0%% </span><span class="text-gradient bg-gradient-45n from-secondary to-tertiary">%%SHCD_TEXT_t1%%</span> %%SHCD_TEXT_t2%%</h1>
<p class="fs-4 xl:fs-3">%%SHCD_TEXT_t3%%</p>
<div class="vstack sm:hstack justify-center gap-3 mt-1 sm:mt-2">
<a class="btn btn-md sm:btn-xl xl:btn-2xl px-4 xl:px-6 border border-3 border-black bg-gradient-45n from-secondary to-tertiary contrast-shadow -rotate-2 hover:rotate-0" href="%%SHCD_LINK_l0%%" style="--shadowColor: var(--color-secondary)">
<span class="text-black">%%SHCD_TEXT_t4%%</span>
<span class="fs-4 mb-narrow">%%SHCD_TEXT_t5%%</span>
</a>
<a class="btn btn-md sm:btn-xl xl:btn-2xl px-4 xl:px-6 border border-3 border-black bg-gradient-45n from-fifth to-quaternary contrast-shadow rotate-2 hover:rotate-0" href="%%SHCD_LINK_l1%%" style="--shadowColor: var(--color-secondary)">
<span class="text-black">%%SHCD_TEXT_t6%%</span>
<span class="fs-4 mb-narrow">%%SHCD_TEXT_t7%%</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
