<?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-750px lg:min-h-900px xl:min-h-1170px bg-primary">
<img alt="تصویر" class="position-absolute start-0 bottom-0 w-100" src="%%SHCD_IMG_i0%%"/>
<div class="container">
<div class="section-inner panel">
<div class="panel vstack items-center gap-4 sm:gap-5 xl:gap-7 max-w-md mx-auto text-center px-2 lg:px-0 mt-8 sm:mt-6 xl:mt-9" data-anime="targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
<h1 class="h3 sm:h1 xl:display-6 mb-0 text-white text-uppercase ls-0 stroke-text-white">%%SHCD_TEXT_t0%% <br class="d-none sm:d-block"/><span class="text-secondary stroke-text">%%SHCD_TEXT_t1%%</span></h1>
<div class="vstack sm:hstack justify-center gap-2 sm:gap-3">
<a class="btn btn-md sm:btn-xl xl:btn-2xl px-6 border border-3 border-black bg-gradient-45n from-secondary to-tertiary contrast-shadow hover:-rotate-2" href="%%SHCD_LINK_l0%%" style="--shadowColor: var(--color-secondary)">
<span class="text-black">%%SHCD_TEXT_t2%%</span>
</a>
<a class="btn btn-md sm:btn-xl xl:btn-2xl px-6 border border-3 border-black bg-gradient-45n from-fifth to-quaternary contrast-shadow hover:-rotate-2" href="%%SHCD_LINK_l1%%" style="--shadowColor: var(--color-secondary)">
<span class="text-black">%%SHCD_TEXT_t3%%</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
