update cards

public/icons/favicon-tags.html

@@ -0,0 +1,11 @@
+<!-- Place these tags in your HTML head section -->
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
+<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
+<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
+<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="apple-touch-icon" sizes="192x192" href="/android-chrome-192x192.png">
+<link rel="manifest" href="/site.webmanifest">

public/icons/site.webmanifest

@@ -1,18 +1,17 @@
 {
-  "name": "MyWebSite",
+  "name": "Your Website",
-  "short_name": "MySite",
+  "short_name": "Website",
+  "description": "Description of your website",
   "icons": [
     {
-      "src": "/web-app-manifest-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
+      "type": "image/png"
-      "purpose": "maskable"
     },
     {
-      "src": "/web-app-manifest-512x512.png",
+      "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
-      "type": "image/png",
+      "type": "image/png"
-      "purpose": "maskable"
     }
   ],
   "theme_color": "#ffffff",

src/components/BaseLogo.vue

@@ -5,7 +5,7 @@
         'is-animated': animated, 
         'hide-bg': !withBackground
       }"
-      :style="{ color: iconColor, transform: 'scale(1.08)', height: '1cap'  }"
+      :style="iconStyle"
     />
 
     <div
@@ -20,26 +20,41 @@
 </template>
 
 <script setup>
+  import { computed } from 'vue'
+  import { getCssVar } from 'quasar'
   import LogoIcon from 'components/BaseLogoSvg.vue'
-  defineProps({
+  const props = defineProps({
     textColor: {
       type: String,
       default: 'primary'
     },
     iconColor: {
       type: String,
-      default: 'white'
+      default: 'primary'
     },
     withBackground: {
       type: Boolean,
-      default: true
+      default: false
     },
     animated: {
       type: Boolean,
       default: true
     }
   })
+
+  const iconStyle = computed(() => {
+    const color = getCssVar(props.iconColor) || props.iconColor
+
+    return {
+      color: color,
+      transform: 'scale(1.08)',
+      height: '1cap'
+    }
+  })
 </script>
 
 <style lang="scss" scoped>
+  .hide-bg :deep(.logo-bg) {
+    display: none;
+  }
 </style>

src/components/FooterSection.vue

@@ -1,79 +1,85 @@
 <template>
-    <div class="w100 flex justify-between text-caption q-pa-md q-gutter-y-md text-grey-9">
+  <div>
-        <div class="flex column col-12 col-sm">
+    <div class="w100 flex items-center justify-between q-px-md">
-          <div class="q-pl-sm">
+      <div id="contact-block" class="flex column items-start q-py-sm">
-            <base-logo
+        <base-logo
-              withBackground
+          animated
-              animated
+          class="text-h6"
-              class="text-h4"
+        />
-            />
+        
-            <div class="flex items-center no-wrap">
+        <div class="flex items-center no-wrap">
-              <q-icon name="mdi-map-marker-outline" color="brand" class="q-pr-sm"/>
+          <q-icon name="mdi-map-marker-outline" color="brand" class="q-pr-xs"/>
-              <span>{{ $t('footer__contacts_location') }}</span>
+          <span>{{ $t('footer__contacts_location') }}</span>
-            </div>
-            <div class="flex items-center no-wrap">
-              <q-icon name="mdi-phone-outline" color="brand" class="q-pr-sm" />
-              <span>+7 (916) 439-04-25</span>
-            </div>
-            <div class="flex items-center no-wrap">
-              <q-icon name="mdi-email-outline" color="brand" class="q-pr-sm"/>
-              <a
-                href="mailto:info@tgcrew.ru"
-                style="text-decoration: none; color: inherit"
-                >
-                info@tgcrew.ru
-              </a>
-            </div>
-            <br>
-            <div class="">
-              {{ $t('footer__contacts_ogrnip') + ' ' }}
-              <span class="text-no-wrap">
-                318774600262084
-              </span>
-            </div>
-            <div class="">
-              {{ $t('footer__contacts_inn') + ' ' }}
-              <span class="text-no-wrap">
-                366316608346
-              </span>
-            </div>
-            <div class="">
-              {{ $t('footer__contacts_pdn') + ' ' }}
-              <span class="text-no-wrap">
-                77-25-471585
-              </span>
-            </div>
-          </div>
         </div>
 
-      <div class="flex column col-12 col-sm">
+        <div class="flex items-center no-wrap">
-        <div class="q-pl-sm">
+          <q-icon name="mdi-phone-outline" color="brand" class="q-pr-xs"/>
-          <span class="text-body1 text-bold">
+          <span>+7 (916) 439-04-25</span>
-            {{ $t('footer__docs') }}
+        </div>
-          </span>
+
-          <div
+        <div class="flex items-center no-wrap">
-            v-for="item in docs"
+          <q-icon name="mdi-email-outline" color="brand" class="q-pr-xs"/>
-            :key="item.id"
+          <a
-            class="text-caption"
+            href="mailto:info@tgcrew.ru"
+            style="text-decoration: none; color: inherit"
             >
-            <span
+            info@tgcrew.ru
-              @click="router.push({ name: item.route })"
+          </a>
-              class="cursor-pointer"
-              style="text-decoration: underline; color: inherit"
-              >
-              {{ $t(item.translationKey) }}
-            </span>
-          </div>
         </div>
       </div>
 
-      <div class="flex column col-12 col-sm">
+      <div id="doc-block" class="text-grey q-py-sm">
-        <div class="text-grey q-pl-sm">
+        <div
-          {{ $t('footer__description_user_data') }}
+          v-for="item in docs"
+          :key="item.id"
+          class="text-caption"
+          >
+          <span
+            @click="router.push({ name: item.route })"
+            class="cursor-pointer"
+            style="color: inherit"
+            >
+            {{ $t(item.translationKey) }}
+          </span>
         </div>
       </div>
-
     </div>
+
+    <q-separator/>
+    
+    <div class="column q-py-sm q-px-md" id="law-block">
+      <div class="flex justify-center text-caption text-grey">
+        <span class="q-pr-md">
+          <span class="text-no-wrap">
+            {{ $t('footer__contacts_ip') }}
+          </span>
+        </span>
+        
+        <span class="q-pr-md">
+          {{ $t('footer__contacts_ogrnip') + ' ' }}
+          <span class="text-no-wrap">
+            318774600262084
+          </span>
+        </span>
+        <span class="q-pr-md">
+          {{ $t('footer__contacts_inn') + ' ' }}
+          <span class="text-no-wrap">
+            366316608346
+          </span>
+        </span>
+        <span class="q-pr-md">
+          {{ $t('footer__contacts_pdn') + ' ' }}
+          <span class="text-no-wrap">
+            77-25-471585
+          </span>
+        </span>
+      </div>
+
+      <div class="text-grey-5 text-center text-caption">
+        {{ $t('footer__description_user_data') }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/HeroBanner.vue

@@ -18,9 +18,9 @@
           object-position: center center;
           width: 100%; 
           height: 100%;
-          filter: blur(2px) brightness(0.75);
+          filter: blur(2px) brightness(0.9);
         "
-        @canplay="$event.target.playbackRate = 0.5"
+        @canplay="$event.target.playbackRate = 0.4"
       />
       <div
         class="column items-center no-wrap"
@@ -33,8 +33,9 @@
         </div>
   
         <div
-          class="text-white text-center q-py-lg center-block"
+          class="text-white text-center q-py-lg center-block text-bold"
           :class="$q.screen.lt.sm ? 'text-h4' : 'text-h3'"
+          style="line-height: 1.5em;"
           >
           {{ $t('banner__slogan_body') }}
           <span class="text-no-wrap" color="primary">
@@ -62,7 +63,7 @@
               <q-icon name="keyboard_arrow_right"/>
             </div>
           </q-btn>
-          <div class="text-white q-pt-sm edge-block justify-start text-grey-2">
+          <div class="text-white q-pt-sm edge-block justify-start text-grey-4">
             {{ $t('banner__main_btn_description')}}
           </div>
         </div>

src/components/HowWorksSection.vue

@@ -12,12 +12,23 @@
         <div class="relative-position w60 q-pt-md">
           <div style="height: 60vh; position: relative;">
             <iframe
+              v-if="item.name === 'intro'"
               :key="item.name"
               :src="item.url" 
               allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock; fullscreen;" 
               frameborder="0" 
               style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
             />
+            <div v-else class="relative-position fit">
+              <q-skeleton
+                type="rect"
+                class="fit"
+                style="border-radius: var(--base-radius);"
+              />
+              <div class="absolute-center text-h4 text-uppercase text-grey-8">
+                {{ $t('how_it_works__coming_soon') }}
+              </div>
+            </div>
           </div>
         </div>
       </template>

src/components/PriceSection.vue

@@ -84,10 +84,10 @@
   ]
 
   const tariffs = [
-    { id: 1, name: 'TEST', price: null, price_rub: null, chatsQty: 5 },
+    { id: 1, name: 'TEST', price: 0, price_rub: 0, chatsQty: 5 },
     { id: 2, name: 'START', price: 1000, price_rub: 2000, chatsQty: 15 },
     { id: 3, name: 'PRO', price: 5000, price_rub: 10000, chatsQty: 40 },
-    { id: 4, name: 'VIP', price: 12000, price_rub: 24000, chatsQty: null }
+    { id: 4, name: 'VIP', price: 12000, price_rub: null, chatsQty: null }
   ]
 
 </script>

src/components/PriceSectionItem.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex column items-center bg-white rounded-card q-pa-md">
+  <div
+    class="flex column items-center bg-white rounded-card q-pa-md crew-card fit"
+    >
     <div class="text-h5 text-primary text-bold">
       {{ name }}
     </div>
@@ -23,9 +25,23 @@
         </div>
         <span class="text-caption">{{ $t('price__per_month') }}</span>
       </div>
-      <div v-else class="text-bold text-h5">
+      <div v-else-if="price === 0" class="text-bold text-h5">
         {{ $t('price__free_tax') }}
       </div>
+      <div v-else>
+        
+        <div class="text-center q-pt-md">
+          <a
+            href="mailto:info@tgcrew.ru"
+            style="text-decoration: none; color: inherit"
+            >
+            {{ $t('price__request') }}<br>
+            info@tgcrew.ru
+          </a>
+        </div>
+
+      </div>
+
     </div>
       
     <div class="flex items-center q-pt-md" style="min-height: 50px;">

src/components/ProblemSection.vue

@@ -3,7 +3,8 @@
     <div
       class="fit row"
       >
-      <div class="col-sm-6 col-xs-12 q-pa-lg"
+      <div
+        class="flex col-sm-6 col-xs-12 q-pa-lg"
         v-for="(item, idx) in problems"
         :key="idx"
         >
@@ -11,6 +12,7 @@
           :icon="item.icon"
           :title="item.title"
           :description="item.description"
+          class="bg-red"
         />
       </div>
     </div>

src/components/ProblemSectionItem.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="column items-center bg-white fit q-pa-lg rounded-card fit">
+  <div
+    class="crew-card column items-center q-pa-xl cursor-pointer fit"
+    >
     <q-icon
       :name="icon"
       size="xl"
       color="primary"
     />
+
     <div class="text-bold text-h5 text-center q-pt-md">
       {{ $t(title ?? '') }}
     </div>
+    
     <div class="text-grey text-body1 text-center q-pt-sm text-wrap">
       {{ $t(description ?? '') }}
     </div>
@@ -15,12 +19,14 @@
 </template>
 
 <script setup lang="ts">
+
 defineProps({
   icon: String,
   title: String,
   description: String
 })
+
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-</style>
+</style>

src/css/app.scss

@@ -107,6 +107,24 @@ body, html, #q-app {
   border-radius: var(--base-radius);
 }
 
+.crew-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.9) 0%,
+    rgba(255, 255, 255, 0.5) 100%
+  ) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &.is-hovered {
+    transform: translateY(-1px);
+    background: white;
+  }
+}
+
 @font-face {
   font-family: 'myFont';
   src: url(./fonts/Inter-Regular.woff2);

src/layouts/MainLayout.vue

@@ -23,6 +23,7 @@
           <base-logo
             ref="logo"
             class="text-h5"
+            :icon-color="isHeroScroll ? 'white' : 'primary'"
             :text-color="isHeroScroll ? 'white' : 'primary'"
           />
           <div