update

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+*.zip

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

README.md

@@ -1,9 +1,19 @@
-# Сборка проекта
+# Quantum
 
-Запустить
+Чтобы изменить ссылки, телефоны, почту и прочее, можно воспользоваться файлом `app.config.ts` и собрать проект.
 
-```shell
+## Разработка
-yarn generate
-```
 
-Скопировать содержимое директории `dist` в директорию `/www` на хостинге
+Для запуска проекта необходимо:
+- Версия NodeJS не ниже **18**
+- Глобально установить **yarn** с помощью команды `npm install -g yarn`
+- Установить зависимости `yarn install`
+- Запуск режима разработки `yarn run dev`
+
+## Сборка
+
+Чтобы собрать проект:
+- Установить зависимости `yarn install`
+- Запуск сборки `yarn run build`
+
+Скопировать содержимое директории `dist` в нужную директорию на веб-хостинге

app.config.ts

@@ -1,9 +1,11 @@
 export default defineAppConfig({
-  instagramUrl: 'https://www.instagram.com/samatk7/?igsh=Mm9keGxnbXBrdGQ4',
+  instagramUrl: 'https://www.instagram.com/quantumbot.kz/',
   telegramUrl: 'https://t.me/+vOQDGC3VoUJmY2Qy',
-  whatsappUrl: 'https://api.whatsapp.com/send/?phone=7077407714&text&type=phone_number&app_absent=0',
+  whatsappUrl: 'https://api.whatsapp.com/send/?phone=77473990582&text&type=phone_number&app_absent=0',
-  phoneNumber: '+7 (705) 400 20 66',
+  phoneNumber: '+7 747 477 43 92',
   email: 'support@quantumbot.kz',
   appUrl: 'https://app.quantumbot.kz',
-  videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ?si=dZCL9UFbyboiQzSl',
+  videoUrl: 'https://www.youtube.com/embed/qngK9wsEAxg',
+  baseUrl: import.meta.env.URL || 'https://quantumbot.kz',
+  astanaHubUrl: 'https://astanahub.com/account/company/17721/',
 })

app.vue

@@ -5,9 +5,12 @@
     <HomepageHero />
     <HomepageResults />
     <HomepageHowItWorks />
-    <HomepageTariff />
+    <HomepageAnalytics />
+<!--    <HomepageTariff />-->
+    <HomepageReferralProgram />
     <HomepageReviews />
     <HomepageFaq />
+    <HomepageOurTeam />
     <HomepageAnyQuestions />
   </main>
 

components/app-footer.vue

@@ -9,7 +9,7 @@
         </div>
 
         <div class="footer__copyright">
-          @ 2024-2025 Quantum. Все права защищены
+          @ 2024-2025 ТОО Quantum Technology. Все права защищены
         </div>
 
         <div class="footer__socials">
@@ -52,16 +52,16 @@ const app = useAppConfig()
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
-          'documents copyright'
+      'documents copyright'
-          'socials dev';
+      'socials dev';
     padding-inline: 60px;
     gap: 32px;
 
     @include mobile {
       grid-template-areas:
-          'documents documents'
+        'documents documents'
-          'copyright copyright'
+        'copyright copyright'
-          'socials dev';
+        'socials dev';
       padding-inline: 16px;
       column-gap: 16px;
     }

components/app-header.vue

@@ -2,7 +2,8 @@
   <header class="header">
     <div class="container">
       <div class="header__inner">
-        <NuxtImg src="/logo.svg" alt="one2one" class="header__logo" draggable="false" />
+        <NuxtImg src="/logo.svg" alt="one2one" class="header__logo desktop-only" draggable="false" />
+        <NuxtImg src="/logo-compact.svg" alt="one2one" class="header__logo mobile-only" draggable="false" />
 
         <hr class="header__divider desktop-only">
 
@@ -26,6 +27,10 @@
         <hr class="header__divider">
 
         <PhoneNumber />
+
+        <UiButton :href="app.appUrl" rel="noopener noreferrer" class="header__sign-in">
+          Войти
+        </UiButton>
       </div>
     </div>
   </header>
@@ -101,5 +106,19 @@ const app = useAppConfig()
       gap: 16px;
     }
   }
+
+  &__sign-in {
+    height: 40px;
+    padding-block: 9px;
+    margin-left: 24px;
+
+    @include mobile {
+      @include font(12px, 500, 15px);
+
+      height: 32px;
+      padding: 7.5px 15px;
+      margin-left: 12px;
+    }
+  }
 }
 </style>

components/homepage/analytics.vue

@@ -0,0 +1,123 @@
+<template>
+  <HomepageSection
+    class="analytics"
+    title="Аналитика продаж "
+    description="на Kaspi.kz"
+  >
+    <div class="analytics__inner">
+      <NuxtImg class="analytics__background desktop-only" src="/analytics-bg.png" height="763px" format="webp" draggable="false" />
+
+      <div class="analytics__content">
+        <div class="analytics__header">
+          <NuxtImg class="mobile-only" src="/analytics-bg.png" height="76px" format="webp" draggable="false" />
+
+          <div class="analytics__title">
+            Получите полную картину по продажам на Kaspi.kz с помощью нашего сервиса! Наша аналитика – на 100% точная
+          </div>
+        </div>
+
+        <div class="analytics__list-title">
+          Что вы узнаете?
+        </div>
+        <ul class="analytics__list">
+          <li>Выручка – анализ доходности по категориям и товарам</li>
+          <li>Средний чек – оценка покупательской способности</li>
+          <li>Количество заказов – динамика продаж за выбранный период</li>
+          <li>Популярные категории – какие товары продаются лучше всего</li>
+          <li>Конкуренция – число продавцов в каждом товаре</li>
+        </ul>
+      </div>
+    </div>
+  </HomepageSection>
+</template>
+
+<script setup>
+const app = useAppConfig()
+const img = useImage()
+</script>
+
+<style lang="scss">
+.analytics {
+  &__inner {
+    position: relative;
+    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;
+
+    @include mobile {
+      padding: 16px;
+      height: unset;
+    }
+  }
+
+  &__background {
+    position: absolute;
+    max-height: unset;
+    max-width: unset;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__content {
+    width: 610px;
+    margin-left: auto;
+
+    @include mobile {
+      width: unset;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 24px;
+
+    @include mobile {
+      align-items: flex-start;
+    }
+  }
+
+  &__title {
+    @include font(20px, 500, 28px);
+
+    @include mobile {
+      @include font(14px, 500, 20px);
+    }
+  }
+
+  &__list-title {
+    @include font(16px, 700, 29px);
+
+    color: $color-gray-700;
+
+    @include mobile {
+      @include font(12px, 400, 22px);
+    }
+  }
+
+  &__list {
+    @include font(16px, 400, 29px);
+
+    color: $color-gray-700;
+
+    @include mobile {
+      @include font(12px, 400, 22px);
+    }
+  }
+
+  &__action {
+    margin-top: 24px;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
+}
+</style>

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

@@ -1,16 +1,19 @@
 <template>
   <div class="homepage-hero">
     <div class="container">
-      <div class="homepage-hero__description">
+      <a :href="app.astanaHubUrl" target="_blank" rel="noopener noreferrer">
-        Приложение для автоматической регулировки цен товаров
+        <UiBadge class="homepage-hero__badge">
-      </div>
+          Участник Astana Hub
+        </UiBadge>
+      </a>
 
       <h1 class="homepage-hero__title">
-        Автоматизация цен <br> <strong>для максимальной прибыли</strong> на <b>Kaspi.kz</b>
+        Сервис умных закупок <br>
+        и эффективного управления продажами на <b>Kaspi.kz</b>
       </h1>
 
       <div class="homepage-hero__subtitle">
-        Помогаем увеличивать продажи и оставаться конкурентоспособными
+        Помогаем выгодно закупать товары, автоматизировать продажи и сохранять конкурентоспособность
       </div>
 
       <div class="homepage-hero__actions desktop-only">
@@ -86,21 +89,17 @@
 </template>
 
 <script setup lang="ts">
+const app = useAppConfig()
 </script>
 
 <style lang="scss">
 .homepage-hero {
   text-align: center;
 
-  &__description {
+  &__badge {
-    @include font(15px, 300, 18px);
-
-    color: $color-gray-600;
     margin-bottom: 24px;
 
     @include mobile {
-      @include font(11px, 300, 13px);
-
       margin-bottom: 16px;
     }
   }
@@ -148,7 +147,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

@@ -63,11 +63,12 @@
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         referrerpolicy="strict-origin-when-cross-origin"
         allowfullscreen
+        loading="lazy"
       />
 
       <ul class="how-it-works-demo__list">
-        <li>Ознакомьтесь с интерфейсом приложения для ПК</li>
+        <li>Оцените интерфейс приложения для ПК и мобильных девайсов</li>
-        <li>Оцените удобство мобильного интерфейса</li>
+        <li>Ознакомьтесь с примером добавления товара на предзаказ</li>
         <li>Просмотрите пример добавления товаров и управления ими через приложение</li>
       </ul>
 
@@ -147,12 +148,12 @@ const app = useAppConfig()
   @include desktop {
     display: grid;
     justify-items: flex-start;
-    grid-template-columns: 485px 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr auto 1fr;
     grid-template-areas:
-        'title video'
+      'title video'
-        'list video'
+      'list video'
-        'action 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="Со-основатель / CEO"
+        >
+          <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

@@ -0,0 +1,140 @@
+<template>
+  <div class="referral-program">
+    <div class="container">
+      <div class="referral-program__inner">
+        <div class="referral-program__header">
+          <NuxtImg class="mobile-only" src="/referral-program-bg-mobile.png" height="80px" format="webp" draggable="false" />
+
+          <div class="referral-program__title">
+            Реферальная программа
+          </div>
+        </div>
+
+        <p class="referral-program__description">
+          Получайте вознаграждение за пополнение пользователей,<br>
+          которые зарегистрируются и воспользуется нашим сервисом
+        </p>
+
+        <ul class="referral-program__list">
+          <li>Получите свою уникальную ссылку в личном кабинете</li>
+          <li>Поделитесь ею с друзьями, коллегами или в соцсетях</li>
+          <li>Зарабатывайте. Больше друзей – больше бонусов!</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const app = useAppConfig()
+const img = useImage()
+
+const desktopBg = computed(() => {
+  return `url('${img('/referral-program-bg.png', { height: '375px', format: 'webp' })}')`
+})
+</script>
+
+<style lang="scss">
+.referral-program {
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 16px 100px;
+    border-radius: 12px;
+    height: 407px;
+    color: $color-white;
+
+    @include desktop {
+      background-image: v-bind(desktopBg), linear-gradient(260.36deg, #21dac2 0%, #008574 86.86%);
+      background-repeat: no-repeat;
+      background-position:
+        center right 100px,
+        center;
+    }
+
+    @include mobile {
+      background-color: $color-green-400;
+      background-image: none;
+      padding: 16px;
+      height: unset;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__title {
+    @include font(32px, 700, 45px);
+
+    @include mobile {
+      @include font(20px, 700, 28px);
+    }
+  }
+
+  &__description {
+    @include font(18px, 400, 32px);
+
+    margin-top: 24px;
+
+    @include mobile {
+      @include font(12px, 400, 22px);
+
+      margin-top: 16px;
+    }
+  }
+
+  &__list {
+    @include font(15px, 600, 15px);
+
+    list-style: none;
+    margin-top: 24px;
+    padding-left: 0;
+
+    @include mobile {
+      @include font(12px, 600, 15px);
+
+      margin-top: 16px;
+    }
+
+    li {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      counter-increment: referral-program-item;
+
+      &:not(:last-child) {
+        margin-bottom: 21px;
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 16px;
+          top: 36px;
+          height: 13px;
+          border-left: 1px dashed $color-lemon-500;
+        }
+      }
+
+      &::before {
+        @include font(16px, 600, 32px);
+
+        display: block;
+        content: counter(referral-program-item);
+        height: 32px;
+        width: 32px;
+        flex-shrink: 0;
+        text-align: center;
+        background-color: $color-lemon-500;
+        color: $color-black;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+</style>

components/homepage/results.vue

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

components/homepage/reviews.vue

@@ -40,7 +40,7 @@
 
       <Splide ref="splideEl" class="reviews__carousel" :options="splideOptions">
         <SplideSlide v-for="i in 6" :key="i">
-          <NuxtImg class="reviews__review" :src="`/reviews/${i}.png`" height="416" format="webp" />
+          <NuxtImg class="reviews__review" :src="`/reviews/${i}.png`" height="416" format="webp" draggable="false" />
         </SplideSlide>
       </Splide>
 

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="Единый тариф"
+    title="Тарифы"
-    description="Получите полный доступ ко всему функционалу за фиксированную цену"
+    description="Выберите тариф, подходящий под потребности Вашего бизнеса"
   >
-    <div class="tariff__inner">
+    <Splide class="tariff__carousel" :options="splideOptions">
-      <div class="tariff__header">
+      <SplideSlide>
-        <NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" />
+        <HomepageTariffCard title="Seller" price-per-month="10 000">
+          Идеально для небольших <br class="desktop-only">
+          или <br class="mobile-only">
+          узкоспециализированных магазинов
 
-        <div class="tariff__price">
+          <template #list>
-          30 000 ₸ / месяц
+            <HomepageTariffCardListItem>
-        </div>
+              Автокорректировка цен <br>
-      </div>
+              до <strong>50 товаров</strong>
+            </HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Настройка предзаказа</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Поддержка 24/7</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Не конкурировать со своими магазинами</HomepageTariffCardListItem>
+            <HomepageTariffCardListItem>Высокая скорость обновления цен</HomepageTariffCardListItem>
+          </template>
+        </HomepageTariffCard>
+      </SplideSlide>
 
-      <ul class="tariff__list">
+      <SplideSlide>
-        <li>Безлимитное количество товаров</li>
+        <HomepageTariffCard title="Seller Pro" price-per-month="20 000" popular>
-        <li>Поддержка 24/7</li>
+          Подойдет тем, кто активно торгует на Kaspi
-        <li>Высокая скорость обновления цен</li>
-      </ul>
 
-      <UiButton class="tariff__action" :href="app.appUrl" rel="noopener noreferrer">
+          <template #list>
-        Попробовать 7 дней бесплатно
+            <HomepageTariffCardListItem>
-      </UiButton>
+              Автокорректировка цен <br>
-    </div>
+              до <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>
+<script lang="ts" setup>
-const app = useAppConfig()
+import type { Options as SplideOptions } from '@splidejs/splide'
-const img = useImage()
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
 
-const desktopBg = computed(() => {
+const splideOptions = computed(() => ({
-  return `url('${img('/price-bg.png', { height: '352px', format: 'webp' })}')`
+  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 {
+  &__carousel {
-    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;
-
     @include desktop {
-      background-image: v-bind(desktopBg);
+      .splide__track {
-      background-repeat: no-repeat;
+        overflow: visible;
-      background-position: center right 128px;
+      }
+
+      .splide__list {
+        display: grid !important;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 32px;
+      }
     }
 
     @include mobile {
-      padding: 16px;
+      margin-inline: -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%;
     }
   }
 }

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"
+    >
+      Попробовать 3 дня бесплатно
+    </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>

components/info-button.vue

@@ -9,13 +9,13 @@
 
       <template #popper>
         Зарегистрируйтесь и получите <br>
-        7 дней бесплатной подписки для <br>
+        3 дня бесплатной подписки для <br>
         ознакомления с сервисом
       </template>
     </Tooltip>
 
     <p class="info-button__hint mobile-only">
-      Зарегистрируйтесь и получите 14 дней бесплатной подписки для ознакомления с сервисом
+      Зарегистрируйтесь и получите 3 дня бесплатной подписки для ознакомления с сервисом
     </p>
   </div>
 </template>

components/scroll-to-top.vue

@@ -32,7 +32,6 @@ const { y } = useWindowScroll()
   &:hover {
     color: $color-black;
     background-color: $color-gray-400;
-
   }
 }
 

components/ui/badge.vue

@@ -0,0 +1,25 @@
+<template>
+  <div :class="cn.b()">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const cn = useClassname('ui-badge')
+</script>
+
+<style lang="scss">
+.ui-badge {
+  @include font(15px, 500, 15px);
+
+  display: inline-block;
+  border-radius: 3px;
+  padding: 4px 8px;
+  color: $color-gray-700;
+  background-color: $color-gray-400;
+
+  @include mobile {
+    @include font(10px, 500, 15px);
+  }
+}
+</style>

components/ui/button/index.vue

@@ -37,7 +37,7 @@
 import type { ButtonHTMLAttributes } from 'vue'
 
 export interface Props {
-  type?: 'primary' | 'secondary'
+  type?: 'primary' | 'secondary' | 'promo'
   nativeType?: ButtonHTMLAttributes['type']
   disabled?: boolean
 }

components/ui/button/styles.scss

@@ -1,4 +1,4 @@
-@use "sass:list";
+@use 'sass:list';
 @use '../../../styles/mixins' as *;
 @use '../../../styles/variables' as *;
 
@@ -24,6 +24,15 @@ $button-variants: [
       'hover-background': $color-gray-400,
       'active-background': $color-gray-500,
     )
+  ],
+  [
+    'promo',
+    (
+      'color': $color-black,
+      'background': $color-lemon-500,
+      'hover-background': $color-lemon-400,
+      'active-background': $color-lemon-500,
+    )
   ]
 ];
 

composables/use-breakpoints.ts

@@ -0,0 +1,11 @@
+import { useMediaQuery } from '@vueuse/core'
+
+export default function useBreakpoints() {
+  const isMobile = useMediaQuery('(max-width: 480px)')
+  const isDesktop = computed(() => !isMobile.value)
+
+  return {
+    isMobile,
+    isDesktop,
+  }
+}

eslint.config.js

@@ -8,4 +8,7 @@ export default antfu({
       }],
     },
   },
+  formatters: {
+    css: true,
+  },
 })

nuxt.config.ts

@@ -12,9 +12,12 @@ import ViteComponents from 'unplugin-vue-components/vite'
 
 const { resolve } = createResolver(import.meta.url)
 
+const baseUrl = import.meta.env.URL || 'https://quantumbot.kz'
+
 export default defineNuxtConfig({
   devtools: { enabled: true },
 
+  // ssr: false,
   pages: false,
   app: {
     head: {
@@ -37,7 +40,7 @@ export default defineNuxtConfig({
         },
         {
           property: 'og:url',
-          content: 'https://quantumbot.kz',
+          content: baseUrl,
         },
         {
           property: 'og:type',
@@ -49,7 +52,7 @@ export default defineNuxtConfig({
         },
         {
           property: 'og:image',
-          content: 'https://quantumbot.kz/android-chrome-192x192.png',
+          content: `${baseUrl}/web-app-manifest-192x192.png`,
         },
         {
           name: 'theme-color',
@@ -109,8 +112,19 @@ export default defineNuxtConfig({
         },
       },
     ],
+    '@nuxt/scripts',
   ],
 
+  $production: {
+    scripts: {
+      registry: {
+        metaPixel: {
+          id: '992723452252630',
+        },
+      },
+    },
+  },
+
   googleFonts: {
     families: {
       Onest: [300, 400, 500, 600, 700, 800, 900],

package.json

@@ -26,20 +26,24 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.9.2",
     "@iconify/tools": "^4.0.7",
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^2.6.2",
     "@nuxt/image": "^1.8.1",
+    "@nuxt/scripts": "0.9.5",
+    "@nuxt/ui-templates": "^1.3.4",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/uuid": "^10.0.0",
     "eslint": "^9.15.0",
-    "nuxt": "latest",
+    "eslint-plugin-format": "^1.0.1",
+    "nuxt": "^4.0.3",
     "nuxt-svgo": "^4.0.9",
     "sass": "^1.81.0",
     "typescript": "^5.7.2",
     "unplugin-icons": "^0.20.1",
     "unplugin-vue-components": "^0.27.4",
-    "vue": "latest",
+    "vue": "^3.5.18",
-    "vue-router": "latest",
+    "vue-router": "^4.5.1",
     "vue-tsc": "^2.1.10"
-  }
+  },
+  "packageManager": "yarn@4.9.2"
 }

public/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0968 1.74024C12.8858 0.718096 11.1142 0.718098 9.90323 1.74024L8.80035 2.67112C8.28563 3.10556 7.64869 3.36941 6.97753 3.42617L5.53944 3.54778C3.96037 3.68132 2.70769 4.934 2.57415 6.51307L2.45253 7.95116C2.39578 8.62232 2.13192 9.25927 1.69749 9.774L0.766607 10.8769C-0.255536 12.0879 -0.255535 13.8594 0.766607 15.0704L1.69749 16.1733C2.13192 16.688 2.39578 17.325 2.45253 17.9961L2.57415 19.4343C2.70769 21.0133 3.96037 22.266 5.53944 22.3995L6.97753 22.5211C7.64869 22.578 8.28563 22.8418 8.80036 23.2762L9.90323 24.2071C11.1142 25.2291 12.8858 25.2291 14.0968 24.2071L15.1997 23.2762C15.7144 22.8418 16.3514 22.578 17.0225 22.5211L18.4606 22.3995C20.0397 22.266 21.2924 21.0133 21.4259 19.4343L21.5474 17.9961C21.6043 17.325 21.8681 16.688 22.3026 16.1733L23.2335 15.0704C24.2555 13.8594 24.2555 12.0879 23.2335 10.8769L22.3026 9.77398C21.8681 9.25927 21.6043 8.62232 21.5474 7.95116L21.4259 6.51307C21.2924 4.934 20.0397 3.68132 18.4606 3.54778L17.0225 3.42617C16.3514 3.36941 15.7144 3.10556 15.1997 2.67112L14.0968 1.74024ZM17.9113 10.7573C18.4826 10.186 18.4826 9.2598 17.9113 8.68852C17.3401 8.11723 16.4138 8.11723 15.8425 8.68852L10.3753 14.1557L8.15892 11.9393C7.58764 11.368 6.66141 11.368 6.09013 11.9393C5.51883 12.5106 5.51883 13.4368 6.09013 14.0081L9.34092 17.2588C9.9122 17.8302 10.8384 17.8302 11.4097 17.2588L17.9113 10.7573Z" fill="currentColor"/>
+</svg>

public/lightning.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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>

public/logo-compact.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6049 11.8724H11.1544V17.323H16.6049V11.8724Z" fill="#008574"/>
+<path d="M5.70055 0.968018C2.69015 0.968018 0.25 3.40817 0.25 6.41858V11.8692C0.25 14.8796 2.69015 17.3197 5.70055 17.3197L11.1511 11.8692H5.70055V6.41858H11.1511V11.8692L16.6016 6.41858C16.6016 3.40817 14.1615 0.968018 11.1511 0.968018H5.70055Z" fill="#008574"/>
+</svg>

styles/index.scss

@@ -2,9 +2,9 @@
 @use '@splidejs/vue-splide/css/core';
 
 @use 'mixins';
-@use "normalize";
+@use 'normalize';
-@use "utility";
+@use 'utility';
-@use "floating-vue";
+@use 'floating-vue';
 
 *,
 *::before,
@@ -12,19 +12,26 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   scroll-behavior: smooth;
 }
 
 body {
   @include font(16px, 400, 20px);
 
-  font-family: "Onest", sans-serif;
+  font-family: 'Onest', sans-serif;
   color: $color-black;
   background-color: $color-white;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
 }
 

styles/mixins/element-variant.scss

@@ -1,18 +1,15 @@
-@use "sass:meta";
+@use 'sass:meta';
-@use "sass:list";
+@use 'sass:list';
-@use "sass:string";
+@use 'sass:string';
 
-@mixin element-variant(
+@mixin element-variant($namespace, $variant: '', $map: ()) {
-  $namespace,
-  $variant: '',
-  $map: ()
-) {
   @if meta.type-of($map) == 'map' {
     $withDarkVariant: false;
     $variantPrefix: if(string.length($variant) > 0, '-' + $variant, '');
 
     @at-root {
-      :root, .light-theme {
+      :root,
+      .light-theme {
         @each $property, $value in $map {
           @if meta.type-of($value) == 'list' {
             @if $withDarkVariant == false and list.length($value) > 1 {

styles/mixins/index.scss

@@ -1,3 +1,3 @@
-@forward "element-variant";
+@forward 'element-variant';
-@forward "typography";
+@forward 'typography';
-@forward "adaptive";
+@forward 'adaptive';

styles/normalize.scss

@@ -9,8 +9,8 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
+  line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -21,7 +21,7 @@ html {
  */
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 /**
@@ -29,7 +29,7 @@ body {
  */
 
 main {
-    display: block;
+  display: block;
 }
 
 /**
@@ -38,8 +38,8 @@ main {
  */
 
 h1 {
-    font-size: 2em;
+  font-size: 2em;
-    margin: 0.67em 0;
+  margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -51,9 +51,9 @@ h1 {
  */
 
 hr {
-    box-sizing: content-box; /* 1 */
+  box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
+  height: 0; /* 1 */
-    overflow: visible; /* 2 */
+  overflow: visible; /* 2 */
 }
 
 /**
@@ -62,8 +62,8 @@ hr {
  */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -74,7 +74,7 @@ pre {
  */
 
 a {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 /**
@@ -83,9 +83,9 @@ a {
  */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
+  border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
+  text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -94,7 +94,7 @@ abbr[title] {
 
 b,
 strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 /**
@@ -105,8 +105,8 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
+  font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-size: 1em; /* 2 */
 }
 
 /**
@@ -114,7 +114,7 @@ samp {
  */
 
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 
 /**
@@ -124,18 +124,18 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
+  font-size: 75%;
-    line-height: 0;
+  line-height: 0;
-    position: relative;
+  position: relative;
-    vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 /* Embedded content
@@ -145,17 +145,18 @@ sup {
  * Remove the border on images inside links in IE 10.
  */
 
-img, video {
+img,
-    border-style: none;
+video {
-    vertical-align: middle;
+  border-style: none;
-    font-style: italic;
+  vertical-align: middle;
-    max-width: 100%;
+  font-style: italic;
-    max-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 svg {
-    color: inherit;
+  color: inherit;
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 /* Forms
@@ -171,10 +172,10 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
+  font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
+  font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
+  line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -183,8 +184,9 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
-    overflow: visible;
+  /* 1 */
+  overflow: visible;
 }
 
 /**
@@ -193,8 +195,9 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
-    text-transform: none;
+  /* 1 */
+  text-transform: none;
 }
 
 /**
@@ -202,10 +205,10 @@ select { /* 1 */
  */
 
 button,
-[type="button"],
+[type='button'],
-[type="reset"],
+[type='reset'],
-[type="submit"] {
+[type='submit'] {
-    -webkit-appearance: button;
+  -webkit-appearance: button;
 }
 
 /**
@@ -213,11 +216,11 @@ button,
  */
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='submit']::-moz-focus-inner {
-    border-style: none;
+  border-style: none;
-    padding: 0;
+  padding: 0;
 }
 
 /**
@@ -225,10 +228,10 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
+[type='button']:-moz-focusring,
-[type="reset"]:-moz-focusring,
+[type='reset']:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
+  outline: 1px dotted ButtonText;
 }
 
 /**
@@ -236,7 +239,7 @@ button:-moz-focusring,
  */
 
 fieldset {
-    padding: 0.35em 0.75em 0.625em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -247,12 +250,12 @@ fieldset {
  */
 
 legend {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
+  color: inherit; /* 2 */
-    display: table; /* 1 */
+  display: table; /* 1 */
-    max-width: 100%; /* 1 */
+  max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
+  padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+  white-space: normal; /* 1 */
 }
 
 /**
@@ -260,7 +263,7 @@ legend {
  */
 
 progress {
-    vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 /**
@@ -268,7 +271,7 @@ progress {
  */
 
 textarea {
-    overflow: auto;
+  overflow: auto;
 }
 
 /**
@@ -276,19 +279,19 @@ textarea {
  * 2. Remove the padding in IE 10.
  */
 
-[type="checkbox"],
+[type='checkbox'],
-[type="radio"] {
+[type='radio'] {
-    box-sizing: border-box; /* 1 */
+  box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  padding: 0; /* 2 */
 }
 
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
+[type='number']::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-outer-spin-button {
-    height: auto;
+  height: auto;
 }
 
 /**
@@ -296,17 +299,17 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+[type='search'] {
-    -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
+  outline-offset: -2px; /* 2 */
 }
 
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 /**
@@ -315,8 +318,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
+  font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -327,7 +330,7 @@ textarea {
  */
 
 details {
-    display: block;
+  display: block;
 }
 
 /*
@@ -335,7 +338,7 @@ details {
  */
 
 summary {
-    display: list-item;
+  display: list-item;
 }
 
 /* Misc
@@ -346,7 +349,7 @@ summary {
  */
 
 template {
-    display: none;
+  display: none;
 }
 
 /**
@@ -354,10 +357,10 @@ template {
  */
 
 [hidden] {
-    display: none;
+  display: none;
 }
 
 ul {
-    margin: 0;
+  margin: 0;
-    padding-inline-start: 20px;
+  padding-inline-start: 20px;
 }

styles/variables/color.scss

@@ -1,12 +1,15 @@
-$color-gray-200: #F9FAFF;
+$color-gray-200: #f9faff;
 $color-gray-300: #f6f7fb;
 $color-gray-400: #e7eaf3;
 $color-gray-500: #cfd5f0;
 $color-gray-600: #8890b8;
-$color-gray-700: #505A8A;
+$color-gray-700: #505a8a;
 
 $color-green-400: #008574;
 $color-green-500: #056e62;
 
-$color-white: #FFFFFF;
+$color-white: #ffffff;
 $color-black: #021d54;
+
+$color-lemon-400: #e8ff8a;
+$color-lemon-500: #e0ff5f;

styles/variables/index.scss

@@ -1,2 +1,2 @@
-@forward "color";
+@forward 'color';
-@forward "transitions";
+@forward 'transitions';

styles/variables/transitions.scss

@@ -1,2 +1,2 @@
-$transition-duration: .2s;
+$transition-duration: 0.2s;
 $transition-easing: ease-out;