adata-ui 0.3.93 → 0.3.95

package/src/components/newComponents/FooterRedesign/FooterRedesign.vue

@@ -0,0 +1,421 @@
+<script>
+
+import FooterAccordion from "@/components/newComponents/FooterRedesign/FooterAccordion.vue";
+
+export default {
+  name: "FooterRedesign",
+  components: {FooterAccordion},
+  data() {
+    return {
+      main: {
+        dev: "adtdev.kz",
+        prod: "adata.kz",
+        staging: "adada.kz",
+      },
+    }
+  },
+  computed: {
+    environment() {
+      return this.main[this.mode];
+    },
+    services() {
+      return {
+        title: 'Сервисы',
+        link: `https://${this.environment}/all-services`,
+        items: [
+          [
+            {
+              title: 'Контрагенты',
+              link: `https://pk.${this.environment}`
+            },
+            {
+              title: 'Штрафы',
+              link: `https://avto.${this.environment}`
+            },
+            {
+              title: 'Работа',
+              link: `https://work.${this.environment}`
+            },
+            {
+              title: 'Аналитика',
+              link: `https://analytics-new.${this.environment}`
+            },
+            {
+              title: 'Тендеры',
+              link: `https://tender.${this.environment}`
+            }
+          ],
+          [
+            {
+              title: 'Комплаенс',
+              link: `https://compliance.${this.environment}`,
+              isNew: true
+            },
+            {
+              title: 'ЭДО',
+              link: `https://edo.${this.environment}`,
+              isNew: true
+            },
+            {
+              title: 'ВЭД',
+              link: `https://fea.${this.environment}`,
+              isNew: true
+            }
+          ]
+        ]
+      }
+    },
+    useful() {
+      return {
+        title: 'Полезное',
+        link: `https://${this.environment}/useful/terms-of-usage`,
+        items: [
+          {
+            title: 'Описание API',
+            link: `https://${this.environment}/api-description`
+          },
+          {
+            title: 'Пользовательское соглашение',
+            link: `https://${this.environment}/user-agreements`
+          },
+          {
+            title: 'Политика конфиденциальности',
+            link: `https://${this.environment}/privacy-policy`
+          },
+          {
+            title: 'Вакансии',
+            link: `https://${this.environment}/vacancy`
+          },
+          {
+            title: 'Каталог предприятий',
+            link: `https://pk.${this.environment}/counterparty`
+          },
+        ]
+      }
+    }
+  }
+}
+
+</script>
+
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="container__web">
+        <div class="socials-desktop">
+          <span class="logo" />
+
+          <p class="socials-text">
+            Единое решение для деловых задач
+          </p>
+
+          <div class="socials-list">
+            <a href="" class="linkedIn"/>
+            <a href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured" class="youtube"/>
+            <a href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els" class="instagram"/>
+            <a href="https://t.me/adatakz_official" class="telegram"/>
+            <a href="https://www.facebook.com/adata.kz" class="facebook"/>
+            <a href="https://www.tiktok.com/@adata.kz?lang=ru-RU" class="tiktok"/>
+          </div>
+        </div>
+
+        <p class="footer__copyright">
+          {{ new Date().getFullYear() }} © ТОО "Alldata"
+        </p>
+      </div>
+
+      <div class="footer__items">
+        <div class="main-items">
+          <footer-accordion
+            :label="services.title"
+            :link="services.link"
+            :content="services.items"
+          />
+          <footer-accordion
+            :label="useful.title"
+            :link="useful.link"
+            :content="[useful.items]"
+          />
+        </div>
+
+        <div class="contacts">
+          <a
+            class="contacts-header"
+            :href="`https://${this.environment}/contacts`"
+          >
+            Контакты
+          </a>
+
+          <div class="contacts-items">
+            <div class="contacts-item">
+              <a
+                class="contacts-link"
+                href="https://go.2gis.com/30j2f"
+              >
+                <span class="contacts-icon icon-location" />
+                <p class="contacts-title">Казахстан, г. Алматы, ул.Ходжанова, 79</p>
+              </a>
+            </div>
+
+            <div class="contacts-item">
+              <a
+                class="contacts-link"
+                href="tel:+77471203467"
+              >
+                <span class="contacts-icon icon-phone" />
+                <p class="contacts-title">+7 (747) 120 34 67</p>
+              </a>
+            </div>
+
+            <div class="contacts-item">
+              <a
+                class="contacts-link"
+                href="mailto:info@adata.kz"
+              >
+                <span class="contacts-icon icon-mail" />
+                <p class="contacts-title">info@adata.kz</p>
+              </a>
+            </div>
+
+            <div class="contacts-item">
+              <a
+                class="contacts-link"
+                href="https://api.whatsapp.com/send?phone=77712289041"
+              >
+                <p class="contacts-title">Перейти в чат с поддержкой</p>
+                <span class="contacts-icon icon-expand-window" />
+              </a>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div class="socials-mobile">
+        <a href="" class="linkedIn"/>
+        <a href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured" class="youtube"/>
+        <a href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els" class="instagram"/>
+        <a href="https://t.me/adatakz_official" class="telegram"/>
+        <a href="https://www.facebook.com/adata.kz" class="facebook"/>
+        <a href="https://www.tiktok.com/@adata.kz?lang=ru-RU" class="tiktok"/>
+      </div>
+
+      <p class="copyright-mobile">
+        {{ new Date().getFullYear() }} © ТОО "Alldata"
+      </p>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  background: #2C3E50;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  padding: 16px 0;
+  @media (min-width: 1180px) {
+    padding: 20px 0;
+  }
+  &__copyright {
+    display: none;
+    font-size: 10px;
+    @media (min-width: 1180px) {
+      display: block;
+    }
+  }
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    @media (min-width: 1180px) {
+      flex-direction: row;
+      gap: 75px;
+    }
+  }
+}
+
+.container {
+  color: white;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 32px;
+  max-width: 1180px;
+  margin: 0 calc((100vw - 1180px)/2);
+  padding: 40px 20px 20px;
+  @media (min-width: 1180px) {
+    flex-direction: row;
+  }
+  @media (max-width: 1140px) {
+    margin: 0 auto;
+  }
+
+  &__web {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    justify-content: space-between;
+  }
+}
+
+.main-items {
+  display: flex;
+  gap: 18px;
+  flex-direction: column;
+  @media (min-width: 1180px) {
+    flex-direction: row;
+    gap: 75px;
+  }
+}
+
+.copyright-mobile {
+  display: block;
+  font-size: 10px;
+  @media (min-width: 1180px) {
+    display: none;
+  }
+}
+
+.logo {
+  display: inline-block;
+  width: 90px;
+  height: 26px;
+  background-image: url("~@/assets/logo-white-desktop.svg");
+}
+
+.socials-desktop {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.socials-mobile {
+  display: flex;
+  gap: 32px;
+  flex-wrap: wrap;
+  @media (min-width: 1180px) {
+    display: none;
+  }
+}
+
+.socials-text {
+  font-size: 14px;
+}
+
+.socials-list {
+  display: none;
+  @media (min-width: 1180px) {
+    display: flex;
+    gap: 32px;
+  }
+}
+
+.contacts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: start;
+}
+
+.contacts-header {
+  font-size: 14px;
+  font-weight: 600;
+  padding-bottom: 12px;
+  padding-right: 16px;
+  cursor: pointer;
+  border-bottom: 0.5px solid white;
+  color: white;
+}
+
+.contacts-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  @media (min-width: 1180px) {
+    gap: 8px;
+  }
+}
+
+.contacts-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.contacts-link {
+  display: flex;
+  font-size: 12px;
+  font-weight: 500;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  color: white;
+}
+
+.icon-location {
+  width: 16px;
+  height: 16px;
+  background-image: url('~@/assets/location.svg');
+}
+
+.icon-phone {
+  width: 16px;
+  height: 16px;
+  background-image: url('~@/assets/phone.svg');
+}
+
+.icon-mail {
+  width: 16px;
+  height: 16px;
+  background-image: url('~@/assets/mail.svg');
+}
+
+.icon-expand-window {
+  width: 16px;
+  height: 16px;
+  background-image: url('~@/assets/expand-window.svg');
+}
+
+.linkedIn {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/linkedIn.svg');
+  cursor: pointer;
+}
+
+.youtube {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/youtube.svg');
+  cursor: pointer;
+}
+
+.instagram {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/instagram.svg');
+  cursor: pointer;
+}
+
+.telegram {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/telegram.svg');
+  cursor: pointer;
+}
+
+.facebook {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/facebook.svg');
+  cursor: pointer;
+}
+
+.tiktok {
+  width: 28px;
+  height: 28px;
+  background-image: url('~@/assets/tiktok.svg');
+  cursor: pointer;
+}
+</style>