update3

src/components/HowWorksSection.vue

@@ -1,99 +1,41 @@
 <template>
-<slide-template title="how_it_works__title">
-  <q-resize-observer @resize="updateBlock"/>
-  <div
-    v-if="typeComponent !== 'tablet'"
-    class="flex row q-col-gutter-lg q-pa-md justify-center"
-    >
-    <div
-      :class="typeComponent === 'wide' ? 'col' : 'col-12'" 
-      v-for="item in 4"
-      :key="item"
-      style="align-items: stretch;"
+<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-card
-        class="q-pa-md fit"
+      <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-panel
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
         >
-        <div class="flex column justify-between fit no-wrap">
-          <div class="flex column w100">
-            <span class="text-uppercase text-grey text-h6">
-              {{ $t('how_works__step' + item) }}
-            </span>
-
-            <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>
-
+        <q-skeleton
+          style="height: calc(100vw * 0.5 / 16 * 9)"
+          square
+        />
+      </q-tab-panel>
+    </q-tab-panels>
 </slide-template>
 
 </template>
@@ -101,20 +43,13 @@
 <script setup lang="ts">
   import { ref } from 'vue'
   import SlideTemplate from 'components/SlideTemplate.vue'
-
-  const typeComponent = ref('wide')
-
-  const updateBlock = ({ width }) => {
-    typeComponent.value = width >= 1000
-    ? 'wide'
-    : width < 600
-      ? 'mobile'
-      : 'tablet'
-  }
-
-  const activeItem = ref(1)
+  const tabs = [
+    { name: 'admin', label: 'how_it_works__option1'},
+    { name: 'user', label: 'how_it_works__option2'}
+  ]
+  const tab = ref(tabs[0].name)
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 
 </style>