Untitled

<main id="main-content">
    <!>ASSET<!>
    <!>ASSET TYPE:HPCAROUSEL<!>
    <div class="container full-slider">
        <!-- Slider main container -->
        <div id="homepage-slider" class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!>ASSET ELEMENT<!>
                <div class="swiper-slide" data-slide-title="<<ASSET.DESCRIPTION>>">
                    <a href="<<ASSET.URL>>">
                        <picture>
                            <source srcset="<<ASSET.WEBP>>" data-srcset="<<ASSET.WEBP>>" type="image/webp">
                            <source srcset="<<ASSET.IMAGE>>" data-srcset="<<ASSET.IMAGE>>" type="image/jpeg">
                            <img src="<<ASSET.IMAGE>>" data-src="<<ASSET.IMAGE>>" alt="<<ASSET.DESCRIPTION>>" class="block w-full lazyload">
                        </picture>
                    </a>
                </div>
                <!>ASSET ELEMENT<!>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <!>ASSET<!>

    <!>ASSET<!>
    <!>ASSET TYPE:HPDOUBLECTA<!>
    <div class="container grid md:flex flex-col md:flex-row" id="hp-double-cta-wrap">
        <!>ASSET ELEMENT<!>
        <div class="flex-auto">
            <a href="<<ASSET.URL>>" class="block">
                <picture>
                    <source srcset="<<ASSET.WEBP>>" data-srcset="<<ASSET.WEBP>>" type="image/webp">
                    <source srcset="<<ASSET.IMAGE>>" data-srcset="<<ASSET.IMAGE>>" type="image/jpeg">
                    <img src="<<ASSET.IMAGE>>" data-src="<<ASSET.IMAGE>>" alt="<<ASSET.DESCRIPTION>>" class="block w-full lazyload">
                </picture>
            </a>
        </div>
        <!>ASSET ELEMENT<!>
    </div>
    <!>ASSET<!>

    <!>ASSET<!>
    <!>ASSET TYPE:HPTRIPLECTA<!>
    <div class="container grid md:flex flex-col md:flex-row" id="hp-triple-cta-wrap">
        <!>ASSET ELEMENT<!>
        <div class="flex-auto relative">
            <a href="<<ASSET.URL>>" class="block">
                <picture>
                    <source srcset="<<ASSET.WEBP>>" data-srcset="<<ASSET.WEBP>>" type="image/webp">
                    <source srcset="<<ASSET.IMAGE>>" data-srcset="<<ASSET.IMAGE>>" type="image/jpeg">
                    <img src="<<ASSET.IMAGE>>" data-src="<<ASSET.IMAGE>>" alt="<<ASSET.DESCRIPTION>>" class="block w-full lazyload">
                </picture>
            </a>
            <<ASSET.LONG.DESCRIPTION>>
        </div>
        <!>ASSET ELEMENT<!>
    </div>
    <!>ASSET<!>

    <!>ASSET<!>
    <!>ASSET TYPE:HPPOPULARCAT<!>
    <div class="container">
        <h3 id="popular-categories-title" class="h1 text-center">Popular Categories</h3>
    </div>
    <div class="container grid gap-y-4 mb-9 grid-cols-2 md:grid-cols-4" id="hp-featured-categories">
        <!>ASSET ELEMENT<!>
        <div class="flex-auto relative group">
            <div class="bg-blue-400">
                <a href="<<ASSET.URL>>" class="block group-hover:opacity-80 transition-opacity">
                    <picture>
                        <source srcset="<<ASSET.WEBP>>" data-srcset="<<ASSET.WEBP>>" type="image/webp">
                        <source srcset="<<ASSET.IMAGE>>" data-srcset="<<ASSET.IMAGE>>" type="image/jpeg">
                        <img src="<<ASSET.IMAGE>>" data-src="<<ASSET.IMAGE>>" alt="<<ASSET.DESCRIPTION>>" class="block w-full lazyload">
                    </picture>
                </a>
            </div>
            <a href="<<ASSET.URL>>" class="block no-underline">
                <span class="block text-center h2 no-underline mb-0 mt-2">
                    <<ASSET.DESCRIPTION>>
                </span>
            </a>
        </div>
        <!>ASSET ELEMENT<!>
    </div>
    <!>ASSET<!>

    <!>ASSET<!>
    <!>ASSET TYPE:COMPINFO<!>
    <div class="container gap-8 mb-8 text-center">
        <div class="text-center mx-auto" id="hp-about-wrap">
            <!>ASSET ELEMENT<!>
            <h2 class="h1 text-blue-400" id="hp-about-title"><<ASSET.DESCRIPTION>></h2>
            <<ASSET.LONG.DESCRIPTION>>
            <!>ASSET ELEMENT<!>
        </div>
    </div>
    <!>ASSET<!>
</main>