update landing

src/components/PriceSectionItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex column items-center">
+    <div class="text-h5 text-primary text-bold">
+      {{ name }}
+    </div>
+
+    <div class="flex items-center" style="min-height: 50px;">
+      <div v-if="price" class="flex column items-center">
+        <div class="flex no-wrap items-center">
+          <telegram-star color="gold" size="24px" class="q-mr-xs"/>
+          <span class="text-h4">{{ price }}</span>
+        </div>
+        <span class="text-caption">{{ $t('price__per_month') }}</span>
+      </div>
+      <div v-else class="text-bold text-h5">
+        {{ $t('price__free_tax') }}
+      </div>
+    </div>
+      
+    <div class="flex items-center q-pt-md" style="min-height: 50px;">
+      <div class="flex no-wrap items-center">
+        <span v-if="chatsQty" class="text-brand2 text-bold text-h5">
+          {{ chatsQty }}
+        </span>
+        <q-icon v-else name="mdi-all-inclusive" size="md" color="brand2"/>
+        <span class="q-pl-sm">
+          {{ $t('price__chats')}}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import telegramStar from 'components/TelegramStar.vue'
+
+  defineProps({
+    name: String,
+    price: Number,
+    chatsQty: Number
+  })
+</script>