{extends file="includes/layout.html"}

{block name="styles"}
<link href="{$templates_dir}css/page-home.min.css?{$global_version}" rel="stylesheet">
{/block}

{block name="main"}
<div role="main" class="main home-page" id="main">


    <section class="section-main-banner">
        <div class="swiper main-banner" id="main-banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="main-banner__img">
                        {* data-mobile trzeba podać ścieżkę dla mobila *}
                        {*
                        data-mobile="http://pm.atomagency.pl/templates/primavera2025/img/PRIMAVERA_BG_450x690_v4.mp4"
                        data-desktop="http://pm.atomagency.pl/templates/primavera2025/img/PRIMAVERA_BG_1920x760_v4.mp4"
                        *}
                        <video muted autoplay loop preload="auto">
                            <source
                                src="{$homepage->homepage_main_baner_video_mobile->getMain()}"
                                type="video/mp4" media="(max-width: 768px)">
                            <source
                                src="{$homepage->homepage_main_baner_video->getMain()}"
                                type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    <div class="main-banner__showcase">
                        <p>{$homepage->homepage_main_baner_title}</p>
                        <img data-src="{image f=$homepage->homepage_main_baner_image->getMain() w=655 h=201 r=path m=cr}" alt="{$homepage->homepage_main_baner_image->getMain('alt')}"
                            class="img-fluid lazy" width="655" height="201">
                        <p>{$homepage->homepage_main_baner_text|nl2br}</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            {include file="includes/components/swiper-button-prev.html"}
            {include file="includes/components/swiper-button-next.html"}
        </div>
    </section>

    {include file="includes/sections/products-carousel.html"}

    {include file="includes/sections/info-banner-carousel.html"}


    <section class="layers-earth">
        <div class="layers-earth__text">
            <div class="content">
                <img data-src="{image f=$homepage->homepage_about_image->getMain() w=433 h=173 r=path m=cr}" alt="{$homepage->homepage_about_image->getMain('alt')}" class="img-fluid lazy">
                <p class="lead">{$homepage->homepage_about_text|nl2br}</p>
                <a href="{seoLink id_element=1596 withParent=1}" class="btn btn--blue-medium">{$homepage->homepage_about_button}</a>
            </div>
        </div>
        <div class="layers-wrapper">
            <a href="#layer-1" class="layer layer-1">
                <!-- <div class="layer-desc">
                    <h5>Czwartorzęd</h5>
                    <p>pospółki żwirowe <br> i oponki wapniste</p>
                </div> -->
            </a>
            <a href="#layer-2" class="layer layer-2">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_1_title}</h5>
                    <p>{$homepage->homepage_about_layer_1_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-3" class="layer layer-3 ">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_2_title}</h5>
                    <p>{$homepage->homepage_about_layer_2_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-4" class="layer layer-4">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_3_title}</h5>
                    <p>{$homepage->homepage_about_layer_3_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-5" class="layer layer-5 active">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_4_title}</h5>
                    <p>{$homepage->homepage_about_layer_4_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-6" class="layer layer-6">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_5_title}</h5>
                    <p>{$homepage->homepage_about_layer_5_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-7" class="layer layer-7">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_6_title}</h5>
                    <p>{$homepage->homepage_about_layer_6_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-8" class="layer layer-8">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_7_title}</h5>
                    <p>{$homepage->homepage_about_layer_7_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-9" class="layer layer-9">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_8_title}</h5>
                    <p>{$homepage->homepage_about_layer_8_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-10" class="layer layer-10">
                <div class="layer-desc">
                    <h5>{$homepage->homepage_about_layer_9_title}</h5>
                    <p>{$homepage->homepage_about_layer_9_subtitle|nl2br}</p>
                </div>
            </a>
            <a href="#layer-11" class="layer layer-11">
                <div class="layer-desc-last">
                    <h5>{$homepage->homepage_about_source}</h5>
                    <p>{$homepage->homepage_about_depth}</p>
                </div>
            </a>
            <div class="layer-hand">
                <img src="{$templates_dir}img/layers/hand.png" alt="" width="33" height="55">
                <p>{$homepage->homepage_about_click|nl2br}</p>
            </div>
        </div>
    </section>

    {include file="includes/sections/blog-carousel.html"}

    {include file="includes/sections/about-us-banner.html"}

    {include file="includes/sections/IG-carousel.html"}

    {include file="includes/sections/calculator-act.html"}


</div>
{/block}

{block name="scripts"}
<script src="{$templates_dir}js/page-home.min.js?{$global_version}"></script>
{/block}