Add Telegram channel info (#38)

cash-track · Sep 29, 2023 · b0c5e8b · b0c5e8b
2 parents ec902ff + 89e1867
commit b0c5e8b
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 13 deletions.
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -16,6 +16,12 @@
                         <b-nav-item :to="localePath('privacy-policy')">
                             {{ $t('privacyPolicy.link') }}
                         </b-nav-item>
+                        <b-nav-item
+                            href="https://t.me/cash_track"
+                            target="_blank"
+                        >
+                            <tg-icon></tg-icon>
+                        </b-nav-item>
                     </b-nav>
                 </div>
             </div>
@@ -25,8 +31,11 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import TgIcon from '@/components/Shared/TgIcon.vue'
 
-@Component
+@Component({
+    components: { TgIcon },
+})
 export default class Footer extends Vue {
     year() {
         return new Date().getFullYear()

diff --git a/components/Shared/TgIcon.vue b/components/Shared/TgIcon.vue
@@ -0,0 +1,23 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="b-icon bi bi-telegram"
+        viewBox="0 0 16 16"
+    >
+        <path
+            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
+        />
+    </svg>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component
+export default class TgIcon extends Vue {}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/lang/en.ts b/lang/en.ts
@@ -92,11 +92,18 @@ export default {
         wallets: 'Wallets',
 
         easy: 'Easy',
-        easyDescription: `Our service is easy to go. Just log in or register to start track anything you need`,
+        easyDescription: `Useful & friendly interface. Go and create your wallets to track income and expenses`,
         fast: 'Fast',
-        fastDescription: `Try for yourself. It's quite fast. Let us know if it is not ;)`,
+        fastDescription: `Our servers are one of the most rapid on the Wild West. Seller said..`,
         secure: 'Secure',
-        secureDescription: `We're keeping your data protected from others. Sensitive personal data encrypted. We're using protected communication channels.`,
+        secureDescription: `We're keeping your data protected. Sensitive personal data is encrypted using cryptographically strong algorithms`,
+
+        telegram: {
+            header: 'Telegram',
+            lead:
+                'We have our own Telegram Channel where we are making our reviews and announcements of new features, existing abilities, recommendation of effective Cash Track usage',
+            subscribe: 'Subscribe',
+        },
     },
 
     about: {
@@ -116,11 +123,16 @@ export default {
             'Tags system',
         ],
 
-        connect: 'Connect with us and try to use it free.',
+        connect: 'Connect with us and try it for free.',
         register: 'Connect',
         or: 'or',
         login: 'Sign In',
 
+        tgChannel: [
+            'Join our Telegram channel to get updates and useful recommendation of Cash Track usage.',
+            'Telegram Channel',
+        ],
+
         moreLines: [
             'We are working to add more features and fix existing bugs.',
             `If you have any suggestion or got some bug and wants to report it - we appreciate it.`,

diff --git a/lang/uk.ts b/lang/uk.ts
@@ -95,11 +95,18 @@ export default {
         wallets: 'Гаманці',
 
         easy: 'Легко',
-        easyDescription: `Нічого зайвого. Лише увійдіть, створіть гаманець та почніть керувати доходами та витратами`,
+        easyDescription: `Зручний інтерфейс — нічого зайвого. Створюйте гаманець та починайте керувати Вашими доходами та витратами`,
         fast: 'Швидко',
-        fastDescription: `Ми використовуємо найшвидші сервери на дикому заході. Перевірте власноруч.`,
+        fastDescription: `Ми використовуємо одні з найшвидших серверів на дикому заході. Принаймні, нам так говорили їх продавці..`,
         secure: 'Безпечно',
-        secureDescription: `Ваші дані захищені від інших. Чутливі персональні дані зашифровані. Використовуються захищені канали передачі даних.`,
+        secureDescription: `Ваші дані захищено. Чутливі персональні дані зашифровано за допомогою криптографічно стійких алгоритмів`,
+
+        telegram: {
+            header: 'Телеграм',
+            lead:
+                'Відтепер у нас є власний Телеграм канал — там ми публікуємо огляд нових фіч, поточних можливостей, рекомендації з використання Cash Track',
+            subscribe: 'Підписатись',
+        },
     },
 
     about: {
@@ -119,11 +126,16 @@ export default {
             'Система тегів',
         ],
 
-        connect: 'Приєднуйтесь і спробуйте це власноруч.',
+        connect: 'Приєднуйтесь і спробуйте власноруч.',
         register: 'Приєднатись',
         or: 'або',
         login: 'Увійти',
 
+        tgChannel: [
+            'Приєднуйтесь до нашого каналу в Telegram, щоб бути в курсі оновлень та корисних рекомендацій з використання Cash Track.',
+            'Telegram Канал',
+        ],
+
         moreLines: [
             'Ми працюємо над новими фішками та вирішенням існуючих проблем.',
             `Якщо маєте пропозиції, або знайшли помилку і хочете про це повідомити - ми це цінуємо.`,

diff --git a/pages/about.vue b/pages/about.vue
@@ -31,6 +31,18 @@
             </b-button>
         </p>
 
+        <p>{{ $t('about.tgChannel[0]') }}</p>
+        <p>
+            <b-button
+                variant="primary"
+                href="https://t.me/cash_track"
+                target="_blank"
+            >
+                {{ $t('about.tgChannel[1]') }}
+                <tg-icon></tg-icon>
+            </b-button>
+        </p>
+
         <p>{{ $t('about.moreLines[0]') }}</p>
 
         <p>
@@ -49,11 +61,13 @@
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
+import TgIcon from '@/components/Shared/TgIcon.vue'
 
 @Component({
     head: {
         title: 'About | Cash Track',
     },
+    components: { TgIcon },
 })
 export default class AboutPage extends Vue {}
 </script>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="landing-page">
-        <b-jumbotron :header="$t('home.header')" :lead="$t('home.lead')">
+        <b-jumbotron
+            class="welcome"
+            :header="$t('home.header')"
+            :lead="$t('home.lead')"
+        >
             <p>{{ $t('home.banner') }}</p>
             <span v-if="isProfileLoading || !isLogged">
                 <b-button
@@ -25,30 +29,48 @@
         </b-jumbotron>
         <b-row>
             <b-col md="4">
-                <h2>{{ $t('home.easy') }}</h2>
+                <h3>🤌 {{ $t('home.easy') }}</h3>
                 <p>{{ $t('home.easyDescription') }}</p>
             </b-col>
             <b-col md="4">
-                <h2>{{ $t('home.fast') }}</h2>
+                <h3>💫 {{ $t('home.fast') }}</h3>
                 <p>{{ $t('home.fastDescription') }}</p>
             </b-col>
             <b-col md="4">
-                <h2>{{ $t('home.secure') }}</h2>
+                <h3>☔️ {{ $t('home.secure') }}</h3>
                 <p>{{ $t('home.secureDescription') }}</p>
             </b-col>
         </b-row>
+        <b-jumbotron
+            class="telegram"
+            header-level="4"
+            :header="$t('home.telegram.header')"
+            :lead="$t('home.telegram.lead')"
+        >
+            <span>
+                <b-button
+                    href="https://t.me/cash_track"
+                    target="_blank"
+                    variant="outline-primary"
+                >
+                    {{ $t('home.telegram.subscribe') }} <tg-icon></tg-icon>
+                </b-button>
+            </span>
+        </b-jumbotron>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import TgIcon from '@/components/Shared/TgIcon.vue'
 import WebAppLinks from '~/shared/WebAppLinks'
 
 @Component({
     head: {
         title: 'Cash Track',
     },
     nuxtI18n: false,
+    components: { TgIcon },
 })
 export default class IndexPage extends Mixins(WebAppLinks) {
     get isLogged(): boolean {
@@ -60,3 +82,49 @@ export default class IndexPage extends Mixins(WebAppLinks) {
     }
 }
 </script>
+
+<style scoped lang="scss">
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins/_breakpoints';
+
+.telegram {
+    background-image: url('/img/tg-logo.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: calc(100% + 120px) 40px;
+    background-color: #f5fff5;
+}
+
+.welcome {
+    background: linear-gradient(
+        -45deg,
+        #ee7752,
+        #e73c7e,
+        #23a6d5,
+        #23d5ab,
+        #5ccb80
+    );
+    background-size: 400% 400%;
+    animation: gradient 60s ease infinite;
+    color: #f5fff5;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .welcome .display-3 {
+        font-size: 3rem;
+    }
+}
+</style>
diff --git a/static/img/logo-full.svg b/static/img/logo-full.svg
diff --git a/static/img/tg-logo.png b/static/img/tg-logo.png