added footer

codex-team · Jul 8, 2024 · a9218af · a9218af
1 parent 437364d
commit a9218af
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 279 deletions.
diff --git a/assets/svg/github.svg b/assets/svg/github.svg
diff --git a/assets/svg/locale-version.svg b/assets/svg/locale-version.svg
diff --git a/components/contact.vue b/components/contact.vue
@@ -120,14 +120,20 @@ 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;
   gap: 10px;
   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
@@ -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>