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

{% block title %}
    <title>Brand Show – konferencje online i eventy hybrydowe</title>
    <meta name="description" content="Zaplanuj swój event w przestrzeni online w zewnętrznym studio lub w swojej sali konferencyjnej. My zadbamy w wszelkie nowe technologie, kreatywne rozwiązania i produkcję." />
{% endblock %}

{% block body %}


    <section class="position-relative bg-dark overflow-hidden">
        <div class="fonthead">
            INSPIRUJĄCE WYDARZENIA ONLINE ORAZ HYBRYDOWE
        </div>

        <div class="swiper-container swiper-classic" style="height:500px;">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url('/images/digital.jpg')">
                    <div class="position-absolute start-0 top-0 w-100 h-100 "
                         style="background-color: transparent;
background-image: linear-gradient(180deg, #495FA4 1%, #31C2FB 63%);
opacity: 0.77;
mix-blend-mode: multiply;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;"></div>

                </div>
            </div>
        </div>

        <svg class="w-100 text-white position-absolute start-0 bottom-0 z-index-fixed" height="48" fill="#d5e7ef"
             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-dark" style="background-color: #d5e7ef;">
        <div class="container py-9 py-lg-11 position-relative z-index-1">

            <div class="text-center mb-10" style="font-size:21px;">
                Doświadczenie zdobyte w skomplikowanych realizacjach offline procentuje w trakcie wszelkiego rodzaju wydarzeń hybrydowych lub realizowanych całkowicie online.
                Własne studio, dedykowane e-rozwiązania, kilka ekip realizacyjnych, najlepsi graficy, to gwarancja sprawnej produkcji wirtualnych wydarzeń, nawet w bardzo krótkim czasie.
                <br/>Serdecznie zapraszamy do współpracy.
            </div>


            <div class="row mb-5">
                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z3.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Konferencje online</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Organizowane dla pracowników lub dla partnerów biznesowych. Charakteryzuje je dynamiczny scenariusz, nowoczesna prezentacja często wykorzystująca rozwiązania 3D, precyzyjnie przekazana treść merytoryczna oraz elementy interakcji.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z3.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Eventy hybrydowe</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Połączenie świata rzeczywistego z wirtualnym. Prawdziwa scenografia i technika eventowa zbudowana w studio lub sali konferencyjnej Klienta oraz streaming dzięki któremu poszerzamy zasiąg wydarzenia.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z3.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Spotkania motywacyjne online</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Inspirujący mówca, piękna prezentacja, a w niej ponadto wiele istotnych zagadnień zgodnych z filozofią firmy, które komunikujemy w trakcie wydarzenia online lub hybrydowego.
                            </p>
                        </div>
                    </div>
                </div>
            </div>



            <div class="row mb-5">
                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z3.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Integracja online</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Jasno określony cel oraz zasady gry lub warsztatów. Uczestnicy działający w drużynach lub indywidulanie. Mający do zrobienia coś tu i teraz lub dysponujący czasem na wykonanie określonego zadania.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z4.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Kampanie online</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Z naszym partnerem kooki.To przeprowadzamy wielokanałowe kampanie online, optymalizując je 24/7. Wykorzystujemy najnowsze technologie i możliwości, jakie daje digital. Wyniki kampanii są raportowane za pomocą przystępnych raportów online
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-10 offset-lg-0 offset-1 mb-4">
                    <div class="card card-body hover-shadow-lg hover-lift h-100 p-7">
                        <div class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <div class="position-relative overflow-hidden flex-center width-8x height-6x p-3">
                                <img src="/images/z4.png" alt="" class="w-100 h-auto">
                            </div>
                        </div>
                        <div>
                            <a href="#!" class="d-block text-dark h5 mb-3 text-center text-lg-start">Grywalizacja</a>
                            <p style="font-family: Montserrat, Sans-serif;font-size: 14px;font-weight: 300;" class="text-center text-lg-start">
                                Kampania reklamowa skierowana do odpowiedniej grupy docelowej, indywidualnie dobrany scenariusz i dedykowany system grywalizacyjny pozwalają zmaksymalizować przyrost liczby uczestników, ich zaangażowania i lojalności, a dzięki temu szybko osiągnąć założone cele biznesowe.
                            </p>
                        </div>
                    </div>
                </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="#020024"
                 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>
    <section class="position-relative hr-linear-bottom text-dark" style="background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(64,84,178,1) 100%, rgba(0,212,255,1) 100%);">



        <div class="container py-9 py-lg-11 position-relative z-index-1 text-light">
            <div class="row">
                <div class="col-lg-6 col-12 text-center text-lg-start mb-4">
                    <h1 style="font-family: 'Varela Round', Sans-serif;
                    font-size: 45px;
                    font-weight: 300;
                    line-height: 1.2em;">Potrzebny przepis na projekt idealny?</h1>
                    <h2 class="mb-5 mt-5" style="font-family: 'Montserrat', Sans-serif;
                    font-size: 20px;
                    font-weight: 400;">Sprawdź nas</h2>
                    <a href="{{ path('kontakt') }}" class="btn btn-danger rounded-5">Napisz do nas &nbsp; <i class="bx bx-right-arrow-alt fs-3"></i></a>
                </div>
                <div class="col-0 col-lg-1"> </div>
                <div class="col-lg-5 col-10 offset-lg-0 offset-sm-1 offset-md-1 offset-1 text-center text-lg-start">
                    <div class="card-over rounded-3 overflow-hidden">
                        <img src="/images/napisz_do_nas.jpg" alt="Napisz do nas" class="img-fluid img-zoom">
                    </div>
                </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>
    <!--/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", {
            slidesPerView: 1, spaceBetween: 0,
            loop: true, autoplay: {delay: 2500},
            speed: 1000,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },

        });
    </script>

{% endblock %}