update3

src/components/HowWorksSection.vue

@@ -1,99 +1,41 @@
 <template>
-<slide-template title="how_it_works__title">
+<slide-template
-  <q-resize-observer @resize="updateBlock"/>
+  title="how_it_works__title"
-  <div
+  subtitle="how_it_works__subtitle"
-    v-if="typeComponent !== 'tablet'"
+  >
-    class="flex row q-col-gutter-lg q-pa-md justify-center"
+    <q-tabs
-    >
+      v-model="tab"
-    <div
+      dense
-      :class="typeComponent === 'wide' ? 'col' : 'col-12'" 
+      class="text-grey"
-      v-for="item in 4"
+      active-color="primary"
-      :key="item"
+      indicator-color="primary"
-      style="align-items: stretch;"
+      align="justify"
+      narrow-indicator
       >
-      <q-card
+      <q-tab
-        class="q-pa-md fit"
+        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-panel
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
         >
-        <div class="flex column justify-between fit no-wrap">
+        <q-skeleton
-          <div class="flex column w100">
+          style="height: calc(100vw * 0.5 / 16 * 9)"
-            <span class="text-uppercase text-grey text-h6">
+          square
-              {{ $t('how_works__step' + item) }}
+        />
-            </span>
+      </q-tab-panel>
-
+    </q-tab-panels>
-            <span class="text-h6">
-              {{ $t('how_works__step' + item + '_description') }}
-            </span>
-
-            <div class="text-grey">
-              {{ $t(item !== 4 ? 'how_works__step_admin': 'how_works__step_user') }}
-            </div>
-          </div>
-
-          <div
-            class="flex column items-center justify-end q-mt-md text-grey col-grow"
-            >
-            <img
-              :src="'/img/' + item +'.png'"
-              style="object-fit: contain; max-width: 100%;"
-            />
-          </div>
-        </div>
-      </q-card>
-    </div>
-  </div>
-
-  <div
-    v-if="typeComponent === 'tablet'"
-    class="flex row w100 q-pa-none no-wrap items-center no-scroll"
-    >
-    <div class="col-8">  
-      <q-list>
-        <q-item
-          v-for="item in 4"
-          :key="item"
-          clickable
-          v-ripple
-          @click="activeItem=item"
-          :active="activeItem===item"
-          active-class="primary"
-          >
-          <q-item-section avatar>
-            <q-avatar color="brand" text-color="white">
-              <span v-if="item !== 4">{{item}}</span>
-              <q-icon v-else name="mdi-check"/>
-            </q-avatar>
-          </q-item-section>
-          <q-item-section>
-             <span class="text-h6">
-              {{ $t('how_works__step' + item + '_description') }}
-            </span>
-          </q-item-section>
-        
-        </q-item>
-      </q-list>
-    </div>
-
-    <div class="col-4">
-      <q-tab-panels v-model="activeItem" animated>
-        <q-tab-panel
-          v-for="item in 4"
-          :key="item"
-          :name="item"
-          >
-          <div class="flex column items-center">
-            <div class="text-grey">
-              {{ $t(item !== 4 ? 'how_works__step_admin': 'how_works__step_user') }}
-            </div>
-            <img
-              :src="'/img/' + item +'.png'"
-              style="object-fit: contain; max-width: 100%;"
-            />
-          </div>
-        </q-tab-panel>
-      </q-tab-panels>
-    </div>
-  </div>
-
 </slide-template>
 
 </template>
@@ -101,20 +43,13 @@
 <script setup lang="ts">
   import { ref } from 'vue'
   import SlideTemplate from 'components/SlideTemplate.vue'
-
+  const tabs = [
-  const typeComponent = ref('wide')
+    { name: 'admin', label: 'how_it_works__option1'},
-
+    { name: 'user', label: 'how_it_works__option2'}
-  const updateBlock = ({ width }) => {
+  ]
-    typeComponent.value = width >= 1000
+  const tab = ref(tabs[0].name)
-    ? 'wide'
-    : width < 600
-      ? 'mobile'
-      : 'tablet'
-  }
-
-  const activeItem = ref(1)
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 
 </style>

src/components/PriceSection.vue

@@ -1,9 +1,8 @@
 <template>
-  <slide-template title="price__title">
+  <slide-template
-    <div class="q-ma-md" align="center" style="max-width: 60%;">
+    title="price__title"
-      {{ $t('price__tariff_description') }}
+    subtitle="price__subtitle"
-    </div>
+    >
-
     <div
       class="fit row"
       >
@@ -20,8 +19,7 @@
     </div>
     <q-card 
       flat
-      class="bg-grey-3"
+      class="bg-grey-3 rounded-card"
-      style="border-radius: 12px;"
       >
       <q-item>
         <q-item-section avatar>

src/components/SlideTemplate.vue

@@ -2,11 +2,16 @@
   <div class="flex column no-wrap q-mt-lg">
     <div
       v-if="title"
-      class="flex w100 justify-center text-h4 q-mt-md text-bold q-pa-md text-grey"
+      class="w100 q-my-md q-px-md text-h4 text-bold text-grey text-center"
-      align="center"
       >
       {{ $t(title) }}
     </div>
+    <div
+      v-if="subtitle"
+      class="w100 q-mb-md q-px-xl text-h6 text-grey-7 text-center"
+      >
+      {{ $t(subtitle) }}
+    </div>
     <div class="flex w100 justify-center q-pb-md column items-center">
       <slot/>
     </div>
@@ -16,7 +21,8 @@
 <script setup lang="ts">
 
   defineProps({
-    title: String
+    title: String,
+    subtitle: String
   })
 
 </script>