This commit is contained in:
Никита Круглицкий 2025-06-22 23:07:17 +06:00
parent 692edc978d
commit 1e70e7c45e
53 changed files with 758 additions and 218 deletions

View File

@ -1,7 +1,7 @@
export default defineAppConfig({
instagramUrl: 'https://www.instagram.com/samatk7/?igsh=Mm9keGxnbXBrdGQ4',
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 747 399 05 82',
email: 'support@quantumbot.kz',
appUrl: 'https://app.quantumbot.kz',

View File

@ -6,10 +6,11 @@
<HomepageResults />
<HomepageHowItWorks />
<HomepageAnalytics />
<HomepageTariff />
<!-- <HomepageTariff />-->
<HomepageReferralProgram />
<HomepageReviews />
<HomepageFaq />
<HomepageOurTeam />
<HomepageAnyQuestions />
</main>

View File

@ -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);
}
}
}

View File

@ -53,7 +53,6 @@
margin-bottom: 24px;
}
}
}
</style>

View File

@ -148,7 +148,7 @@
align-items: center;
justify-content: center;
gap: 40px;
padding-blocK: 16px;
padding-block: 16px;
margin-top: 24px;
@include mobile {

View File

@ -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="Со-основатель"
>
<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>

View File

@ -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>

View File

@ -11,7 +11,7 @@
</div>
<p class="referral-program__description">
Получайте вознаграждение за каждое пополнение пользователей,<br>
Получайте вознаграждение за пополнение пользователей,<br>
которые зарегистрируются и воспользуется нашим сервисом
</p>
@ -47,9 +47,11 @@ const desktopBg = computed(() => {
color: $color-white;
@include desktop {
background-image: v-bind(desktopBg), linear-gradient(260.36deg, #21DAC2 0%, #008574 86.86%);
background-image: v-bind(desktopBg), linear-gradient(260.36deg, #21dac2 0%, #008574 86.86%);
background-repeat: no-repeat;
background-position: center right 100px, center;
background-position:
center right 100px,
center;
}
@include mobile {
@ -115,7 +117,7 @@ const desktopBg = computed(() => {
left: 16px;
top: 36px;
height: 13px;
border-left: 1px dashed $color-lime;
border-left: 1px dashed $color-lemon-500;
}
}
@ -128,7 +130,7 @@ const desktopBg = computed(() => {
width: 32px;
flex-shrink: 0;
text-align: center;
background-color: $color-lime;
background-color: $color-lemon-500;
color: $color-black;
border-radius: 8px;
}

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

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

View File

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

View File

@ -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,
)
]
];

View File

@ -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,
}
}

BIN
dist.zip Normal file

Binary file not shown.

View File

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

View File

@ -17,7 +17,7 @@ const baseUrl = import.meta.env.URL || 'https://quantumbot.kz'
export default defineNuxtConfig({
devtools: { enabled: true },
ssr: false,
// ssr: false,
pages: false,
app: {
head: {
@ -119,7 +119,7 @@ export default defineNuxtConfig({
scripts: {
registry: {
metaPixel: {
id: '997724358913843',
id: '992723452252630',
},
},
},

View File

@ -33,6 +33,7 @@
"@types/lodash-es": "^4.17.12",
"@types/uuid": "^10.0.0",
"eslint": "^9.15.0",
"eslint-plugin-format": "^1.0.1",
"nuxt": "latest",
"nuxt-svgo": "^4.0.9",
"sass": "^1.81.0",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 4.4 MiB

3
public/checkmark.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 490 KiB

After

Width:  |  Height:  |  Size: 505 KiB

3
public/lightning.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 546 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 KiB

BIN
public/our-team/abdulla.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
public/our-team/anton.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 KiB

BIN
public/our-team/anton.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

BIN
public/our-team/nurbek.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 600 KiB

BIN
public/our-team/nurbek.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

BIN
public/our-team/ruslan.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

BIN
public/our-team/ruslan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/our-team/timur.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
public/our-team/timur.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 996 KiB

BIN
public/strips.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

View File

@ -2,9 +2,9 @@
@use '@splidejs/vue-splide/css/core';
@use 'mixins';
@use "normalize";
@use "utility";
@use "floating-vue";
@use 'normalize';
@use 'utility';
@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;
}

View File

@ -1,18 +1,15 @@
@use "sass:meta";
@use "sass:list";
@use "sass:string";
@use 'sass:meta';
@use 'sass:list';
@use 'sass:string';
@mixin element-variant(
$namespace,
$variant: '',
$map: ()
) {
@mixin element-variant($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 {

View File

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

39
styles/normalize.scss vendored
View File

@ -145,7 +145,8 @@ sup {
* Remove the border on images inside links in IE 10.
*/
img, video {
img,
video {
border-style: none;
vertical-align: middle;
font-style: italic;
@ -183,7 +184,8 @@ textarea {
*/
button,
input { /* 1 */
input {
/* 1 */
overflow: visible;
}
@ -193,7 +195,8 @@ input { /* 1 */
*/
button,
select { /* 1 */
select {
/* 1 */
text-transform: none;
}
@ -202,9 +205,9 @@ select { /* 1 */
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
@ -213,9 +216,9 @@ button,
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
@ -225,9 +228,9 @@ button::-moz-focus-inner,
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
@ -276,8 +279,8 @@ textarea {
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
@ -286,8 +289,8 @@ textarea {
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
@ -296,7 +299,7 @@ textarea {
* 2. Correct the outline style in Safari.
*/
[type="search"] {
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
@ -305,7 +308,7 @@ textarea {
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}

View File

@ -1,14 +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-lime: #E0FF5F;
$color-lemon-400: #e8ff8a;
$color-lemon-500: #e0ff5f;

View File

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

View File

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

View File

@ -839,6 +839,21 @@
dependencies:
mime "^3.0.0"
"@dprint/formatter@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@dprint/formatter/-/formatter-0.3.0.tgz#e374398c8e8d7dbf50e8208c87af44a66de0cb2e"
integrity sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==
"@dprint/markdown@^0.17.8":
version "0.17.8"
resolved "https://registry.yarnpkg.com/@dprint/markdown/-/markdown-0.17.8.tgz#1aea5e903fb700075916e1e070ff0c18de42fc6c"
integrity sha512-ukHFOg+RpG284aPdIg7iPrCYmMs3Dqy43S1ejybnwlJoFiW02b+6Bbr5cfZKFRYNP3dKGM86BqHEnMzBOyLvvA==
"@dprint/toml@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@dprint/toml/-/toml-0.6.4.tgz#b5412bfacf69bd8759b2486ac284fba6b1fd4b4c"
integrity sha512-bZXIUjxr0LIuHWshZr/5mtUkOrnh0NKVZEF6ACojW5z7zkJu7s9sV2mMXm8XQDqN4cJzdHYUYzUyEGdfciaLJA==
"@es-joy/jsdoccomment@^0.48.0":
version "0.48.0"
resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.48.0.tgz#5d9dc1a295cf5d1ed224dffafb4800d5c7206c27"
@ -5690,6 +5705,13 @@ eslint-flat-config-utils@^0.4.0:
dependencies:
pathe "^1.1.2"
eslint-formatting-reporter@^0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/eslint-formatting-reporter/-/eslint-formatting-reporter-0.0.0.tgz#e444c511527900dec3592e9f85876da821ab8ef7"
integrity sha512-k9RdyTqxqN/wNYVaTk/ds5B5rA8lgoAmvceYN7bcZMBwU7TuXx5ntewJv81eF3pIL/CiJE+pJZm36llG8yhyyw==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-import-resolver-node@^0.3.9:
version "0.3.9"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@ -5711,6 +5733,11 @@ eslint-merge-processors@^0.1.0:
resolved "https://registry.yarnpkg.com/eslint-merge-processors/-/eslint-merge-processors-0.1.0.tgz#30ac4c59725a63d12a9677de7d2b2ec2a09fb779"
integrity sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==
eslint-parser-plain@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/eslint-parser-plain/-/eslint-parser-plain-0.1.1.tgz#14e92bba9f9a7f765b36967bd3f2f24c0a81c2b3"
integrity sha512-KRgd6wuxH4U8kczqPp+Oyk4irThIhHWxgFgLDtpgjUGVIS3wGrJntvZW/p6hHq1T4FOwnOtCNkvAI4Kr+mQ/Hw==
eslint-plugin-antfu@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-antfu/-/eslint-plugin-antfu-2.7.0.tgz#63e6da511da21fabcd1774c10f7d8b5681b2e560"
@ -5734,6 +5761,19 @@ eslint-plugin-es-x@^7.8.0:
"@eslint-community/regexpp" "^4.11.0"
eslint-compat-utils "^0.5.1"
eslint-plugin-format@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-format/-/eslint-plugin-format-1.0.1.tgz#115defbb1ea68037314d3638af35d129556e3992"
integrity sha512-Tdns+CDjS+m7QrM85wwRi2yLae88XiWVdIOXjp9mDII0pmTBQlczPCmjpKnjiUIY3yPZNLqb5Ms/A/JXcBF2Dw==
dependencies:
"@dprint/formatter" "^0.3.0"
"@dprint/markdown" "^0.17.8"
"@dprint/toml" "^0.6.4"
eslint-formatting-reporter "^0.0.0"
eslint-parser-plain "^0.1.1"
prettier "^3.4.2"
synckit "^0.9.2"
eslint-plugin-import-x@^4.4.2:
version "4.4.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-import-x/-/eslint-plugin-import-x-4.4.3.tgz#eeb25e6742b834cd12ba1fbd63127624213258b5"
@ -6113,6 +6153,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.3.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
fast-fifo@^1.1.0, fast-fifo@^1.2.0:
version "1.3.2"
resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
@ -9616,6 +9661,18 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@^3.4.2:
version "3.5.3"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.3.tgz#4fc2ce0d657e7a02e602549f053b239cb7dfe1b5"
integrity sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==
pretty-bytes@^6.1.1:
version "6.1.1"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.1.1.tgz#38cd6bb46f47afbf667c202cfc754bffd2016a3b"
@ -10492,7 +10549,16 @@ streamx@^2.16.1:
optionalDependencies:
bare-events "^2.2.0"
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -10532,7 +10598,14 @@ stringify-entities@^4.0.0:
character-entities-html4 "^2.0.0"
character-entities-legacy "^3.0.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -10695,7 +10768,7 @@ synckit@^0.6.0:
dependencies:
tslib "^2.3.1"
synckit@^0.9.1:
synckit@^0.9.1, synckit@^0.9.2:
version "0.9.2"
resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.2.tgz#a3a935eca7922d48b9e7d6c61822ee6c3ae4ec62"
integrity sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==
@ -11898,7 +11971,16 @@ wide-align@^1.1.2:
dependencies:
string-width "^1.0.2 || 2 || 3 || 4"
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==