{% extends 'front/base_front.html.twig' %}
{% block body %}

    <section class="position-relative bg-dark overflow-hidden" style="">

        <div data-aos="zoom-in" data-aos-duration="800" data-aos-delay="1800"
             class="fonthead ">
            <div class="">Dobre relacje zbudujesz na emocjach i zaufaniu

            </div>

            <div style="width:20%;height:10%;float:right; margin-right:27%; margin-top:-5.5%;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none" stroke="#FF4B7F" fill="none" stroke-width="5">
                    <path class="path" d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7"></path>
                </svg>
            </div>


        </div>





        <div class="swiper-container swiper-classic">
            <div class="swiper-wrapper">
                {% for s in slajdy %}
                    <div class="swiper-slide" style="background-image:url('{{ s.foto }}')">
                        <div class="bg-dark position-absolute start-0 top-0 w-100 h-100 opacity-25"></div>
                    </div>
                {% endfor %}
            </div>
        </div>

        <svg class="w-100 text-white position-absolute start-0 bottom-0 z-index-fixed" height="48" fill="#001c38"
             preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"
             style="transform: rotate(180deg) scaleX(-1);">
            <path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54
     16.88 218.2 35.26 69.27 18 138.3 24.88 209.4
     13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25"/>
            <path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15
      60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39
      62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85
      113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5"/>
            <path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63
    112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z"/>
        </svg>
    </section>
    <!--/.Slider end-->

    <section class="position-relative hr-linear-bottom text-light" style="background-color: #001c38;">
        <div class="container py-9 py-lg-11 position-relative z-index-1 text-center">

            <!-- Nav -->
            <ul class="mb-5 nav nav-pills d-inline-flex align-items-center mb-0 justify-content-center">

                {% for e in eventy %}
                    <li class="m-0 p-0">
                        <a class="nav-link py-1 px-3 px-lg-3" href="#"
                           data-bs-toggle="pill"
                           data-filter=".d{{ e.slug }}" data-bs-target="#d{{ e.slug }}">
                            {{ e.nazwa }}
                        </a>
                    </li>
                {% endfor %}

            </ul>

            <div id="projects" data-isotope='{"layoutMode": "masonry","filter":".d1-basf"}' class="row">

                {% for e in eventy %}
                    {% for f in e.galeria %}

                        <div class="col-md-6 col-lg-3 mb-3 d{{ e.slug }} grid-item ">

                            <a href="/uploads/event/{{ e.id }}/{{ f.name }}"
                               class="text-white bg-dark position-relative d-block overflow-hidden card-hover-2 rounded-4 glightbox3"
                               data-glightbox data-gallery="gallery0">
                                <img src="/uploads/event_thumb/{{ e.id }}/{{ f.name }}" alt="" class="w-100 img-zoom">

                            </a>
                        </div>

                    {% endfor %}
                {% endfor %}


            </div>
        </div>

        <svg class="w-100 text-white position-absolute start-0 bottom-0 z-index-fixed" height="48" fill="#31c2fb"
             preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"
             style="transform: rotate(180deg) scaleX(-1);">
            <path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54
     16.88 218.2 35.26 69.27 18 138.3 24.88 209.4
     13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25"/>
            <path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15
      60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39
      62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85
      113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5"/>
            <path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63
    112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z"/>
        </svg>
    </section>
    <!--/section-->


    <section class="position-relative hr-linear-bottom text-dark" style="background-color: #31c2fb;">
        <div class="container py-9 py-lg-11 position-relative z-index-1">

            <h1 class="text-center mb-10">Firma w liczbach:</h1>

            <div class="row">
                {% for l in liczniki %}
                    <div class="col-lg-4 col-8 offset-lg-0 offset-2 mb-4">
                        <div class="overflow-hidden py-5 rounded-4 hover-lift
                               hover-shadow-lg flex-row align-items-stretch h-100 " style="background-color: rgba(255,255,255,0.7);">
                            <div class="flex-grow-1" >
                                <!--Countup-->
                                <h1 data-countup='{"startVal": 0,"separator":" "}' data-to="{{ l.wartosc }}" data-aos
                                    data-aos-id="countup:in"
                                    class="display-4 fw-normal text-black text-center f-s-60">0</h1>
                                <!--text-->
                                <h3 class="text-center fw-lighter fs-5">
                                    {{ l.nazwa }}
                                </h3>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <h1 class="text-center mt-10 mb-5">Klienci</h1>


            <div class="swiper-container overflow-hidden swiper-thumbs-thumbnails" id="logos">
                <div class="swiper-wrapper text-center">
                    {% for k in klienci %}
                        <div class="swiper-slide" >
                            <img class="img-fluid" src="{{ k.foto }}" style="vertical-align: middle;">
                        </div>
                    {% endfor %}
                </div>
            </div>




        </div>

        <div class="position-relative" style="height:48px;">
            <svg class="w-100 text-white position-absolute start-0 bottom-0 z-index-fixed" height="48" fill="#001c38"
                 preserveAspectRatio="none" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"
                 style="transform: rotate(180deg) scaleX(-1);">
                <path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54
     16.88 218.2 35.26 69.27 18 138.3 24.88 209.4
     13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25"/>
                <path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15
      60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39
      62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85
      113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5"/>
                <path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63
    112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z"/>
            </svg>
        </div>

    </section>





{% endblock %}

{% block js %}

    <!--Swiper slider-->
    <script src="/main/assets/vendor/node_modules/js/swiper-bundle.min.js"></script>
    <script>



        var swiperClassic = new Swiper(".swiper-classic", {
            height: 800,
            slidesPerView: 1, spaceBetween: 0,
            loop: true, autoplay: {delay: 2500},
            speed: 1000,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },

        });

        var swiperClassic = new Swiper("#logos", {
            height: 100,
            slidesPerView: 4, spaceBetween: 0,
            breakpoints: {
                // when window width is >= 320px
                320: {
                    slidesPerView: 2,

                },
                // when window width is >= 480px
                480: {
                    slidesPerView: 3,

                },
                // when window width is >= 640px
                640: {
                    slidesPerView: 4,

                }
            },
            loop: true, autoplay: {delay: 2500},
            speed: 1000,
            effect: 'slide',


        });
    </script>

{% endblock %}