From 437364d4f26de6db210ffeea09b72004f72a83c1 Mon Sep 17 00:00:00 2001
From: e11sy <Egoramurin@gmail.com>
Date: Sun, 30 Jun 2024 03:32:31 +0300
Subject: [PATCH] added grid info component

- added grid info component
- patched contact component
- setup for ru layout
---
 assets/svg/vite.svg                |   1 +
 assets/svg/vue.svg                 |  15 ++
 assets/svg/webpack.svg             |   1 +
 components/contact.vue             |  30 +++-
 components/grid-info.vue           | 155 ++++++++++++++++
 components/site-footer-ru.vue      | 273 +++++++++++++++++++++++++++++
 layouts/{default-ru.vue => ru.vue} |   6 +-
 pages/ru.vue                       |  70 +++-----
 8 files changed, 506 insertions(+), 45 deletions(-)
 create mode 100644 assets/svg/vite.svg
 create mode 100644 assets/svg/vue.svg
 create mode 100644 assets/svg/webpack.svg
 create mode 100644 components/grid-info.vue
 create mode 100644 components/site-footer-ru.vue
 rename layouts/{default-ru.vue => ru.vue} (81%)

diff --git a/assets/svg/vite.svg b/assets/svg/vite.svg
new file mode 100644
index 0000000..158bc32
--- /dev/null
+++ b/assets/svg/vite.svg
@@ -0,0 +1 @@
+<svg height="2500" preserveAspectRatio="xMidYMid" width="2490" xmlns="http://www.w3.org/2000/svg" viewBox="-1.871 -0.4069999999999627 259.721 257.849"><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0" stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0" stop-color="#ffea83"/><stop offset=".083" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient><path d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z" fill="url(#a)"/><path d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z" fill="url(#b)"/></svg>
diff --git a/assets/svg/vue.svg b/assets/svg/vue.svg
new file mode 100644
index 0000000..70cc501
--- /dev/null
+++ b/assets/svg/vue.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -17.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M204.8,0 L256,0 L128,220.8 L0,0 L50.56,0 L97.92,0 L128,51.2 L157.44,0 L204.8,0 Z" fill="#41B883">
+
+</path>
+		<path d="M0,0 L128,220.8 L256,0 L204.8,0 L128,132.48 L50.56,0 L0,0 Z" fill="#41B883">
+
+</path>
+		<path d="M50.56,0 L128,133.12 L204.8,0 L157.44,0 L128,51.2 L97.92,0 L50.56,0 Z" fill="#35495E">
+
+</path>
+	</g>
+</svg>
diff --git a/assets/svg/webpack.svg b/assets/svg/webpack.svg
new file mode 100644
index 0000000..1194165
--- /dev/null
+++ b/assets/svg/webpack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"><path d="M29.54 24.663L16.57 32v-5.713l8.08-4.446zm.888-.803V8.52l-4.744 2.742v9.862zm-27.966.803L15.43 32v-5.713L7.345 21.84zm-.888-.803V8.52l4.744 2.742v9.862zM2.13 7.524L15.43 0v5.522L6.84 10.25zm27.74 0L16.57 0v5.522l8.59 4.723z" fill="#8ed6fb"/><path d="M15.43 25.237L7.456 20.85v-8.684l7.974 4.604zm1.14 0l7.975-4.383v-8.69L16.57 16.77zm-.57-8.8zm-8.004-5.275L16 6.763l8.004 4.4L16 15.783z" fill="#1c78c0"/></svg>
diff --git a/components/contact.vue b/components/contact.vue
index fcc3aaa..ea9390a 100644
--- a/components/contact.vue
+++ b/components/contact.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <div class="contact">
-      <div class="div">Свяжитесь с нами</div>
+      <div :class="[`div-${$props.titleSize}`, `div`]">{{ $props.title }}</div>
       <p class="team-hawk-so-t-me">
         <span class="text-wrapper">
           Чтобы начать сотрудничество или получить больше информации, напишите нам на
@@ -27,6 +27,25 @@
   </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'Contact',
+  props: {
+    title: {
+      type: String,
+    },
+    inputActive: {
+      type: Boolean,
+    },
+    titleSize: {
+      type: String,
+    }
+  },
+});
+</script>
+
 <style>
 .box {
   width: 560px;
@@ -70,10 +89,17 @@
 .div {
   color: #f2f6ff;
   font-family: "Roboto-Bold", Helvetica;
-  font-size: 26px;
   font-weight: 700;
   margin-bottom: 20px;
   white-space: nowrap;
+
+  &-medium {
+    font-size: 36px;
+  }
+
+  &-small {
+    font-size: 26px;
+  }
 }
 
 .bottom-container {
diff --git a/components/grid-info.vue b/components/grid-info.vue
new file mode 100644
index 0000000..7f900a7
--- /dev/null
+++ b/components/grid-info.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="block">
+    <div class="grid">
+      <div class="block">
+        <div class="block-left">
+          <div class="title">Open Source</div>
+          <div class="text">Исходный код открыт для исследования и обслуживания</div>
+        </div>
+        <div class="block-left">
+          <div class="title">100 000 000</div>
+          <div class="text">Событий обрабатывается<br>каждый день</div>
+        </div>
+      </div>
+      <div class="block-bottom">
+        <div class="title">Проверено продуктами</div>
+        <div class="text">Hawk используется рядом хорошо известных продуктов.<br>И еще большим количеством менее известных.</div>
+        <div class="products">
+          <img src="~/assets/svg/used-by/vc.svg" class="svg"/>
+          <img src="~/assets/svg/used-by/dtf.svg" class="svg"/>
+          <img src="~/assets/svg/used-by/editorjs.svg" class="svg"/>
+          <img src="~/assets/svg/used-by/heyka.svg" class="svg"/>
+          <img src="~/assets/svg/used-by/tj.svg" class="svg"/>
+        </div>
+      </div>
+    </div>
+    <div class="block-bottom">
+      <div class="stack">
+        <div class="cell">
+          <img src='~/assets/svg/vue.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/vite.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/webpack.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/javascript.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/nodejs.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/kotlin.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/python.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/go.svg' class="svg"/>
+        </div>
+        <div class="cell">
+          <img src='~/assets/svg/php.svg' class="svg"/>
+        </div>
+      </div>
+      <div class="title">Поддерживает<br/>ваши технологии</div>
+      <div class="text">Хоук имеет интеграции с популярными<br/>технологиями и фреймворками. </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  data() {
+    return {
+      svgUrls: [
+        // '~/assets/svg/vue.svg',
+        // '~/assets/svg/vite.svg',
+        // '~/assets/svg/webpack.svg',
+      ]
+    };
+  }
+});
+</script>
+
+<style>
+.grid {
+  display: grid;
+  gap: 16px;
+}
+.block {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+.block-left {
+  background-color: #242936;
+  display: grid;
+  gap: 12px;
+  border-radius: 9px;
+  width: 278px;
+  height: auto;
+  padding: 40px 30px;
+}
+
+.block-bottom {
+  background-color: #242936;
+  display: grid;
+  gap: 12px;
+  height: auto;
+  border-radius: 9px;
+  width: auto;
+  padding: 40px 30px;
+}
+
+.title {
+  font-family: "Roboto";
+  font-size: 24px;
+  line-height: 28.13px;
+  color: #DBE6FF;
+  text-align: center;
+}
+
+.text {
+  font-family: "Roboto";
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(219, 230, 255, 0.6);
+  text-align: center;
+}
+
+.products {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+
+  .svg {
+    width: auto;
+    height: 32px;
+    filter: grayscale(1);
+  }
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stack {
+  justify-content: center;
+  display: inline-grid;
+  grid-template-columns: repeat(3, auto);
+  grid-template-rows: repeat(2, auto);
+  gap: 20px; /* Зазор между элементами */
+  margin-bottom: 20px;
+
+  .svg {
+    width: auto;
+    height: 32px;
+  }
+}
+</style>
diff --git a/components/site-footer-ru.vue b/components/site-footer-ru.vue
new file mode 100644
index 0000000..fc5c85b
--- /dev/null
+++ b/components/site-footer-ru.vue
@@ -0,0 +1,273 @@
+<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>
+  </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>
+
+<style lang="postcss" scoped>
+
+.yard-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)
+  }
+
+  &__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;
+
+    &:not(:last-of-type){
+      @media (--screen-mobile) {
+        margin-bottom: 30px;
+      }
+    }
+
+    &-links {
+      display: grid;
+      grid-template-columns: 1fr;
+
+      &--multicolumn {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+
+  }
+
+  &__title {
+    font-size: 16px;
+    margin-bottom: 13px;
+    font-weight: 800;
+    color: var(--color-text-main);
+  }
+
+  &__item {
+    padding: 2px 0;
+  }
+}
+</style>
diff --git a/layouts/default-ru.vue b/layouts/ru.vue
similarity index 81%
rename from layouts/default-ru.vue
rename to layouts/ru.vue
index d6a82ca..4ce543c 100644
--- a/layouts/default-ru.vue
+++ b/layouts/ru.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <site-header-ru />
+    <site-header />
     <Nuxt />
     <site-footer />
   </div>
@@ -8,10 +8,12 @@
 
 <script>
 import Vue from 'vue';
-import SiteFooter from '~/components/site-footer.vue';
+import SiteFooter from '~/components/site-footer-ru.vue';
+import SiteHeader from '~/components/site-header-ru.vue';
 
 export default Vue.extend({
   components: {
+    SiteHeader,
     SiteFooter,
   },
 });
diff --git a/pages/ru.vue b/pages/ru.vue
index 0708724..00f3094 100644
--- a/pages/ru.vue
+++ b/pages/ru.vue
@@ -1,4 +1,5 @@
 <template>
+  <NuxtLayout name="ru">
     <div class="yard">
       <div class="landing">
         <illustration class="landing__illustration" />
@@ -28,7 +29,9 @@
           </div>
         </div>
         <br/>
-        <Contact/>
+        <Contact
+        title="Свяжитесь с нами"
+        titleSize="small"/>
       </div>
       <div class="section section--with-gradient">
         <div class="section__content">
@@ -38,50 +41,18 @@
           <features :features="features" />
         </div>
       </div>
-
-      <div class="section">
-        <open-source />
-      </div>
-
-      <div class="section">
-        <div class="section__content">
-          <number
-            :value="'100 000 000'"
-            caption="events processed every day"
-          />
-        </div>
-      </div>
-
-      <div class="section section--small">
-        <div class="section__content">
-          <h2 class="section__title">
-            Tested by products
-          </h2>
-          <div class="section__description">
-            Hawk is used by several big well-known products. And by some small and unkown ones.
-          </div>
-          <used-by-table
-            :items="usedBy"
-          />
-        </div>
-      </div>
-
-      <div class="section section--small">
-        <div class="section__content">
-          <h2 class="section__title">
-            Supports your stack
-          </h2>
-          <div class="section__description">
-            Hawk has integrations for most of languages. And their count continuously increases.
-          </div>
-          <stack :items="stack" />
-        </div>
-      </div>
-
   <!--  <div class="section section&#45;&#45;small">-->
   <!--    <a href="https://www.producthunt.com/posts/hawk-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-hawk-2" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=333015&theme=light" alt="Hawk - Open-source errors tracker | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>-->
   <!--  </div>-->
+    <div class="content-blocks">
+      <gridInfo/>
+        <div class="contact-container">
+          <Contact title="Подключайтесь"
+          titleSize="medium"/>
+        </div>
+      </div>
     </div>
+  </NuxtLayout>
 </template>
 
 <script lang="ts">
@@ -96,6 +67,7 @@ import Number from '~/components/number.vue';
 import UsedByTable, {UsedByItem} from '~/components/used-by-table.vue';
 import UiButton from '~/components/ui-button.vue';
 import Contact from '~/components/contact.vue';
+import gridInfo from '~/components/grid-info.vue';
 
 export default Vue.extend({
   components: {
@@ -108,7 +80,9 @@ export default Vue.extend({
     OpenSource,
     Number,
     UsedByTable,
+    gridInfo,
   },
+  layout: 'ru',
   data(): {
     /**
      * Features list description
@@ -515,6 +489,20 @@ export default Vue.extend({
   }
 }
 
+.contact-container {
+  width: auto;
+  height: fit-content;
+  border-radius: 8px;
+  margin-top: 16px;
+  padding: 40px 30px;
+  background-color: #242936;
+}
+
+.content-blocks {
+  display: inline-grid;
+  justify-content: center;
+}
+
 .section {
   position: relative;
   padding-top: 100px;