update

components/homepage/any-questions.vue

@@ -88,7 +88,8 @@ const app = useAppConfig()
     }
   }
 
-  &__right {}
+  &__right {
+  }
 
   &__call-us {
     color: $color-gray-600;
@@ -100,7 +101,6 @@ const app = useAppConfig()
 
     @include mobile {
       @include font(16px, 700, 20px, 'phone-number', true);
-
     }
   }
 }

components/homepage/faq.vue

@@ -53,7 +53,6 @@
 
       margin-bottom: 24px;
     }
-
   }
 }
 </style>

components/homepage/hero.vue

@@ -148,7 +148,7 @@
     align-items: center;
     justify-content: center;
     gap: 40px;
-    padding-blocK: 16px;
+    padding-block: 16px;
     margin-top: 24px;
 
     @include mobile {

components/homepage/how-it-works.vue

@@ -151,9 +151,9 @@ const app = useAppConfig()
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr auto 1fr;
     grid-template-areas:
-        'title video'
-        'list video'
-        'action video';
+      'title video'
+      'list video'
+      'action video';
     gap: 24px;
   }
 

components/homepage/our-team.vue

@@ -0,0 +1,109 @@
+<template>
+  <HomepageSection
+    class="our-team"
+    title="Наша команда"
+  >
+    <Splide class="our-team__carousel" :options="splideOptions">
+      <SplideSlide>
+        <HomepageOurTeamMember
+          avatar-url="/our-team/nurbek.png"
+          name="Нурбек Зейнуллаев"
+          position="Со-основатель"
+        >
+          <li>15+ лет предпринимательского опыта</li>
+          <li>Эксперт в инвестициях и технологиях</li>
+          <li>Специализация: стратегическое развитие бизнеса</li>
+        </HomepageOurTeamMember>
+      </SplideSlide>
+
+      <SplideSlide>
+        <HomepageOurTeamMember
+          avatar-url="/our-team/timur.png"
+          name="Тимур Сергеев"
+          position="Со-основатель / CTO"
+        >
+          <li>10+ лет управления проектами</li>
+          <li>Опыт в IT и крупных федеральных проектах</li>
+          <li>Работал в российских и американских корпорациях</li>
+        </HomepageOurTeamMember>
+      </SplideSlide>
+
+      <SplideSlide>
+        <HomepageOurTeamMember
+          avatar-url="/our-team/abdulla.png"
+          name="Абдулла Садаев"
+          position="Со-основатель / CFO"
+        >
+          <li>Магистр наук (Wageningen/Aarhus)</li>
+          <li>8 лет в управлении межднародными проектами в Cargill</li>
+          <li>Эксперт по финансовым моделям и рискам</li>
+        </HomepageOurTeamMember>
+      </SplideSlide>
+
+      <SplideSlide>
+        <HomepageOurTeamMember
+          avatar-url="/our-team/ruslan.png"
+          name="Руслан Кошкаров"
+          position="Account Executive"
+        >
+          <li>6+ лет в клиентском сервисе</li>
+          <li>Опыт в IT и обучении пользователей</li>
+          <li>Специализация: системы поддержки</li>
+        </HomepageOurTeamMember>
+      </SplideSlide>
+
+      <SplideSlide>
+        <HomepageOurTeamMember
+          avatar-url="/our-team/anton.png"
+          name="Антон Келлер"
+          position="Product designer"
+        >
+          <li>6 лет в продуктовом дизайне</li>
+          <li>Победитель Ozon fintech contest</li>
+          <li>Эксперт по эвристическому методу оценки интерфейсов</li>
+        </HomepageOurTeamMember>
+      </SplideSlide>
+    </Splide>
+  </HomepageSection>
+</template>
+
+<script lang="ts" setup>
+import type { Options as SplideOptions } from '@splidejs/splide'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+
+const splideOptions = computed(() => ({
+  gap: 16,
+  autoWidth: true,
+  arrows: false,
+  pagination: false,
+  mediaQuery: 'min',
+  padding: { right: 16, left: 16 },
+  breakpoints: {
+    481: {
+      destroy: true,
+    },
+  },
+} as SplideOptions))
+</script>
+
+<style lang="scss">
+.our-team {
+  &__carousel {
+    @include desktop {
+      .splide__track {
+        overflow: visible;
+      }
+
+      .splide__list {
+        display: flex !important;
+        justify-content: center;
+        gap: 16px;
+      }
+    }
+
+    @include mobile {
+      margin-inline: -16px;
+    }
+  }
+}
+</style>

components/homepage/our-team/member.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="our-team-member">
+    <div class="our-team-member__avatar">
+      <NuxtImg :src="avatarUrl" width="200" height="200" format="webp" draggable="false" />
+    </div>
+
+    <div class="our-team-member__name">
+      {{ name }}
+    </div>
+
+    <div class="our-team-member__position">
+      {{ position }}
+    </div>
+
+    <ul class="our-team-member__experience">
+      <slot />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  avatarUrl: string
+  name: string
+  position: string
+}>()
+</script>
+
+<style lang="scss">
+.our-team-member {
+  width: 220px;
+
+  &__avatar {
+    margin-bottom: 32px;
+    text-align: center;
+  }
+
+  &__name {
+    @include font(18px, 700, 28px);
+
+    text-align: center;
+  }
+
+  &__position {
+    @include font(14px, 500, 25px);
+
+    margin-top: 8px;
+    text-align: center;
+    color: #6236f5;
+  }
+
+  &__experience {
+    @include font(12px, 400, 18px);
+
+    list-style: disc;
+    color: #787a82;
+    margin-top: 16px;
+  }
+}
+</style>

components/homepage/referral-program.vue

@@ -11,7 +11,7 @@
         </div>
 
         <p class="referral-program__description">
-          Получайте вознаграждение за каждое пополнение пользователей,<br>
+          Получайте вознаграждение за пополнение пользователей,<br>
           которые зарегистрируются и воспользуется нашим сервисом
         </p>
 
@@ -47,9 +47,11 @@ const desktopBg = computed(() => {
     color: $color-white;
 
     @include desktop {
-      background-image: v-bind(desktopBg), linear-gradient(260.36deg, #21DAC2 0%, #008574 86.86%);
+      background-image: v-bind(desktopBg), linear-gradient(260.36deg, #21dac2 0%, #008574 86.86%);
       background-repeat: no-repeat;
-      background-position: center right 100px, center;
+      background-position:
+        center right 100px,
+        center;
     }
 
     @include mobile {
@@ -115,7 +117,7 @@ const desktopBg = computed(() => {
           left: 16px;
           top: 36px;
           height: 13px;
-          border-left: 1px dashed $color-lime;
+          border-left: 1px dashed $color-lemon-500;
         }
       }
 
@@ -128,7 +130,7 @@ const desktopBg = computed(() => {
         width: 32px;
         flex-shrink: 0;
         text-align: center;
-        background-color: $color-lime;
+        background-color: $color-lemon-500;
         color: $color-black;
         border-radius: 8px;
       }

components/homepage/results.vue

@@ -183,7 +183,6 @@ import InfoButton from '~/components/info-button.vue'
 
     @include desktop {
       grid-row: span 2;
-
     }
   }
 

components/homepage/section.vue

@@ -5,7 +5,7 @@
         {{ title }}
       </div>
 
-      <p class="homepage-section__description">
+      <p v-if="description" class="homepage-section__description">
         {{ description }}
       </p>
 
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 defineProps<{
   title: string
-  description: string
+  description?: string
 }>()
 </script>
 

components/homepage/tariff.vue

@@ -1,94 +1,107 @@
 <template>
   <HomepageSection
     class="tariff"
-    title="Единый тариф"
-    description="Получите полный доступ ко всему функционалу за фиксированную цену"
+    title="Тарифы"
+    description="Выберите тариф, подходящий под потребности Вашего бизнеса"
   >
-    <div class="tariff__inner">
-      <div class="tariff__header">
-        <NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" draggable="false" />
+    <Splide class="tariff__carousel" :options="splideOptions">
+      <SplideSlide>
+        <HomepageTariffCard title="Seller" price-per-month="10 000">
+          Идеально для небольших <br class="desktop-only">
+          или <br class="mobile-only">
+          узкоспециализированных магазинов
 
-        <div class="tariff__price">
-          30 000 ₸ / месяц
-        </div>
-      </div>
+          <template #list>
+            <HomepageTariffCardListItem>
+              Автокорректировка цен <br>
+              до <strong>50 товаров</strong>
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Настройка предзаказа</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Поддержка 24/7</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Не конкурировать со своими магазинами</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Высокая скорость обновления цен</HomepageTariffCardListItem>
+          </template>
+        </HomepageTariffCard>
+      </SplideSlide>
 
-      <ul class="tariff__list">
-        <li>Дэмпинг</li>
-        <li>100% точная аналитика</li>
-        <li>Предзаказ</li>
-      </ul>
+      <SplideSlide>
+        <HomepageTariffCard title="Seller Pro" price-per-month="20 000" popular>
+          Подойдет тем, кто активно торгует на Kaspi
 
-      <UiButton class="tariff__action" :href="app.appUrl" rel="noopener noreferrer">
-        Попробовать 7 дней бесплатно
-      </UiButton>
-    </div>
+          <template #list>
+            <HomepageTariffCardListItem>
+              Автокорректировка цен <br>
+              до <strong>300 товаров</strong>
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Настройка предзаказа</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Поддержка 24/7</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Не конкурировать со своими магазинами</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Высокая скорость обновления цен</HomepageTariffCardListItem>
+          </template>
+        </HomepageTariffCard>
+      </SplideSlide>
+
+      <SplideSlide>
+        <HomepageTariffCard title="Seller Ultimate" price-per-month="30 000">
+          Для крупных игроков и магазинов с большим ассортиментом товаров
+
+          <template #list>
+            <HomepageTariffCardListItem>
+              Автокорректировка цен <br>
+              до <strong>3500 товаров</strong>
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Настройка предзаказа</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem hot>
+              <strong>Приоритетная</strong> Поддержка 24/7
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Не конкурировать со своими магазинами</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem hot>
+              <strong>Турбо</strong> скорость обновления цен
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Детальная аналитика продаж на Kaspi.kz</HomepageTariffCardListItem>
+          </template>
+        </HomepageTariffCard>
+      </SplideSlide>
+    </Splide>
   </HomepageSection>
 </template>
 
-<script setup>
-const app = useAppConfig()
-const img = useImage()
+<script lang="ts" setup>
+import type { Options as SplideOptions } from '@splidejs/splide'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
 
-const desktopBg = computed(() => {
-  return `url('${img('/price-bg.png', { height: '352px', format: 'webp' })}')`
-})
+const splideOptions = computed(() => ({
+  gap: 22,
+  autoWidth: true,
+  arrows: false,
+  pagination: false,
+  mediaQuery: 'min',
+  padding: { right: 16, left: 16 },
+  breakpoints: {
+    481: {
+      destroy: true,
+    },
+  },
+} as SplideOptions))
 </script>
 
 <style lang="scss">
 .tariff {
-  &__inner {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    height: 400px;
-    padding: 24px 100px;
-    border-radius: 12px;
-    background-color: $color-gray-200;
-
+  &__carousel {
     @include desktop {
-      background-image: v-bind(desktopBg);
-      background-repeat: no-repeat;
-      background-position: center right 128px;
+      .splide__track {
+        overflow: visible;
+      }
+
+      .splide__list {
+        display: grid !important;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 32px;
+      }
     }
 
     @include mobile {
-      padding: 16px;
-      height: unset;
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-  }
-
-  &__price {
-    @include font(28px, 700, 39px);
-
-    @include mobile {
-      @include font(20px, 700, 28px);
-    }
-  }
-
-  &__list {
-    @include font(16px, 400, 29px);
-
-    color: $color-gray-700;
-    margin-top: 24px;
-
-    @include mobile {
-      @include font(12px, 400, 22px);
-    }
-  }
-
-  &__action {
-    margin-top: 24px;
-
-    @include mobile {
-      width: 100%;
+      margin-inline: -16px;
     }
   }
 }

components/homepage/tariff/card-list-item.vue

@@ -0,0 +1,70 @@
+<template>
+  <li class="tariff-card-list-item">
+    <svg
+      v-if="hot"
+      class="tariff-card-list-item__hot"
+      width="16"
+      height="16"
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style="vertical-align: middle;"
+    >
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.56606 1.95038C9.63306 1.12274 9.31294 1.01479 8.85508 1.70321L4.25408 8.62123C3.94901 9.07994 4.14962 9.4518 4.70039 9.4518H7.203C7.75456 9.4518 8.17042 9.88968 8.13006 10.4547L7.80896 14.9501C7.74972 15.7795 8.05021 15.8709 8.47381 15.1649L13.1901 7.30439C13.4727 6.83352 13.2538 6.4518 12.703 6.4518H10.2004C9.64882 6.4518 9.2382 6.00082 9.28189 5.46102L9.56606 1.95038Z" fill="#FF9E0C" />
+    </svg>
+
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  hot?: boolean
+}>()
+</script>
+
+<style lang="scss">
+.tariff-card-list-item {
+  @include font(16px, 400, 20px);
+
+  color: var(--tariff-card-list-item-color, $color-gray-700);
+  position: relative;
+  padding-left: 43px;
+  padding-top: 3px;
+  min-height: 25px;
+
+  @include mobile {
+    @include font(11px, 400, 14px);
+
+    min-height: unset;
+    padding-left: 24px;
+    padding-top: 0;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 27px;
+
+    @include mobile {
+      margin-bottom: 18px;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    left: 0px;
+    top: 0;
+    content: '';
+    display: block;
+    mask-image: url(/checkmark.svg);
+    mask-size: cover;
+    width: 24px;
+    height: 25px;
+    background-color: var(--tariff-card-list-item-checkmark-color, #3ed37a);
+
+    @include mobile {
+      width: 16px;
+      height: 17px;
+    }
+  }
+}
+</style>

components/homepage/tariff/card.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="tariff-card"
+    :class="{
+      'tariff-card--popular': popular,
+    }"
+  >
+    <div class="tariff-card__title">
+      {{ title }}
+    </div>
+
+    <div class="tariff-card__description">
+      <slot />
+    </div>
+
+    <div class="tariff-card__price">
+      ₸ {{ pricePerMonth }}<sub>/месяц</sub>
+    </div>
+
+    <UiButton
+      class="tariff-card__action"
+      :type="popular ? 'promo' : 'primary'"
+      :href="app.appUrl"
+      rel="noopener noreferrer"
+    >
+      Попробовать 7 дней бесплатно
+    </UiButton>
+
+    <ul class="tariff-card__list">
+      <slot name="list" />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string
+  pricePerMonth: string
+  popular?: boolean
+}>()
+
+const app = useAppConfig()
+</script>
+
+<style lang="scss">
+.tariff-card {
+  $self: &;
+
+  padding: 40px;
+  border-radius: 12px;
+  border: 1px solid $color-gray-500;
+  background-color: $color-gray-200;
+  height: 100%;
+
+  @include mobile {
+    width: 260px;
+    padding: 16px;
+  }
+
+  &--popular {
+    position: relative;
+    color: $color-white;
+    background-color: $color-green-500;
+    border-width: 0;
+
+    @include desktop {
+      box-shadow: 0px 40px 50px 0px #056e6266;
+    }
+
+    &::before {
+      pointer-events: none;
+      inset: 0;
+      content: '';
+      display: block;
+      position: absolute;
+      background-image: url(/strips.png);
+      background-size: cover;
+      opacity: 0.05;
+    }
+  }
+
+  &__title {
+    @include font(30px, 700, 1);
+
+    @include mobile {
+      @include font(20px, 700, 26px);
+    }
+  }
+
+  &__description {
+    @include font(17px, 400, 22px);
+
+    color: $color-gray-700;
+    min-height: 44px;
+
+    @include mobile {
+      @include font(12px, 400, 15px);
+
+      min-height: 30px;
+    }
+
+    #{$self}--popular & {
+      color: $color-gray-400;
+    }
+  }
+
+  &__price {
+    @include font(55px, 600, 39px);
+
+    height: 39px;
+    margin-top: 40px;
+
+    @include mobile {
+      @include font(37px, 700, 26px);
+
+      height: 26px;
+      margin-top: 16px;
+    }
+
+    sub {
+      @include font(20px, 600, 26px);
+
+      color: $color-gray-700;
+      vertical-align: unset;
+      bottom: 0.3em;
+      margin-left: 8px;
+
+      #{$self}--popular & {
+        color: $color-gray-400;
+      }
+
+      @include mobile {
+        @include font(13px, 600, 17px);
+
+        height: 26px;
+      }
+    }
+  }
+
+  &__action {
+    margin-top: 40px;
+
+    @include mobile {
+      width: 100%;
+      margin-top: 16px;
+      height: 32px;
+      font-size: 11px;
+      padding: 0;
+      border-radius: 8px;
+    }
+  }
+
+  &__list {
+    margin-top: 40px;
+    list-style: none;
+    padding: 0;
+
+    @include mobile {
+      margin-top: 16px;
+    }
+
+    #{$self}--popular & {
+      --tariff-card-list-item-color: #{$color-white};
+      --tariff-card-list-item-checkmark-color: #{$color-lemon-500};
+    }
+  }
+}
+</style>