first commit

src/components/HowWorksSection.vue

@@ -0,0 +1,120 @@
+<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;"
+      >
+      <q-card
+        class="q-pa-md fit"
+        >
+        <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>
+
+</slide-template>
+
+</template>
+
+<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)
+</script>
+
+<style scoped lang="scss">
+
+</style>