From b59b94fefb856d7281a2b58688f763781bea234b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=95=D0=B2=D0=B3=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=93=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B2=D0=BA=D0=B8=D0=BD?= <mr.happy.2000@mail.ru>
Date: Thu, 22 Feb 2024 18:26:49 +0600
Subject: [PATCH] add background image and zoom for slider

---
 playground/public/logoerg.svg                 |  13 +
 src/runtime/components/Pages/TestVuetify.vue  | 212 +++++++++++++++--
 src/runtime/components/Parts/ErgVacancies.vue | 108 ++++-----
 src/runtime/components/Parts/Header/Erg.vue   | 224 ++++++++++--------
 src/runtime/components/Parts/Slider.vue       | 109 +++++++--
 5 files changed, 470 insertions(+), 196 deletions(-)
 create mode 100644 playground/public/logoerg.svg

diff --git a/playground/public/logoerg.svg b/playground/public/logoerg.svg
new file mode 100644
index 0000000..cd34114
--- /dev/null
+++ b/playground/public/logoerg.svg
@@ -0,0 +1,13 @@
+<svg width="125" height="78" viewBox="0 0 125 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo">
+<g id="Vector">
+<path d="M61.7812 69.632C61.7812 69.632 80.0661 52.4332 76.2902 33.7741C75.8563 31.6906 74.7608 23.0126 54.6749 11.6493C68.0057 16.1131 73.0265 18.6812 87.2182 14.2359C89.4216 12.6606 96.6009 11.7043 99.6303 0.0194795C100.039 -0.701133 100.623 18.7281 93.4563 32.3183C93.2495 33.0327 80.7235 55.956 66.5187 66.6134C66.0152 66.9436 61.7812 69.632 61.7812 69.632Z" fill="white"/>
+<path d="M123.057 1.83704C123.057 1.83704 103.303 17.4142 105.388 36.3075C105.633 38.4181 105.945 47.1493 124.928 60.1566C112.052 54.5878 105.813 50.7805 91.0335 54.9403C89.7454 55.9878 85.4819 56.2403 79.1126 67.9386C78.6409 68.6215 79.8035 49.231 88.1615 36.3075C88.4316 35.6138 104.164 13.2701 119.268 3.86028C119.799 3.574 123.057 1.83704 123.057 1.83704Z" fill="white"/>
+<path d="M0 37.8541C0 35.7875 0.673333 34.0675 2.02 32.6941C3.38 31.3208 5.1 30.6341 7.18 30.6341C9.32667 30.6341 11.0467 31.2542 12.34 32.4942L11.34 33.9742C10.82 33.5075 10.1867 33.1341 9.44 32.8541C8.70667 32.5742 7.98 32.4342 7.26 32.4342C5.66 32.4342 4.38667 32.9475 3.44 33.9742C2.50667 35.0008 2.04 36.2875 2.04 37.8342C2.04 39.3942 2.52 40.7141 3.48 41.7942C4.44 42.8742 5.71333 43.4142 7.3 43.4142C8.08667 43.4142 8.86 43.2542 9.62 42.9342C10.3933 42.6008 11.0667 42.1475 11.64 41.5742L12.7 42.9942C11.2067 44.4875 9.38667 45.2341 7.24 45.2341C5.09333 45.2341 3.34667 44.5342 2 43.1342C0.666667 41.7208 0 39.9608 0 37.8541Z" fill="white"/>
+<path d="M13.9648 37.8541C13.9648 35.7875 14.6382 34.0675 15.9848 32.6941C17.3448 31.3208 19.0648 30.6341 21.1448 30.6341C23.2915 30.6341 25.0115 31.2542 26.3048 32.4942L25.3048 33.9742C24.7848 33.5075 24.1515 33.1341 23.4048 32.8541C22.6715 32.5742 21.9448 32.4342 21.2248 32.4342C19.6248 32.4342 18.3515 32.9475 17.4048 33.9742C16.4715 35.0008 16.0048 36.2875 16.0048 37.8342C16.0048 39.3942 16.4848 40.7141 17.4448 41.7942C18.4048 42.8742 19.6782 43.4142 21.2648 43.4142C22.0515 43.4142 22.8248 43.2542 23.5848 42.9342C24.3582 42.6008 25.0315 42.1475 25.6048 41.5742L26.6648 42.9942C25.1715 44.4875 23.3515 45.2341 21.2048 45.2341C19.0582 45.2341 17.3115 44.5342 15.9648 43.1342C14.6315 41.7208 13.9648 39.9608 13.9648 37.8541Z" fill="white"/>
+<path d="M29.1608 44.9942V30.8741H36.9408V32.5942H31.1408V44.9942H29.1608Z" fill="white"/>
+<path d="M39.0631 44.9942V30.8741H50.1831V44.9942H48.2031V32.5942H41.0431V44.9942H39.0631Z" fill="white"/>
+<path d="M53.0269 37.8342C53.0269 35.8075 53.7269 34.1008 55.1269 32.7141C56.5269 31.3275 58.2469 30.6341 60.2869 30.6341C62.3269 30.6341 64.0402 31.3275 65.4269 32.7141C66.8269 34.1008 67.5269 35.8075 67.5269 37.8342C67.5269 39.9142 66.8269 41.6675 65.4269 43.0942C64.0402 44.5208 62.3269 45.2341 60.2869 45.2341C58.2469 45.2341 56.5269 44.5208 55.1269 43.0942C53.7269 41.6675 53.0269 39.9142 53.0269 37.8342ZM55.0669 37.8342C55.0669 39.4075 55.5735 40.7341 56.5869 41.8142C57.6002 42.8808 58.8335 43.4142 60.2869 43.4142C61.7402 43.4142 62.9669 42.8808 63.9669 41.8142C64.9802 40.7341 65.4869 39.4075 65.4869 37.8342C65.4869 36.3142 64.9802 35.0342 63.9669 33.9942C62.9669 32.9542 61.7402 32.4342 60.2869 32.4342C58.8335 32.4342 57.6002 32.9542 56.5869 33.9942C55.5735 35.0342 55.0669 36.3142 55.0669 37.8342Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
index cd531ac..45cc77b 100644
--- a/src/runtime/components/Pages/TestVuetify.vue
+++ b/src/runtime/components/Pages/TestVuetify.vue
@@ -1,20 +1,85 @@
 <template>
-  <v-app>
+  <v-app class="">
     <partsHeaderErg
       :burger="false"
     />
     <NuxtPage />
     <section class="h-100">
-      <v-container id="slider">
-        <client-only>
-          <partsSlider
-            :slides="sliderAbout"
-            :show-buttons="false"
-            slider-direction="vertical"
-            :height="'600px'"
-            :control-scroll="controlScroll"
-          />
-        </client-only>
+      <v-container id="slider" class="bg-amber px-4">
+
+        <partsSlider
+          id="slider"
+          :slides="sliderAbout"
+          :show-buttons="false"
+          slider-direction="vertical"
+          :slider-pagination-active-variant="'white'"
+          :height="'400px'"
+          :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"
+          :controlScroll="controlScroll"
+          :slider-background-image-zoom="true"
+          :slider-background-image-zoom-scale="3"
+        />
+
+
+        <partsSlider
+          :slider-loop="true"
+          :slider-container="true"
+          :slider-centered-slides="false"
+          :control-button-in-slides="true"
+          :slides="slidesSocial"
+          :height="400"
+          control-buttons-size="small"
+          control-buttons-color="white"
+          control-buttons-rounded="lg"
+          control-buttons-class="mr-2"
+          control-buttons-elevation="0"
+          control-buttons-align="left-bottom"
+          :slider-pagination="true"
+          :slider-pagination-type="'dot'"
+        />
+
+
+<!--        <partsErgVacancies-->
+<!--          sheet-rounded="xl"-->
+<!--          sheet-class="py-0 pt-10 py-md-12 px-4 px-md-8 h-100"-->
+<!--          sheet-max-height="450px"-->
+<!--          title="Станьте частью команды"-->
+<!--          sub-title="Мы предлагаем конкурентные зарплаты, социальные гарантии"-->
+<!--          title-class="text-40 text-white font-weight-semi-bold"-->
+<!--          sub-title-class="text-h5 text-white"-->
+<!--          sub-title-style="max-width: 521px"-->
+<!--          :button="{-->
+<!--            to: '/',-->
+<!--            text: 'Посмотреть вакансии',-->
+<!--            image: '/svgIcon/arrow-right.svg',-->
+<!--            attrs: {-->
+<!--              size: 'large',-->
+<!--              rounded: 'xl',-->
+<!--              class: 'text-body-1 font-weight-regular mt-4 py-1',-->
+<!--            }-->
+<!--          }"-->
+<!--          :gallery="true"-->
+<!--          :gallery-hover-effect="true"-->
+<!--          :gallery-images="{0:{chip:{attrs:{variant:'flat',color:'green'},text:'asd'},src:'https://s3-alpha-sig.figma.com/img/e589/51dd/87467ea8ed3307f2aa67a4fff16d45cb?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=XPOgN9cWiL5lNQKNQpEWyYKNUfdcufsLMvRSBXfg5tryvP2T9GyIh-BycwK2gfla1o1G3ufvC6KxW64biT8r~GV63AFYFIzdkohh7Ya5wYLKv3eHBBzqAZdrV0PtKWJil3HFkSa0TuwRmriW~rf1nuPJx-W~qkkVu1A~sZTvid6G9sIblyijcKz2YRHoDiWxLc4iKJyyK1~FTzj75P3z8szwQzH08A6LG97a5lawt2uAH1f1R-3htFf7xEi5W86IWC4s4byN94KFewoJ9Qki-174MHHVq24BgUkZ7cLPHNvQthXJ5brtbR~4xM83ns~hEjcIJpHdCDGj2~YuTvcrmQ__',text:'absdffdsfdsfsdfdsds'},1:{chip:{attrs:{variant:'flat',color:'green'},text:'asd'},src:'https://s3-alpha-sig.figma.com/img/e589/51dd/87467ea8ed3307f2aa67a4fff16d45cb?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=XPOgN9cWiL5lNQKNQpEWyYKNUfdcufsLMvRSBXfg5tryvP2T9GyIh-BycwK2gfla1o1G3ufvC6KxW64biT8r~GV63AFYFIzdkohh7Ya5wYLKv3eHBBzqAZdrV0PtKWJil3HFkSa0TuwRmriW~rf1nuPJx-W~qkkVu1A~sZTvid6G9sIblyijcKz2YRHoDiWxLc4iKJyyK1~FTzj75P3z8szwQzH08A6LG97a5lawt2uAH1f1R-3htFf7xEi5W86IWC4s4byN94KFewoJ9Qki-174MHHVq24BgUkZ7cLPHNvQthXJ5brtbR~4xM83ns~hEjcIJpHdCDGj2~YuTvcrmQ__',text:'absdffdsfdsfsdfdsds'},2:{chip:{attrs:{variant:'flat',color:'green'},text:'asd'},src:'https://s3-alpha-sig.figma.com/img/e589/51dd/87467ea8ed3307f2aa67a4fff16d45cb?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=XPOgN9cWiL5lNQKNQpEWyYKNUfdcufsLMvRSBXfg5tryvP2T9GyIh-BycwK2gfla1o1G3ufvC6KxW64biT8r~GV63AFYFIzdkohh7Ya5wYLKv3eHBBzqAZdrV0PtKWJil3HFkSa0TuwRmriW~rf1nuPJx-W~qkkVu1A~sZTvid6G9sIblyijcKz2YRHoDiWxLc4iKJyyK1~FTzj75P3z8szwQzH08A6LG97a5lawt2uAH1f1R-3htFf7xEi5W86IWC4s4byN94KFewoJ9Qki-174MHHVq24BgUkZ7cLPHNvQthXJ5brtbR~4xM83ns~hEjcIJpHdCDGj2~YuTvcrmQ__',text:'absdffdsfdsfsdfdsds'},3:{chip:{attrs:{variant:'flat',color:'green'},text:'asd'},src:'https://s3-alpha-sig.figma.com/img/e589/51dd/87467ea8ed3307f2aa67a4fff16d45cb?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=XPOgN9cWiL5lNQKNQpEWyYKNUfdcufsLMvRSBXfg5tryvP2T9GyIh-BycwK2gfla1o1G3ufvC6KxW64biT8r~GV63AFYFIzdkohh7Ya5wYLKv3eHBBzqAZdrV0PtKWJil3HFkSa0TuwRmriW~rf1nuPJx-W~qkkVu1A~sZTvid6G9sIblyijcKz2YRHoDiWxLc4iKJyyK1~FTzj75P3z8szwQzH08A6LG97a5lawt2uAH1f1R-3htFf7xEi5W86IWC4s4byN94KFewoJ9Qki-174MHHVq24BgUkZ7cLPHNvQthXJ5brtbR~4xM83ns~hEjcIJpHdCDGj2~YuTvcrmQ__',text:'absdffdsfdsfsdfdsds'}}"-->
+<!--          :backgroundImage="{-->
+<!--            image: 'https://s3-alpha-sig.figma.com/img/e589/51dd/87467ea8ed3307f2aa67a4fff16d45cb?Expires=1708905600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=g7EhfQACZT85bZGANQJmhBUgX7KHl9MVIHs8uvYxovf1~mMGheRUpQe4etAQ6EnrUd77Pj9k~JyXNKHx9G9GtdGM8~H6EDQeBXcXz9xZ1PhDjDfXQAUijJ1JN4XNnMWuXIHCqBPPekxCexn3huHy~G3d-WjDd63cPcZek-GtH6QEgck6bYG-HyNnx6QBKVdvynqZS8WMDjTQwMpKUCvYTb59s4eLt-aD4-fc2cZ1qcOqYg4bzzoiJah2DkFTTFI12q-vWdWuwYTmTk2U9QiAAQ0NQOnE3agSmB0ABr2DjObMiMr4SBuDqWKqEXOZT3AC8yYhtHBTC-oH0P9dAxIFxw__',-->
+<!--            attrs: {-->
+<!--              class: 'mb-6',-->
+<!--              style: 'border-radius: 32px',-->
+<!--              'max-height': '712px',-->
+<!--              cover: true,-->
+<!--            }-->
+<!--          }"-->
+<!--          :chip="{-->
+<!--            text: 'Вакансии',-->
+<!--            attrs: {-->
+<!--              color: 'white',-->
+<!--              class: 'text-uppercase mb-8 mt-4',-->
+<!--              variant: 'outlined'-->
+<!--            }-->
+<!--          }"-->
+<!--        />-->
+
       </v-container>
     </section>
 
@@ -35,6 +100,57 @@
         text: '2023 Untitled UI. All rights reserverd'
       }"
     />
+    <partsFooterDefault
+      id="footer"
+      :logo-in-body="true"
+      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
+      nav-class="text-h6 text-black"
+      :nav="[
+        { id: 1, text: 'Overview', to: '/' },
+        { id: 2, text: 'Features', to: '/' },
+        { id: 3, text: 'Pricing', to: '/' },
+        { id: 4, text: 'Careers', to: '/' },
+        { id: 5, text: 'Help centre', to: '/' },
+        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
+      ]"
+      :copyright="{
+        text: '2023 Untitled UI. All rights reserverd'
+      }"
+    />
+    <partsFooterDefault
+      id="footer"
+      :logo-in-body="true"
+      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
+      nav-class="text-h6 text-black"
+      :nav="[
+        { id: 1, text: 'Overview', to: '/' },
+        { id: 2, text: 'Features', to: '/' },
+        { id: 3, text: 'Pricing', to: '/' },
+        { id: 4, text: 'Careers', to: '/' },
+        { id: 5, text: 'Help centre', to: '/' },
+        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
+      ]"
+      :copyright="{
+        text: '2023 Untitled UI. All rights reserverd'
+      }"
+    />
+    <partsFooterDefault
+      id="footer"
+      :logo-in-body="true"
+      :logo="{ title: 'АО', titleAttrs: {class: 'mb-4 text-h6'} }"
+      nav-class="text-h6 text-black"
+      :nav="[
+        { id: 1, text: 'Overview', to: '/' },
+        { id: 2, text: 'Features', to: '/' },
+        { id: 3, text: 'Pricing', to: '/' },
+        { id: 4, text: 'Careers', to: '/' },
+        { id: 5, text: 'Help centre', to: '/' },
+        { id: 6, text: 'Privacy', to: '/', image: '/arrow.png' },
+      ]"
+      :copyright="{
+        text: '2023 Untitled UI. All rights reserverd'
+      }"
+    />
   </v-app>
 </template>
 
@@ -62,7 +178,6 @@ const sliderAbout = [
     textBlockAttrs: {
       class: 'justify-start'
     },
-    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
     buttons: [
       {
         id: 0,
@@ -71,7 +186,8 @@ const sliderAbout = [
           size: 'large',
           color: 'primary',
           class: 'text-body-1',
-          style: 'margin-top: 106px'
+          style: 'margin-top: 106px',
+          href: '/vacancy'
         }
       }
     ],
@@ -92,7 +208,6 @@ const sliderAbout = [
     titleAttrs: {
       class: 'text-white mb-4 text-36'
     },
-    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
     textBlockAttrs: {
       class: 'justify-start'
     },
@@ -138,30 +253,91 @@ const sliderAbout = [
       }
     ]
   },
+]
 
+const slidesSocial = [
+  {
+    id: 0,
+    chip: {
+      text: 'Социальные проекты',
+      attrs: {
+        color: 'black',
+        class: 'text-uppercase mb-4 mb-lg-8',
+        variant: 'outlined'
+      }
+    },
+    title: 'Экологические акции',
+    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
+    textBlockAttrs: {
+    },
+    subTitleAttrs: {
+      class: 'text-black text-h5',
+      style: 'max-width: 575px;'
+    },
+    titleAttrs: {
+      class: 'text-black font-weight-semi-bold mb-3 text-36 w-75'
+    },
+    img: {
+      src: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      attrs: {
+        'max-height': 400,
+        'max-width': '100%',
+        class: 'rounded-xl'
+      }
+    },
+    active: false,
+  },
+  {
+    id: 1,
+    chip: {
+      text: 'Социальные проекты',
+      attrs: {
+        color: 'black',
+        class: 'text-uppercase mb-8',
+        variant: 'outlined'
+      }
+    },
+    title: 'Экологические акции',
+    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
+    textBlockAttrs: {
+    },
+    subTitleAttrs: {
+      class: 'text-black text-h5',
+      style: 'max-width: 575px;'
+    },
+    titleAttrs: {
+      class: 'text-black font-weight-semi-bold mb-3 text-36 w-75'
+    },
+    img: {
+      src: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      attrs: {
+        'max-height': 400,
+        'max-width': '98%',
+        class: 'rounded-xl'
+      }
+    },
+    active: false,
+  },
 ]
+
 const controlScroll = ref(false);
 const observer = ref(null);
 onMounted(() => {
   const sliderElement = document.getElementById('slider');
-
   observer.value = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       controlScroll.value = entry.isIntersecting;
     });
   }, { threshold: 1 });
-
   if (sliderElement) {
     observer.value.observe(sliderElement);
   }
 });
-
 onUnmounted(() => {
   if (observer.value) {
     observer.value.disconnect();
   }
 });
-
 </script>
 
 <style lang="scss">
diff --git a/src/runtime/components/Parts/ErgVacancies.vue b/src/runtime/components/Parts/ErgVacancies.vue
index 1479e6f..baac97b 100644
--- a/src/runtime/components/Parts/ErgVacancies.vue
+++ b/src/runtime/components/Parts/ErgVacancies.vue
@@ -3,21 +3,21 @@
     <v-img
       :src="backgroundImage.image"
       cover
-      class="h-100 w-100"
+      class="h-100 w-100 erg-vacancies-bg"
       v-bind="backgroundImage.attrs"
+      :min-height="536"
     />
     <v-sheet
       v-bind="sheetAttrs"
-      class="mb-6 sheet position-absolute bg-none"
+      class="sheet position-absolute bg-none"
       :class="backgroundImage ? 'position-absolute' : ''"
     >
-      <v-row :style="leftImage || rightImage ? '' : 'display: contents'">
+      <v-row class="h-100">
         <v-col
-          v-if="leftImage"
+          v-if="Object.keys(leftImage).length"
           cols="12"
           md="6"
           :style="leftImage ? '' : 'display: contents'"
-          class="py-0"
         >
           <v-img
             :src="leftImage.src"
@@ -26,9 +26,10 @@
         </v-col>
         <v-col
           cols="12"
-          md="6"
-          :style="[leftImage || rightImage ? '' : 'display: contents', bodyAttrs]"
-          class="py-0 px-5"
+          :md="Object.keys(leftImage).length || Object.keys(rightImage).length ? 6 : 12"
+          v-bind="bodyAttrs"
+          class="py-0  "
+          :class="Object.keys(leftImage).length || Object.keys(rightImage).length ? 'px-5' : ''"
         >
           <v-chip
             v-if="chip"
@@ -37,58 +38,48 @@
           >
             {{ chip.text }}
           </v-chip>
-          <div class="vacancies__body position-relative z-index-2">
-            <h2
-              v-if="title"
-              class="mb-2"
-              v-bind="titleAttrs"
-            >
-              {{ title || 'Станьте частью команды' }}
-            </h2>
-            <p
-              v-if="subTitle"
-              class="mb-4"
-              v-bind="subTitleAttrs"
-            >
-              {{ subTitle || 'Мы предлагаем конкурентные зарплаты, социальные гарантии' }}
-            </p>
-            <div
-              v-if="textBody"
-              class="mb-4"
-            >
-              <div v-html="textBody" />
+          <div class=" d-flex flex-column justify-end justify-sm-start flex-grow-1 h-100">
+            <div class="vacancies__body position-relative z-index-2">
+              <h2
+                v-if="title"
+                class="mb-2"
+                v-bind="titleAttrs"
+              >
+                {{ title || 'Станьте частью команды' }}
+              </h2>
+              <p
+                v-if="subTitle"
+                class="mb-4"
+                v-bind="subTitleAttrs"
+              >
+                {{ subTitle || 'Мы предлагаем конкурентные зарплаты, социальные гарантии' }}
+              </p>
+              <div
+                v-if="textBody"
+                class="mb-4"
+              >
+                <div v-html="textBody" />
+              </div>
             </div>
-          </div>
-          <v-btn
-            v-bind="button.attrs"
-            class="text-none z-index-2"
-            color="white"
-          >
-            <nuxt-link
-              v-if="button.to"
-              :to="button.to"
-              class="text-decoration-none text-black"
+            <v-btn
+              v-bind="button.attrs"
+              class="text-none z-index-2 mr-auto"
+              color="white"
             >
               {{ button.text || 'Связаться с нами' }}
-            </nuxt-link>
-            <a
-              v-else-if="button.href"
-              :href="button.href"
-              class="text-decoration-none text-black"
-            >
-              {{ button.text || 'Связаться с нами' }}
-            </a>
-            <v-img
-              v-if="button.image"
-              :src="button.image"
-              :width="16"
-              :height="16"
-              class="ml-2"
-            />
-          </v-btn>
+              <v-img
+                v-if="button.image"
+                :src="button.image"
+                :width="16"
+                :height="16"
+                class="ml-2"
+              />
+            </v-btn>
+          </div>
+
         </v-col>
         <v-col
-          v-if="rightImage"
+          v-if="Object.keys(rightImage).length"
           cols="12"
           md="6"
           :style="rightImage ? '' : 'display: contents'"
@@ -186,8 +177,13 @@ const props = defineProps({
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .erg-vacancies {
+  &-bg {
+    img {
+      transform: scale(1.5);
+    }
+  }
   .sheet {
     top: 0;
   }
diff --git a/src/runtime/components/Parts/Header/Erg.vue b/src/runtime/components/Parts/Header/Erg.vue
index 6ecab15..92d1a89 100644
--- a/src/runtime/components/Parts/Header/Erg.vue
+++ b/src/runtime/components/Parts/Header/Erg.vue
@@ -1,116 +1,113 @@
 <template>
-  <div class="w-100 erg-header">
-    <v-app-bar
-      class="py-2"
-      :class="[menu_open ? 'position-fixed bg-white' : 'position-relative', bgClassHeader || 'bg-none']"
-      :elevation="elevation || 0"
-    >
-      <v-container class="d-flex align-center justify-space-between  py-0">
-        <div class="d-flex flex-grow-1 flex-lg-grow-0 align-center">
-          <nuxt-link
-            to="/"
-            :style="'width: ' + logo.width * 1.46 + 'px'"
+  <v-app-bar
+    class="py-2 erg-header"
+    :class="[menu_open ? 'position-fixed bg-white' : 'position-relative', bgClassHeader || 'bg-none']"
+    :elevation="elevation || 0"
+  >
+    <v-container class="d-flex align-center justify-space-between py-0">
+      <div class="d-flex flex-grow-1 align-center">
+        <nuxt-link
+          to="/"
+          class="mr-md-10"
+          :style="logoStyle"
+        >
+          <v-img
+            :src="logo.url"
+            :height="logo.height"
+            :alt="logo.alt || 'Logo'"
+          />
+        </nuxt-link>
+        <div class="justify-center align-start d-lg-flex d-none flex-column">
+          <ul
+            class="d-flex align-center"
+            style="column-gap: 32px"
           >
-            <v-img
-              :src="logo.url"
-              :max-width="logo.max_width"
-              :width="logo.width"
-              :height="logo.height"
-              :alt="logo.alt || 'Logo'"
-            />
-          </nuxt-link>
-          <div class="justify-center align-start d-lg-flex d-none flex-column">
-            <ul
-              class="d-flex align-center"
-              style="column-gap: 32px"
+            <li
+              v-for="menu_item in menu"
+              :key="`header-menu-item-${menu_item.id}`"
+              class=""
             >
-              <li
-                v-for="menu_item in menu"
-                :key="`header-menu-item-${menu_item.id}`"
-                class=""
+              <NuxtLink
+                v-if="menu_item.type !== 'anchor'"
+                :to="menu_item.to"
+                class="erg-header-link"
+                :class="colorClassMenu || 'text-primary'"
               >
-                <NuxtLink
-                  v-if="menu_item.type !== 'anchor'"
-                  :to="menu_item.to"
-                  class="erg-header-link"
-                  :class="colorClassMenu || 'text-primary'"
-                >
-                  {{ menu_item.title }}
-                </NuxtLink>
-                <NuxtLink
-                  v-else
-                  class="erg-header-link"
-                  :class="colorClassMenu || 'text-primary'"
-                  @click.prevent="scrollToElement(menu_item.to)"
-                >
-                  {{ menu_item.title }}
-                </NuxtLink>
-              </li>
-            </ul>
-          </div>
+                {{ menu_item.title }}
+              </NuxtLink>
+              <NuxtLink
+                v-else
+                class="erg-header-link"
+                :class="colorClassMenu || 'text-primary'"
+                @click.prevent="scrollToElement(menu_item.to)"
+              >
+                {{ menu_item.title }}
+              </NuxtLink>
+            </li>
+          </ul>
         </div>
+      </div>
 
 
-        <div class="d-flex align-center">
-          <v-select
-            v-model="selectLang"
-            :items="filteredLangs"
-            hide-details="true"
-            variant="solo"
-            class="mr-4 bg-none"
-            @update:model-value="updateSelectLang"
-          />
-          <v-btn
-            class="bg-white text-none text-body-1"
-            rounded="xl"
-            :class="burger === true ? 'd-none d-lg-block' : ''"
-            @click="buttonClick"
-          >
-            {{ textBtn || 'Связаться с нами' }}
-          </v-btn>
-          <v-app-bar-nav-icon
-            v-if="burger"
-            class="d-block d-lg-none my-auto"
-            @click="menu_open = !menu_open"
-          />
-        </div>
-      </v-container>
-    </v-app-bar>
-    <v-navigation-drawer
-      v-if="burger"
-      v-model="menu_open"
-      class="w-100 h-100 d-flex d-lg-none py-5 px-4"
-      location="left"
+      <div class="d-flex align-center">
+        <v-select
+          v-model="selectLang"
+          :items="filteredLangs"
+          hide-details="true"
+          variant="solo"
+          class="mr-0 mr-sm-4 bg-none"
+          @update:model-value="updateSelectLang"
+        />
+        <v-btn
+          class="bg-white text-none text-body-1"
+          rounded="xl"
+          :class="burger === true ? 'd-none d-lg-block' : ''"
+          @click="buttonClick"
+        >
+          {{ textBtn || 'Связаться' }}
+        </v-btn>
+        <v-app-bar-nav-icon
+          v-if="burger"
+          class="d-block d-lg-none my-auto"
+          @click="menu_open = !menu_open"
+        />
+      </div>
+    </v-container>
+  </v-app-bar>
+  <v-navigation-drawer
+    v-if="burger"
+    v-model="menu_open"
+    class="w-100 h-100 d-flex d-lg-none py-5 px-4"
+    location="left"
+  >
+    <ul
+      class="header-menu-mobile w-100 d-flex flex-column"
+      :class="{'open': menu_open}"
     >
-      <ul
-        class="header-menu-mobile w-100 d-flex flex-column"
-        :class="{'open': menu_open}"
+      <li
+        v-for="menu_item in menu"
+        :key="`header-menu-item-${menu_item.id}`"
       >
-        <li
-          v-for="menu_item in menu"
-          :key="`header-menu-item-${menu_item.id}`"
+        <NuxtLink
+          class="header-menu-link"
+          active-class="header-menu-link-active"
+          :to="menu_item.to"
         >
-          <NuxtLink
-            class="header-menu-link"
-            active-class="header-menu-link-active"
-            :to="menu_item.to"
-          >
-            {{ menu_item.title }}
-          </NuxtLink>
-        </li>
-      </ul>
+          {{ menu_item.title }}
+        </NuxtLink>
+      </li>
+    </ul>
 
-      <v-btn
-        class="bg-white text-none text-body-1"
-        block
-        size="large"
-        rounded="xl"
-        @click="buttonClick"
-      >
-        {{ textBtn || 'Связаться с нами' }}
-      </v-btn>
-    </v-navigation-drawer>
-  </div>
+    <v-btn
+      class="bg-white text-none text-body-1"
+      block
+      size="large"
+      rounded="xl"
+      @click="buttonClick"
+    >
+      {{ textBtn || 'Связаться с нами' }}
+    </v-btn>
+  </v-navigation-drawer>
 </template>
 
 <script setup lang="ts">
@@ -120,8 +117,8 @@ const props = defineProps({
   logo: {
     type: Object,
     default: () => ({
-      url: 'https://s3-alpha-sig.figma.com/img/222c/02bf/df2277b790ec617d5a2f748736bfdc5a?Expires=1707696000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=BjEYx20siAJOsNnjkamNkI-f35Bqi8qtCAvaJ4Oxthy2my4acTfctcKVovI2Yp6v2KugOl61Oat9sQjS0violwagFG2Gie8a48IvmcxllwmkVOESFSBVwWx1D3eP0t5bQit2x3qDF~nfdHh-kMBUSdgwzS1UojssqLJ0NCo6WuUQDz2cbyVZl2RLsSZSgbrLz3agCXXACVU7XH6eTJmE0ZVskZhSgx53dxt~s6Jqrr8l7mcp2C03PxkUbXy1A3bvGxQFdVyVmpx0YSk2PXWwnJZFoX85JHFKzxvLJKWXH7rA1GY~Cx3L8ZI48mB1ybzaIZFXs1KakjD-hDzzyDPITw__',
-      width: 125,
+      url: '/logoerg.svg',
+      maxWidth: 125,
       height: 78,
     })
   },
@@ -172,6 +169,25 @@ const filteredLangs = computed(() => {
   return props.setLang.filter(lang => lang !== selectLang.value);
 })
 
+const logoStyle = computed(() => {
+  if (typeof window === 'undefined') return;
+
+  const isMobile = window.innerWidth <= 600;
+  const maxWidth = isMobile
+    ? `${parseInt(props.logo.maxWidth) - 15}px`
+    : `${props.logo.maxWidth}px`;
+
+  const height = isMobile
+    ? `${parseInt(props.logo.height) - 29}px`
+    : `${props.logo.height}px`;
+
+  return {
+    width: '100%',
+    maxWidth: maxWidth,
+    height: height
+  };
+})
+
 function updateSelectLang(selectedLang: string) {
   selectLang.value = selectedLang;
   emits('select-lang', selectedLang);
diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
index 23c4f06..ce65fbe 100644
--- a/src/runtime/components/Parts/Slider.vue
+++ b/src/runtime/components/Parts/Slider.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="position-relative text-white">
+  <div class="position-relative text-white overflow-hidden">
+    <v-img
+      v-if="sliderBackgroundImage"
+      class="zoom-background"
+      :src="sliderBackgroundImage"
+      :style="sliderBackgroundImageZoom ? zoomStyle : ''"
+      style="position: absolute; width: 100%; height: 100%; z-index: 1"
+      cover
+    />
     <swiper-container
       v-bind="sliderAttrs"
       ref="slider"
       :slides-per-view="sliderPeeking ? '1.3' : '1'"
-      class="overflow-hidden w-100"
+      class="overflow-hidden w-100 position-relative"
       :class="[`rounded-${rounded}`]"
-      :style="{ height: height }"
+      :style="{height: height}"
       @swiperslidechange="updatePagination"
     >
       <swiper-slide
@@ -32,7 +40,7 @@
         <v-row :style="slide.img ? '' : 'display: contents'">
           <v-col
             cols="12"
-            lg="6"
+            md="6"
             class="px-0"
             :style="slide.img ? '' : 'display: contents'"
           >
@@ -113,20 +121,21 @@
               <!-- Slider buttons END -->
             </div>
           </v-col>
+
           <v-col
             cols="12"
-            lg="6"
+            md="6"
             class="px-0"
             :style="slide.img ? '' : 'display: contents'"
             :class="[{ 'px-4 px-md-8 px-lg-0': !sliderContainer }]"
           >
             <div
               v-if="slide.img"
-              class=""
+              class="px-4"
             >
               <!-- Image -->
               <v-img
-                class="slider-img h-100 w-100"
+                class="slider-img h-100 w-100 py-4"
                 style="z-index: -1"
                 cover
                 :src="slide.img.src"
@@ -136,11 +145,30 @@
             </div>
           </v-col>
         </v-row>
+        <div
+          v-if="controlButtonInSlides"
+          class="control-buttons-left-bottom-container d-none d-md-block"
+          :class="[{ 'px-4 px-md-5 px-lg-9': !sliderContainer }]"
+        >
+          <div class="d-flex px-0">
+            <v-btn
+              v-bind="controlButtonPrevAttrs"
+              icon="mdi-chevron-left"
+              @click="slidePrev"
+            />
+
+            <v-btn
+              v-bind="controlButtonNextAttrs"
+              icon="mdi-chevron-right"
+              @click="slideNext"
+            />
+          </div>
+        </div>
       </swiper-slide>
     </swiper-container>
 
     <div
-      v-if="controlButtonsAlign === 'center'"
+      v-if="controlButtonsAlign === 'center' && controlButtonInSlides === false"
       class="control-buttons-center-container"
     >
       <div class="d-flex justify-space-between px-0">
@@ -159,7 +187,7 @@
     </div>
 
     <div
-      v-if="controlButtonsAlign === 'right'"
+      v-if="controlButtonsAlign === 'right' && controlButtonInSlides === false"
       class="control-buttons-right-container"
     >
       <div
@@ -185,7 +213,7 @@
     </div>
 
     <div
-      v-if="controlButtonsAlign === 'left-bottom'"
+      v-if="controlButtonsAlign === 'left-bottom' && controlButtonInSlides === false"
       class="control-buttons-left-bottom-container"
       :class="[{ 'px-4 px-md-5 px-lg-9': !sliderContainer }]"
     >
@@ -276,7 +304,7 @@
 import { register } from "swiper/element/bundle";
 register();
 
-import { useAttrs, ref, onMounted, onUnmounted, watch } from "vue";
+import { useAttrs, ref, onMounted, onUnmounted, watch, computed } from "vue";
 import { useMainStore } from "../../store/mainStore";
 const mainStore = useMainStore();
 
@@ -318,6 +346,21 @@ const props = defineProps({
     default: "0",
   },
 
+  sliderBackgroundImage: {
+    type: String,
+    default: ''
+  },
+
+  sliderBackgroundImageZoom: {
+    type: Boolean,
+    default: false
+  },
+
+  sliderBackgroundImageZoomScale: {
+    type: Number,
+    default: 1.5
+  },
+
   sliderContainer: {
     type: Boolean,
     default: false,
@@ -361,10 +404,14 @@ const props = defineProps({
   controlScroll: {
     type: Boolean,
     default: false,
+  },
+
+  controlButtonInSlides: {
+    type: Boolean,
+    default: false,
   }
 });
 
-// Slider ref
 const slider = ref(null);
 
 const activeSlide = ref(0);
@@ -394,16 +441,23 @@ const updatePagination = () => {
       pagination.value[index].active = false;
     });
     pagination.value[slider.value.swiper.realIndex].active = true;
+    activeSlide.value = slider.value.swiper.realIndex;
   }
 };
 
 const handleWheel = (event) => {
-  if (!slider.value) return;
+  if (!slider.value || !props.controlScroll) return;
 
-  if (event.deltaY > 0) {
-    slider.value.swiper.slideNext();
-  } else {
-    slider.value.swiper.slidePrev();
+  const isAtStart = slider.value.swiper.isBeginning;
+  const isAtEnd = slider.value.swiper.isEnd;
+
+  if ((!isAtStart && event.deltaY < 0) || (!isAtEnd && event.deltaY > 0)) {
+    event.preventDefault();
+    if (event.deltaY > 0) {
+      slider.value.swiper.slideNext();
+    } else {
+      slider.value.swiper.slidePrev();
+    }
   }
 };
 
@@ -414,7 +468,7 @@ if(typeof window !== 'undefined') {
 }
 
 const handleScroll = () => {
-  if (!slider.value || typeof window === 'undefined') return;
+  if (!slider.value || typeof window === 'undefined' || !props.controlScroll) return;
 
   const currentScrollPosition = window.pageYOffset;
   const direction = currentScrollPosition > lastScrollPosition ? 'down' : 'up';
@@ -440,6 +494,10 @@ watch(() => props.controlScroll, (newValue) => {
   }
 }, { immediate: true });
 
+const zoomStyle = computed(() => ({
+  transform: activeSlide.value === 1 ? `scale(${props.sliderBackgroundImageZoomScale})` : 'scale(1)',
+  transition: 'transform 0.3s ease-in-out',
+}));
 
 onMounted(() => {
   activeSlide.value = slider.value.swiper.realIndex;
@@ -528,6 +586,21 @@ onUnmounted(() => {
   width: 100%;
   position: absolute;
   bottom: 0%;
+  left: 3px;
   z-index: 1;
 }
+
+.zoom-background {
+  transition: transform .3s ease-in-out;
+
+  img {
+    transform: scale(1); /* Начальное состояние масштаба */
+  }
+
+  &.zoom-background-animation img {
+    transform: scale(1.5); /* Конечное состояние масштаба */
+  }
+}
+
+
 </style>