@@include('../blocks/head.html', { "classname": "sticky" })
<div class="hero-about">
   <div class="hero-about__wrapper">
      <div class="container">
         <div class="hero-about__body">
            <div class="hero-about__breadcrumbs">
               <div class="bredcrumbs">
                  <div class="bredcrumbs__body">
                     <div class="bredcrumbs__list">
                        <a href="##" class="bredcrumbs__item text">Главная</a>
                        <span class="bredcrumbs__item text">
                           <svg
                              width="11"
                              height="11"
                              viewBox="0 0 11 11"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                           >
                              <path
                                 d="M4.89556 0.357422L10 5.35742L4.89556 10.3574M10 5.35742L-1.49012e-07 5.35742"
                                 stroke="white"
                              />
                           </svg>
                        </span>
                        <a href="##" class="bredcrumbs__item text">О нас</a>
                        <span class="bredcrumbs__item text">
                           <svg
                              width="11"
                              height="11"
                              viewBox="0 0 11 11"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                           >
                              <path
                                 d="M4.89556 0.357422L10 5.35742L4.89556 10.3574M10 5.35742L-1.49012e-07 5.35742"
                                 stroke="white"
                              />
                           </svg>
                        </span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="hero-about__left">
               <h1 class="h1 hero-about__h1 w-50">Об агентстве</h1>
               <div class="hero-about__descr hero-section-text w-50">
                  АртПикник – ваш заботливый партнер, специалист по корпоративным мероприятиям, в уровне которых вы
                  будете уверены!
               </div>
               <div class="hero-about__actions w-50">
                  <button class="hero-about__btn btn">Оставить заявку</button>
                  <a href="" class="hero-about__link arrow-link">
                     <span class="arrow-link__arrow">
                        <img src="../../icons/header/arraw.svg" alt="" />
                     </span>
                     <span class="arrow-link__text">смотреть кейсы</span>
                  </a>
               </div>
               <div class="hero-about__logos">
                  <div class="hero-about__logos-title text">Работаем с лучшими:</div>
                  <div class="hero-about__logos-list">
                     <div class="hero-about__logos-item">
                        <img src="../../images/logos/g-2.png" alt="" />
                     </div>
                     <div class="hero-about__logos-item">
                        <img src="../../images/logos/g-1.png" alt="" />
                     </div>

                     <div class="hero-about__logos-item">
                        <img src="../../images/logos/g-3.png" alt="" />
                     </div>
                     <div class="hero-about__logos-item">
                        <img src="../../images/logos/g-1.png" alt="" />
                     </div>

                     <div class="hero-about__logos-item">
                        <img src="../../images/logos/g-3.png" alt="" />
                     </div>
                  </div>
               </div>
            </div>
            <div class="hero-about__right">
               <div class="hero-about__image">
                  <picture>
                     <source media="(min-width: 1440px)" srcset="../../images/about/about-1440.png" />
                     <source media="(min-width: 1024px)" srcset="../../images/about/about-1200.png" />
                     <img src="../../images/about/about-360.png" alt="" />
                  </picture>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<section class="about-slider-descr section">
   <div class="about-slider-descr__wrapper">
      <div class="container">
         <div class="about-slider-descr__body">
            <div class="about-slider-descr__text">
               <h2 class="about-slider-descr__h2 h2">Кто мы?</h2>
               <p class="about-slider-descr__subtitle h2-text-heading">
                  Наш путь начался <br />
                  в далеком 2003 году
               </p>
               <p class="about-slider-descr__descr">
                  За это время мы провели не одну сотню мероприятий — начиная с Дней рождении и заканчивая спортивными
                  фестивалями и государственными праздниками. Нами было придумано множество различных уникальных и
                  эксклюзивных проектов, которые мы решили собрать в одном месте и поделиться ими с Вами.
               </p>
               <div class="about-slider-descr__advs">
                  <div class="about-slider-descr__adv-item">
                     <div class="num">20+</div>
                     <div class="text">Лет в организации мероприятий</div>
                  </div>
                  <div class="about-slider-descr__adv-item">
                     <div class="num">150+</div>
                     <div class="text">Релизованных форматов мероприятий</div>
                  </div>
                  <div class="about-slider-descr__adv-item">
                     <div class="num">9170</div>
                     <div class="text">Мероприятий реализовано за 2025</div>
                  </div>
                  <div class="about-slider-descr__adv-item">
                     <div class="num">2000</div>
                     <div class="text">Максимальное число гостей на мероприятии</div>
                  </div>
               </div>
            </div>
            <div class="about-slider-descr__slider">
               <div class="text-image-slider swiper">
                  <div class="swiper-wrapper">
                     <div class="text-image-slider__slide swiper-slide">
                        <img src="../../images/about/team.jpg" alt="" />
                     </div>
                     <div class="text-image-slider__slide swiper-slide">
                        <img src="../../images/about/team.jpg" alt="" />
                     </div>
                     <div class="text-image-slider__slide swiper-slide">
                        <img src="../../images/about/team.jpg" alt="" />
                     </div>
                  </div>
                  <div class="text-image-slider__pagination slider-pagination"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<div class="section showreel">
   <div class="showreel__wrapper">
      <div class="container">
         <div class="showreel__body">
            <div class="showreel__top">
               <h2 class="showreel__h2 h2">шоурил</h2>
               <p class="showreel__subtitle h2-text-heading">
                  Посмотрите, как ярко и эффектно мы организуем ваши мероприятия
               </p>
            </div>
            <div class="showreel__video text-media__video">
               <img src="../../images/about/showreel.png" alt="" />
               <a
                  data-type="video"
                  href="https://vkvideo.ru/video-60044904_456239151"
                  class="play glightbox-video-service"
                  aria-label="Смотреть видео"
               ></a>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="section advantages">
   <div class="container">
      <div class="advantages__wrapper">
         <div class="advantages__subtitle h2">Преимущества</div>
         <h2 class="advantages__title h2-text-heading">почему с нами легко, просто и эффективно</h2>
         <div class="advantages__body">
            <div class="advantages__main adv-main">
               <div class="adv-main__body">
                  <div class="adv-main__item">
                     <div class="adv-main__bg">
                        <picture>
                           <source
                              media="(min-width: 1400px)"
                              srcset="../../images/adv/adv-1400.jpg"
                              type="image/webp"
                           />
                           <source
                              media="(min-width: 1200px)"
                              srcset="../../images/adv/adv-1200.jpg"
                              type="image/webp"
                           />
                           <source
                              media="(min-width: 1024px)"
                              srcset="../../images/adv/adv-1024.jpg"
                              type="image/webp"
                           />
                           <source media="(min-width: 768px)" srcset="../../images/adv/adv-768.jpg" type="image/webp" />
                           <img src="../../images/adv/adv.jpg" alt="" />
                        </picture>
                     </div>
                     <div class="adv-main__content">
                        <div class="adv-main__title">Персональный менеджер и кураторская команда</div>
                        <p class="adv-main__text text">
                           Индивидуальный подход и оперативная коммуникация по всем вопросам
                        </p>
                     </div>
                  </div>
                  <div class="adv-main__item">
                     <div class="adv-main__bg">
                        <picture>
                           <source
                              media="(min-width: 1400px)"
                              srcset="../../images/adv/adv2-1400.jpg"
                              type="image/webp"
                           />
                           <source
                              media="(min-width: 1200px)"
                              srcset="../../images/adv/adv2-1200.jpg"
                              type="image/webp"
                           />
                           <source
                              media="(min-width: 1024px)"
                              srcset="../../images/adv/adv2-1024.jpg"
                              type="image/webp"
                           />
                           <source
                              media="(min-width: 768px)"
                              srcset="../../images/adv/adv2-768.jpg"
                              type="image/webp"
                           />
                           <img src="../../images/adv/adv2.jpg" alt="" />
                        </picture>
                     </div>
                     <div class="adv-main__content">
                        <div class="adv-main__title">Обмен документами по ЭДО</div>
                        <p class="adv-main__text text">
                           Индивидуальный подход и оперативная льный подход и оперативная льный подход и оперативная
                           коммуникация по всем вопросам
                        </p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="advantages__features features">
               <div class="features__list">
                  <div class="features__item">
                     <div class="features__icon"><img src="../../icons/adv/adv-i.svg" alt="" /></div>
                     <h4 class="features__title">Прозрачный юридический контракт с фиксацией всех договоренностей</h4>
                     <p class="features__text text">
                        Работаем с документацией по стандартам клиента: от договоров до актов и спецификаций
                     </p>
                  </div>
                  <div class="features__item">
                     <div class="features__icon"><img src="../../icons/adv/adv-i2.svg" alt="" /></div>
                     <h4 class="features__title">Продуманная эстетика события</h4>
                     <p class="features__text text">Визуал, который усиливает имидж</p>
                  </div>
                  <div class="features__item">
                     <div class="features__icon"><img src="../../icons/adv/adv-i.svg" alt="" /></div>
                     <h4 class="features__title">Служба сервиса и заботы</h4>
                     <p class="features__text text">
                        Работаем с документацией по стандартам клиента: от договоров до актов и спецификаций
                     </p>
                  </div>
                  <div class="features__item">
                     <div class="features__icon"><img src="../../icons/adv/adv-i2.svg" alt="" /></div>
                     <h4 class="features__title">Надежность и предсказуемость на всех этапах</h4>
                     <p class="features__text text">
                        Работаем с документацией по стандартам клиента: от договоров до актов и спецификаций
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<section class="section team">
   <div class="team__wrapper">
      <div class="container">
         <div class="team__body">
            <h2 class="team__h2 h2">Команда</h2>
            <p class="team__subtitle h2-text-heading">талантливые люди, которые организуют ваш лучший ивент</p>
            <div class="team__slider-controls">
               <div class="team__slider-nav slider-btns">
                  <div class="team-slider__btn-prev slider-btn slider-btn--prev"></div>
                  <div class="team-slider__btn-next slider-btn slider-btn--next"></div>
               </div>
               <div class="team__slider-pag">
                  <div class="team-slider__pagination slider-pagination"></div>
               </div>
            </div>
            <div class="team-slider swiper">
               <div class="swiper-wrapper">
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
                  <div class="team-slider__slide swiper-slide">
                     <div class="team-slider__img">
                        <img src="../../images/about/mem.jpg" alt="" />
                     </div>
                     <div class="team-slider__name h5">Иван Иванов</div>
                     <div class="team-slider__post text">Генеральный директор</div>
                  </div>
               </div>
            </div>
            <a href="" class="team__link arrow-link">
               <span class="arrow-link__arrow">
                  <img src="../../icons/header/arraw.svg" alt="" />
               </span>
               <span class="arrow-link__text">загрузить еще</span>
            </a>
         </div>
      </div>
   </div>
</section>

@@include('../blocks/footer.html')