update

src/components/FAQSection.vue

@@ -4,36 +4,22 @@
       class="q-pa-md w100 flex justify-center"
       style="max-width: 800px"
       >
-      <q-list separator>
+      <q-list>
-        <q-expansion-item
+        <faq-section-item
-          group="FAQgroup"
           v-for="item in 8"
           :key="item"
-          switch-toggle-side
+          :question="'faq__question_' + item"
-          header-class="text-h6"
+          :answer="'faq__answer_' + item"
-          expand-icon="mdi-plus"
+          class="q-my-md"
-          expand-icon-class="text-brand2"
+        />
-          class="fix-icon-color"
-          >
-          <template #header="{ expanded }">
-            <div :class="expanded ? 'text-primary' : ''" class="w100">
-              {{ $t('faq__question_' + item) }}
-            </div>
-          </template>
-          <q-card>
-            <q-card-section class="text-grey-8">
-              {{ $t('faq__answer_' + item) }}
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
       </q-list>
-      <div class="text-h6 text-primary q-py-md" align="center">
+      <div class="text-h6 text-primary q-py-md text-center">
         {{ $t('faq__description') }}
         <a
-          href="mailto:a-mart@ya.ru"
+          href="mailto:support@tgcrew.ru"
           style="text-decoration: none; color: inherit"
           >
-          a-mart@ya.ru
+          support@tgcrew.ru
         </a>
       </div>
     </div>
@@ -41,7 +27,8 @@
 </template>
 
 <script setup lang="ts">
-  import SlideTemplate from 'components/SlideTemplate.vue';
+  import SlideTemplate from 'components/SlideTemplate.vue'
+  import FaqSectionItem from 'components/FAQSectionItem.vue'
   
 </script>
 

src/components/FAQSectionItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="column bg-grey-4 rounded-card q-px-xl q-py-md">
+    <div class="row no-wrap items-center">
+      <div class="text-h6" style="flex-grow: 2;">
+        {{ $t(question) }}
+      </div>
+      <div class="q-pl-md">
+        <q-btn
+          @click="showAnswer=!showAnswer"
+          round unelevated color="white"
+          >
+          <q-icon
+            name="add"
+            :color="showAnswer ? 'primary' : 'grey'"
+            :class="showAnswer ? 'icon-rotated' : 'icon-rotated-back'"
+          />
+        </q-btn>
+      </div>
+    </div>
+
+
+    <q-slide-transition>
+      <div v-show="showAnswer" class="text-body q-py-md text-grey-9">
+        {{ $t(answer) }}
+      </div>
+    </q-slide-transition>
+  
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  defineProps({
+    question: String,
+    answer: String
+  })
+
+  const showAnswer = ref(false)
+</script>
+
+<style scoped>
+  .icon-rotated {
+    transition: transform 0.3s ease;
+    transform: rotate(45deg);
+  }
+
+  .icon-rotated-back {
+    transition: transform 0.3s ease;
+    transform: rotate(0deg);
+  }
+
+</style>

src/components/FooterSection.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w100 flex justify-between bg-grey-11 text-caption q-pa-md q-gutter-y-md">
+    <div class="w100 flex justify-between text-caption q-pa-md q-gutter-y-md text-grey-9">
         <div class="flex column col-12 col-sm">
           <base-logo class="text-body1 q-pb-sm"/>
           <div class="flex items-center">
@@ -8,15 +8,15 @@
           </div>
           <div class="flex items-center">
             <q-icon name="mdi-phone-outline" color="brand" class="q-pr-sm" />
-            <span>+7 (926) 339-04-25</span>
+            <span>+7 (916) 439-04-25</span>
           </div>
           <div class="flex items-center">
             <q-icon name="mdi-email-outline" color="brand" class="q-pr-sm"/>
             <a
-              href="mailto:a-mart@ya.ru"
+              href="mailto:info@tgcrew.ru"
               style="text-decoration: none; color: inherit"
               >
-              a-mart@ya.ru
+              info@tgcrew.ru
             </a>
           </div>
         </div>

src/components/HeroBanner.vue

@@ -1,58 +1,54 @@
 <template>
   <div
-    class="flex w100 text-white relative-position vert-height"
+    class="flex w100 justify-center items-center"
-    :class="isAlignTop ? 'justify-center' : 'justify-end'"
+    style="
-    style="background-image: url('/img/samolet.jpg'); background-size: cover; height: 100vh;"
+      background-image: url('/img/samolet.jpg');
+      background-size: cover;
+      height: 100vh;
+    "
     >
       <div
-      ref="slogan"
+        class="column items-center"
-      class="flex items-center"
+        style="max-width: 75%; height: 100%">
-      >
         <div
-        class="flex bg-white column justify-center q-pa-lg q-ma-lg q-gutter-y-md no-wrap bg-transperant"
+          class="column justify-end text-h4 text-grey-4 text-center edge-block"
-        style="max-width: 400px; border-radius: 12px; opacity: 0.8"
-        :style="!isAlignTop ? 'text-align : center' : ''"
           >
-        <div class="text-h5 text-grey">
           {{ $t('banner__slogan_prepend') }} 	&mdash;
         </div>
-        <div class="text-h4 text-brand">
+  
+        <div
+          class="text-h2 text-white text-center q-py-lg center-block"
+          style="line-height: 4rem;"
+          >
           {{ $t('banner__slogan_body') }}
           <span class="text-no-wrap" color="primary">
             <q-icon dense name="telegram"/>
             <span>Telegram</span>
           </span>
-
         </div>
-        <div>
+
+        <div class="column items-center edge-block">
+          <div class="edge-block"/>
           <q-btn
-            size="lg"
+            size="xl"
             color="brand2"
-            class="q-mt-xl"
+            class="q-mt-lg"
+            rounded
             >
-            <div class="flex items-center no-wrap">
+            <div class="flex items-center no-wrap center-block">
-              <div>{{ $t('banner__main_btn')}}</div> 
+              <div class="q-pl-md text-h4">{{ $t('banner__main_btn')}}</div> 
               <q-icon name="keyboard_arrow_right"/>
             </div>
           </q-btn>
+          <div class="text-white q-pt-md edge-block justify-start">
+            {{ $t('banner__main_btn_description')}}
           </div>
         </div>
       </div>
-    <q-resize-observer @resize="checkAlign"/>
       </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-
-  const slogan = ref(null)
-  const image = ref(null)
-  const isAlignTop = ref(false)
-
-  const checkAlign = () => {
-    if (slogan.value && image.value)
-      isAlignTop.value = (slogan.value.offsetTop === image.value.offsetTop)
-  }
 </script>
 
 <style scoped>
@@ -71,4 +67,12 @@
     height: 100%;
     z-index:-1;
   }
+
+  .center-block {
+    flex: 0 0 auto;
+  }
+
+  .edge-block {
+    flex: 1
+  }
 </style>

src/components/PriceSection.vue

@@ -1,54 +1,23 @@
 <template>
   <slide-template title="price__title">
-    <div ref="container" class="w100 flex no-wrap">
-      <q-resize-observer @resize="updateWidth" />
-        <div class="w100 flex justify-center" v-if="containerWidth > 800">
-          <q-card
-            v-for="(item, idx) in tariff" 
-            :key="idx"
-            class="q-pa-md q-ma-sm flex items-center column"
-            style="width: 20%"
-            >
-            <price-section-item
-              :name="item.name"
-              :chats-qty="item.chatsQty"
-              :price="item.price"
-            />
-          </q-card>
-        </div>
-
-        <q-carousel
-          v-else
-          v-model="slide"
-          transition-prev="scale"
-          transition-next="scale"
-          swipeable
-          animated
-          navigation
-          padding
-          height="225px"
-          control-color="primary"
-          class="w100"
-          >
-          <q-carousel-slide
-            v-for="(item, idx) in tariff" 
-            :key="idx"
-            :name="item.name"
-            class="flex justify-center q-pt-lmdq-pa-none q-ma-none"
-            >
-            <price-section-item
-              :name="item.name"
-              :chats-qty="item.chatsQty"
-              :price="item.price"
-            />
-          </q-carousel-slide>
-        </q-carousel>
-    </div>
-
     <div class="q-ma-md" align="center" style="max-width: 60%;">
       {{ $t('price__tariff_description') }}
     </div>
 
+    <div
+      class="fit row"
+      >
+      <div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
+        v-for="(item, idx) in tariff"
+        :key="idx"
+        >
+        <price-section-item
+          :name="item.name"
+          :chats-qty="item.chatsQty"
+          :price="item.price"
+        />
+      </div>
+    </div>
     <q-card 
       flat
       class="bg-grey-3"
@@ -76,7 +45,6 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
   import SlideTemplate from 'components/SlideTemplate.vue'
   import PriceSectionItem from 'components/PriceSectionItem.vue'
   import telegramStar from 'components/TelegramStar.vue'
@@ -88,17 +56,6 @@
     { id: 4, name: 'VIP', price: 12000, chatsQty: null }
   ]
   
-  const containerWidth = ref(0)
-  const cardWidth=ref(175)
-
-  const updateWidth = ({ width }) => {
-    containerWidth.value = width
-    cardWidth.value = width < 1200 ? 250 : 175
-  }
-
-  const slide = ref(tariff[0].name)
-
-  
 </script>
 
 <style scoped>

src/components/PriceSectionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex column items-center">
+  <div class="flex column items-center bg-white rounded-card q-pa-md">
     <div class="text-h5 text-primary text-bold">
       {{ name }}
     </div>

src/components/ProblemSection.vue

@@ -1,78 +1,33 @@
 <template>
-  <slide-template>
+  <slide-template title="problem__title">
-    <div ref="container" class="w100 flex no-wrap q-pt-lg">
+    <div
-      <q-resize-observer @resize="updateWidth" />
+      class="fit row"
-      <div class="w100 flex justify-center" v-if="containerWidth > 800">
+      >
-        <q-card
+      <div class="col-sm-6 col-xs-12 q-pa-lg"
         v-for="(item, idx) in problems"
         :key="idx"
-          class="q-pa-md q-ma-sm"
         >
         <problem-section-item
           :icon="item.icon"
           :title="item.title"
           :description="item.description"
-            style="overflow: hidden;"
-            :style="{ width: cardWidth + 'px' }"
         />
-        </q-card>
       </div>
-
-      <q-carousel
-        v-else
-        v-model="slide"
-        transition-prev="scale"
-        transition-next="scale"
-        swipeable
-        animated
-        navigation
-        padding
-        height="300px"
-        control-color="primary"
-        class="w100"
-        >
-        <q-carousel-slide
-          v-for="(item, idx) in problems" 
-          :key="idx"
-          :name="item.title"
-          class="flex justify-center q-pa-none q-ma-none"
-          >
-          <problem-section-item
-            :icon="item.icon"
-            :title="item.title"
-            :description="item.description"
-            style="overflow: hidden; min-width: 100px; max-width: 200px;"
-          />
-        </q-carousel-slide>
-      </q-carousel>
     </div>
   </slide-template>
-
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import ProblemSectionItem from 'components/ProblemSectionItem.vue'
   import SlideTemplate from 'components/SlideTemplate.vue'
+  import ProblemSectionItem from 'components/ProblemSectionItem.vue'
 
   const problems = [
-    { id: 1, icon: 'mdi-account-group-outline', title: 'problem__address_book', description: 'problem__address_book_description' },
+    { id: 1, icon: 'mdi-folder-multiple-outline', title: 'problem__1', description: 'problem__1_description' },
-    { id: 2, icon: 'mdi-clipboard-outline', title: 'problem__tasks', description: 'problem__tasks_description' },
+    { id: 2, icon: 'mdi-account-group-outline', title: 'problem__2', description: 'problem__2_description' },
-    { id: 3, icon: 'mdi-calendar-month', title: 'problem__meeting', description: 'problem__meeting_description' },
+    { id: 3, icon: 'mdi-chat-processing-outline', title: 'problem__3', description: 'problem__3_description' },
-    { id: 4, icon: 'mdi-folder-open-outline', title: 'problem__files', description: 'problem__files_description' },
+    { id: 4, icon: 'mdi-lock-check-outline', title: 'problem__4', description: 'problem__4_description' },
-    { id: 5, icon: 'mdi-lock-outline', title: 'problem__privacy', description: 'problem__privacy_description' }
   ]
   
-  const containerWidth = ref(0)
-  const cardWidth = ref(175)
-
-  const updateWidth = ({ width }) => {
-    containerWidth.value = width
-    cardWidth.value = width < 1200 ? 250 : 175
-  }
-
-  const slide = ref(problems[0].title)
-  
 </script>
 
 <style scoped>

src/components/ProblemSectionItem.vue

@@ -1,19 +1,14 @@
 <template>
-  <div class="flex column items-center">
+  <div class="column items-start bg-white fit q-pa-lg rounded-card fit">
-    <div>
+    <q-icon
-      <q-avatar
+      :name="icon"
-        color="brand"
+      size="xl"
-        text-color="white" 
+      color="primary"
-        :icon
-        font-size="45px"
-        size="75px"
-        class="q-my-md"
     />
-    </div>
+    <div class="text-bold text-h5 q-pt-lg">
-    <div class="text-bold text-h5" align="center">
       {{ $t(title) }}
     </div>
-    <div class="text-grey-8 q-pt-sm" style="text-align: center;">
+    <div class="text-grey q-pt-sm text-wrap">
       {{ $t(description) }}
     </div>
   </div>

src/css/app.scss

@@ -31,8 +31,9 @@ body, html, #q-app {
 }
 
 :root {
-  --body-width: 1200px;
+  --body-width: 1440px;
   --logo-color-bg-white: grey;
+  --base-radius: 24px;
 }
 
 .main-content {
@@ -40,6 +41,10 @@ body, html, #q-app {
   margin: 0 auto;
 }
 
+.rounded-card {
+  border-radius: var(--base-radius);
+}
+
 @font-face {
   font-family: 'myFont';
   src: url(./fonts/Inter-Regular.woff2);

src/layouts/MainLayout.vue

@@ -1,8 +1,13 @@
 <template>
-  <q-layout view="lHr lpr lFr" class="bg-transparent relative-position">
+  <q-layout view="lHr lpr lFr" class="bg-grey-11 relative-position">
     <q-header
-      class="main-content q-py-sm"
+      class="main-content q-py-sm q-px-md"
-      :class="isHeroScroll ? 'text-white bg-transparent' : 'text-grey glass'"
+      :class="isHeroScroll ? 'text-white bg-transparent' : 'text-grey glass shadow-6'"
+      style="
+        transition: background-color 0.5s ease, color 0.5s ease;
+        border-bottom-left-radius: var(--base-radius);
+        border-bottom-right-radius: var(--base-radius);
+      "
       reveal
       >
       <div

src/pages/DocPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex justify-center bg-grey-11"
+    class="flex justify-center"
     style="height: 100vh"
     >
     <q-layout container style="max-width: 800px !important">
@@ -8,7 +8,7 @@
         <q-page class="flex w100 column">
           <div >
             <div
-              class="main-content flex items-center column w100 bg-white q-px-lg q-pb-xl"
+              class="main-content flex items-center column w100 q-px-lg q-pb-xl"
               >
               <base-logo
                 class="q-pa-md text-h4 cursor-pointer"