From 3bf958c41683a6d7113e09315e2deda5913cf3b7 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Sun, 12 Feb 2023 23:05:55 +0300
Subject: [PATCH] Remove the "Pricing" from the site and route Remove the
 "Featured on Product Hunt" widget Add the second description at the landing
 header "Hawk is free and open-source."

---
 components/site-footer.vue |   8 +-
 components/site-header.vue |   2 +-
 pages/index.vue            |  12 +-
 pages/pricing.vue          | 526 ++++++++++++++++++-------------------
 4 files changed, 277 insertions(+), 271 deletions(-)

diff --git a/components/site-footer.vue b/components/site-footer.vue
index 399649e..fc5c85b 100644
--- a/components/site-footer.vue
+++ b/components/site-footer.vue
@@ -84,10 +84,10 @@ export default Vue.extend({
               label: 'Documentation',
               url: 'https://docs.hawk.so/',
             },
-            {
-              label: 'Pricing',
-              url: '/pricing',
-            },
+            // {
+            //   label: 'Pricing',
+            //   url: '/pricing',
+            // },
           ],
         },
         {
diff --git a/components/site-header.vue b/components/site-header.vue
index 88dd7cd..8079a91 100644
--- a/components/site-header.vue
+++ b/components/site-header.vue
@@ -23,7 +23,7 @@
       <div class="site-header__menu">
         <a href="https://docs.hawk.so/">Docs</a>
         <a href="/download">Download</a>
-        <a href="/pricing">Pricing</a>
+<!--        <a href="/pricing">Pricing</a>-->
       </div>
 
       <a class="site-header__signin" href="//garage.hawk.so">
diff --git a/pages/index.vue b/pages/index.vue
index 4094848..d721920 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,6 +12,7 @@
 
             <div class="description">
               We'll help to improve your product's quality. You’ll see all the errors and problems in your code and we'll help to resolve them.
+              <br><span class="extra-indent_15px">Hawk is free and open-source.</span>
             </div>
           </div>
           <div class="landing__content-head-right">
@@ -96,9 +97,9 @@
       </div>
     </div>
 
-  <div class="section section--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="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>
 </template>
 
@@ -353,6 +354,10 @@ export default Vue.extend({
 @custom-media --screen-tall (min-height: 1200px);
 @custom-media --screen-middle (max-width: 1170px);
 
+.extra-indent_15px {
+  margin-top: 15px;
+}
+
 .yard {
   display: flex;
   height: 100%;
@@ -419,6 +424,7 @@ export default Vue.extend({
         }
 
         .description {
+          display: grid;
           font-weight: 500;
           color: var(--color-text-main);
           letter-spacing: 0.33px;
diff --git a/pages/pricing.vue b/pages/pricing.vue
index 0498889..10ca442 100644
--- a/pages/pricing.vue
+++ b/pages/pricing.vue
@@ -1,263 +1,263 @@
-<template>
-  <div>
-    <page-container>
-      <page-header>
-        Pricing
-      </page-header>
-
-      <div class="plans">
-        <plan
-          v-for="plan in plans"
-          :key="plan.name"
-          :plan="plan"
-        />
-      </div>
-
-      <div class="all">
-        <img :src="require(`~/assets/svg/check.svg`)">
-        All the plans include all available features.
-      </div>
-
-      <table class="features">
-        <tr>
-          <th>
-            <h2 class="small-heading">
-              Features
-            </h2>
-          </th>
-          <th
-            v-for="(plan, index) in plans"
-            :key="'p' + index"
-            width="12%"
-          >
-            {{ plan.name }}
-          </th>
-        </tr>
-        <tr
-          v-for="feature in features"
-          :key="feature"
-        >
-          <td>
-            {{ feature }}
-          </td>
-          <td>
-            <img :src="require(`~/assets/svg/check.svg`)">
-          </td>
-          <td>
-            <img :src="require(`~/assets/svg/check.svg`)">
-          </td>
-          <td>
-            <img :src="require(`~/assets/svg/check.svg`)">
-          </td>
-          <td>
-            <img :src="require(`~/assets/svg/check.svg`)">
-          </td>
-        </tr>
-      </table>
-
-      <div class="text">
-        <h2 class="small-heading">
-          Open-source?
-        </h2>
-
-        <p>Hawk is an open-source service that means anyone can use it for their organization. Meanwhile, Hawk is a multi-layer micro-service-based product processing many high-load streams. Managing such a system is challenging. It requires a professional DevOps and SRE team, not a trivial cloud-based architecture, and so on. We offer a ready-to-use solution supporting by our team, and it takes a cost.</p>
-      </div>
-
-      <div class="text">
-        <h2 class="small-heading">
-          Free for non-profit products
-        </h2>
-
-        <p>Hawk is created by CodeX — a team of digital specialists around the world interested in building high-quality open source products on a global market.</p>
-        <p>If you want free unlimited access to a non-profit product, contact us at team@hawk.so</p>
-      </div>
-
-      <div class="text">
-        <h2 class="small-heading">
-          Payment support
-        </h2>
-
-        <p>More information about payments can be found in the Hawk Docs under the <a href="https://docs.hawk.so/payments">Payments</a> section. For our contact — see the <a href="https://docs.hawk.so/contacts">Contacts</a> page.</p>
-      </div>
-    </page-container>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import IPlan from '~/components/types/plan';
-import PageContainer from '~/components/page-container.vue';
-import PageHeader from '~/components/page-header.vue';
-import Plan from '~/components/plan.vue';
-
-export default Vue.extend({
-  components: {
-    PageContainer,
-    PageHeader,
-    Plan,
-  },
-  data(): {
-    plans: IPlan[],
-    features: string[]
-    } {
-    return {
-      plans: [
-        {
-          name: 'Free',
-          description: 'up to 100K events / mo',
-          price: '0$ / mo',
-          buttonText: 'Get Started',
-          buttonHref: 'https://garage.hawk.so/?plan=free',
-        },
-        {
-          name: 'Startup',
-          description: 'up to 200K events / mo',
-          price: '20$ / mo',
-          buttonText: 'Get Started',
-          buttonHref: 'https://garage.hawk.so/?plan=startup',
-        },
-        {
-          name: 'Pro',
-          description: 'up to 1M events / mo',
-          price: '100$ / mo',
-          buttonText: 'Get Started',
-          buttonHref: 'https://garage.hawk.so/?plan=pro',
-        },
-        {
-          name: 'Enterprise',
-          description: 'Customized volume',
-          price: 'Personal',
-          buttonText: 'Contact us',
-          buttonHref: 'mailto:team@hawk.so?subject=Custom plan request',
-        },
-      ],
-      features: [
-        'Error catchers for 10 languages',
-        'Notifications to Slack, Telegram and Email',
-        'Custom notification filters',
-        'Unlimited Projects',
-        'Unlimited team members',
-        'App Health graph',
-        'Assignees',
-        'Filtering and sorting',
-        'Event marks',
-        'Suspected Commits',
-        '30 days events storing',
-      ],
-    };
-  },
-});
-</script>
-
-<style lang="postcss" scoped>
-  .plans {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-
-    @media (--screen-mobile){
-      flex-direction: column;
-    }
-
-    .plan {
-      flex-grow: 1;
-
-      @media (--screen-medium){
-        padding: 15px;
-
-        >>> .plan__button {
-          margin-top: -4px;
-        }
-      }
-
-      &:not(:last-of-type){
-        margin-right: 20px;
-
-        @media (--screen-medium){
-          margin-right: 7px;
-        }
-
-        @media (--screen-mobile){
-          margin-right: 0;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-
-  .all {
-    display: flex;
-    align-items: center;
-    margin: 60px 0 40px;
-
-    img {
-      margin-right: 10px;
-    }
-
-    @media (--screen-mobile){
-      font-size: 14px;
-
-      img {
-        width: 14px;
-        margin-right: 14px;
-      }
-    }
-  }
-
-  .features {
-    width: 100%;
-    border-collapse: collapse;
-    max-width: var(--layout-page-content-max-width);
-
-    @media (--screen-mobile){
-      font-size: 13px;
-      line-height: 1.45em;
-
-      img {
-        width: 14px;
-      }
-    }
-
-    th {
-      padding-bottom: 20px;
-    }
-
-    tr:not(:last-of-type) td {
-      border-bottom: 1px solid var(--color-border-light);
-    }
-
-    th, td {
-      text-align: left;
-
-      &:not(:first-of-type) {
-        text-align: center;
-      }
-    }
-
-    td {
-      padding: 10px 0;
-    }
-  }
-
-  .text {
-    margin-top: 115px;
-    max-width: var(--layout-page-content-max-width);
-    font-size: 16px;
-    line-height: 1.5em;
-    margin-bottom: 100px;
-
-    @media (--screen-mobile){
-      margin-top: 60px;
-      font-size: 14px;
-      margin-bottom: 0;
-    }
-
-    p {
-      margin: 16px 0;
-    }
-
-    a {
-      color: var(--color-bg-button-primary)
-    }
-  }
-</style>
+<!--<template>-->
+<!--  <div>-->
+<!--    <page-container>-->
+<!--      <page-header>-->
+<!--        Pricing-->
+<!--      </page-header>-->
+
+<!--      <div class="plans">-->
+<!--        <plan-->
+<!--          v-for="plan in plans"-->
+<!--          :key="plan.name"-->
+<!--          :plan="plan"-->
+<!--        />-->
+<!--      </div>-->
+
+<!--      <div class="all">-->
+<!--        <img :src="require(`~/assets/svg/check.svg`)">-->
+<!--        All the plans include all available features.-->
+<!--      </div>-->
+
+<!--      <table class="features">-->
+<!--        <tr>-->
+<!--          <th>-->
+<!--            <h2 class="small-heading">-->
+<!--              Features-->
+<!--            </h2>-->
+<!--          </th>-->
+<!--          <th-->
+<!--            v-for="(plan, index) in plans"-->
+<!--            :key="'p' + index"-->
+<!--            width="12%"-->
+<!--          >-->
+<!--            {{ plan.name }}-->
+<!--          </th>-->
+<!--        </tr>-->
+<!--        <tr-->
+<!--          v-for="feature in features"-->
+<!--          :key="feature"-->
+<!--        >-->
+<!--          <td>-->
+<!--            {{ feature }}-->
+<!--          </td>-->
+<!--          <td>-->
+<!--            <img :src="require(`~/assets/svg/check.svg`)">-->
+<!--          </td>-->
+<!--          <td>-->
+<!--            <img :src="require(`~/assets/svg/check.svg`)">-->
+<!--          </td>-->
+<!--          <td>-->
+<!--            <img :src="require(`~/assets/svg/check.svg`)">-->
+<!--          </td>-->
+<!--          <td>-->
+<!--            <img :src="require(`~/assets/svg/check.svg`)">-->
+<!--          </td>-->
+<!--        </tr>-->
+<!--      </table>-->
+
+<!--      <div class="text">-->
+<!--        <h2 class="small-heading">-->
+<!--          Open-source?-->
+<!--        </h2>-->
+
+<!--        <p>Hawk is an open-source service that means anyone can use it for their organization. Meanwhile, Hawk is a multi-layer micro-service-based product processing many high-load streams. Managing such a system is challenging. It requires a professional DevOps and SRE team, not a trivial cloud-based architecture, and so on. We offer a ready-to-use solution supporting by our team, and it takes a cost.</p>-->
+<!--      </div>-->
+
+<!--      <div class="text">-->
+<!--        <h2 class="small-heading">-->
+<!--          Free for non-profit products-->
+<!--        </h2>-->
+
+<!--        <p>Hawk is created by CodeX — a team of digital specialists around the world interested in building high-quality open source products on a global market.</p>-->
+<!--        <p>If you want free unlimited access to a non-profit product, contact us at team@hawk.so</p>-->
+<!--      </div>-->
+
+<!--      <div class="text">-->
+<!--        <h2 class="small-heading">-->
+<!--          Payment support-->
+<!--        </h2>-->
+
+<!--        <p>More information about payments can be found in the Hawk Docs under the <a href="https://docs.hawk.so/payments">Payments</a> section. For our contact — see the <a href="https://docs.hawk.so/contacts">Contacts</a> page.</p>-->
+<!--      </div>-->
+<!--    </page-container>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script lang="ts">-->
+<!--import Vue from 'vue';-->
+<!--import IPlan from '~/components/types/plan';-->
+<!--import PageContainer from '~/components/page-container.vue';-->
+<!--import PageHeader from '~/components/page-header.vue';-->
+<!--import Plan from '~/components/plan.vue';-->
+
+<!--export default Vue.extend({-->
+<!--  components: {-->
+<!--    PageContainer,-->
+<!--    PageHeader,-->
+<!--    Plan,-->
+<!--  },-->
+<!--  data(): {-->
+<!--    plans: IPlan[],-->
+<!--    features: string[]-->
+<!--    } {-->
+<!--    return {-->
+<!--      plans: [-->
+<!--        {-->
+<!--          name: 'Free',-->
+<!--          description: 'up to 100K events / mo',-->
+<!--          price: '0$ / mo',-->
+<!--          buttonText: 'Get Started',-->
+<!--          buttonHref: 'https://garage.hawk.so/?plan=free',-->
+<!--        },-->
+<!--        {-->
+<!--          name: 'Startup',-->
+<!--          description: 'up to 200K events / mo',-->
+<!--          price: '20$ / mo',-->
+<!--          buttonText: 'Get Started',-->
+<!--          buttonHref: 'https://garage.hawk.so/?plan=startup',-->
+<!--        },-->
+<!--        {-->
+<!--          name: 'Pro',-->
+<!--          description: 'up to 1M events / mo',-->
+<!--          price: '100$ / mo',-->
+<!--          buttonText: 'Get Started',-->
+<!--          buttonHref: 'https://garage.hawk.so/?plan=pro',-->
+<!--        },-->
+<!--        {-->
+<!--          name: 'Enterprise',-->
+<!--          description: 'Customized volume',-->
+<!--          price: 'Personal',-->
+<!--          buttonText: 'Contact us',-->
+<!--          buttonHref: 'mailto:team@hawk.so?subject=Custom plan request',-->
+<!--        },-->
+<!--      ],-->
+<!--      features: [-->
+<!--        'Error catchers for 10 languages',-->
+<!--        'Notifications to Slack, Telegram and Email',-->
+<!--        'Custom notification filters',-->
+<!--        'Unlimited Projects',-->
+<!--        'Unlimited team members',-->
+<!--        'App Health graph',-->
+<!--        'Assignees',-->
+<!--        'Filtering and sorting',-->
+<!--        'Event marks',-->
+<!--        'Suspected Commits',-->
+<!--        '30 days events storing',-->
+<!--      ],-->
+<!--    };-->
+<!--  },-->
+<!--});-->
+<!--</script>-->
+
+<!--<style lang="postcss" scoped>-->
+<!--  .plans {-->
+<!--    display: flex;-->
+<!--    width: 100%;-->
+<!--    justify-content: space-between;-->
+
+<!--    @media (&#45;&#45;screen-mobile){-->
+<!--      flex-direction: column;-->
+<!--    }-->
+
+<!--    .plan {-->
+<!--      flex-grow: 1;-->
+
+<!--      @media (&#45;&#45;screen-medium){-->
+<!--        padding: 15px;-->
+
+<!--        >>> .plan__button {-->
+<!--          margin-top: -4px;-->
+<!--        }-->
+<!--      }-->
+
+<!--      &:not(:last-of-type){-->
+<!--        margin-right: 20px;-->
+
+<!--        @media (&#45;&#45;screen-medium){-->
+<!--          margin-right: 7px;-->
+<!--        }-->
+
+<!--        @media (&#45;&#45;screen-mobile){-->
+<!--          margin-right: 0;-->
+<!--          margin-bottom: 10px;-->
+<!--        }-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+
+<!--  .all {-->
+<!--    display: flex;-->
+<!--    align-items: center;-->
+<!--    margin: 60px 0 40px;-->
+
+<!--    img {-->
+<!--      margin-right: 10px;-->
+<!--    }-->
+
+<!--    @media (&#45;&#45;screen-mobile){-->
+<!--      font-size: 14px;-->
+
+<!--      img {-->
+<!--        width: 14px;-->
+<!--        margin-right: 14px;-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+
+<!--  .features {-->
+<!--    width: 100%;-->
+<!--    border-collapse: collapse;-->
+<!--    max-width: var(&#45;&#45;layout-page-content-max-width);-->
+
+<!--    @media (&#45;&#45;screen-mobile){-->
+<!--      font-size: 13px;-->
+<!--      line-height: 1.45em;-->
+
+<!--      img {-->
+<!--        width: 14px;-->
+<!--      }-->
+<!--    }-->
+
+<!--    th {-->
+<!--      padding-bottom: 20px;-->
+<!--    }-->
+
+<!--    tr:not(:last-of-type) td {-->
+<!--      border-bottom: 1px solid var(&#45;&#45;color-border-light);-->
+<!--    }-->
+
+<!--    th, td {-->
+<!--      text-align: left;-->
+
+<!--      &:not(:first-of-type) {-->
+<!--        text-align: center;-->
+<!--      }-->
+<!--    }-->
+
+<!--    td {-->
+<!--      padding: 10px 0;-->
+<!--    }-->
+<!--  }-->
+
+<!--  .text {-->
+<!--    margin-top: 115px;-->
+<!--    max-width: var(&#45;&#45;layout-page-content-max-width);-->
+<!--    font-size: 16px;-->
+<!--    line-height: 1.5em;-->
+<!--    margin-bottom: 100px;-->
+
+<!--    @media (&#45;&#45;screen-mobile){-->
+<!--      margin-top: 60px;-->
+<!--      font-size: 14px;-->
+<!--      margin-bottom: 0;-->
+<!--    }-->
+
+<!--    p {-->
+<!--      margin: 16px 0;-->
+<!--    }-->
+
+<!--    a {-->
+<!--      color: var(&#45;&#45;color-bg-button-primary)-->
+<!--    }-->
+<!--  }-->
+<!--</style>-->