95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<template>
|
|
<HomepageSection
|
|
class="tariff"
|
|
title="Единый тариф"
|
|
description="Получите полный доступ ко всему функционалу за фиксированную цену"
|
|
>
|
|
<div class="tariff__inner">
|
|
<div class="tariff__header">
|
|
<NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" />
|
|
|
|
<div class="tariff__price">
|
|
30 000 ₸ / месяц
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="tariff__list">
|
|
<li>Безлимитное количество товаров</li>
|
|
<li>Поддержка 24/7</li>
|
|
<li>Высокая скорость обновления цен</li>
|
|
</ul>
|
|
|
|
<UiButton class="tariff__action" href="https://app.quantumbot.kz" rel="noopener noreferrer">
|
|
Попробовать 7 дней бесплатно
|
|
</UiButton>
|
|
</div>
|
|
</HomepageSection>
|
|
</template>
|
|
|
|
<script setup>
|
|
const img = useImage()
|
|
|
|
const desktopBg = computed(() => {
|
|
return `url('${img('/price-bg.png', { height: '352px', format: 'webp' })}')`
|
|
})
|
|
</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;
|
|
|
|
@include desktop {
|
|
background-image: v-bind(desktopBg);
|
|
background-repeat: no-repeat;
|
|
background-position: center right 128px;
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|