set up russian landing

- added hawk.so/ru route
- added contact componenet
- added russian header

components/contact.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="box">
+    <div class="contact">
+      <div class="div">Свяжитесь с нами</div>
+      <p class="team-hawk-so-t-me">
+        <span class="text-wrapper">
+          Чтобы начать сотрудничество или получить больше информации, напишите нам на
+        </span>
+        <span class="span"> [email protected]</span>
+        <span class="text-wrapper"> или в телеграм </span>
+        <span class="span"> t.me/hawk-support</span>
+        <span class="text-wrapper">.</span>
+        <br /> <!-- Переносим текст на новую строку -->
+        <span class="text-wrapper">
+          Либо оставьте почту:
+        </span>
+      </p>
+      <div class="bottom-container">
+        <div class="frame">
+          <input class="input-style" type="text" placeholder="[email protected]" />
+        </div>
+        <div class="div-wrapper">
+          <div class="text-wrapper-3">Получить информацию</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.box {
+  width: 560px;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto;
+}
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* Выравнивание по левому краю */
+  text-align: left; /* Выравнивание текста по левому краю */
+  width: 100%; /* Занимает всю ширину родительского блока */
+}
+
+.team-hawk-so-t-me {
+  display: inline; /* Обычное поведение текста */
+  font-family: "Roboto-Regular", Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 23px;
+  color: #f2f6ff;
+  margin-bottom: 20px;
+  word-break: break-word; /* Позволяет переносить длинные слова */
+}
+
+.text-wrapper,
+.span {
+  display: inline; /* Устанавливаем inline, чтобы они вели себя как обычный текст */
+}
+
+.text-wrapper {
+  color: #f2f6ff;
+}
+
+.span {
+  color: #379fff;
+}
+
+.div {
+  color: #f2f6ff;
+  font-family: "Roboto-Bold", Helvetica;
+  font-size: 26px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  white-space: nowrap;
+}
+
+.bottom-container {
+  display: flex;
+  justify-content: space-between; /* Размещает элементы на одной строке */
+  width: 100%;
+  margin-top: 10px; /* Небольшой отступ между frame и div-wrapper */
+}
+
+.frame {
+  align-items: center;
+  background-color: #242832; /* Цвет фона для frame */
+  border-radius: 8px;
+  display: flex;
+  margin-right: 10px;
+  gap: 10px;
+  flex: 1; /* Растягивает элемент до максимальной ширины */
+}
+
+.div-wrapper {
+  align-items: center;
+  background-color: #0d75d4; /* Цвет фона для div-wrapper */
+  border-radius: 8px;
+  display: inline-flex;
+  gap: 10px;
+  padding: 10px 12px;
+  flex: 1; /* Растягивает элемент до максимальной ширины */
+}
+
+.input-style {
+  background-color: #242832; /* Цвет фона для input */
+  color: #ffffff4c; /* Цвет текста для input */
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 16px;
+  flex: 1; /* Занимает все доступное пространство внутри frame */
+}
+
+.text-wrapper-3 {
+  color: #f2f6ff;
+  font-family: "Roboto-Regular", Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+</style>

components/site-header-ru.vue

@@ -0,0 +1,189 @@
+  <template>
+  <div
+    class="site-header"
+    :class="{
+      'site-header--menu-showed': mobileMenuShowed
+    }"
+  >
+    <div class="site-header__inner">
+      <span class="site-header__menu-toggler" @click="toggleMobileMenu">
+        Menu
+      </span>
+
+      <a
+        class="site-header__logo"
+        href="/"
+      >
+        <img
+          src="~/assets/images/hawk-logo.png"
+          alt="Hawk.so logo"
+        >
+        Hawk
+      </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>
+
+      <a class="site-header__signin" href="//garage.hawk.so">
+        <icon-sign-in />
+        To Garage
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import IconSignIn from '~/assets/svg/sign-in.svg?inline';
+
+export default Vue.extend({
+  components: {
+    IconSignIn,
+  },
+  data() {
+    return {
+      /**
+       * Visibility state of menu that is hidden on mobile devices by default
+       */
+      mobileMenuShowed: false,
+    };
+  },
+  methods: {
+    /**
+     * Shows/Hides the mobile menu
+     */
+    toggleMobileMenu(): void {
+      this.mobileMenuShowed = !this.mobileMenuShowed;
+    },
+  },
+});
+</script>
+
+<style lang="postcss">
+  .site-header {
+    height: 50px;
+    background: var(--color-bg-header);
+    color: var(--color-text-main);
+    font-size: 15px;
+    font-weight: 500;
+
+    @media (--screen-mobile) {
+      height: auto;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      max-width: var(--layout-main-col-width);
+      margin: 0 auto;
+      padding: 0 var(--layout-paddings-horisontal);
+
+      @media (--screen-mobile) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
+    &__logo {
+      display: flex;
+      align-items: center;
+      margin-right: 55px;
+      font-weight: 900;
+      font-size: 15px;
+      color: #FFFFFF !important;
+      letter-spacing: 0.38px;
+      text-align: left;
+
+      @media (--screen-mobile) {
+        margin-right: 0;
+        padding: 15px 0;
+      }
+
+      img {
+        width: 24px;
+        margin-right: 7px;
+      }
+    }
+
+    &__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 {
+      @media (--screen-mobile) {
+        display: none;
+      }
+
+      ^&--menu-showed & {
+        @media (--screen-mobile) {
+          display: block;
+        }
+      }
+
+      a {
+        display: inline-block;
+        margin-right: 30px;
+
+        @media (--screen-mobile) {
+          display: block;
+          padding: 10px 0;
+          margin-right: 0;
+        }
+      }
+
+      &-toggler {
+        display: none;
+
+        position: absolute;
+        right: 10px;
+        height: calc(24px + 15px * 2);
+        align-items: center;
+        padding: 10px;
+
+        @media (--screen-mobile) {
+          display: flex;
+        }
+      }
+    }
+
+    &__signin {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      @media (--screen-mobile) {
+        display: none;
+        margin-left: 0;
+        padding: 10px 0;
+        margin-bottom: 10px;
+        margin-top: 10px;
+      }
+
+      ^&--menu-showed & {
+        @media (--screen-mobile) {
+          display: flex;
+        }
+      }
+
+      svg {
+        margin-right: 6px;
+      }
+    }
+  }
+</style>

components/site-header.vue

@@ -1,4 +1,4 @@
-<template>
+  <template>
   <div
     class="site-header"
     :class="{

layouts/default-ru.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <site-header-ru />
+    <Nuxt />
+    <site-footer />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import SiteFooter from '~/components/site-footer.vue';
+
+export default Vue.extend({
+  components: {
+    SiteFooter,
+  },
+});
+</script>
+
+<style>
+html {
+  font-family: 'Roboto',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+
+  background: var(--color-bg-main);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+</style>