update

dfdsf
2026-04-18 16:45:58 +03:00
parent 6c3a954323
commit 18c37768cb
29 changed files with 3786 additions and 1470 deletions
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -26,16 +26,17 @@
          {{ $t('footer__docs') }}
        </span>
        <div
-          v-for="item in Docs"
+          v-for="item in docs"
          :key="item.id"
          class="text-caption"
          >
-          <a
-            :href="item.href"
+          <span
+            @click="router.push({ name: item.route })"
+            class="cursor-pointer"
            style="text-decoration: underline; color: inherit"
            >
-            {{ $t(item.name) }}
-          </a>
+            {{ $t(item.translationKey) }}
+          </span>
        </div>
      </div>

@@ -50,12 +51,11 @@
 </template>

 <script setup lang="ts">
-  import BaseLogo from 'components/BaseLogo.vue';
-  const Docs = [
-    { id: 1, name: 'footer__doc_terms_of_use', href: '/terms-of-use' },
-    { id: 2, name: 'footer__doc_privacy_policy', href: '/privacy-policy' }
-  ]
- 
+  import BaseLogo from 'components/BaseLogo.vue'
+  import { useRouter } from 'vue-router'
+  import { docs } from 'src/docs'
+
+  const router = useRouter()
 </script>

 <style scoped>
--- a/src/components/HeroBanner.vue
+++ b/src/components/HeroBanner.vue
@@ -6,10 +6,21 @@
      height: 100vh;
    "
    >
-      <video loop
-        src="/img/samolet.webm"
-        class="absolute-top w100"
-        style="z-index: 0;"
+      <video
+        loop
+        autoplay 
+        muted
+        src="/img/samolet.mp4"
+        class="absolute-full"
+        style="
+          z-index: 0; 
+          object-fit: cover; 
+          object-position: center center;
+          width: 100%; 
+          height: 100%;
+          filter: blur(2px) brightness(0.75);
+        "
+        @canplay="$event.target.playbackRate = 0.5"
      />
      <div
        class="column items-center"
@@ -36,9 +47,10 @@
          <div class="edge-block"/>
          <q-btn
            size="xl"
-            color="brand2"
+            color="primary"
            class="q-mt-lg"
            rounded
+            href="https://t.me/tgCrewBot"
            >
            <div class="flex items-center no-wrap center-block">
              <div
@@ -58,7 +70,7 @@
      </div>
 </template>

-<script setup lang="ts">
+<script setup>
 </script>

 <style scoped lang="scss">
--- a/src/components/HowWorksSection.vue
+++ b/src/components/HowWorksSection.vue
@@ -1,55 +1,54 @@
 <template>
 <slide-template
  title="how_it_works__title"
-  subtitle="how_it_works__subtitle"
  >
-    <q-tabs
-      v-model="tab"
-      dense
-      class="text-grey"
-      active-color="primary"
-      indicator-color="primary"
-      align="justify"
-      narrow-indicator
-      >
-      <q-tab
-        v-for="tab in tabs"
-        :key="tab.name"
-        :name="tab.name"
-        :label="$t(tab.label)"
-      />
-    </q-tabs>
+  <q-tabs
+    v-model="tab"
+    dense
+    class="text-grey"
+    active-color="primary"
+    indicator-color="primary"
+    align="justify"
+    narrow-indicator
+    >
+    <q-tab
+      v-for="tab in tabs"
+      :key="tab.name"
+      :name="tab.name"
+      :label="$t(tab.label)"
+    />
+  </q-tabs>

-    <q-tab-panels
-      v-model="tab"
-      animated
-      class="w60 bg-transparent"
+  <q-tab-panels
+    v-model="tab"
+    animated
+    class="w60 bg-transparent"
+    >
+    <q-tab-panel
+      v-for="tab in tabs"
+      :key="tab.name"
+      :name="tab.name"
      >
-      <q-tab-panel
-        v-for="tab in tabs"
-        :key="tab.name"
-        :name="tab.name"
+      <div
+        class="relative-position w100">
+      <div
+        class="abolute-position w100"
+        style="height: 60vh;"
        >
-        <div
-          class="relative-position w100">
-        <div
-          class="abolute-position w100"
-          style="height: 60vh;"
+        <iframe 
+          src="https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ" 
+          allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock; fullscreen;" frameborder="0" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
          >
-          <iframe 
-            src="https://kinescope.io/embed/5yesvjfi6XAYRuxzbsYGHZ" 
-            allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;" frameborder="0" allowfullscreen style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
-            >
-          </iframe>
-        </div>
-        </div>
-          
-        <!-- <q-skeleton
-          style="height: calc(100vw * 0.5 / 16 * 9)"
-          square
-        /> -->
-      </q-tab-panel>
-    </q-tab-panels>
+        </iframe>
+      </div>
+      </div>
+        
+      <!-- <q-skeleton
+        style="height: calc(100vw * 0.5 / 16 * 9)"
+        square
+      /> -->
+    </q-tab-panel>
+  </q-tab-panels>
 </slide-template>

 </template>
@@ -58,8 +57,9 @@
  import { ref } from 'vue'
  import SlideTemplate from 'components/SlideTemplate.vue'
  const tabs = [
-    { name: 'admin', label: 'how_it_works__option1'},
-    { name: 'user', label: 'how_it_works__option2'}
+    { name: 'intro', label: 'how_it_works__intro'},
+    { name: 'admin', label: 'how_it_works__admin'},
+    { name: 'user', label: 'how_it_works__user'}
  ]
  const tab = ref(tabs[0].name)
 </script>
--- a/src/components/MarkdownViewver.vue
+++ b/src/components/MarkdownViewver.vue
@@ -2,6 +2,7 @@
  <q-markdown
    :src="markdownContent"
    no-heading-anchor-links
+    linkify 
  />
 </template>

--- a/src/components/PriceSection.vue
+++ b/src/components/PriceSection.vue
@@ -3,8 +3,24 @@
    title="price__title"
    subtitle="price__subtitle"
    >
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+      align="justify"
+      narrow-indicator
+      >
+      <q-tab
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        :label="$t(tab.label)"
+      />
+    </q-tabs>
    <div
-      class="fit row"
+      class="fit row q-pb-lg"
      >
      <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
        v-for="(item, idx) in tariff"
@@ -13,15 +29,34 @@
        <price-section-item
          :name="item.name"
          :chats-qty="item.chatsQty"
-          :price="item.price"
+          :price="tab === 'legal' ? item.price_rub : item.price"
+          :price_unit="tab === 'legal' ? 'rub' : 'stars'"
        />
      </div>
    </div>
    <q-card 
      flat
-      class="bg-grey-3 rounded-card"
+      class="bg-white rounded-card"
      >
-      <q-item>
+      <q-item v-if="tab === 'legal'">
+        <q-item-section avatar>
+          <span class="text-h4 text-grey q-px-sm">
+            ₽
+          </span>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label class="text-grey">
+            {{ $t('price__rub_pay') }}
+          </q-item-label>
+          <q-item-label class="text-h6">
+             {{ $t('price__rub_resident') }}
+          </q-item-label>
+          <q-item-label class="text-grey">
+            {{ $t('price__rub_closing_documents') }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="tab === 'individual'">
        <q-item-section avatar>
          <telegram-star color="gold" size="48px"/>
        </q-item-section>
@@ -38,20 +73,26 @@
        </q-item-section>
      </q-item>
    </q-card>
-
  </slide-template> 
 </template>

 <script setup lang="ts">
+  import { ref } from 'vue'
  import SlideTemplate from 'components/SlideTemplate.vue'
  import PriceSectionItem from 'components/PriceSectionItem.vue'
  import telegramStar from 'components/TelegramStar.vue'

+  const tabs = [
+    { name: 'legal', label: 'price__legal'},
+    { name: 'individual', label: 'price__individual'}
+  ]
+  const tab = ref(tabs[0].name)
+  
  const tariff = [
-    { id: 1, name: 'TEST', price: null, chatsQty: 5 },
-    { id: 2, name: 'START', price: 1000, chatsQty: 15 },
-    { id: 3, name: 'PRO', price: 5000, chatsQty: 40 },
-    { id: 4, name: 'VIP', price: 12000, chatsQty: null }
+    { id: 1, name: 'TEST', price: null, price_rub: null, chatsQty: 5 },
+    { id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
+    { id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
+    { id: 4, name: 'VIP', price: 12000, price_rub: 24000, chatsQty: null }
  ]
  
 </script>
--- a/src/components/PriceSectionItem.vue
+++ b/src/components/PriceSectionItem.vue
@@ -7,8 +7,19 @@
    <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>
+          <span
+            v-if="price_unit === 'rub'"
+            class="text-h4 text-grey q-pr-xs">
+            ₽
+          </span>
+          <telegram-star
+            v-if="price_unit === 'stars'"
+            color="gold"
+            size="24px"
+            class="q-mr-xs"
+          />
+          
+          <span class="text-h4">{{ price.toLocaleString(locale) }}</span>
        </div>
        <span class="text-caption">{{ $t('price__per_month') }}</span>
      </div>
@@ -19,10 +30,10 @@
      
    <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">
+        <span v-if="chatsQty" class="text-amber-8 text-bold text-h5">
          {{ chatsQty }}
        </span>
-        <q-icon v-else name="mdi-all-inclusive" size="md" color="brand2"/>
+        <q-icon v-else name="mdi-all-inclusive" size="md" color="amber-8"/>
        <span class="q-pl-sm">
          {{ $t('price__chats')}}
        </span>
@@ -33,10 +44,14 @@

 <script setup lang="ts">
  import telegramStar from 'components/TelegramStar.vue'
-
+  import { useI18n } from 'vue-i18n'
+  
+  const { locale } = useI18n({ useScope: 'global' })
+  
  defineProps({
    name: String,
    price: Number,
-    chatsQty: Number
+    chatsQty: Number,
+    price_unit: String
  })
 </script>
--- a/src/components/ProblemSectionItem.vue
+++ b/src/components/ProblemSectionItem.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="column items-start bg-white fit q-pa-lg rounded-card fit">
+  <div class="column items-center bg-white fit q-pa-lg rounded-card fit">
    <q-icon
      :name="icon"
      size="xl"
      color="primary"
    />
-    <div class="text-bold text-h5 q-pt-lg">
+    <div class="text-bold text-h5 text-center q-pt-md">
      {{ $t(title) }}
    </div>
-    <div class="text-grey q-pt-sm text-wrap">
+    <div class="text-grey text-body1 text-center q-pt-sm text-wrap">
      {{ $t(description) }}
    </div>
  </div>