templates/about_us/index.html.twig line 1

Open in your IDE?
  1. {% extends 'nav.html.twig' %}
  3. {% block content %}
  4.     <div class="container" style="padding-top: 6rem; max-width: 1400px;">
  5.         <section id="aboutUsMainSection">
  6.             <div class="px-4 text-center">
  7.                 <h1 class="display-5 fw-bold">О нас</h1>
  8.                 <div class="col-lg-12 mx-auto">
  9.                     <p class="lead mb-4">{{ data.content }}</p>
  10.                     <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
  11.                         <a href="/shop" class="btn btn-primary btn-lg px-4 me-sm-3" style="margin-right: 1.5rem">Перейти в магазин</a>
  12.                         <a class="btn btn-outline-secondary btn-lg px-4" style="margin-right: 1.5rem" {% if app.user %} onclick="showAskQuestionModal()" {% else%} href="/login" {% endif %}>Задать вопрос</a>
  13.                         {% if is_granted("ROLE_ADMIN") %}
  14.                             <a class="btn btn-outline-secondary btn-lg px-4" onclick="showEditModal()">Изменить</a>
  15.                         {% endif %}
  16.                     </div>
  17.                 </div>
  18.             </div>
  19.         </section>
  21.         <h2 class="pb-2" style="border-bottom: 1px solid #bdbdbd !important">Плюсы</h2>
  22.         <div class="row g-4 py-5 row-cols-1 row-cols-lg-3" style="padding-top: 0 !important;">
  23.             <div class="feature col" style="flex: 0 0 auto; width: 33%; position: static">
  24.                 <div class="feature-icon bg-primary">
  25.                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
  26.                         <path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>
  27.                     </svg>
  28.                 </div>
  29.                 <h2>Бесплатная доставка</h2>
  30.                 <p>Мы ценим наших клиентов и стараемся сделать их покупки максимально комфортными. Поэтому мы предоставляем бесплатную доставку на все заказы, независимо от их стоимости.</p>
  31.             </div>
  32.             <div class="feature col" style="flex: 0 0 auto; width: 33%; position: static">
  33.                 <div class="feature-icon bg-primary ">
  34.                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
  35.                         <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
  36.                     </svg>
  37.                 </div>
  38.                 <h2>Индивидуальный подход к вашему заказу</h2>
  39.                 <p>Наша площадка - это не просто место для покупки товаров, это место для общения и взаимодействия. Мы стараемся максимально учесть пожелания и предпочтения каждого клиента, предоставляя индивидуальный подход к каждому заказу</p>
  40.             </div>
  41.             <div class="feature col" style="flex: 0 0 auto; width: 33%; position: static">
  42.                 <div class="feature-icon bg-primary">
  43.                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
  44.                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
  45.                     </svg>
  46.                 </div>
  47.                 <h2>- А минусы будут?</h2>
  48.                 <p>- Нет.</p>
  49.             </div>
  50.         </div>
  52.         <h2 class="pb-2" style="border-bottom: 1px solid #bdbdbd !important">Контакты</h2>
  53.         <div class="row g-4 py-5 row-cols-1 row-cols-lg-3" style="padding-top: 0 !important;">
  55.             <div class="col-6 d-flex">
  56.                 <div class="feature-icon bg-primary">
  57.                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
  58.                         <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
  59.                     </svg>
  60.                 </div>
  61.                 {% set phone = data.contactPhone|replace({'+7': '8'}) %}
  62.                 {% set phone = phone|slice(0, 1) ~ '-'  ~ phone|slice(1, 3) ~ '-' ~ phone|slice(4,3) ~ '-' ~ phone|slice(7,2) ~ '-' ~ phone|slice(9,2)%}
  63.                 <h2 style="margin: 0 0 0 1rem">{{ phone }}</h2>
  64.             </div>
  66.             <div class="col-6 d-flex">
  67.                 <div class="feature-icon bg-primary">
  68.                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
  69.                         <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
  70.                     </svg>
  71.                 </div>
  72.                 <h2 style="margin: 0 0 0 1rem">{{ data.contactEmail }}</h2>
  73.             </div>
  75.         </div>
  77.         <div class="modal fade bd-example-modal-lg" id="AboutUsModal" tabindex="-1" role="dialog">
  78.             <div class="modal-dialog modal-lg" style="max-width: 1000px">
  79.                 <div class="modal-content" id="AboutUsModalContent" style="top: 100px;">
  81.                 </div>
  82.             </div>
  83.         </div>
  86.     </div>
  87. {% endblock %}
  88. {% block pagescripts %}
  89.     <script>
  91.         /**
  92.          * Открывает модальное окно изменения содержания страницы 'О нас'
  93.          */
  94.         function showEditModal() {
  95.             let url = '/about/edit'
  97.              $('#AboutUsModal').on('hidden.bs.modal', function () {
  98.                  $('#AboutUsModal').modal('hide');
  99.              });
  101.              sendPostRequest(url)
  102.                  .then(function (response) {
  103.                      $('#AboutUsModal').modal('show');
  104.                      document.getElementById('AboutUsModalContent').innerHTML = response;
  105.                  });
  106.         }
  108.         /**
  109.          * Отправляет форму изменения страницы 'О нас'
  110.          */
  111.         function submitEditPageForm() {
  112.              let url = '/about/edit';
  113.              let form = document.getElementById('editAboutUsForm');
  114.              let formData = new FormData(form);
  116.              sendPostRequest(url, formData)
  117.                  .then(function () {
  118.                      showSuccessAlert('Страница успешно изменена');
  119.                      setTimeout(function () {
  120.                          location.reload();
  121.                      }, 500);
  122.                  })
  123.         }
  125.         /**
  126.          * Открывает модальное окно 'Задать вопрос'
  127.          */
  128.         function showAskQuestionModal() {
  129.              let url = '/about/question';
  131.             $('#AboutUsModal').on('hidden.bs.modal', function () {
  132.                 $('#AboutUsModal').modal('hide');
  133.             });
  135.             sendPostRequest(url)
  136.                 .then(function (response) {
  137.                     $('#AboutUsModal').modal('show');
  138.                     document.getElementById('AboutUsModalContent').innerHTML = response;
  139.                 });
  140.         }
  142.         /**
  143.          * Отправляет форму 'Задать вопрос' на сервер
  144.          */
  145.          function submitQuestionForm() {
  146.              let url = '/about/question';
  147.              let form = document.getElementById('questionForm');
  148.              let formData = new FormData(form);
  150.              sendPostRequest(url, formData)
  151.                  .then(function () {
  152.                      showSuccessAlert('Вопрос успешно создан!');
  153.                      setTimeout(function () {
  154.                          location.reload();
  155.                      }, 500);
  156.                  })
  157.          }
  159.         /**
  160.          * Закрывает модальное окно
  161.          */
  162.         function closeModal() {
  163.              $('#AboutUsModal').modal('hide');
  164.          }
  166.     </script>
  167. {% endblock %}