update
This commit is contained in:
Никита Круглицкий
@@ -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>
|
||||
|
||||
123
components/homepage/analytics.vue
Normal file
123
components/homepage/analytics.vue
Normal file
@@ -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>
|
||||
@@ -67,8 +67,8 @@
|
||||
/>
|
||||
|
||||
<ul class="how-it-works-demo__list">
|
||||
<li>Ознакомьтесь с интерфейсом приложения для ПК</li>
|
||||
<li>Оцените удобство мобильного интерфейса</li>
|
||||
<li>Оцените интерфейс приложения для ПК и мобильных девайсов</li>
|
||||
<li>Ознакомьтесь с примером добавления товара на предзаказ</li>
|
||||
<li>Просмотрите пример добавления товаров и управления ими через приложение</li>
|
||||
</ul>
|
||||
|
||||
@@ -148,7 +148,7 @@ 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'
|
||||
|
||||
138
components/homepage/referral-program.vue
Normal file
138
components/homepage/referral-program.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<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-lime;
|
||||
}
|
||||
}
|
||||
|
||||
&::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-lime;
|
||||
color: $color-black;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="tariff__inner">
|
||||
<div class="tariff__header">
|
||||
<NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" />
|
||||
<NuxtImg class="mobile-only" src="/price-bg.png" height="35px" format="webp" draggable="false" />
|
||||
|
||||
<div class="tariff__price">
|
||||
30 000 ₸ / месяц
|
||||
@@ -14,9 +14,9 @@
|
||||
</div>
|
||||
|
||||
<ul class="tariff__list">
|
||||
<li>Безлимитное количество товаров</li>
|
||||
<li>Поддержка 24/7</li>
|
||||
<li>Высокая скорость обновления цен</li>
|
||||
<li>Дэмпинг</li>
|
||||
<li>100% точная аналитика</li>
|
||||
<li>Предзаказ</li>
|
||||
</ul>
|
||||
|
||||
<UiButton class="tariff__action" :href="app.appUrl" rel="noopener noreferrer">
|
||||
|
||||
Reference in New Issue
Block a user