update

src/components/BaseLogo.vue

@@ -2,86 +2,19 @@
   <div 
     class="flex row items-center no-wrap logo-component"
     >
-    <svg
-      class="iconcolor"
-      viewBox="0 0 8.4666662 8.4666662"
-      version="1.1"
-      id="svg1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:svg="http://www.w3.org/2000/svg"
-      >
-      <defs id="defs1" />
-      <g id="layer1">
-        <rect
-          class="fill-brand"
-          style="stroke-width:0.233149"
-          id="rect5"
-          width="6.9885192"
-          height="0.35581663"
-          x="3.114475"
-          y="0.86827624"
-          transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
-        />
-        <rect
-          class="fill-brand"
-          style="stroke-width:0.24961"
-          id="rect5-7"
-          width="7.4819207"
-          height="0.3809379"
-          x="-3.9267058"
-          y="5.7988153"
-          transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
-        />
-        <circle
-          class="fill-brand"
-          style="stroke-width:0.134869"
-          id="path5-8"
-          cx="1.5875"
-          cy="6.8791666"
-          r="1.0583333"
-        />
-        <circle
-          class="fill-brand"
-          style="stroke-width:0.168586"
-          id="path5-8-5"
-          cx="7.1437502"
-          cy="7.1437502"
-          r="1.3229166"
-        />
-        <circle
-          class="fill-brand"
-          style="stroke-width:0.118011"
-          id="path5-8-5-1"
-          cx="1.4552083"
-          cy="2.5135417"
-          r="0.92604166"
-        />
-        <circle
-          class="fill-brand"
-          style="stroke-width:0.101152"
-          id="path5-8-5-1-7"
-          cx="7.1437502"
-          cy="1.3229166"
-          r="0.79374999"
-        />
-        <circle
-          style="stroke-width:0.23602"
-          id="path5"
-          cx="3.96875"
-          cy="4.4979167"
-          r="1.8520833"
-        />
-      </g>
-    </svg>
+    <img
+      src="src/assets/logo.svg"
+      style="height: 24px; max-width: 24px; padding-right: 4px;"
+    />
 
     <span
       class="text-brand"
-      style="margin-right: 0.075em;"
+      style="margin-right: 0.05em;"
       >
       tg
     </span>
 
-    <span class="text-brand2 text-bold">
+    <span class="text-brand text-bold">
       Crew
     </span>
   </div>
@@ -102,23 +35,4 @@
       line-height: 1;
     }
   }
-
-  .fill-brand {
-    fill: $brand;
-  }
-
-  @keyframes blink {
-    100%,
-    0% {
-      fill: $brand2;
-    }
-    60% {
-      fill: $brand2;
-      opacity: 0.8;
-    }
-  }
-
-  #path5 {
-    animation: blink 3s infinite;
-  }
 </style>

src/components/HeroBanner.vue

@@ -1,15 +1,19 @@
 <template>
   <div
-    class="flex w100 justify-center items-center"
+    class="flex w100 justify-center items-center relative-position overflow-hidden"
     style="
-      background-image: url('/img/samolet.jpg');
       background-size: cover;
       height: 100vh;
     "
     >
+      <video loop
+        src="/img/samolet.webm"
+        class="absolute-top w100"
+        style="z-index: 0;"
+      />
       <div
         class="column items-center"
-        style="max-width: 75%; height: 100%">
+        style="max-width: 75%; height: 100%; z-index: 10;" >
         <div
           class="column justify-end text-grey-4 text-center edge-block"
           :class="$q.screen.lt.sm ? 'text-h5' : 'text-h4'"

src/components/HowWorksSection.vue

@@ -30,10 +30,24 @@
         :key="tab.name"
         :name="tab.name"
         >
-        <q-skeleton
+        <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;" 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>
 </slide-template>