first commit

src/components/PriceSection.vue

@@ -0,0 +1,78 @@
+<template>
+  <slide-template title="price__title">
+    <q-card
+      class="flex column justify-center q-my-md items-center q-gutter-y-md"
+      style="max-width: 400px"
+      >
+      <div class="flex column items-center">
+        <div class="flex text-h6">
+          <telegram-star color="gold" size="24px"/>
+          <span class="q-ml-sm" style="text-decoration: line-through;">2</span>&nbsp;
+          <span class="text-bold text-red">0</span>&nbsp;
+          <span>- {{ $t('price__chat_per_day') }}</span>
+        </div>
+        <div class="flex items-center">
+          <q-badge color="red" class="q-mr-sm">100% OFF</q-badge>
+          <span>{{  $t('price__sale_date') }}</span>
+        </div>
+      </div>
+
+      <q-card 
+        flat
+        class="bg-grey-3"
+        style="border-radius: 12px;"
+        >
+        <q-item>
+          <q-item-section avatar>
+            <telegram-star color="gold" size="48px"/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label class="text-grey">
+              {{ $t('price__stars_pay') }}
+            </q-item-label>
+            <q-item-label class="text-h6">
+              Telegram Stars
+            </q-item-label>
+            <q-item-label class="text-grey">
+              {{ $t('price__stars_description') }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card>
+
+      <q-list class="q-my-none q-pa-md">
+        <q-item
+          v-for="item in priceItems"
+          :key="item.id"
+          dense
+          >
+          <q-item-section avatar>
+            <q-avatar text-color="brand">
+              <q-icon v-if="item.icon" :name="item.icon" size="md"/>
+              <span v-else class="text-bold">{{ item.text }}</span>
+            </q-avatar>
+          </q-item-section>
+          <q-item-section>
+            {{ $t(item.label)}}
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card>
+  </slide-template>
+</template>
+
+<script setup lang="ts">
+  import telegramStar from 'components/TelegramStar.vue'
+  import SlideTemplate from 'components/SlideTemplate.vue'
+
+  const priceItems = [
+    { id: 1, icon: 'mdi-all-inclusive', label: 'price_unlimited_users' },
+    { id: 2, icon: 'mdi-all-inclusive', label: 'price_unlimited_projects' },
+    { id: 3, text: '5', label: 'price_free_chats' },
+    { id: 4, icon: 'mdi-lifebuoy', label: 'price_support' }
+  ]
+  
+</script>
+
+<style scoped>
+</style>