From 4b2ff76263a9bb5819be3ffea4473ffc459d779a Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Fri, 20 Dec 2024 17:14:45 +0300
Subject: [PATCH 1/2] minor updates

---
 assets/svg/locale-version.svg |   5 -
 components/contact.vue        |  45 +++--
 components/grid-info.vue      |  71 ++++---
 components/site-header.vue    |  10 +-
 pages/index.vue               | 343 ++++++++++++++++++++--------------
 5 files changed, 275 insertions(+), 199 deletions(-)
 delete mode 100644 assets/svg/locale-version.svg

diff --git a/assets/svg/locale-version.svg b/assets/svg/locale-version.svg
deleted file mode 100644
index 0408479..0000000
--- a/assets/svg/locale-version.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<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 96d81e5..636ac44 100644
--- a/components/contact.vue
+++ b/components/contact.vue
@@ -1,13 +1,15 @@
 <template>
   <div :class="['box', inputActive && 'box__active']">
     <div class="contact">
-      <div :class="[`div-${$props.titleSize}`, `div`, inputActive && 'div__active']">{{ $props.title }}</div>
+      <div :class="[`div-${$props.titleSize}`, `div`, inputActive && 'div__active']">
+        {{ $props.title }}
+      </div>
       <p :class="['team-hawk-so-t-me', inputActive && 'team-hawk-so-t-me__active']">
         Чтобы начать сотрудничество или получить больше информации, напишите нам на
         <a href="mailto:team@hawk.so"> team@hawk.so</a>
         или в телеграм
-        <a href="https://t.me/+xWe73YEfIVRlNmYy">t.me/hawk⁠-⁠support</a>.
-        <br />
+        <a href="https://t.me/hawk_tracker">t.me/hawk_tracker</a>.
+        <br>
         <span class="text-wrapper">
           Либо оставьте почту:
         </span>
@@ -16,23 +18,27 @@
         v-if="mail === '' || mail === undefined"
         class="bottom-container"
         @submit.prevent="notify(inputData)"
-        >
+      >
         <div class="frame">
           <input
             required
             :value="inputData"
             :class="['input-style', inputActive && 'input-style-active']"
-            @input="inputData = $event.target.value"
             type="email"
-            placeholder="dev@yourproduct.ru" />
+            placeholder="dev@yourproduct.ru"
+            @input="inputData = $event.target.value"
+          >
         </div>
         <button class="div-wrapper">
-          <div class="text-wrapper-3">Получить информацию</div>
+          <div class="text-wrapper-3">
+            Получить информацию
+          </div>
         </button>
       </form>
-      <div v-else
+      <div
+        v-else
         class="bottom-container, bottom-container__text"
-        >
+      >
         Спасибо, мы свяжемся с вами по почте <b>{{ mail }}</b>
       </div>
     </div>
@@ -56,13 +62,13 @@ export default Vue.extend({
     },
     mail: {
       type: String,
-      required: true
+      required: true,
     },
   },
   data() {
     return {
       inputData: this.mail,
-    }
+    };
   },
   watch: {
     mail(newMail) {
@@ -70,24 +76,23 @@ export default Vue.extend({
     },
   },
   methods: {
-    notify: function(message: string): void {
+    notify(message: string): void {
       fetch('https://notify.bot.codex.so/u/U8S04KRK5R51', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded'
+          'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: new URLSearchParams({
-          'message': message
-        })
-      })
-      .then(_ => {
-        this.$emit('update:mail', this.inputData);
+          message,
+        }),
       })
-      .catch(error => console.error('Error:', error));
+        .then((_) => {
+          this.$emit('update:mail', this.inputData);
+        })
+        .catch(error => console.error('Error:', error));
     },
   },
 
-
 });
 </script>
 
diff --git a/components/grid-info.vue b/components/grid-info.vue
index f3ed121..32388a6 100644
--- a/components/grid-info.vue
+++ b/components/grid-info.vue
@@ -3,71 +3,86 @@
     <div class="grid">
       <div class="block">
         <div class="grid__block">
-          <h2 class="title">Open Source</h2>
-          <div class="text">Исходный код открыт<br/>для исследования и обсуждения</div>
+          <h2 class="title">
+            Open Source
+          </h2>
+          <div class="text">
+            Исходный код открыт<br>для исследования и обсуждения
+          </div>
         </div>
         <div class="grid__block">
-          <div class="title">100 000 000</div>
-          <div class="text">Событий обрабатывается<br>каждый день</div>
+          <div class="title">
+            100 000 000
+          </div>
+          <div class="text">
+            Событий обрабатывается<br>каждый день
+          </div>
         </div>
       </div>
       <div class="grid__block">
-        <h2 class="title">Проверено продуктами</h2>
-        <div class="text">Hawk используется рядом хорошо известных продуктов.<br>И еще большим количеством менее известных.</div>
+        <h2 class="title">
+          Проверено продуктами
+        </h2>
+        <div class="text">
+          Hawk используется рядом хорошо известных продуктов.<br>И еще большим количеством менее известных.
+        </div>
         <div class="products">
-          <VcIcon class="svg, products__box1"/>
-          <DtfIcon class="svg, products__box2"/>
-          <EditorIcon class="svg, products__box3"/>
-          <HeykaIcon class="svg, products__box4"/>
-          <TjIcon class="svg, products__box5"/>
+          <VcIcon class="svg, products__box1" />
+          <DtfIcon class="svg, products__box2" />
+          <EditorIcon class="svg, products__box3" />
+          <HeykaIcon class="svg, products__box4" />
+          <TjIcon class="svg, products__box5" />
         </div>
       </div>
     </div>
     <div class="grid__block">
       <div class="stack">
         <div class="cell">
-          <img src='~/assets/svg/ru/vue.svg' class="svg"/>
+          <img src="~/assets/svg/ru/vue.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/vite.svg' class="svg"/>
+          <img src="~/assets/svg/ru/vite.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/webpack.svg' class="svg"/>
+          <img src="~/assets/svg/ru/webpack.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/js.svg' class="svg"/>
+          <img src="~/assets/svg/ru/js.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/node.svg' class="svg"/>
+          <img src="~/assets/svg/ru/node.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/kotlin.svg' class="svg"/>
+          <img src="~/assets/svg/ru/kotlin.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/python.svg' class="svg"/>
+          <img src="~/assets/svg/ru/python.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/go.svg' class="svg"/>
+          <img src="~/assets/svg/ru/go.svg" class="svg">
         </div>
         <div class="cell">
-          <img src='~/assets/svg/ru/php.svg' class="svg"/>
+          <img src="~/assets/svg/ru/php.svg" class="svg">
         </div>
       </div>
-      <h2 class="title">Поддерживает <br/>ваши технологии</h2>
-      <div class="text">Хоук имеет интеграции с популярными<br/>технологиями и фреймворками. </div>
+      <h2 class="title">
+        Поддерживает <br>ваши технологии
+      </h2>
+      <div class="text">
+        Хоук имеет <a href="https://docs.hawk.so/integrations">интеграции</a> с популярными<br>технологиями и фреймворками.
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import Vue from 'vue';
 import VcIcon from '~/assets/svg/ru/vc.svg?inline';
 import DtfIcon from '~/assets/svg/ru/dtf.svg?inline';
 import EditorIcon from '~/assets/svg/ru/editorjs.svg?inline';
 import HeykaIcon from '~/assets/svg/ru/heyka.svg?inline';
 import TjIcon from '~/assets/svg/ru/notex.svg?inline';
 
-
-import Vue from 'vue';
 export default Vue.extend({
   components: {
     VcIcon,
@@ -79,9 +94,9 @@ export default Vue.extend({
   data() {
     return {
       svgUrls: [
-      ]
+      ],
     };
-  }
+  },
 });
 </script>
 
@@ -107,6 +122,10 @@ export default Vue.extend({
     @media(--screen-mobile) {
       padding: 20px 30px;
     }
+
+    a {
+      text-decoration: underline;
+    }
   }
 }
 
diff --git a/components/site-header.vue b/components/site-header.vue
index 38b28ec..9c69a94 100644
--- a/components/site-header.vue
+++ b/components/site-header.vue
@@ -18,17 +18,11 @@
           src="~/assets/images/hawk-logo.png"
           alt="Hawk.so logo"
         >
-        Hawk
+        Хоук
       </a>
       <div class="site-header__menu">
         <a href="https://docs.hawk.so/">Документация</a>
         <a href="https://codex.so/hawk-overview">О проекте</a>
-        <div
-          class="site-header__menu__local-version"
-        >
-          <img src="~/assets/svg/locale-version.svg" class="site-header__menu__local-version-svg"/>
-          <div class="text-container">Локализованная версия</div>
-        </div>
       </div>
       <a
         href="https://github.com/codex-team/hawk.mono"
@@ -36,7 +30,7 @@
       >
         <img
           src="~/assets/svg/ru/github.svg"
-        />
+        >
       </a>
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 247bba9..cda53b8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="yard">
-   <div class="landing">
+    <div class="landing">
       <illustration class="landing__illustration" />
       <div class="landing__content">
         <div class="landing__content-head">
@@ -10,14 +10,20 @@
             </h1>
 
             <div class="description">
-              Хоук улучшает качество продукта.<br/>
-              Он отлавливает ошибки в ПО и помогает их устранить.<br/>
-              Локализованная версия позволяет не зависеть от зарубежных сервисов.<br/>
+              Хоук улучшает качество продукта.<br>
+              Он отлавливает ошибки в ПО и помогает их устранить.<br>
+              Локализованная версия позволяет не зависеть от зарубежных сервисов.<br>
             </div>
             <div class="landing__content-head-left-advantages">
-              <h2 class="landing__content-head-left-advantages-text">Сервера в России</h2>
-              <h2 class="landing__content-head-left-advantages-text">Оплата по счету юр. лица</h2>
-              <h2 class="landing__content-head-left-advantages-text">Помощь с интеграцией</h2>
+              <h2 class="landing__content-head-left-advantages-text">
+                Сервера в России
+              </h2>
+              <h2 class="landing__content-head-left-advantages-text">
+                Оплата по счету юр. лица
+              </h2>
+              <h2 class="landing__content-head-left-advantages-text">
+                Помощь с интеграцией
+              </h2>
             </div>
           </div>
         </div>
@@ -28,11 +34,12 @@
       <div class="contact-container">
         <Contact
           :mail="mail"
-          @update:mail="updateMail"
           title="Свяжитесь с нами"
-          titleSize="small"
+          title-size="small"
           style="margin-top: 115px;
-                padding: 0 30px;"/>
+                padding: 0 30px;"
+          @update:mail="updateMail"
+        />
       </div>
     </div>
     <div class="section section--with-gradient">
@@ -44,17 +51,29 @@
       </div>
     </div>
     <div class="content-blocks">
-      <gridInfo/>
-        <div class="contact-container, contact-container__backgrounded">
-          <Contact
-            inputActive
-            title="Подключайтесь"
-            titleSize="medium"
-            :mail="mail"
-            @update:mail="updateMail"/>
+      <gridInfo />
+      <div class="contact-container, contact-container__backgrounded">
+        <Contact
+          input-active
+          title="Подключайтесь"
+          title-size="medium"
+          :mail="mail"
+          @update:mail="updateMail"
+        />
+      </div>
+
+      <div class="how-to-start">
+        <h3>Начните сейчас</h3>
+        <div class="how-to-start__text">
+          <a href="https://garage.hawk.so/" target="_blank">Зарегистрируйтесь</a> → Создайте Воркспейс → Создайте проект и получите токен → Подключите SDK в свой код
+        </div>
+        <div class="how-to-start__link">
+          Начало работы с Хоуком
+          <a href="https://codex.so/hawk-getting-started" target="_blank">https://codex.so/hawk-getting-started</a>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -75,66 +94,66 @@ export default Vue.extend({
     gridInfo,
   },
   jsonld() {
-    return [{
-      "@context": "https://schema.org",
-      "@type": "WebPage",
-      "name": "Хоук — российский трекер ошибок",
-      "description": "Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом",
-      "image": "https://hawk-tracker.ru/hawk-ru-og-image.png",
-      "url": "https://hawk-tracker.ru",
-      "publisher": {
-        "@type": "Organization",
-        "name": "Хоук",
-        "logo": {
-          "@type": "ImageObject",
-          "url": "https://hawk-tracker.ru/hawk-ru-og-image.png"
-        }
+    return [ {
+      '@context': 'https://schema.org',
+      '@type': 'WebPage',
+      name: 'Хоук — российский трекер ошибок',
+      description: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом',
+      image: 'https://hawk-tracker.ru/hawk-ru-og-image.png',
+      url: 'https://hawk-tracker.ru',
+      publisher: {
+        '@type': 'Organization',
+        name: 'Хоук',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://hawk-tracker.ru/hawk-ru-og-image.png',
+        },
       },
-      "creator": {
-        "@type": "Organization",
-        "name": "CodeX",
-        "description": "Команда open-source разработчиков",
-        "url": "https://codex.so",
-        "logo": {
-          "@type": "ImageObject",
-          "url": "https://codex.so/public/app/img/codex-logo.svg"
+      creator: {
+        '@type': 'Organization',
+        name: 'CodeX',
+        description: 'Команда open-source разработчиков',
+        url: 'https://codex.so',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://codex.so/public/app/img/codex-logo.svg',
         },
-        "sameAs": [
-          "http://twitter.com/codex_team"
-        ]
-      }
+        sameAs: [
+          'http://twitter.com/codex_team',
+        ],
+      },
     },
     {
-      "@context": "https://schema.org",
-      "@type": "Product",
-      "name": "Хоук — российский трекер ошибок",
-      "description": "Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом",
-      "image": "https://hawk-tracker.ru/hawk-ru-og-image.png",
-      "brand": {
-        "@type": "Brand",
-        "name": "Хоук"
+      '@context': 'https://schema.org',
+      '@type': 'Product',
+      name: 'Хоук — российский трекер ошибок',
+      description: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом',
+      image: 'https://hawk-tracker.ru/hawk-ru-og-image.png',
+      brand: {
+        '@type': 'Brand',
+        name: 'Хоук',
       },
-      "offers": {
-        "@type": "Offer",
-        "url": "https://hawk-tracker.ru",
-        "priceCurrency": "RUB",
-        "price": "0",  // Adjust this value to the actual price
-        "availability": "https://schema.org/InStock"
+      offers: {
+        '@type': 'Offer',
+        url: 'https://hawk-tracker.ru',
+        priceCurrency: 'RUB',
+        price: '0', // Adjust this value to the actual price
+        availability: 'https://schema.org/InStock',
       },
-      "creator": {
-        "@type": "Organization",
-        "name": "CodeX",
-        "description": "Команда open-source разработчиков",
-        "url": "https://codex.so",
-        "logo": {
-          "@type": "ImageObject",
-          "url": "https://codex.so/public/app/img/codex-logo.svg"
+      creator: {
+        '@type': 'Organization',
+        name: 'CodeX',
+        description: 'Команда open-source разработчиков',
+        url: 'https://codex.so',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://codex.so/public/app/img/codex-logo.svg',
         },
-        "sameAs": [
-          "http://twitter.com/codex_team"
-        ]
-      }
-    }]
+        sameAs: [
+          'http://twitter.com/codex_team',
+        ],
+      },
+    } ];
   },
   data(): {
     /**
@@ -212,129 +231,129 @@ export default Vue.extend({
       mail: '',
     };
   },
-  mounted() {
-    window.addEventListener('scroll', () => {
-      this.scroll = window.scrollY;
-    }, { passive: true });
-
-    this.updateDownloadButtomWithPlatform();
-  },
-  methods: {
-    /**
-     * Returns the visitor OS
-     *
-     * @returns platform code name
-     */
-    getPlatform(): string {
-      const ua = window.navigator.userAgent.toLowerCase();
-
-      if (ua.includes('windows')) {
-        return 'Windows';
-      } else if (ua.includes('mac')) {
-        return 'macOS';
-      } else if (ua.includes('linux')) {
-        return 'Linux';
-      }
-
-      return 'Unknown';
-    },
-
-    updateMail(newMail: string) {
-      this.mail = newMail;
-    },
-
-    /**
-     * Update label and href of the Download button
-     * corresponding by user platform
-     */
-    updateDownloadButtomWithPlatform(): void {
-      const platform = this.getPlatform();
-
-      switch (platform) {
-        case 'Windows':
-          this.downloadButtonLabel = 'Download for Windows';
-          break;
-        case 'macOS':
-          this.downloadButtonLabel = 'Download for macOS';
-          break;
-        case 'Linux':
-          this.downloadButtonLabel = 'Download for Linux';
-          break;
-        default:
-          this.downloadButtonLabel = 'Download for Desktop';
-          break;
-      }
-    },
-  },
   head() {
     return {
-      title: "Хоук — российский трекер ошибок",
+      title: 'Хоук — российский трекер ошибок',
       link: [
         {
           rel: 'canonical',
           href: 'https://hawk-tracker.ru',
-          id: 'canonical'
+          id: 'canonical',
         },
       ],
       meta: [
         {
           hid: 'description',
           name: 'description',
-          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом'
+          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом',
         },
         {
           hid: 'og:title',
           name: 'og:title',
-          content: 'Хоук — российский трекер ошибок'
+          content: 'Хоук — российский трекер ошибок',
         },
         {
           hid: 'og:description',
           name: 'og:description',
-          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом'
+          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом',
         },
         {
           hid: 'og:image',
           name: 'og:image',
-          content: 'https://hawk-tracker.ru/hawk-ru-og-image.png'
+          content: 'https://hawk-tracker.ru/hawk-ru-og-image.png',
         },
         {
           hid: 'og:url',
           name: 'og:url',
-          content: 'https://hawk-tracker.ru'
+          content: 'https://hawk-tracker.ru',
         },
         {
           hid: 'og:type',
           name: 'og:type',
-          content: 'website'
+          content: 'website',
         },
         {
           hid: 'twitter:card',
           name: 'twitter:card',
-          content: 'summary_large_image'
+          content: 'summary_large_image',
         },
         {
           hid: 'twitter:title',
           name: 'twitter:title',
-          content: 'Хоук — российский трекер ошибок'
+          content: 'Хоук — российский трекер ошибок',
         },
         {
           hid: 'twitter:description',
           name: 'twitter:description',
-          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом'
+          content: 'Мониторинг ошибок в ПО с серверами в России и открытым исходным кодом',
         },
         {
           hid: 'twitter:image',
           name: 'twitter:image',
-          content: 'https://hawk-tracker.ru/hawk-ru-og-image.png'
+          content: 'https://hawk-tracker.ru/hawk-ru-og-image.png',
         },
         {
           hid: 'twitter:url',
           name: 'twitter:url',
-          content: 'https://hawk-tracker.ru'
+          content: 'https://hawk-tracker.ru',
         },
       ],
-    }
-  }
+    };
+  },
+  mounted() {
+    window.addEventListener('scroll', () => {
+      this.scroll = window.scrollY;
+    }, { passive: true });
+
+    this.updateDownloadButtomWithPlatform();
+  },
+  methods: {
+    /**
+     * Returns the visitor OS
+     *
+     * @returns platform code name
+     */
+    getPlatform(): string {
+      const ua = window.navigator.userAgent.toLowerCase();
+
+      if (ua.includes('windows')) {
+        return 'Windows';
+      } else if (ua.includes('mac')) {
+        return 'macOS';
+      } else if (ua.includes('linux')) {
+        return 'Linux';
+      }
+
+      return 'Unknown';
+    },
+
+    updateMail(newMail: string) {
+      this.mail = newMail;
+    },
+
+    /**
+     * Update label and href of the Download button
+     * corresponding by user platform
+     */
+    updateDownloadButtomWithPlatform(): void {
+      const platform = this.getPlatform();
+
+      switch (platform) {
+        case 'Windows':
+          this.downloadButtonLabel = 'Download for Windows';
+          break;
+        case 'macOS':
+          this.downloadButtonLabel = 'Download for macOS';
+          break;
+        case 'Linux':
+          this.downloadButtonLabel = 'Download for Linux';
+          break;
+        default:
+          this.downloadButtonLabel = 'Download for Desktop';
+          break;
+      }
+    },
+  },
 });
 </script>
 
@@ -632,4 +651,48 @@ export default Vue.extend({
     }
   }
 }
+
+.how-to-start {
+  margin-top: 120px;
+  color: #929AAD;
+  text-align: center;
+
+  h3 {
+    font-size: 26px;
+    line-height: 22px;;
+    font-weight: 700;
+    color: #F2F6FF;
+  }
+
+  &__text {
+    margin-top: 26px;
+    font-size: 14px;
+    line-height: 1.45em;
+
+    a {
+      border-bottom: 1px solid rgba(187, 192, 255, 0.2);
+    }
+  }
+
+  &__link {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: flex-start;
+    padding: 15px 20px;
+    text-align: left;
+    gap: 2px;
+    color: #A9B7D7;
+    background: #15171F;
+    border: 1px solid rgba(187, 192, 255, 0.08);
+    border-radius: 14px;
+    margin: 26px auto 0;
+
+    a {
+      color: #5584F5;
+      text-decoration: none;
+    }
+  }
+}
 </style>

From 160d4bc8a3be29d4155851bfd8b75bf46f883fff Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Fri, 20 Dec 2024 17:18:25 +0300
Subject: [PATCH 2/2] Update contact.vue

---
 components/contact.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/contact.vue b/components/contact.vue
index 636ac44..867298e 100644
--- a/components/contact.vue
+++ b/components/contact.vue
@@ -11,7 +11,7 @@
         <a href="https://t.me/hawk_tracker">t.me/hawk_tracker</a>.
         <br>
         <span class="text-wrapper">
-          Либо оставьте почту:
+          Либо оставьте телеграм или имейл:
         </span>
       </p>
       <form
@@ -24,8 +24,8 @@
             required
             :value="inputData"
             :class="['input-style', inputActive && 'input-style-active']"
-            type="email"
-            placeholder="dev@yourproduct.ru"
+            type="text"
+            placeholder="Telegram или email"
             @input="inputData = $event.target.value"
           >
         </div>