Initial commit
This commit is contained in:
Никита Круглицкий
106
components/homepage/any-questions.vue
Normal file
106
components/homepage/any-questions.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="any-questions">
|
||||
<div class="container">
|
||||
<div class="any-questions__inner">
|
||||
<div class="any-questions__left">
|
||||
<IDuoMail class="any-questions__icon" />
|
||||
|
||||
<div>
|
||||
<div class="any-questions__title">
|
||||
Остались вопросы?
|
||||
</div>
|
||||
|
||||
<a class="any-questions__link" href="mailto:support@quantumbot.kz">
|
||||
support@quantumbot.kz
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="any-questions__right">
|
||||
<p class="any-questions__call-us">
|
||||
Позвоните нам
|
||||
</p>
|
||||
|
||||
<PhoneNumber class="any-questions__phone-number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.any-questions {
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 56px 60px;
|
||||
border-radius: 12px;
|
||||
background-color: $color-gray-200;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
gap: 24px;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
|
||||
@include mobile {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 69px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(32px, 600, 41px);
|
||||
|
||||
color: $color-black;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 600, 24px);
|
||||
|
||||
text-transform: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include font(16px, 400, 20px);
|
||||
|
||||
color: $color-gray-600;
|
||||
|
||||
@include mobile {
|
||||
@include font(14px, 300, 17px);
|
||||
}
|
||||
}
|
||||
|
||||
&__right {}
|
||||
|
||||
&__call-us {
|
||||
color: $color-gray-600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__phone-number {
|
||||
@include font(20px, 700, 26px, 'phone-number', true);
|
||||
|
||||
@include mobile {
|
||||
@include font(16px, 700, 20px, 'phone-number', true);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
components/homepage/faq.vue
Normal file
59
components/homepage/faq.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="faq">
|
||||
<div class="container">
|
||||
<div class="faq__inner">
|
||||
<div class="faq__title">
|
||||
Вопросы и ответы
|
||||
</div>
|
||||
|
||||
<div class="faq__items">
|
||||
<UiAccordion>
|
||||
<UiAccordionItem title="Как подключить сервис к моему аккаунту Kaspi.kz?">
|
||||
Достаточно добавить аккаунт на Kaspi.kz с ограниченными правами и подключить его к нашему сервису. Весь процесс регистрации занимает 2 минуты
|
||||
</UiAccordionItem>
|
||||
|
||||
<UiAccordionItem title="Какой уровень безопасности данных обеспечивает ваш сервис?">
|
||||
Мы обеспечиваем высокий уровень безопасности, используя современные методы шифрования данных. Все ваши учетные данные и информация о товарах надежно защищены и не передаются третьим лицам.
|
||||
</UiAccordionItem>
|
||||
|
||||
<UiAccordionItem title="Подходит ли ваш сервис для всех категорий товаров?">
|
||||
Да, наш сервис поддерживает все категории товаров, представленных на Kaspi.kz. Вы можете регулировать цены как для небольшого ассортимента, так и для крупной базы товаров.
|
||||
</UiAccordionItem>
|
||||
|
||||
<UiAccordionItem title="Как быстро я увижу результаты?">
|
||||
Многие наши клиенты отмечают увеличение продаж уже в первые минуты использования сервиса. Точные результаты зависят от конкуренции в вашей категории и динамики рынка.
|
||||
</UiAccordionItem>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.faq {
|
||||
&__inner {
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
background-color: $color-gray-200;
|
||||
|
||||
@include mobile {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(32px, 900, 45px);
|
||||
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 900, 28px);
|
||||
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
226
components/homepage/hero.vue
Normal file
226
components/homepage/hero.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="homepage-hero">
|
||||
<div class="container">
|
||||
<div class="homepage-hero__description">
|
||||
Приложение для автоматической регулировки цен товаров
|
||||
</div>
|
||||
|
||||
<h1 class="homepage-hero__title">
|
||||
Автоматизация цен <br> <strong>для максимальной прибыли</strong> на <b>Kaspi.kz</b>
|
||||
</h1>
|
||||
|
||||
<div class="homepage-hero__subtitle">
|
||||
Помогаем увеличивать продажи и оставаться конкурентоспособными
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero__actions desktop-only">
|
||||
<UiButton type="secondary" href="#hero-cards">
|
||||
Узнать подробности
|
||||
</UiButton>
|
||||
|
||||
<InfoButton />
|
||||
</div>
|
||||
|
||||
<NuxtImg height="650" class="homepage-hero__image desktop-only" src="/hero-desktop.png" draggable="false" />
|
||||
<NuxtImg height="650" class="homepage-hero__image mobile-only" src="/hero-mobile.png" draggable="false" />
|
||||
|
||||
<div class="homepage-hero__actions mobile-only">
|
||||
<UiButton type="secondary">
|
||||
Узнать подробности
|
||||
</UiButton>
|
||||
|
||||
<InfoButton />
|
||||
</div>
|
||||
|
||||
<div id="hero-cards" class="homepage-hero__cards">
|
||||
<div class="homepage-hero-card">
|
||||
<IDuoThumbsUp class="homepage-hero-card__icon" />
|
||||
|
||||
<div class="homepage-hero-card__title">
|
||||
Удобно
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card__description">
|
||||
Автоматическое обновление цен в реальном времени
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card">
|
||||
<IDuoLightning class="homepage-hero-card__icon" />
|
||||
|
||||
<div class="homepage-hero-card__title">
|
||||
Быстро
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card__description">
|
||||
Простота интеграции с Kaspi.kz
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card">
|
||||
<IDuoFlipChart class="homepage-hero-card__icon" />
|
||||
|
||||
<div class="homepage-hero-card__title">
|
||||
Выгодно
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card__description">
|
||||
Увеличение продаж за счет конкурентных цен
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card">
|
||||
<IDuoGroupChat class="homepage-hero-card__icon" />
|
||||
|
||||
<div class="homepage-hero-card__title">
|
||||
Без проблем
|
||||
</div>
|
||||
|
||||
<div class="homepage-hero-card__description">
|
||||
Поддержка 24/7
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.homepage-hero {
|
||||
text-align: center;
|
||||
|
||||
&__description {
|
||||
@include font(15px, 300, 18px);
|
||||
|
||||
color: $color-gray-600;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@include mobile {
|
||||
@include font(11px, 300, 13px);
|
||||
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(36px, 600, 46px);
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mobile {
|
||||
@include font(18px, 600, 23px);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
b {
|
||||
color: $color-green-500;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include font(24px, 400, 31px);
|
||||
|
||||
color: $color-gray-700;
|
||||
margin-top: 24px;
|
||||
|
||||
@include mobile {
|
||||
@include font(14px, 400, 18px);
|
||||
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
@include mobile {
|
||||
height: auto;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
padding-blocK: 16px;
|
||||
margin-top: 24px;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 60px;
|
||||
padding-inline: 78px;
|
||||
|
||||
@include mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-hero-card {
|
||||
text-align: left;
|
||||
|
||||
@include mobile {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: $color-gray-200;
|
||||
column-gap: 12px;
|
||||
row-gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 40px;
|
||||
|
||||
@include mobile {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(22px, 600, 26px);
|
||||
|
||||
margin-top: 24px;
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 600, 24px);
|
||||
|
||||
flex: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(16px, 300, 19px);
|
||||
|
||||
margin-top: 24px;
|
||||
|
||||
@include mobile {
|
||||
@include font(12px, 300, 14px);
|
||||
|
||||
margin-top: 0;
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
217
components/homepage/how-it-works.vue
Normal file
217
components/homepage/how-it-works.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<HomepageSection
|
||||
id="how-it-works"
|
||||
class="how-it-works"
|
||||
title="Как работает наш сервис"
|
||||
description="Четыре простых шага для увеличения ваших продаж"
|
||||
>
|
||||
<div class="how-it-works__cards">
|
||||
<div class="how-it-works-card">
|
||||
<div class="how-it-works-card__title">
|
||||
Подключение
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card__description">
|
||||
Подключите свой аккаунт Kaspi.kz <br>
|
||||
к нашему сервису
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card">
|
||||
<div class="how-it-works-card__title">
|
||||
Настройка
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card__description">
|
||||
Настройте минимальные цены <br>
|
||||
для товаров
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card">
|
||||
<div class="how-it-works-card__title">
|
||||
Мониторинг
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card__description">
|
||||
Наш сервис автоматически мониторит <br>
|
||||
конкурентов и обновляет цены
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card">
|
||||
<div class="how-it-works-card__title">
|
||||
Прирост
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-card__description">
|
||||
Получите кратный прирост <br>
|
||||
продаж и прибыли
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works-demo">
|
||||
<div class="how-it-works-demo__title">
|
||||
Демо видео о продукте
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="how-it-works-demo__video"
|
||||
src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=dZCL9UFbyboiQzSl"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
/>
|
||||
|
||||
<ul class="how-it-works-demo__list">
|
||||
<li>Ознакомьтесь с интерфейсом приложения для ПК</li>
|
||||
<li>Оцените удобство мобильного интерфейса</li>
|
||||
<li>Просмотрите пример добавления товаров и управления ими через приложение</li>
|
||||
</ul>
|
||||
|
||||
<UiButton class="how-it-works-demo__action">
|
||||
Попробовать бесплатно
|
||||
</UiButton>
|
||||
</div>
|
||||
</HomepageSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.how-it-works {
|
||||
&__cards {
|
||||
gap: 40px;
|
||||
|
||||
@include desktop {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.how-it-works-card {
|
||||
position: relative;
|
||||
padding: 32px 16px;
|
||||
background-color: $color-gray-300;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
counter-increment: how-it-works-card;
|
||||
|
||||
&::before {
|
||||
@include font(24px, 600, 40px);
|
||||
|
||||
content: counter(how-it-works-card);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-inline: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: $color-black;
|
||||
color: $color-white;
|
||||
min-width: 46px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(20px, 700, 24px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14px, 400, 17px);
|
||||
|
||||
color: $color-gray-700;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.how-it-works-demo {
|
||||
padding: 40px 100px;
|
||||
background-color: $color-gray-300;
|
||||
margin-top: 60px;
|
||||
border-radius: 12px;
|
||||
|
||||
@include desktop {
|
||||
display: grid;
|
||||
justify-items: flex-start;
|
||||
grid-template-columns: 485px 1fr;
|
||||
grid-template-rows: 1fr auto 1fr;
|
||||
grid-template-areas:
|
||||
'title video'
|
||||
'list video'
|
||||
'action video';
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(28px, 700, 39px);
|
||||
|
||||
grid-area: title;
|
||||
|
||||
@include desktop {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 700, 28px);
|
||||
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__video {
|
||||
grid-area: video;
|
||||
aspect-ratio: 16 / 9;
|
||||
|
||||
@include desktop {
|
||||
justify-self: center;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
@include font(16px, 400, 29px);
|
||||
|
||||
color: $color-gray-700;
|
||||
grid-area: list;
|
||||
|
||||
@include mobile {
|
||||
@include font(12px, 400, 22px);
|
||||
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
grid-area: action;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
components/homepage/results.vue
Normal file
216
components/homepage/results.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<HomepageSection
|
||||
class="results"
|
||||
title="Результаты наших клиентов"
|
||||
description="Усредненные улучшения, которые отмечают наши клиенты"
|
||||
>
|
||||
<div class="results__cards">
|
||||
<div class="result-card">
|
||||
<p class="result-card__text">
|
||||
<strong>Увеличение продаж</strong>
|
||||
</p>
|
||||
<p class="result-card__sub">
|
||||
+ 100%
|
||||
</p>
|
||||
|
||||
<NuxtImg class="result-card__image" src="/results/1.png" height="110px" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<p class="result-card__text">
|
||||
<strong>Увеличение прибыли</strong>
|
||||
</p>
|
||||
<p class="result-card__sub">
|
||||
на 15%
|
||||
</p>
|
||||
|
||||
<NuxtImg class="result-card__image" src="/results/2.png" height="110px" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<p class="result-card__text">
|
||||
<strong>+30% конверсия</strong>
|
||||
заказов
|
||||
</p>
|
||||
<p class="result-card__sub">
|
||||
заказов
|
||||
</p>
|
||||
|
||||
<NuxtImg class="result-card__image" src="/results/3.png" height="110px" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<p class="result-card__text">
|
||||
<strong>Экономия 10+ часов</strong>
|
||||
</p>
|
||||
<p class="result-card__sub">
|
||||
в неделю на ручном <br> мониторинге
|
||||
</p>
|
||||
|
||||
<NuxtImg class="result-card__image" src="/results/4.png" height="110px" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results__contact-us results-contact-us">
|
||||
<div class="results-contact-us__left">
|
||||
<IDuoThunderMove class="results-contact-us__icon" />
|
||||
|
||||
<div class="results-contact-us__title">
|
||||
Хотите таких же результатов?
|
||||
</div>
|
||||
|
||||
<div class="results-contact-us__description">
|
||||
Подключите наш сервис уже сегодня и начните увеличивать свои продажи на Kaspi.kz
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoButton class="results-contact-us__action" />
|
||||
</div>
|
||||
</HomepageSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import InfoButton from '~/components/info-button.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.results {
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
|
||||
@include mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__contact-us {
|
||||
margin-top: 40px;
|
||||
|
||||
@include desktop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-card {
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
background-color: $color-gray-300;
|
||||
border-radius: 12px;
|
||||
|
||||
@include desktop {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
column-gap: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include font(18px, 800, 25px);
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mobile {
|
||||
@include font(15px, 800, 21px);
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__sub {
|
||||
@include font(18px, 500, 25px);
|
||||
|
||||
@include mobile {
|
||||
@include font(15px, 500, 21px);
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
@include desktop {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
height: auto;
|
||||
grid-column: 1;
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results-contact-us {
|
||||
background-color: $color-gray-200;
|
||||
border-radius: 12px;
|
||||
padding: 32px 40px;
|
||||
|
||||
@include mobile {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: grid;
|
||||
grid-template-columns: 59px 1fr;
|
||||
column-gap: 24px;
|
||||
|
||||
@include mobile {
|
||||
column-gap: 12px;
|
||||
row-gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 59px;
|
||||
|
||||
@include desktop {
|
||||
grid-row: span 2;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(22px, 700, 31px);
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 600, 24px);
|
||||
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(20px, 300, 28px);
|
||||
|
||||
@include mobile {
|
||||
@include font(14px, 300, 17px);
|
||||
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
@include mobile {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
components/homepage/reviews.vue
Normal file
165
components/homepage/reviews.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<HomepageSection
|
||||
class="reviews"
|
||||
title="Отзывы"
|
||||
description="Честно о нас"
|
||||
>
|
||||
<div class="reviews__inner">
|
||||
<div class="reviews-navigation-card desktop-only">
|
||||
<div class="reviews-navigation-card__arrows">
|
||||
<button class="reviews-navigation-card__arrow" type="button" @click="move('<')">
|
||||
<IMonoChevronLeft />
|
||||
</button>
|
||||
<button class="reviews-navigation-card__arrow" type="button" @click="move('>')">
|
||||
<IMonoChevronRight />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="reviews-navigation-card__title">
|
||||
1000+
|
||||
</div>
|
||||
|
||||
<div class="reviews-navigation-card__subtitle">
|
||||
селлеров уже выбирают нас
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoButton class="reviews-navigation-card__action" />
|
||||
</div>
|
||||
|
||||
<div class="mobile-only">
|
||||
<div class="reviews__title">
|
||||
1000+
|
||||
</div>
|
||||
|
||||
<div class="reviews__subtitle">
|
||||
селлеров уже выбирают нас
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
|
||||
<InfoButton class="reviews__action mobile-only" />
|
||||
</div>
|
||||
</HomepageSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Options as SplideOptions } from '@splidejs/vue-splide'
|
||||
import { Splide, SplideSlide } from '@splidejs/vue-splide'
|
||||
|
||||
const splideEl = ref()
|
||||
|
||||
const splideOptions = computed(() => ({
|
||||
gap: 40,
|
||||
autoWidth: true,
|
||||
focus: 0,
|
||||
omitEnd: true,
|
||||
arrows: false,
|
||||
pagination: false,
|
||||
padding: { right: 40 },
|
||||
type: 'loop',
|
||||
breakpoints: {
|
||||
480: {
|
||||
padding: 0,
|
||||
gap: 16,
|
||||
},
|
||||
},
|
||||
} as SplideOptions))
|
||||
|
||||
function move(dir: '<' | '>'): void {
|
||||
splideEl.value.go(dir)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.reviews {
|
||||
&__inner {
|
||||
background-color: $color-gray-300;
|
||||
border-radius: 12px;
|
||||
|
||||
@include desktop {
|
||||
display: grid;
|
||||
grid-template-columns: 270px 1fr;
|
||||
gap: 24px;
|
||||
padding: 40px 0 40px 40px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(32px, 700, 38px);
|
||||
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include font(14px, 400, 17px);
|
||||
|
||||
color: $color-gray-600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__review {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.reviews-navigation-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: $color-gray-200;
|
||||
border: 1px solid $color-gray-400;
|
||||
border-radius: 15px;
|
||||
padding: 24px;
|
||||
|
||||
&__arrows {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
cursor: pointer;
|
||||
color: $color-gray-700;
|
||||
transition: color $transition-duration $transition-easing;
|
||||
font-size: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-green-400;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-green-500;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(48px, 700, 58px);
|
||||
|
||||
color: $color-gray-700;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include font(20px, 400, 24px);
|
||||
|
||||
color: $color-gray-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
components/homepage/section.vue
Normal file
53
components/homepage/section.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="homepage-section">
|
||||
<div class="container">
|
||||
<div class="homepage-section__title">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<p class="homepage-section__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<div class="homepage-section__content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
description: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.homepage-section {
|
||||
&__title {
|
||||
@include font(36px, 700, 46px);
|
||||
|
||||
text-align: center;
|
||||
|
||||
@include mobile {
|
||||
@include font(20px, 700, 26px);
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14px, 300, 17px);
|
||||
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
|
||||
@include mobile {
|
||||
@include font(13px, 300, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
components/homepage/tariff.vue
Normal file
94
components/homepage/tariff.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<HomepageSection
|
||||
class="tariff"
|
||||
title="Единый тариф"
|
||||
description="Получите полный доступ ко всему функционалу за фиксированную цену"
|
||||
>
|
||||
<div class="tariff__inner">
|
||||
<div class="tariff__header">
|
||||
<NuxtImg class="mobile-only" src="/price-bg.png" height="35px" />
|
||||
|
||||
<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">
|
||||
Попробовать 14 дней бесплатно
|
||||
</UiButton>
|
||||
</div>
|
||||
</HomepageSection>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const img = useImage()
|
||||
|
||||
const desktopBg = computed(() => {
|
||||
return `url('${img('/price-bg.png', { height: '352px' })}')`
|
||||
})
|
||||
</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>
|
||||
Reference in New Issue
Block a user