<%- include('partials/header') %>

    <div class="slider-top">
        <div class="container marketing">
            <div class="row featurette" dir="ltr">
                <div class="col-md-7 text-slider-cus text-cus">
                    <h2 class="featurette-heading fw-normal lh-sm" data-i18n="slider.text.header.title"></h2>
                    <div class="lead">
                        <p data-i18n="slider.text.header.titr.p1"></p>
                        <p data-i18n="slider.text.header.titr.p2"></p>
                        <p data-i18n="slider.text.header.titr.p3"></p>
                        <p data-i18n="slider.text.header.titr.p4"></p>
                    </div>
                    <br>
                    <div class="slider-btn-group">
                        <div class="d-flex">
                            <a class="btn btn-bd-primary" style="width: 100%;" data-i18n="slider.text.btn1"></a>
                        </div>
                        <div class="d-flex">
                            <a href="https:/karlancer.com/profile/417340" class="btn btn-bd-primary"
                                data-i18n="slider.text.btn2"></a>
                            <a href="/products" class="btn btn-outline-secondary-cus" data-i18n="slider.text.btn3"></a>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 bg-image-slider-cus">
                    <%- sliderImage %>
                </div>
            </div>
        </div>
    </div>

    <div class="carousel-cus services-carousel d-flex mt-3" data-item="1">
        <%- carouselBanner %>
            <div class="carousel-inner-cus d-flex mt-3">
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.1"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.2"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.3"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.4"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.5"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.6"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.7"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.8"></div>
                <div class="carousel-item-cus" data-i18n="service.carousel.item.titr.9"></div>
            </div>
    </div>
    <a href="/plugin">
        <%- pluginsBanner %>
            <%- pluginsMobileBanner %>
    </a>
    <div class="box product-box mt-3 mb-3" data-item="1">
        <div class="box-header-cus pb-2 pt-2"><i class="icon fa-utility-fill fa-semibold fa-fire"
                aria-hidden="true"></i><span data-i18n="plugins.slider.header.titr"></span></div>
        <div class="box-body-cus d-flex w-100">
            <%- pluginsCarousel %>
        </div>
    </div>
    <a href="/theme">
        <%- ThemesBanner %>
            <%- ThemesMobileBanner %>
    </a>
    <div class="box product-box mt-3 mb-3" data-item="1">
        <div class="box-header-cus pb-2 pt-2"><i class="icon fa-utility-fill fa-semibold fa-fire"
                aria-hidden="true"></i><span data-i18n="theme.slider.header.titr"></span></div>
        <div class="box-body-cus d-flex w-100">
            <%- themeCarousel %>
        </div>
    </div>
    <a href="/blog">
        <%- blogBanner %>
        <%- blogMobileBanner %>
    </a>
    <div class="box product-box mt-3 mb-3" data-item="1">
        <div class="box-header-cus pb-2 pt-2"><i class="icon fa-utility-fill fa-semibold fa-fire"
                aria-hidden="true"></i><span data-i18n="blog.slider.header.title"></span></div>
        <div class="box-body-cus d-flex w-100">
            <%- blogCarousel %>
        </div>
    </div>
    <%- include('partials/footer') %>