From a9218af3ee0adfffae1b5b6c21934bd6632c64a2 Mon Sep 17 00:00:00 2001
From: e11sy <Egoramurin@gmail.com>
Date: Mon, 8 Jul 2024 15:53:07 +0300
Subject: [PATCH] added footer

---
 assets/svg/github.svg         |   4 +-
 assets/svg/locale-version.svg |   5 +
 components/contact.vue        |   7 +
 components/site-footer-ru.vue | 283 ++++------------------------------
 components/site-header-ru.vue |  66 +++++---
 pages/ru.vue                  |   4 +-
 6 files changed, 90 insertions(+), 279 deletions(-)
 create mode 100644 assets/svg/locale-version.svg

diff --git a/assets/svg/github.svg b/assets/svg/github.svg
index 089e083..a981a1b 100644
--- a/assets/svg/github.svg
+++ b/assets/svg/github.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.003 0a7.998 7.998 0 00-2.53 15.587c.4.075.547-.173.547-.385 0-.19-.007-.82-.01-1.489-2.226.484-2.696-.944-2.696-.944-.364-.924-.888-1.17-.888-1.17-.725-.496.055-.485.055-.485.803.055 1.226.823 1.226.823.714 1.222 1.87.87 2.327.665.072-.516.28-.87.508-1.07C4.766 11.332 2.9 10.646 2.9 7.58c0-.873.312-1.586.823-2.147-.082-.2-.356-1.014.078-2.116 0 0 .672-.215 2.2.82a7.666 7.666 0 012.002-.269c.677.001 1.35.091 2.004.269 1.525-1.035 2.197-.82 2.197-.82.435 1.102.161 1.915.078 2.116.513.56.823 1.275.823 2.147 0 3.072-1.871 3.749-3.652 3.947.287.247.542.735.542 1.48 0 1.071-.008 1.932-.008 2.195 0 .214.144.463.548.384A7.999 7.999 0 008.003 0zM3 11.393c-.017.04-.08.052-.137.024-.058-.026-.09-.08-.072-.12.017-.04.08-.051.139-.024.057.026.09.08.07.12zm.394.351c-.039.036-.113.02-.163-.036-.052-.057-.063-.13-.024-.167.04-.034.111-.019.164.038.052.056.062.13.023.165zm.27.45c-.05.034-.13.002-.18-.07-.048-.07-.048-.156.002-.19.05-.035.129-.004.179.067.048.072.048.157-.002.192zm.456.52c-.044.048-.137.035-.206-.031-.069-.064-.089-.156-.045-.204.044-.048.138-.035.207.03.069.065.09.156.044.205zm.59.175c-.02.063-.11.091-.2.065-.09-.028-.15-.101-.131-.165.018-.062.108-.092.2-.064.09.028.15.1.131.165v-.001zm.67.075c.004.065-.074.12-.168.12-.095.004-.173-.05-.174-.114 0-.067.074-.122.17-.123.096-.002.174.052.174.117H5.38zm.66-.026c.012.065-.054.13-.149.148-.092.017-.178-.022-.19-.087-.012-.065.056-.13.149-.148.094-.017.178.022.19.087z" fill="#FFF" fill-rule="nonzero"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.155963 10.0757C1.09873 4.26529 6.11773 -0.00287489 12.0041 1.45292e-06C18.6295 0.000719414 24 5.37183 24 11.9972C24.0006 17.1599 20.6986 21.7443 15.8017 23.3794C15.1945 23.4977 14.9787 23.1233 14.9787 22.8035C14.9787 22.6724 14.9801 22.4428 14.9821 22.136C14.9859 21.5174 14.9917 20.5848 14.9917 19.5117C14.9917 18.3923 14.6082 17.6616 14.1779 17.2898C16.8495 16.9934 19.6564 15.978 19.6564 11.3705C19.6564 10.0613 19.191 8.99008 18.4213 8.15023C18.5461 7.84861 18.957 6.62783 18.3043 4.97542C18.3043 4.97542 17.2968 4.653 15.0086 6.2053C14.0288 5.93919 13.0181 5.80368 12.0028 5.80228C10.9884 5.80356 9.97854 5.93908 8.99963 6.2053C6.70759 4.653 5.70002 4.97542 5.70002 4.97542C5.04868 6.62783 5.4595 7.84861 5.58301 8.15023C4.81596 8.99138 4.34793 10.0601 4.34793 11.3705C4.34793 15.9676 7.14831 16.996 9.81349 17.2989C9.47026 17.5992 9.15954 18.1284 9.05164 18.9032C8.36649 19.21 6.63088 19.7392 5.56091 17.9061C5.56091 17.9061 4.92647 16.7542 3.72129 16.671C3.72129 16.671 2.55122 16.6541 3.63939 17.399C3.63939 17.399 4.42464 17.7682 4.97067 19.1541C4.97067 19.1541 5.67532 21.2954 9.01393 20.5699C9.0167 21.1025 9.02093 21.619 9.02429 22.029C9.02725 22.3906 9.02954 22.6694 9.02954 22.8035C9.02954 23.1207 8.80852 23.4925 8.21048 23.3807C2.62516 21.5222 -0.786807 15.8861 0.155963 10.0757ZM4.29463 17.126C4.38044 17.1676 4.47404 17.1494 4.50004 17.0896V17.0909C4.52994 17.0298 4.48054 16.9479 4.39474 16.9089C4.30633 16.8686 4.21272 16.8855 4.18672 16.9466C4.15812 17.0064 4.20752 17.087 4.29463 17.126ZM5.09028 17.6161C5.03308 17.6694 4.92127 17.6447 4.84587 17.5615C4.76786 17.477 4.75226 17.3665 4.81076 17.3119C4.86927 17.2599 4.97717 17.2833 5.05648 17.3678C5.13448 17.4523 5.15008 17.5628 5.09028 17.6161ZM5.22679 18.1856C5.30089 18.2935 5.4218 18.3416 5.49461 18.2896C5.57001 18.2376 5.57001 18.1102 5.49721 18.001C5.4218 17.8957 5.30349 17.8489 5.22939 17.9009C5.15399 17.9516 5.15399 18.0803 5.22679 18.1856ZM6.17975 19.0696C6.11475 19.1424 5.97434 19.1229 5.87163 19.0241C5.76762 18.9279 5.73772 18.7901 5.80403 18.7186C5.86903 18.6458 6.01074 18.6666 6.11345 18.7641C6.21745 18.8603 6.24996 18.9981 6.17975 19.0709V19.0696ZM6.76479 19.4311C6.9013 19.4701 7.03521 19.4285 7.06381 19.3335L7.06511 19.3348C7.09241 19.2386 7.004 19.1294 6.8675 19.0878C6.73099 19.0449 6.59578 19.0904 6.56848 19.184C6.53988 19.2789 6.62958 19.3895 6.76479 19.4311ZM8.07137 19.4454C8.07527 19.5442 7.95957 19.6274 7.81786 19.6274C7.67485 19.6313 7.55784 19.552 7.55654 19.4545C7.55654 19.3543 7.66835 19.2724 7.81266 19.2711C7.95567 19.2672 8.07267 19.3478 8.07267 19.4454H8.07137ZM8.83712 19.6287C8.97883 19.6027 9.07764 19.5039 9.06074 19.4077C9.04254 19.3101 8.91643 19.2503 8.77472 19.2763C8.63561 19.3023 8.5342 19.4012 8.5511 19.4987C8.56931 19.5962 8.69801 19.6547 8.83712 19.6287Z" fill="#DBE6FF"/>
 </svg>
diff --git a/assets/svg/locale-version.svg b/assets/svg/locale-version.svg
new file mode 100644
index 0000000..0408479
--- /dev/null
+++ b/assets/svg/locale-version.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.5335 4.3115C2.25 4.715 2.25 5.915 2.25 8.31275V9.49325C2.25 13.7218 5.42925 15.7745 7.42425 16.6453C7.965 16.8815 8.23575 17 9 17C9.765 17 10.035 16.8815 10.5758 16.6453C12.5708 15.7738 15.75 13.7225 15.75 9.49325V8.31275C15.75 5.91425 15.75 4.715 15.4665 4.3115C15.1838 3.90875 14.0565 3.5225 11.8012 2.75075L11.3715 2.60375C10.1962 2.201 9.609 2 9 2C8.39175 2 7.80375 2.201 6.6285 2.60375L6.19875 2.75C3.9435 3.5225 2.81625 3.90875 2.5335 4.3115ZM8.14575 6.77225L8.04825 6.9485C7.9395 7.14275 7.8855 7.2395 7.8015 7.30325C7.7175 7.367 7.6125 7.391 7.4025 7.43825L7.212 7.48175C6.474 7.64825 6.105 7.73225 6.01725 8.01425C5.9295 8.297 6.18075 8.591 6.684 9.179L6.8145 9.33125C6.957 9.4985 7.02825 9.58175 7.0605 9.68525C7.09275 9.78875 7.08225 9.9005 7.0605 10.1233L7.041 10.3258C6.9645 11.111 6.927 11.5033 7.1565 11.678C7.386 11.8527 7.73175 11.693 8.4225 11.3758L8.60175 11.2933C8.7975 11.2032 8.89575 11.1575 9 11.1575C9.10425 11.1575 9.2025 11.2025 9.39825 11.2925L9.5775 11.375C10.2675 11.6938 10.614 11.8527 10.8435 11.678C11.073 11.504 11.0355 11.111 10.959 10.3265L10.9395 10.1233C10.9178 9.9005 10.9073 9.78875 10.9395 9.68525C10.9718 9.58175 11.043 9.49775 11.1855 9.33125L11.316 9.179C11.8185 8.591 12.0705 8.297 11.9827 8.01425C11.895 7.73225 11.526 7.64825 10.788 7.48175L10.5975 7.43825C10.3875 7.391 10.2825 7.367 10.1985 7.30325C10.1145 7.2395 10.0605 7.14275 9.9525 6.9485L9.85425 6.77225C9.474 6.0905 9.28425 5.75 9 5.75C8.71575 5.75 8.526 6.0905 8.14575 6.77225Z" fill="white"/>
+</g>
+</svg>
diff --git a/components/contact.vue b/components/contact.vue
index ea9390a..8ca9eec 100644
--- a/components/contact.vue
+++ b/components/contact.vue
@@ -120,7 +120,9 @@ export default Vue.extend({
 }
 
 .div-wrapper {
+  cursor: pointer;
   align-items: center;
+  border-width: 0px;
   background-color: #0d75d4; /* Цвет фона для div-wrapper */
   border-radius: 8px;
   display: inline-flex;
@@ -128,6 +130,10 @@ export default Vue.extend({
   padding: 10px 12px;
   flex: 1; /* Растягивает элемент до максимальной ширины */
   box-shadow: none;
+
+  &:hover {
+    background-color: #0b64b7;
+  }
 }
 
 .input-style {
@@ -141,6 +147,7 @@ export default Vue.extend({
 }
 
 .text-wrapper-3 {
+  cursor: pointer;
   color: #f2f6ff;
   font-family: "Roboto-Regular", Helvetica;
   font-size: 16px;
diff --git a/components/site-footer-ru.vue b/components/site-footer-ru.vue
index fc5c85b..3fa47df 100644
--- a/components/site-footer-ru.vue
+++ b/components/site-footer-ru.vue
@@ -1,273 +1,46 @@
 <template>
-  <div class="yard-footer">
-    <div class="yard-footer__inner">
-      <div class="yard-footer__left">
-        <a
-          href="/"
-          class="yard-footer__title"
-        >
-          Hawk
-        </a>
-        <div class="yard-footer__desc">
-          Errors catcher. Reimagined.
-        </div>
-        <div class="yard-footer__made-by">
-          Made by <a href="https://codex.so">CodeX</a>
-
-          <a
-            class="yard-footer__made-by-icon"
-            href="https://github.com/codex-team"
-            target="_target"
-          >
-            <img src="~/assets/svg/github.svg" alt="CodeX GitHub">
-          </a>
-
-          <a
-            class="yard-footer__made-by-icon"
-            href="https://twitter.com/codex_team"
-            target="_target"
-          >
-            <img src="~/assets/svg/twitter.svg" alt="CodeX Twitter">
-          </a>
-
-          <a
-            class="yard-footer__made-by-icon"
-            href="https://instagram.com/codex_team"
-            target="_target"
-          >
-            <img src="~/assets/svg/instagram.svg" alt="CodeX Instagram">
-          </a>
-        </div>
-      </div>
-      <div class="yard-footer__right">
-        <div class="menu">
-          <section
-            v-for="(item, index) in menu"
-            :key="'section:' + index"
-            class="menu__section"
-          >
-            <div class="menu__title">
-              {{ item.section }}
-            </div>
-            <div
-              class="menu__section-links"
-              :class="{
-                'menu__section-links--multicolumn': item.items.length > 3
-              }"
-            >
-              <a
-                v-for="(link, i) in item.items"
-                :key="'link:' + i"
-                class="menu__item"
-                :href="link.url"
-              >
-                {{ link.label }}
-              </a>
-            </div>
-          </section>
-        </div>
-      </div>
+  <div class="footer">
+    <div class="footer__inner">
+      <div class="footer__inner-text-1">Hawk</div>
+      <div class="footer__inner-text-2">© 2018—2024</div>
+      <div>О проекте</div>
+      <div>Документация</div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-  data() {
-    return {
-      menu: [
-        {
-          section: 'About Hawk',
-          items: [
-            {
-              label: 'Documentation',
-              url: 'https://docs.hawk.so/',
-            },
-            // {
-            //   label: 'Pricing',
-            //   url: '/pricing',
-            // },
-          ],
-        },
-        {
-          section: 'Product',
-          items: [
-            {
-              label: 'Hawk web',
-              url: '//garage.hawk.so',
-            },
-            {
-              label: 'PC/Mac/Linux',
-              url: '/download',
-            },
-            {
-              label: 'Hawk Android (WIP)',
-              url: 'https://github.com/codex-team/hawk.android',
-            },
-          ],
-        },
-        {
-          section: 'Integrations',
-          items: [
-            {
-              label: 'JavaScript',
-              url: 'https://github.com/codex-team/hawk.javascript',
-            },
-            {
-              label: 'PHP',
-              url: 'https://github.com/codex-team/hawk.php',
-            },
-            {
-              label: 'Python',
-              url: 'https://github.com/codex-team/hawk.python',
-            },
-            {
-              label: 'Node.js',
-              url: 'https://github.com/codex-team/hawk.nodejs',
-            },
-            {
-              label: 'Go',
-              url: 'https://github.com/codex-team/hawk.go',
-            },
-            {
-              label: 'Kotlin',
-              url: 'https://github.com/codex-team/hawk.kotlin',
-            },
-            {
-              label: 'View all »',
-              url: 'https://docs.hawk.so/integrations',
-            },
-          ],
-        },
-      ],
-    };
-  },
-});
-</script>
+<script setup lang="ts">
 
-<style lang="postcss" scoped>
+</script>
 
-.yard-footer {
+<style lang="postcss">
+.footer {
   display: flex;
-  font-size: 15px;
-  line-height: 26px;
-  color: var(--color-text-second);
-  padding: 150px 0 100px;
-
-  @media (--screen-medium){
-    padding-bottom: 30px;
-  }
-
-  @media (--screen-mobile){
-    padding-top: 60px;
-  }
-
-  a:hover {
-    color: var(--color-text-main)
-  }
+  align-items: center;
+  justify-content: center;
 
   &__inner {
     display: flex;
-    max-width: var(--layout-main-col-width);
-    margin: 0 auto;
-    padding: 0 var(--layout-paddings-horisontal);
-    flex-basis: 100%;
-
-    @media (--screen-mobile) {
-      flex-direction: column;
-    }
-  }
-
-  &__left {
-    margin-right: auto;
-
-    @media (--screen-mobile) {
-      margin-right: 0;
-      margin-top: 30px;
-      order: 2;
-    }
-  }
-
-  &__right {
-    flex-grow: 2;
-    margin-left: 120px;
-
-    @media (--screen-mobile) {
-      margin-left: 0;
-    }
-  }
-
-  &__title {
-    display: block;
-    font-size: 27px;
-    font-weight: 800;
-    color: var(--color-text-main);
-    margin-bottom: 5px;
-  }
-
-  &__made-by {
-    border-top: 1px solid var(--color-border-light);
-    padding-top: 10px;
-    margin-top: 10px;
-    font-size: 14px;
-
-    &-icon {
-      display: inline-block;
-      margin-left: 8px;
-      vertical-align: middle;
-      transition: transform 150ms ease-in;
-      will-change: transform;
-
-      &:hover {
-        transform: scale(1.35) rotate(-10deg)
-      }
-
-      &:nth-of-type(2n+1):hover {
-        transform: scale(1.35) rotate(10deg)
-      }
-    }
-  }
-}
-
-.menu {
-  display: flex;
-  flex-grow: 2;
-  justify-content: space-between;
-
-  @media (--screen-mobile) {
-    flex-direction: column;
-  }
-
-  &__section {
-    flex-grow: 1;
+    margin: 120px 0;
+    border-radius: 14px;
+    padding: 10px 20px;
+    gap: 20px;
+    background: #242936;
+
+    color: #DBE6FF;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
 
-    &:not(:last-of-type){
-      @media (--screen-mobile) {
-        margin-bottom: 30px;
-      }
+    &-text-1 {
+      font-weight: 700;
     }
 
-    &-links {
-      display: grid;
-      grid-template-columns: 1fr;
-
-      &--multicolumn {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
+    &-text-2 {
+      color: rgba(219, 230, 255, 0.60);
     }
-
-  }
-
-  &__title {
-    font-size: 16px;
-    margin-bottom: 13px;
-    font-weight: 800;
-    color: var(--color-text-main);
-  }
-
-  &__item {
-    padding: 2px 0;
   }
 }
 </style>
diff --git a/components/site-header-ru.vue b/components/site-header-ru.vue
index bad418c..d5ff41d 100644
--- a/components/site-header-ru.vue
+++ b/components/site-header-ru.vue
@@ -1,4 +1,4 @@
-  <template>
+<template>
   <div
     class="site-header"
     :class="{
@@ -12,7 +12,7 @@
 
       <a
         class="site-header__logo"
-        href="/"
+        href="/ru"
       >
         <img
           src="~/assets/images/hawk-logo.png"
@@ -22,15 +22,20 @@
       </a>
       <div class="site-header__menu">
         <a href="https://docs.hawk.so/">Документация</a>
-        <button
-        class="download-button"
-        href="/download">Локализованная версия</button>
-<!--        <a href="/pricing">Pricing</a>-->
+        <div
+          class="site-header__menu__local-version"
+          href="/download">
+            <img src="~/assets/svg/locale-version.svg" class="site-header__menu__local-version-svg"/>
+            <div class="text-container">Локализованная версия</div>
+        </div>
       </div>
-
-      <a class="site-header__signin" href="//garage.hawk.so">
-        <icon-sign-in />
-        To Garage
+      <a
+        href="https://github.com/codex-team/hawk.so"
+        class="site-header__menu-logo"
+      >
+        <img
+          src="~/assets/svg/github.svg"
+        />
       </a>
     </div>
   </div>
@@ -83,6 +88,7 @@ export default Vue.extend({
     &__inner {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
       height: 100%;
       max-width: var(--layout-main-col-width);
       margin: 0 auto;
@@ -115,17 +121,12 @@ export default Vue.extend({
       }
     }
 
-    &__download-button {
-      width: 227px;
-      height: 32px;
-      border-radius: 35px;
-      padding: 1px 13px;
-      gap: 10px;
-      background: linear-gradient(248.21deg, #0075FF 25.68%, #B56BFF 107.97%);
-
-    }
-
     &__menu {
+      display: flex;
+      flex-direction: row;
+      flex-shrink: 0;
+      align-items: center;
+
       @media (--screen-mobile) {
         display: none;
       }
@@ -137,7 +138,7 @@ export default Vue.extend({
       }
 
       a {
-        display: inline-block;
+        display: flex;
         margin-right: 30px;
 
         @media (--screen-mobile) {
@@ -160,6 +161,29 @@ export default Vue.extend({
           display: flex;
         }
       }
+
+      &__local-version {
+        width: auto;
+        height: 32px;
+        display: flex;
+        place-items: center;
+        border-radius: 35px;
+        padding: 1px 13px;
+        gap: 10px;
+        background: linear-gradient(248.21deg, #0075FF 25.68%, #B56BFF 107.97%);
+
+        text-container {
+          font-family: 'Roboto';
+          font-weight: 500;
+          font-size: 15px;
+          line-height: 30px;
+          color: white;
+        }
+      }
+    }
+
+    &__menu-logo {
+      margin-left: auto; /* This will push the element to the right */
     }
 
     &__signin {
diff --git a/pages/ru.vue b/pages/ru.vue
index 00f3094..e524bd8 100644
--- a/pages/ru.vue
+++ b/pages/ru.vue
@@ -24,7 +24,7 @@
           </div>
           <div>
           </div>
-          <div class="landing__content-preview" :style="`transform: translateY(${Math.max(0, 150 - scroll * 0.35)}px)`">
+          <div class="landing__content-preview">
             <img src="~/assets/images/hawk-desktop.png" alt="Hawk desktop preview">
           </div>
         </div>
@@ -332,6 +332,7 @@ export default Vue.extend({
 
   &__content {
     position: relative;
+    flex-shrink: 0;
 
     &-head {
       width: 830px;
@@ -390,6 +391,7 @@ export default Vue.extend({
           width: 775px;
           line-height: 30px;
           font-size: 22px;
+          margin-top: 13px;
           &div {
             flex: 1 0 auto;
             font-family: "Roboto-Bold", Helvetica;