update

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>