<?php
defined( 'ABSPATH' ) || exit;
return <<<'SHCD_FRAGMENT'
<div class="roadmap section panel overflow-hidden" id="roadmap">
<div class="section-outer panel py-6 sm:py-8 lg:py-9 xl:py-10 bg-primary">
<img alt="victor" class="position-absolute end-0" src="%%SHCD_IMG_i0%%" style="top: 10%"/>
<img alt="victor" class="position-absolute start-0 w-300px xl:w-auto" src="%%SHCD_IMG_i1%%" style="top: 39%"/>
<img alt="victor" class="position-absolute end-0" src="%%SHCD_IMG_i2%%" style="bottom: 8%"/>
<div class="container sm:max-w-lg xl:max-w-xl">
<div class="section-inner panel">
<div class="section-header panel sm:max-w-500px xl:max-w-800px mx-auto mb-4 sm:mb-6 xl:mb-9 text-center" data-anime="onview: -200; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<h2 class="h4 sm:h3 xl:h2 m-0 rotate-2 text-uppercase ls-0 text-white">%%SHCD_TEXT_t0%%</h2>
</div>
<div class="section-content panel">
<img alt="victor" class="position-absolute start-50 top-50 translate-middle d-none lg:d-block" src="%%SHCD_IMG_i3%%" style="height: 90%"/>
<div class="row child-cols-12 items-center g-4 sm:g-6 lg:gx-10 lg:gy-8 xl:gy-9">
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<div class="px-4 py-6 xl:px-6 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-secondary-100 rotate-1">
<span class="text-gray-400 fw-semibold">%%SHCD_TEXT_t1%%</span>
<h4 class="h5 xl:h4 my-2 xl:my-3 stroke-text">%%SHCD_TEXT_t2%%</h4>
<div class="vstack gap-0 fs-5 xl:fs-4">
<span>%%SHCD_TEXT_t3%%</span>
<span>%%SHCD_TEXT_t4%%</span>
<span>%%SHCD_TEXT_t5%%</span>
<span>%%SHCD_TEXT_t6%%</span>
</div>
</div>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary -rotate-2">%%SHCD_TEXT_t7%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i4%%" style="left: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i5%%" style="left: -19.5%"/>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary rotate-2 float-end">%%SHCD_TEXT_t8%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i6%%" style="right: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i7%%" style="right: -19.5%"/>
</div>
</div>
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<div class="px-4 py-6 xl:px-6 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-secondary-100 rotate-1">
<span class="text-gray-400 fw-semibold">%%SHCD_TEXT_t9%%</span>
<h4 class="h5 xl:h4 my-2 xl:my-3 stroke-text">%%SHCD_TEXT_t10%%</h4>
<div class="vstack gap-0 fs-5 xl:fs-4">
<span>%%SHCD_TEXT_t11%%</span>
<span>%%SHCD_TEXT_t12%%</span>
<span>%%SHCD_TEXT_t13%%</span>
<span>%%SHCD_TEXT_t14%%</span>
</div>
</div>
</div>
</div>
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<div class="px-4 py-6 xl:px-6 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-secondary-100 -rotate-1">
<span class="text-gray-400 fw-semibold">%%SHCD_TEXT_t15%%</span>
<h4 class="h5 xl:h4 my-2 xl:my-3 stroke-text">%%SHCD_TEXT_t16%%</h4>
<div class="vstack gap-0 fs-5 xl:fs-4">
<span>%%SHCD_TEXT_t17%%</span>
<span>%%SHCD_TEXT_t18%%</span>
<span>%%SHCD_TEXT_t19%%</span>
<span>%%SHCD_TEXT_t20%%</span>
</div>
</div>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary -rotate-2">%%SHCD_TEXT_t21%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i8%%" style="left: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i9%%" style="left: -19.5%"/>
</div>
</div>
<div class="sm:col-4 lg:col-6 d-none sm:d-block">
<div class="panel">
<h4 class="h5 xl:h4 m-0 text-secondary rotate-2 float-end">%%SHCD_TEXT_t22%%</h4>
<img alt="victor" class="position-absolute top-0 d-none xl:d-block" src="%%SHCD_IMG_i10%%" style="right: -15.5%"/>
<img alt="victor" class="position-absolute top-0 w-40px d-none lg:d-block xl:d-none" src="%%SHCD_IMG_i11%%" style="right: -19.5%"/>
</div>
</div>
<div class="sm:col-8 lg:col-6">
<div class="roadmap-item panel" data-anime="onview: -300; translateY: [48, 0]; opacity: [0, 1]; delay: 200;">
<div class="px-4 py-6 xl:px-6 xl:py-8 border border-2 border-black contrast-shadow-md text-black bg-secondary-100 rotate-1">
<span class="text-gray-400 fw-semibold">%%SHCD_TEXT_t23%%</span>
<h4 class="h5 xl:h4 my-2 xl:my-3 stroke-text">%%SHCD_TEXT_t24%%</h4>
<div class="vstack gap-0 fs-5 xl:fs-4">
<span>%%SHCD_TEXT_t25%%</span>
<span>%%SHCD_TEXT_t26%%</span>
<span>%%SHCD_TEXT_t27%%</span>
<span>%%SHCD_TEXT_t28%%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SHCD_FRAGMENT;
