update

public/icons/favicon.svg

@@ -1,67 +1,34 @@
-<svg
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .x { fill: white; transform-box: fill-box; }
     
-      viewBox="0 0 8.4666662 8.4666662"
+    .c { fill: white; transform-box: fill-box; }
-      width="32"
+
-      height="32"
+    .l {
-      version="1.1"
+      stroke: white;
-      id="svg1"
+      stroke-width: 1.5;
-      xmlns="http://www.w3.org/2000/svg"
+    }
-      xmlns:svg="http://www.w3.org/2000/svg"
+
-      >
+  </style>
-      <defs id="defs1" />
+  <defs>
-      <g id="layer1">
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-        <rect
+      <stop stop-color="#2AABEE" offset="0%"></stop>
-          style="fill: #27A7E7 ;stroke-width:0.233149"
+      <stop stop-color="#229ED9" offset="100%"></stop>
-          id="rect5"
+    </linearGradient>
-          width="6.9885192"
+  </defs>
-          height="0.35581663"
+
-          x="3.114475"
+
-          y="0.86827624"
+  <rect width="32" height="32" rx="4" ry="4" fill="url(#linearGradient-1)"></rect>
-          transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
+  <circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)"></circle>
-        />
+  <circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)"></circle>
-        <rect
+  <circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)"></circle>
-          style="fill: #27A7E7 ;stroke-width:0.24961"
+  <circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)"></circle>
-          id="rect5-7"
+  <circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)"></circle>
-          width="7.4819207"
+  <line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1"></line>
-          height="0.3809379"
+  <line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1"></line>
-          x="-3.9267058"
+  <line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1"></line>
-          y="5.7988153"
+  <line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1"></line>
-          transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
+    
-        />
+</svg></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
-        <circle
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
-          style="fill: #27A7E7 ;stroke-width:0.134869"
+</style></svg>
-          id="path5-8"
-          cx="1.5875"
-          cy="6.8791666"
-          r="1.0583333"
-        />
-        <circle
-          style="fill: #27A7E7 ;stroke-width:0.168586"
-          id="path5-8-5"
-          cx="7.1437502"
-          cy="7.1437502"
-          r="1.3229166"
-        />
-        <circle
-          style="fill: #27A7E7 ;stroke-width:0.118011"
-          id="path5-8-5-1"
-          cx="1.4552083"
-          cy="2.5135417"
-          r="0.92604166"
-        />
-        <circle
-          style="fill: #27A7E7 ;stroke-width:0.101152"
-          id="path5-8-5-1-7"
-          cx="7.1437502"
-          cy="1.3229166"
-          r="0.79374999"
-        />
-        <circle
-	  style="fill: #F36D3A; stroke-width:0.23602"
-          id="path5"
-          cx="3.96875"
-          cy="4.4979167"
-          r="1.8520833"
-        />
-      </g>
-    </svg>

public/icons/site.webmanifest

@@ -1 +1,21 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/assets/logo.svg

@@ -0,0 +1,41 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .x { fill: white; transform-box: fill-box; animation: expand-r 6s ease-in-out infinite;}
+    @keyframes expand-r { 50% { r: 8px; } }
+    
+    .c { fill: white; transform-box: fill-box; animation: o 6s ease-in-out infinite; }
+    @keyframes o { 50% { transform: var(--t); } }
+
+    .l {
+      stroke: white;
+      stroke-dasharray: 1; 
+      stroke-dashoffset: 1;
+      stroke-width: 1.5;
+      animation: draw 6s ease-in-out infinite;
+    }
+
+    @keyframes draw {
+      0%, 100% { stroke-dashoffset: 0; }
+      50% { stroke-dashoffset: 1; }
+    }
+  </style>
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+      <stop stop-color="#2AABEE" offset="0%"></stop>
+      <stop stop-color="#229ED9" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+
+
+  <rect width="32" height="32" rx="4" ry="4" fill="url(#linearGradient-1)" />
+  <circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)" />
+  <circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)"/>
+  <circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)"/>
+  <circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)"/>
+  <circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)"/>
+  <line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1"/>
+  <line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1"/>
+  <line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1"/>
+  <line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1"/>
+    
+</svg>

src/components/BaseLogo.vue

@@ -2,86 +2,19 @@
   <div 
     class="flex row items-center no-wrap logo-component"
     >
-    <svg
+    <img
-      class="iconcolor"
+      src="src/assets/logo.svg"
-      viewBox="0 0 8.4666662 8.4666662"
+      style="height: 24px; max-width: 24px; padding-right: 4px;"
-      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>
 
     <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>

src/css/quasar.variables.scss

@@ -24,7 +24,8 @@ $negative  : #C10015;
 $info      : #31CCEC;
 $warning   : #F2C037;
 
-$brand: #3390ec;
+$brand: #419FD9;
 $brand2: #F36D3A;
+$base-bg: #517DA2;
 
 $typography-font-family : 'myFont', Roboto !default;