feat: new settings and mainpage blocks

2025-11-11 00:30:39 +03:00
parent 5fb45000ac
commit 6176c720b1
97 changed files with 1842 additions and 1658 deletions
--- a/frontend/admin/bun.lock
+++ b/frontend/admin/bun.lock
@@ -9,12 +9,14 @@
        "@vueuse/core": "^14.0.0",
        "axios": "^1.13.1",
        "daisyui": "^5.4.2",
+        "js-md5": "^0.8.3",
        "mitt": "^3.0.1",
        "pinia": "^3.0.3",
        "primevue": "^4.4.1",
        "tailwindcss": "^4.1.16",
        "vue": "^3.5.22",
        "vue-router": "^4.6.3",
+        "vuedraggable": "^4.1.0",
      },
      "devDependencies": {
        "@eslint/js": "^9.37.0",
@@ -576,6 +578,8 @@

    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

+    "js-md5": ["js-md5@0.8.3", "", {}, "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ=="],
+
    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],

    "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
@@ -728,6 +732,8 @@

    "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],

+    "sortablejs": ["sortablejs@1.14.0", "", {}, "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="],
+
    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

    "speakingurl": ["speakingurl@14.0.1", "", {}, "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ=="],
@@ -778,6 +784,8 @@

    "vue-router": ["vue-router@4.6.3", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg=="],

+    "vuedraggable": ["vuedraggable@4.1.0", "", { "dependencies": { "sortablejs": "1.14.0" }, "peerDependencies": { "vue": "^3.0.1" } }, "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww=="],
+
    "which": ["which@5.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ=="],

    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
--- a/frontend/admin/package.json
+++ b/frontend/admin/package.json
@@ -21,12 +21,14 @@
    "@vueuse/core": "^14.0.0",
    "axios": "^1.13.1",
    "daisyui": "^5.4.2",
+    "js-md5": "^0.8.3",
    "mitt": "^3.0.1",
    "pinia": "^3.0.3",
    "primevue": "^4.4.1",
    "tailwindcss": "^4.1.16",
    "vue": "^3.5.22",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.37.0",
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -26,8 +26,8 @@
        <RouterLink :to="{name: 'orders'}">Заказы</RouterLink>
      </li>

-      <li :class="{active: route.name === 'slider'}">
-        <RouterLink :to="{name: 'slider'}">Слайдер</RouterLink>
+      <li :class="{active: route.name === 'mainpage'}">
+        <RouterLink :to="{name: 'mainpage'}">Главная страница</RouterLink>
      </li>
    </ul>

@@ -36,20 +36,39 @@
    </section>

    <section>
-      <Button label="Сохранить настройки" @click="settings.saveSettings"/>
+      <Divider/>
+      <div class="tw:flex tw:items-center tw:justify-start tw:gap-4">
+        <Button
+          label="Сохранить настройки"
+          :disabled="!settings.hasUnsavedChanges"
+          v-tooltip.top="settings.hasUnsavedChanges ? 'Сохранить изменения' : 'Нет изменений для сохранения'"
+          @click="settings.saveSettings"
+        />
+        <div v-if="settings.hasUnsavedChanges"
+             class="tw:flex tw:items-center tw:gap-2 tw:text-red-600">
+          <i class="fa fa-exclamation-triangle"></i>
+          <span class="tw:text-sm">Есть несохранённые изменения</span>
+        </div>
+      </div>
    </section>

-    <div v-if="settings.isLoading" class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
-      <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
+    <div v-if="settings.isLoading"
+         class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+      <div
+        class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
        <i class="fa fa-spin fa-spinner tw:mr-5"></i>
        <div>Загрузка...</div>
      </div>
    </div>
    <Toast position="top-right"/>
+    <ConfirmDialog/>
+    <ConfirmPopup group="popup"/>
  </div>

-  <div v-else class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
-    <div class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
+  <div v-else
+       class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
+    <div
+      class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
      <i class="fa fa-ban tw:text-4xl"></i>
      <div class="tw:text-4xl">{{ settings.error }}</div>
      <div>Обратитесь в поддержку</div>
@@ -61,15 +80,36 @@
 import {RouterView, useRoute} from 'vue-router';
 import {useSettingsStore} from "@/stores/settings.js";
 import Toast from 'primevue/toast';
-import { toastBus } from '@/utils/toastHelper';
+import {toastBus} from '@/utils/toastHelper';
 import {useToast} from "primevue";
 import Button from 'primevue/button';
 import TopLead from "@/components/TopLead.vue";
+import Divider from 'primevue/divider';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmPopup from 'primevue/confirmpopup';
+import {onBeforeUnmount, onMounted} from "vue";

 const route = useRoute();
 const settings = useSettingsStore();
 const toast = useToast();
 toastBus.on('show', (data) => toast.add(data));
+
+// Защита от обновления страницы или закрытия вкладки
+function handleBeforeUnload(event) {
+  if (settings.hasUnsavedChanges) {
+    event.preventDefault();
+    event.returnValue = 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?';
+    return event.returnValue;
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload);
+});
 </script>


--- a/frontend/admin/src/assets/main.css
+++ b/frontend/admin/src/assets/main.css
@@ -39,3 +39,10 @@ html {
  border-radius: unset;
  margin: 0;
 }
+
+legend.p-fieldset-legend {
+  font-size: 14px;
+  line-height: inherit;
+  width: auto;
+  margin-bottom: 0;
+}
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="tw:bg-white dark:tw:bg-slate-800 tw:rounded-lg tw:shadow-sm tw:border tw:border-slate-200 dark:tw:border-slate-700 tw:p-6 tw:mb-3">
+    <div class="tw:flex tw:justify-between tw:items-start">
+      <div>
+        <h3 class="p-card-title">
+          {{ title }}
+        </h3>
+
+        <slot/>
+      </div>
+      <div class="tw:flex tw:items-center tw:gap-2">
+        <Button
+          icon="fa fa-cog"
+          severity="contrast"
+          rounded
+          text
+          size="large"
+          @click="$emit('onShowSettings')"
+        />
+
+        <Button
+          icon="fa fa-trash"
+          severity="danger"
+          rounded
+          text
+          size="large"
+          @click="confirmedRemove($event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Button, useConfirm} from "primevue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const confirm = useConfirm();
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+
+function confirmedRemove(event) {
+  confirm.require({
+    group: 'popup',
+    target: event.currentTarget,
+    message: 'Удалить блок?',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: 'Отмена',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Удалить',
+      severity: 'danger'
+    },
+    accept: () => emit('onRemove'),
+  });
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue
@@ -0,0 +1,29 @@
+<template>
+  <BaseBlock
+    :title="`Топ категорий - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Описание:</span> {{
+          value.description
+        }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Кол-во категорий:</span>
+        {{ value.data.count }}
+      </div>
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue
@@ -0,0 +1,30 @@
+<template>
+  <BaseBlock
+    :title="`Лента товаров - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div>
+        <span class="tw:font-bold tw:dark:text-slate-200">Описание:</span>
+        {{ value.description }}
+      </div>
+      <div>
+        <span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
+        {{ value.data.max_page_count }}
+      </div>
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Blocks/SliderBlock.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Blocks/SliderBlock.vue
@@ -0,0 +1,46 @@
+<template>
+  <BaseBlock
+    :title="`Слайдер - ${value.title || 'Без заголовока'}`"
+    @onRemove="$emit('onRemove')"
+    @onShowSettings="$emit('onShowSettings')"
+  >
+    <div class="tw:mt-3 tw:text-sm tw:dark:text-slate-300 tw:space-y-1">
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Статус:</span>
+        {{ value.is_enabled ? 'Включен' : 'Выключен' }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Эффект:</span>
+        {{ sliderEffectOptions[value.data.effect] || value.data.effect }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Авто:</span>
+        {{ value.data.autoplay ? 'Включен' : 'Выключен' }}
+      </div>
+      <div><span class="tw:font-bold tw:dark:text-slate-200">Цель Яндекс.Метрики:</span>
+        {{ value.goal_name || 'Не задана' }}
+      </div>
+    </div>
+
+    <div class="tw:mt-6 tw:flex tw:flex-wrap tw:gap-4">
+      <img
+        v-if="value.data.slides && value.data.slides.length > 0"
+        v-for="slide in value.data.slides"
+        :alt="slide.title"
+        class="tw:w-24 tw:h-24 tw:object-cover tw:rounded-md tw:border-2 tw:border-slate-200 dark:tw:border-slate-600"
+        :src="getThumb(slide.image)"
+      />
+    </div>
+  </BaseBlock>
+</template>
+
+<script setup>
+import {getThumb} from "@/utils/helpers.js";
+import {sliderEffectOptions} from "@/utils/constants..js";
+import BaseBlock from "@/components/MainPageConfigurator/Blocks/BaseBlock.vue";
+
+const emit = defineEmits(['onRemove', 'onShowSettings']);
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/BaseForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/BaseForm.vue
@@ -0,0 +1,128 @@
+<template>
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">Настройки блока</Tab>
+      <Tab value="1">Основные настройки</Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <div class="tw:space-y-6">
+          <!-- Статус -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Статус
+              </label>
+              <ToggleSwitch v-model="model.is_enabled"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать этот блок
+            </small>
+          </div>
+
+          <!-- Заголовок блока -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Заголовок блока
+              </label>
+
+              <InputText
+                v-model="model.title"
+                placeholder="заголовок блока"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Текст, который будет выводиться в качестве заголовка блока на главной странице. Оставьте
+              пустым, если заголовок не требуется.
+            </small>
+          </div>
+
+          <!-- Описание блока -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Описание блока
+              </label>
+
+              <InputText
+                v-model="model.description"
+                placeholder="Описание блока"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Описание выводится под заголовком блока уменьшенным шрифтом. Оставьте пустым, если
+              описание не требуется.
+            </small>
+          </div>
+
+          <!-- Цель Яндекс.Метрики -->
+          <div>
+            <div class="tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Цель Яндекс.Метрики
+              </label>
+
+              <InputText
+                v-model="model.goal_name"
+                placeholder="Название цели для Яндекс.Метрики"
+                class="tw:w-full"
+              />
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Цель в Яндекс.Метрике для отслеживания кликов по блоку.
+              Оставьте пустым, если не нужно отслеживать клики по этому блоку.
+            </small>
+          </div>
+        </div>
+      </TabPanel>
+      <TabPanel value="1">
+        <slot></slot>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+
+  <Divider/>
+
+  <div class="tw:flex tw:items-center tw:justify-between tw:gap-4">
+    <div class="tw:flex tw:gap-2">
+      <Button
+        label="Применить"
+        icon="fa fa-check"
+        v-tooltip.top="isChanged ? 'Применить изменения' : 'Нет изменений для сохранения'"
+        :disabled="isChanged === false"
+        @click="onApply"
+      />
+      <Button label="Отмена" severity="secondary" @click="$emit('cancel')"/>
+    </div>
+    <div v-if="isChanged" class="tw:flex tw:items-center tw:gap-2 tw:text-amber-600">
+      <i class="fa fa-exclamation-triangle"></i>
+      <span class="tw:text-sm">Есть несохранённые изменения</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Button, Divider, InputText, Panel, ToggleSwitch} from 'primevue';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+
+
+const model = defineModel();
+const emit = defineEmits(['onApply', 'cancel']);
+const props = defineProps({
+  isChanged: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+function onApply() {
+  emit('onApply');
+}
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/CategoriesTopForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/CategoriesTopForm.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <div class="tw:space-y-6">
+        <!-- Количество категорий -->
+        <FormItem label="Количество категорий">
+          <template #default>
+            <InputNumber
+              v-model="draft.data.count"
+              :min="0"
+              :max="100"
+              placeholder="10"
+              :showButtons="true"
+            />
+            <span class="tw:text-gray-600 tw:whitespace-nowrap">шт.</span>
+          </template>
+
+          <template #help>
+            Количество категорий, которое нужно выводить в блоке. Если поставить 0, то будет
+            выводиться только кнопка "Каталог".
+          </template>
+        </FormItem>
+      </div>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+import {InputNumber, Panel} from "primevue";
+import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
+
+const draft = ref(null);
+const model = defineModel();
+const emit = defineEmits(['cancel']);
+
+const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
+
+function onApply() {
+  model.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(model.value));
+});
+
+defineExpose({isChanged});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/FormItem.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/FormItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Расстояние между слайдами -->
+  <div>
+    <div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
+      <label v-if="label" class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
+        {{ label }}
+      </label>
+      <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
+        <slot/>
+      </div>
+    </div>
+    <small class="tw:block tw:text-sm tw:text-gray-500">
+      <slot name="help"/>
+    </small>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <div class="tw:space-y-6">
+        <!-- Максимальное количество страниц -->
+        <FormItem label="Максимальное количество страниц">
+          <template #default>
+            <InputNumber
+              v-model="draft.data.max_page_count"
+              :min="1"
+              :max="100"
+              placeholder="10"
+              :showButtons="true"
+            />
+            <span class="tw:text-gray-600 tw:whitespace-nowrap">страниц</span>
+          </template>
+
+          <template #help>
+            Укажите, сколько страниц товаров можно подгружать при бесконечной прокрутки.
+            После достижения этого лимита подгрузка остановится.
+            Ограничение страниц снижает нагрузку на сервер.
+          </template>
+        </FormItem>
+      </div>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+import {InputNumber} from "primevue";
+import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
+
+const draft = ref(null);
+const model = defineModel();
+const emit = defineEmits(['cancel']);
+
+const isChanged = computed(() => md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value)));
+
+function onApply() {
+  model.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(model.value));
+});
+
+defineExpose({isChanged});
+</script>
--- a/frontend/admin/src/components/MainPageConfigurator/Forms/SliderForm.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/Forms/SliderForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <div v-if="draft">
+    <BaseForm
+      v-model="draft"
+      :isChanged="isChanged"
+      @onApply="onApply"
+      @cancel="$emit('cancel')"
+    >
+      <!-- Основные настройки -->
+      <Panel header="Основные настройки" class="tw:mb-4">
+        <div class="tw:space-y-6">
+          <!-- Эффект смены слайдов -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Эффект смены слайдов
+              </label>
+              <Dropdown
+                v-model="draft.data.effect"
+                :options="effectOptionsList"
+                optionLabel="label"
+                optionValue="value"
+                placeholder="Выберите эффект"
+                class="tw:w-64"
+              />
+            </div>
+          </div>
+
+          <!-- Пагинация -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Пагинация
+              </label>
+              <ToggleSwitch v-model="draft.data.pagination"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать точки под слайдером для индикации текущего слайда.
+            </small>
+          </div>
+
+          <!-- Полоса прокрутки -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Полоса прокрутки
+              </label>
+              <ToggleSwitch v-model="draft.data.scrollbar"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Показывать полосу прокрутки под слайдером для навигации между слайдами.
+            </small>
+          </div>
+
+          <!-- Расстояние между слайдами -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:gap-4">
+              <label class="tw:font-medium tw:text-gray-700 tw:flex-shrink-0">
+                Расстояние между слайдами
+              </label>
+              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
+                <InputNumber
+                  v-model="draft.data.space_between"
+                  :min="0"
+                  :max="100"
+                  placeholder="30"
+                  :showButtons="true"
+                />
+                <span class="tw:text-gray-600 tw:whitespace-nowrap">px</span>
+              </div>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Расстояние между слайдами в пикселях. По умолчанию - 30.
+            </small>
+          </div>
+
+          <!-- Свободный режим -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Свободный режим
+              </label>
+              <ToggleSwitch v-model="draft.data.free_mode"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
+            </small>
+          </div>
+
+          <!-- Бесконечная прокрутка -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Бесконечная прокрутка
+              </label>
+              <ToggleSwitch v-model="draft.data.loop"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с
+              первого, создавая бесконечный цикл.
+            </small>
+          </div>
+
+          <!-- Автоматическая прокрутка -->
+          <div>
+            <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
+              <label class="tw:font-medium tw:text-gray-700">
+                Автоматическая прокрутка
+              </label>
+              <ToggleSwitch v-model="draft.data.autoplay"/>
+            </div>
+            <small class="tw:block tw:text-sm tw:text-gray-500">
+              Слайдер будет автоматически листать изображения каждые 3 секунды.
+            </small>
+          </div>
+        </div>
+      </Panel>
+
+      <!-- Слайды -->
+      <Panel header="Слайды">
+        <template #icons>
+          <Button
+            severity="success"
+            text
+            rounded
+            aria-label="Добавить слайд"
+            @click="addSlide"
+          >
+            <i class="fa fa-plus"></i> Добавить новый слайд
+          </Button>
+        </template>
+
+        <div v-if="draft.data.slides.length === 0" class="tw:text-center tw:py-8 tw:text-gray-500">
+          <i class="fa fa-image fa-3x tw:mb-4"></i>
+          <p class="tw:font-bold">Слайды не добавлены</p>
+          <Button
+            label="Добавить первый слайд"
+            severity="success"
+            outlined
+            class="tw:mt-4"
+            @click="addSlide"
+          >
+            <i class="fa fa-plus"></i>
+          </Button>
+        </div>
+
+        <div v-else class="tw:space-y-4">
+          <div
+            v-for="(slide, index) in draft.data.slides"
+            :key="index"
+            class="tw:bg-white tw:rounded-lg tw:border tw:border-gray-200 tw:p-4 tw:shadow-sm tw:relative"
+          >
+            <div class="tw:absolute tw:top-2 tw:right-2">
+              <Button
+                severity="danger"
+                text
+                rounded
+                aria-label="Удалить слайд"
+                @click="removeSlide($event, index)"
+
+              >
+                <i class="fa fa-trash tw:text-lg"></i>
+              </Button>
+            </div>
+
+            <div class="tw:flex">
+              <!-- Изображение -->
+              <div class="tw:mr-5">
+                <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                  Изображение
+                </label>
+                <OcImagePicker v-model="slide.image"/>
+              </div>
+
+              <!-- Поля -->
+              <div class="tw:space-y-4">
+                <div>
+                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                    Заголовок слайда
+                  </label>
+                  <InputText
+                    v-model="slide.title"
+                    placeholder="Введите заголовок слайда"
+                    class="tw:w-full"
+                  />
+                  <small class="tw:block tw:text-sm tw:text-gray-500">
+                    Заголовок слайда будет отправляться в цели Яндекс.Метрики
+                  </small>
+                </div>
+
+                <div>
+                  <label class="tw:block tw:mb-2 tw:font-medium tw:text-gray-700">
+                    Ссылка
+                  </label>
+                  <LinkSelector v-model="slide.link"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Panel>
+    </BaseForm>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineExpose, onMounted, ref} from "vue";
+import OcImagePicker from "@/components/OcImagePicker.vue";
+import LinkSelector from "@/components/Slider/LinkSelector.vue";
+import {Button, Dropdown, InputNumber, InputText, Panel, ToggleSwitch, useConfirm} from 'primevue';
+import {sliderEffectOptions} from "@/utils/constants..js";
+import {md5} from "js-md5";
+import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
+
+const confirm = useConfirm();
+
+const draft = ref(null);
+const slider = defineModel();
+
+const isChanged = computed(() => md5(JSON.stringify(slider.value)) !== md5(JSON.stringify(draft.value)));
+
+const effectOptionsList = computed(() => {
+  return Object.entries(sliderEffectOptions).map(([value, label]) => ({
+    value,
+    label,
+  }));
+});
+
+function removeSlide(event, index) {
+  confirm.require({
+    group: 'popup',
+    target: event.currentTarget,
+    message: 'Удалить слайд?',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: {
+      label: 'Отмена',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Удалить',
+      severity: 'danger'
+    },
+    accept: () => draft.value.data.slides.splice(index, 1),
+  });
+}
+
+function addSlide() {
+  draft.value.data.slides.push({
+    title: '',
+    link: {
+      type: 'none',
+      value: null,
+    },
+    image: '',
+  });
+}
+
+function onApply() {
+  slider.value = JSON.parse(JSON.stringify(draft.value));
+}
+
+onMounted(() => {
+  draft.value = JSON.parse(JSON.stringify(slider.value));
+});
+
+defineExpose({isChanged});
+</script>
+
+<style scoped>
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/MainPageConfigurator.vue
+++ b/frontend/admin/src/components/MainPageConfigurator/MainPageConfigurator.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="tw:flex tw:gap-4">
+    <section class="tw:w-1/3 tw:p-4 tw:bg-gray-100 tw:rounded-xl">
+      <header class="tw:font-bold tw:uppercase">Доступные блоки</header>
+      <div class="tw:mb-6">Перетяните блок, чтобы добавить на главную страницу</div>
+
+      <draggable
+        v-model="availableBlocks"
+        :group="{ name: 'blocks', pull: 'clone', put: false }"
+        :clone="cloneBlock"
+        item-key="type"
+        class="tw:space-y-2"
+        chosenClass="tw:scale-98"
+      >
+        <template #item="{ element, index }">
+          <Card class="tw:cursor-move">
+            <template #title>
+              <i class="fa fa-arrows"></i>
+              {{ element.title }}
+            </template>
+            <template #content>
+              <p class="m-0">
+                {{ element.description }}
+              </p>
+            </template>
+          </Card>
+        </template>
+      </draggable>
+    </section>
+
+    <section class="tw:w-full tw:rounded-xl tw:p-4 tw:bg-gray-100 tw:min-h-[400px] tw:relative">
+      <header class="tw:font-bold tw:uppercase">Блоки на главной странице</header>
+      <div class="tw:mb-6">Эти блоки будут отображены на главной странице в том же порядке. Перетяните блок, если хотите изменить порядок.</div>
+
+      <draggable
+        v-model="settings.items.mainpage_blocks"
+        :group="{ name: 'blocks', put: true }"
+        item-key="type"
+        class="tw:w-full tw:h-full tw:min-h-[400px]"
+        @change="onChange"
+      >
+        <template #item="{ element, index }">
+          <template v-if="blockToComponentMap[element.type]">
+            <component
+              :is="blockToComponentMap[element.type]"
+              :value="element"
+              @onRemove="removeBlock(index)"
+              @onShowSettings="showDrawer(index)"
+            />
+          </template>
+
+          <div v-else>неподдерживаемый блок</div>
+        </template>
+      </draggable>
+
+      <div
+        v-if="!hasBlocks"
+        class="tw:absolute tw:inset-0 tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-center tw:py-12 tw:px-4 tw:pointer-events-none"
+      >
+        <div class="tw:mb-6 tw:text-6xl tw:text-gray-400">
+          <i class="fa fa-inbox"></i>
+        </div>
+        <h3 class="tw:text-xl tw:font-semibold tw:text-gray-700 tw:mb-2">
+          Нет блоков на главной странице
+        </h3>
+        <p class="tw:text-gray-500 tw:max-w-md tw:mb-4">
+          Перетащите блок из левой панели, чтобы добавить его на главную страницу
+        </p>
+      </div>
+    </section>
+
+    <Drawer
+      :visible="isDrawerSettingsVisible"
+      @update:visible="closeDrawer"
+      :header="drawerTitle"
+      position="right"
+      :baseZIndex="1000"
+      class="tw:!w-full tw:md:!w-80 tw:lg:!w-[50rem]"
+    >
+      <template v-if="currentBlock && blockToFormMap[currentBlock.type]">
+        <component
+          :is="blockToFormMap[currentBlock.type]"
+          ref="currentBlockForm"
+          @cancel="closeDrawer"
+          :modelValue="settings.items.mainpage_blocks[drawerBlockIndex]"
+          @update:modelValue="updateBlockData"
+        />
+      </template>
+
+      <div v-else>Unsupported block type</div>
+    </Drawer>
+  </div>
+</template>
+
+<script setup>
+import draggable from 'vuedraggable';
+import {Card, Drawer, useConfirm} from 'primevue';
+import {computed, nextTick, ref} from "vue";
+import {useSettingsStore} from "@/stores/settings.js";
+import {
+  blocks,
+  blockToComponentMap,
+  blockToFormMap
+} from "@/components/MainPageConfigurator/availableBlocks.js";
+
+const settings = useSettingsStore();
+const confirm = useConfirm();
+const availableBlocks = ref(blocks);
+
+const isDrawerSettingsVisible = ref(null);
+const drawerBlockIndex = ref(null);
+const currentBlockForm = ref(null);
+
+const currentBlock = computed(() => {
+  if (drawerBlockIndex.value >= 0) {
+    return settings.items.mainpage_blocks[drawerBlockIndex.value];
+  }
+
+  return null;
+});
+
+const drawerTitle = computed(() => {
+  if (currentBlock.value) {
+    return `Редактирование ${currentBlock?.value?.type} - ${currentBlock?.value?.title || 'Без заголовка'}`;
+  }
+
+  return '';
+});
+
+const hasBlocks = computed(() => {
+  return settings.items.mainpage_blocks && settings.items.mainpage_blocks.length > 0;
+});
+
+function removeBlock(index) {
+  settings.items.mainpage_blocks.splice(index, 1);
+}
+
+function cloneBlock(block) {
+  const newBlock = JSON.parse(JSON.stringify(block));
+  newBlock.title = '';
+  newBlock.description = '';
+  return newBlock;
+}
+
+function showDrawer(blockIndex) {
+  if (currentBlock) {
+    drawerBlockIndex.value = blockIndex;
+    isDrawerSettingsVisible.value = true;
+  }
+}
+
+function closeDrawer() {
+  // Проверяем, есть ли несохраненные изменения
+  if (currentBlockForm.value?.isChanged === true) {
+    confirm.require({
+      message: 'У вас есть несохраненные изменения. Вы уверены, что хотите закрыть форму?',
+      header: 'Подтверждение закрытия',
+      icon: 'pi pi-exclamation-triangle',
+      rejectProps: {
+        label: 'Отмена',
+        severity: 'secondary',
+        outlined: true
+      },
+      acceptProps: {
+        label: 'Закрыть',
+        severity: 'danger'
+      },
+      accept: () => {
+        drawerBlockIndex.value = null;
+        isDrawerSettingsVisible.value = false;
+      }
+    });
+  } else {
+    drawerBlockIndex.value = null;
+    isDrawerSettingsVisible.value = false;
+  }
+}
+
+function onChange(update) {
+  if (update.added && update.added?.newIndex >= 0) {
+    showDrawer(update.added.newIndex);
+  }
+}
+
+function updateBlockData(newBlockData) {
+  if (drawerBlockIndex.value !== null && drawerBlockIndex.value >= 0) {
+    settings.items.mainpage_blocks.splice(drawerBlockIndex.value, 1, newBlockData);
+    nextTick(() => closeDrawer());
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
+++ b/frontend/admin/src/components/MainPageConfigurator/availableBlocks.js
@@ -0,0 +1,58 @@
+import SliderBlock from "@/components/MainPageConfigurator/Blocks/SliderBlock.vue";
+import CategoriesTopBlock from "@/components/MainPageConfigurator/Blocks/CategoriesTopBlock.vue";
+import SliderForm from "@/components/MainPageConfigurator/Forms/SliderForm.vue";
+import CategoriesTopForm from "@/components/MainPageConfigurator/Forms/CategoriesTopForm.vue";
+import ProductsFeedBlock from "@/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue";
+import ProductsFeedForm from "@/components/MainPageConfigurator/Forms/ProductsFeedForm.vue";
+
+export const blockToComponentMap = {
+  slider: SliderBlock,
+  categories_top: CategoriesTopBlock,
+  products_feed: ProductsFeedBlock,
+};
+
+export const blockToFormMap = {
+  slider: SliderForm,
+  categories_top: CategoriesTopForm,
+  products_feed: ProductsFeedForm,
+};
+
+export const blocks = [
+  {
+    type: 'slider',
+    title: 'Слайдер',
+    description: 'Изображения объединённые в слайдер.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      effect: "slide",
+      pagination: true,
+      scrollbar: false,
+      free_mode: false,
+      space_between: 30,
+      autoplay: false,
+      loop: false,
+      slides: [],
+    },
+  },
+  {
+    type: 'categories_top',
+    title: 'Топ категорий',
+    description: 'Виджет с кнопками популярных категорий и кнопкой «Каталог» для всех категорий.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      count: 10,
+    },
+  },
+  {
+    type: 'products_feed',
+    title: 'Лента товаров',
+    description: 'Отображает товары в виде прокручиваемой ленты с возможностью подгрузки новых элементов по мере скролла.',
+    is_enabled: true,
+    goal_name: '',
+    data: {
+      max_page_count: 10,
+    },
+  },
+];
--- a/frontend/admin/src/components/Slider/Slider.vue
+++ b/frontend/admin/src/components/Slider/Slider.vue
@@ -1,182 +0,0 @@
-<template>
-  <input type="hidden" name="module_tgshop_mainpage_slider" :value="JSON.stringify(slider)">
-  <div class="alert alert-info">
-    <p>Здесь настраивается слайдер, который выводится на главной странице.</p>
-    <p>Рекомендуемые размеры изображений: <span class="text-bold">370×200px</span>, <span
-      class="text-bold">740×400px</span>,
-      <span class="text-bold">1110×600px</span> либо другие, в тех же пропорциях (1.85:1)<br>
-      Изображение будет автоматически обрезана под нужный формат. <br>
-      Заголовок можно оставить пустым, но рекомендуется заполнить для корректной работы целей
-      Яндекс.Метрики.</p>
-  </div>
-
-  <section>
-    <SettingsItem label="Статус">
-      <template #default>
-        <Switcher v-model="slider.is_enabled"/>
-      </template>
-
-      <template #help>
-        Показывать слайдер на главной странице.
-        Для отображения слайдера нужно добавить минимум 1 слайд.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Эффект смены слайдов">
-      <template #default>
-        <select v-model="slider.effect" class="form-control">
-          <option value="slide">Слайд</option>
-          <option value="flip">Переворот</option>
-          <option value="cards">Карточки</option>
-          <option value="cube">Куб</option>
-          <option value="coverflow">Перекрывающиеся слайды</option>
-        </select>
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Пагинация">
-      <template #default>
-        <Switcher v-model="slider.pagination"/>
-      </template>
-
-      <template #help>
-        Показывать точки под слайдером для индикации текущего слайда.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Полоса прокрутки">
-      <template #default>
-        <Switcher v-model="slider.scrollbar"/>
-      </template>
-
-      <template #help>
-        Показывать полосу прокрутки под слайдером для навигации между слайдами.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Расстояние между слайдами">
-      <template #default>
-        <div class="tw:max-w-2xl">
-          <div class="input-group">
-            <input
-              v-model="slider.space_between"
-              type="number"
-              min="0"
-              max="100"
-              class="form-control"
-              placeholder="30"
-            />
-            <span class="input-group-addon">px</span>
-          </div>
-        </div>
-      </template>
-
-      <template #help>
-        Расстояние между слайдами в пикселях. По умолчанию - 30.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Свободный режим">
-      <template #default>
-        <Switcher v-model="slider.free_mode"/>
-      </template>
-
-      <template #help>
-        Позволяет свободно прокручивать слайды без привязки к конкретным позициям.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Бесконечная прокрутка">
-      <template #default>
-        <Switcher v-model="slider.loop"/>
-      </template>
-
-      <template #help>
-        Включите этот режим, чтобы после последнего слайда слайдер продолжал прокрутку с первого, создавая бесконечный цикл.
-      </template>
-    </SettingsItem>
-
-    <SettingsItem label="Автоматическая прокрутка">
-      <template #default>
-        <Switcher v-model="slider.autoplay"/>
-      </template>
-
-      <template #help>
-        Слайдер будет автоматически листать изображения каждые 3 секунды
-      </template>
-    </SettingsItem>
-  </section>
-
-  <section>
-    <table class="table table-striped table-bordered table-hover">
-      <thead>
-      <tr>
-        <td class="text-left">Заголовок</td>
-        <td class="text-left">Ссылка</td>
-        <td class="text-center">Изображение</td>
-        <td>Действия</td>
-      </tr>
-      </thead>
-      <tbody>
-      <tr v-for="(slide, index) in slider.slides">
-        <td class="text-left">
-          <input v-model="slide.title" type="text" placeholder="Заголовок слайда"
-                 class="form-control"/>
-        </td>
-        <td class="text-left" style="width: 30%;">
-          <LinkSelector v-model="slide.link"/>
-        </td>
-        <td class="text-center">
-          <OcImagePicker v-model="slide.image"/>
-        </td>
-        <td class="text-left">
-          <button type="button" class="btn btn-danger" @click="removeSlide(index)">
-            <i class="fa fa-minus-circle"></i>
-          </button>
-        </td>
-      </tr>
-      </tbody>
-      <tfoot>
-      <tr>
-        <td colspan="3"></td>
-        <td class="text-left">
-          <button @click="addSlide" type="button" class="btn btn-primary">
-            <i class="fa fa-plus-circle"></i>
-          </button>
-        </td>
-      </tr>
-      </tfoot>
-    </table>
-  </section>
-</template>
-
-<script setup>
-import {onMounted, ref} from "vue";
-import OcImagePicker from "@/components/OcImagePicker.vue";
-import LinkSelector from "@/components/Slider/LinkSelector.vue";
-import SettingsItem from "@/components/SettingsItem.vue";
-import Switcher from "@/components/Switcher.vue";
-
-const slider = defineModel();
-
-function removeSlide(index) {
-  slider.value.slides.splice(index, 1);
-}
-
-function addSlide() {
-  slider.value.slides.push({
-    title: '',
-    link: {
-      type: 'none',
-      value: null,
-    },
-    image: '',
-  });
-}
-</script>
-
-<style scoped>
-.text-bold {
-  font-weight: bold;
-}
-</style>
--- a/frontend/admin/src/main.js
+++ b/frontend/admin/src/main.js
@@ -8,6 +8,8 @@ import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
 import ToastService from 'primevue/toastservice';
 import {definePreset} from "@primeuix/themes";
+import Tooltip from 'primevue/tooltip';
+import ConfirmationService from 'primevue/confirmationservice';

 const MyPreset = definePreset(Aura, {

@@ -34,6 +36,8 @@ onReady(async () => {
    }
  });
  app.use(ToastService);
+  app.directive('tooltip', Tooltip);
+  app.use(ConfirmationService);

  app.mount('#app');
  await useSettingsStore().fetchSettings();
--- a/frontend/admin/src/router/index.js
+++ b/frontend/admin/src/router/index.js
@@ -1,22 +1,22 @@
 import {createMemoryHistory, createRouter} from 'vue-router';
-import SliderView from "@/views/SliderView.vue";
 import GeneralView from "@/views/GeneralView.vue";
 import TextsView from "@/views/TextsView.vue";
 import OrdersView from "@/views/OrdersView.vue";
 import TelegramView from "@/views/TelegramView.vue";
 import MetricsView from "@/views/MetricsView.vue";
 import StoreView from "@/views/StoreView.vue";
+import MainPageView from "@/views/MainPageView.vue";

 const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    {path: '/', name: 'general', component: GeneralView},
-    {path: '/slider', name: 'slider', component: SliderView},
    {path: '/orders', name: 'orders', component: OrdersView},
    {path: '/texts', name: 'texts', component: TextsView},
    {path: '/telegram', name: 'telegram', component: TelegramView},
    {path: '/metrics', name: 'metrics', component: MetricsView},
    {path: '/store', name: 'store', component: StoreView},
+    {path: '/mainpage', name: 'mainpage', component: MainPageView},
  ],
 });

--- a/frontend/admin/src/stores/settings.js
+++ b/frontend/admin/src/stores/settings.js
@@ -1,11 +1,13 @@
 import {defineStore} from "pinia";
 import {apiGet, apiPost} from "@/utils/http.js";
 import {toastBus} from "@/utils/toastHelper.js";
+import {md5} from "js-md5";

 export const useSettingsStore = defineStore('settings', {
  state: () => ({
    isLoading: false,
    error: null,
+    originalItemsHash: null,

    items: {
      app: {
@@ -32,10 +34,6 @@ export const useSettingsStore = defineStore('settings', {

      store: {
        enable_store: true,
-        mainpage_products: 'most_viewed',
-        featured_products: [],
-        mainpage_categories: 'latest10',
-        featured_categories: [],
        feature_coupons: true,
        feature_vouchers: true,
      },
@@ -63,6 +61,8 @@ export const useSettingsStore = defineStore('settings', {
          slides: [],
        },
      },
+
+      mainpage_blocks: [],
    },
  }),

@@ -74,6 +74,10 @@ export const useSettingsStore = defineStore('settings', {
      const filename = state.items.app.app_icon.substring(0, extIndex);
      return `/image/cache/${filename}-100x100${ext}`;
    },
+    hasUnsavedChanges: (state) => {
+      if (!state.originalItemsHash) return false;
+      return md5(JSON.stringify(state.items)) !== state.originalItemsHash;
+    },
  },

  actions: {
@@ -86,6 +90,8 @@ export const useSettingsStore = defineStore('settings', {
          ...this.items,
          ...response.data,
        };
+        // Сохраняем хеш исходного состояния после загрузки
+        this.originalItemsHash = md5(JSON.stringify(this.items));
      } else {
        this.error = 'Возникли проблемы при загрузке настроек.';
      }
@@ -104,6 +110,8 @@ export const useSettingsStore = defineStore('settings', {
          detail: 'Настройки сохранены.',
          life: 2000,
        });
+        // Обновляем хеш исходного состояния после успешного сохранения
+        this.originalItemsHash = md5(JSON.stringify(this.items));
      } else {
        toastBus.emit('show', {
          severity: 'error',
@@ -114,7 +122,6 @@ export const useSettingsStore = defineStore('settings', {
      }


-
      this.isLoading = false;
    },

--- a/frontend/admin/src/utils/constants..js
+++ b/frontend/admin/src/utils/constants..js
@@ -0,0 +1,7 @@
+export const sliderEffectOptions = {
+  slide: 'Слайд',
+  flip: 'Переворот',
+  cards: 'Карточки',
+  cube: 'Куб',
+  coverflow: 'Перекрывающиеся слайды',
+};
--- a/frontend/admin/src/utils/helpers.js
+++ b/frontend/admin/src/utils/helpers.js
@@ -0,0 +1,7 @@
+export function getThumb(imageUrl) {
+  if (!imageUrl) return '/image/cache/no_image-100x100.png';
+  const extIndex = imageUrl.lastIndexOf('.');
+  const ext = imageUrl.substring(extIndex);
+  const filename = imageUrl.substring(0, extIndex);
+  return `/image/cache/${filename}-100x100${ext}`;
+}
--- a/frontend/admin/src/views/MainPageView.vue
+++ b/frontend/admin/src/views/MainPageView.vue
@@ -0,0 +1,7 @@
+<template>
+  <MainPageConfigurator/>
+</template>
+
+<script setup>
+import MainPageConfigurator from "@/components/MainPageConfigurator/MainPageConfigurator.vue";
+</script>
--- a/frontend/admin/src/views/SliderView.vue
+++ b/frontend/admin/src/views/SliderView.vue
@@ -1,10 +0,0 @@
-<template>
-  <Slider v-model="settings.items.sliders.mainpage_slider"/>
-</template>
-
-<script setup>
-import Slider from "@/components/Slider/Slider.vue";
-import {useSettingsStore} from "@/stores/settings.js";
-
-const settings = useSettingsStore();
-</script>
--- a/frontend/admin/src/views/StoreView.vue
+++ b/frontend/admin/src/views/StoreView.vue
@@ -7,40 +7,6 @@
      вашем сайте. В этом режиме Telecart работает как каталог.</p>
  </ItemBool>

-  <ItemSelect
-    label="Товары на главной"
-    v-model="settings.items.store.mainpage_products"
-    :items="mainpage_products_options"
-  >
-    Выберите, какие товары показывать на главной странице магазина в Telegram.
-    Это влияет на первую видимую секцию каталога для пользователя.
-  </ItemSelect>
-
-  <ItemProductsSelect
-    label="Избранные товары"
-    v-model="settings.items.store.featured_products"
-  >
-    На главной странице будут отображаться избранные товары, если вы выберете этот вариант в
-    настройке “Товары на главной”. Если товары не выбраны, то будут показаны популярные товары.
-  </ItemProductsSelect>
-
-  <ItemSelect
-    label="Категории на главной"
-    v-model="settings.items.store.mainpage_categories"
-    :items="mainpage_categories_options"
-  >
-    Выберите, какие товары показывать на главной странице магазина в Telegram.
-    Это влияет на первую видимую секцию каталога для пользователя.
-  </ItemSelect>
-
-  <ItemCategoriesSelect
-    label="Избранные категории"
-    v-model="settings.items.store.featured_categories"
-  >
-    На главной странице будут отображаться эти категории,
-    если вы выберете этот вариант в настройке “Категории на главной”.
-  </ItemCategoriesSelect>
-
  <ItemBool label="Промокоды" v-model="settings.items.store.feature_coupons">
    <p>
      Позволяет использовать стандартные
@@ -65,11 +31,7 @@ import ItemProductsSelect from "@/components/Settings/ItemProductsSelect.vue";
 import ItemCategoriesSelect from "@/components/Settings/ItemCategoriesSelect.vue";

 const settings = useSettingsStore();
-const mainpage_products_options = {
-  most_viewed: 'Популярные товары',
-  latest: 'Последние сверху',
-  featured: 'Избранные товары (задать в поле ниже)',
-};
+
 const mainpage_categories_options = {
  no_categories: 'Отображать только кнопку "Каталог"',
  latest10: 'Последние 10 категорий',
--- a/frontend/spa/src/App.vue
+++ b/frontend/spa/src/App.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="drawer h-full">
-    <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
+    <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen"/>

    <div class="drawer-content">
      <div class="app-container h-full">
@@ -9,18 +9,18 @@
        <Navbar @drawer="toggleDrawer"/>

        <section class="telecart-main-section">
-          <FullscreenViewport v-if="platform === 'ios' || platform === 'android'" />
+          <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>

          <AppDebugMessage v-if="settings.app_debug"/>

          <RouterView v-slot="{ Component, route }">
            <KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
-              <component :is="Component" :key="route.fullPath" />
+              <component :is="Component" :key="route.fullPath"/>
            </KeepAlive>
          </RouterView>

-          <CartButton v-if="settings.store_enabled" />
-          <Dock v-if="isAppDockShown" />
+          <CartButton v-if="settings.store_enabled"/>
+          <Dock v-if="isAppDockShown"/>
        </section>
      </div>
    </div>
@@ -38,8 +38,7 @@

 <script setup>
 import {computed, onMounted, onUnmounted, ref, watch} from "vue";
-import {useWebAppViewport} from 'vue-tg';
-import {useMiniApp, FullscreenViewport} from 'vue-tg';
+import {FullscreenViewport, useMiniApp, useWebAppViewport} from 'vue-tg';
 import {useRoute, useRouter} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
@@ -64,10 +63,10 @@ const haptic = window.Telegram.WebApp.HapticFeedback;
 const drawerOpen = ref(false);

 const routesToHideAppDock = [
-    'product.show',
-    'checkout',
-    'order_created',
-    'filters',
+  'product.show',
+  'checkout',
+  'order_created',
+  'filters',
 ];

 const isAppDockShown = computed(() => {
@@ -80,7 +79,7 @@ function navigateBack() {
 }

 function toggleDrawer() {
-  drawerOpen.value = !drawerOpen.value
+  drawerOpen.value = !drawerOpen.value;
 }

 watch(
--- a/frontend/spa/src/components/CategoriesInline.vue
+++ b/frontend/spa/src/components/CategoriesInline.vue
@@ -1,28 +0,0 @@
-<template>
-<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
-  <RouterLink class="btn btn-md" to="/categories">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
-    </svg>
-    Каталог
-  </RouterLink>
-
-  <RouterLink
-      v-for="category in categoriesStore.topCategories"
-      class="btn btn-md max-w-[12rem]"
-      :to="{name: 'product.categories.show', params: {category_id: category.id}}"
-      @click="onCategoryClick"
-  >
-    <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
-  </RouterLink>
-</div>
-</template>
-
-<script setup>
-import {useCategoriesStore} from "@/stores/CategoriesStore.js";
-const categoriesStore = useCategoriesStore();
-
-function onCategoryClick() {
-  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
-}
-</script>
--- a/frontend/spa/src/components/Dock.vue
+++ b/frontend/spa/src/components/Dock.vue
@@ -21,6 +21,18 @@
        <span class="dock-label">Главная</span>
      </RouterLink>

+      <RouterLink
+          :to="{name: 'categories'}"
+          :class="{'active': route.name === 'categories'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+        </svg>
+        <span class="dock-label">Каталог</span>
+      </RouterLink>
+
      <RouterLink
          :to="{name: 'search'}"
          :class="{'active': route.name === 'search'}"
@@ -88,8 +100,8 @@ function onDockItemClick() {
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-field);
-  padding: 5px 13px;
-  min-width: 90px;
+  padding: 5px;
+  min-width: 50px;
 }

 .telecart-dock-item.active {
--- a/frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue
@@ -0,0 +1,46 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
+    </header>
+    <main>
+      <div class="flex items-center justify-center p-5 gap-2 flex-wrap">
+        <RouterLink class="btn btn-md" to="/categories">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+               class="size-5">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>
+          </svg>
+          Каталог
+        </RouterLink>
+
+        <RouterLink
+            v-for="category in block.data?.categories || []"
+            class="btn btn-md max-w-[12rem]"
+            :to="{name: 'product.categories.show', params: {category_id: category.id}}"
+            @click="onCategoryClick"
+        >
+          <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
+        </RouterLink>
+      </div>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const isLoading = ref(false);
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+
+function onCategoryClick() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+}
+</script>
--- a/frontend/spa/src/components/MainPage/Blocks/ErrorBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ErrorBlock.vue
@@ -0,0 +1,8 @@
+<template>
+  <div role="alert" class="alert alert-error">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <span>Проблема при отображении блока.</span>
+  </div>
+</template>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
+    </header>
+    <main>
+      <ProductsList
+          :products="products"
+          :hasMore="hasMore"
+          :isLoading="isLoading"
+          :isLoadingMore="isLoadingMore"
+          @loadMore="onLoadMore"
+      />
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {onMounted, ref, toRaw} from "vue";
+import ProductsList from "@/components/ProductsList.vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import ftch from "@/utils/ftch.js";
+
+const filtersStore = useProductFiltersStore();
+const yaMetrika = useYaMetrikaStore();
+const settings = useSettingsStore();
+
+const products = ref([]);
+const hasMore = ref(false);
+const isLoading = ref(false);
+const isLoadingMore = ref(false);
+const page = ref(1);
+const perPage = 20;
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+
+async function fetchProducts() {
+  try {
+    isLoading.value = true;
+    console.debug('Home: Load products for Main Page.');
+    console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
+    const response = await ftch('products', null, toRaw({
+      page: page.value,
+      maxPages: props.block.data.max_page_count,
+      perPage: perPage,
+      filters: filtersStore.applied,
+    }));
+    products.value = response.data;
+    hasMore.value = response.meta.hasMore;
+    console.debug('ProductsFeedBlock: Products for main page loaded.');
+
+    yaMetrika.dataLayerPush({
+      ecommerce: {
+        currencyCode: settings.currency_code,
+        impressions: products.value.map((product, index) => {
+          return {
+            id: product.id,
+            name: product.name,
+            price: product.final_price_numeric,
+            brand: product.manufacturer_name,
+            category: product.category_name,
+            list: 'Главная страница',
+            position: index,
+            discount: product.price_numeric - product.final_price_numeric,
+            quantity: product.product_quantity,
+          };
+        }),
+      },
+    });
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function onLoadMore() {
+  try {
+    console.debug('ProductsFeedBlock: onLoadMore');
+    if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
+    isLoadingMore.value = true;
+    page.value++;
+    console.debug('ProductsFeedBlock: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
+    const response = await ftch('products', null, toRaw({
+      page: page.value,
+      maxPages: props.block.data.max_page_count,
+      filters: filtersStore.applied,
+    }));
+    products.value.push(...response.data);
+    hasMore.value = response.meta.hasMore;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoadingMore.value = false;
+  }
+}
+
+onMounted(async () => {
+  console.debug("[Products Feed] Mounted");
+  await fetchProducts();
+});
+</script>
--- a/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
@@ -0,0 +1,26 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center mb-2">{{ block.description }}</div>
+    </header>
+    <main>
+      <Slider :config="block.data" :goalName="block.goal_name"/>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import Slider from "@/components/Slider.vue";
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/MainPage/EmptyBlocks.vue
+++ b/frontend/spa/src/components/MainPage/EmptyBlocks.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16 px-4">
+    <div class="mb-6">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-16 text-base-content/40">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+      </svg>
+    </div>
+    <h2 class="text-xl font-semibold mb-3">Главная страница пуста</h2>
+    <p class="text-sm text-base-content/70 mb-2 max-w-md">
+      На главной странице не сконфигурировано ни одного блока для отображения.
+    </p>
+    <p class="text-sm text-base-content/70 max-w-md">
+      Перейдите в настройки модуля <span class="font-semibold">TeleCart</span> и добавьте блоки на главную страницу.
+    </p>
+    <div class="mt-6 p-4 bg-base-200 rounded-lg max-w-md">
+      <div class="flex items-start gap-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-info shrink-0 mt-0.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+        </svg>
+        <p class="text-xs text-base-content/60 text-left">
+          Вы можете добавить слайдеры, категории, ленты товаров и другие блоки для создания красивой главной страницы.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/MainPage/MainPage.vue
+++ b/frontend/spa/src/components/MainPage/MainPage.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="blocks.blocks?.length > 0" v-for="(block, index) in blocks.blocks">
+    <template v-if="blockTypeToComponentMap[block.type]">
+      <component
+          v-if="block.is_enabled"
+          :is="blockTypeToComponentMap[block.type]"
+          :block="block"
+      />
+    </template>
+
+    <div v-else-if="blockTypeToComponentMap[block.type] === undefined">
+      <div role="alert" class="alert alert-error mx-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
+      </div>
+    </div>
+  </div>
+
+  <EmptyBlocks v-else/>
+</template>
+
+<script setup>
+import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
+import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
+import {useBlocksStore} from "@/stores/BlocksStore.js";
+import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
+import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
+import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
+
+const blockTypeToComponentMap = {
+  slider: SliderBlock,
+  categories_top: CategoriesTopBlock,
+  products_feed: ProductsFeedBlock,
+  error: ErrorBlock,
+};
+
+const blocks = useBlocksStore();
+</script>
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -1,50 +1,66 @@
 <template>
-  <div class="mx-auto max-w-2xl px-4 py-4 pb-14">
-    <h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
+  <div>
+    <div class="mx-auto max-w-2xl px-4 py-4 pb-14">
+      <h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>

-    <template v-if="products.length > 0">
-      <div
-          class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
-      >
-        <RouterLink
-            v-for="(product, index) in products"
-            :key="product.id"
-            class="product-grid-card group"
-            :to="`/product/${product.id}`"
-            @click="productClick(product, index)"
+      <template v-if="products.length > 0">
+        <div
+            class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
        >
-          <ProductImageSwiper :images="product.images"/>
-          <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
+          <RouterLink
+              v-for="(product, index) in products"
+              :key="product.id"
+              class="product-grid-card group"
+              :to="`/product/${product.id}`"
+              @click="productClick(product, index)"
+          >
+            <ProductImageSwiper :images="product.images"/>
+            <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>

-          <div v-if="product.special" class="mt-1">
-            <p class="text-xs line-through mr-2">{{ product.price }}</p>
-            <p class="text-lg font-medium">{{ product.special }}</p>
-          </div>
-          <p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
+            <div v-if="product.special" class="mt-1">
+              <p class="text-xs line-through mr-2">{{ product.price }}</p>
+              <p class="text-lg font-medium">{{ product.special }}</p>
+            </div>
+            <p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>

-        </RouterLink>
-        <div ref="bottom" style="height: 1px;"></div>
+          </RouterLink>
+          <div ref="bottom" style="height: 1px;"></div>
+        </div>
+
+        <div v-if="isLoadingMore" class="text-center mt-5">
+          <span class="loading loading-spinner loading-md"></span> Загрузка товаров...
+        </div>
+
+        <div v-else-if="hasMore === false" class="text-xs text-center mt-4 pt-4 mb-2 border-t">
+          {{ settings.texts.text_no_more_products }}
+        </div>
+      </template>
+
+      <div v-else-if="isLoading === true"
+           class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+        <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
+          <div class="aspect-square bg-gray-200 rounded-md"></div>
+          <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+          <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+        </div>
      </div>

-      <div v-if="isLoadingMore" class="text-center mt-5">
-        <span class="loading loading-spinner loading-md"></span> Загрузка товаров...
-      </div>
-
-      <div v-else-if="hasMore === false" class="text-xs text-center mt-4 pt-4 mb-2 border-t">
-        {{ settings.texts.no_more_products }}
-      </div>
-    </template>
-
-    <div v-else-if="isLoading === true"
-         class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-      <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
-        <div class="aspect-square bg-gray-200 rounded-md"></div>
-        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
-        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
-      </div>
+      <NoProducts v-else/>
    </div>

-    <NoProducts v-else/>
+    <div class="fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
+      <div class="flex justify-center">
+        <button
+            @click="showFilters"
+            class="btn shadow-xl relative"
+            :class="{'btn-accent' : filtersStore.isFiltersChanged}"
+        >
+          <IconFunnel/>
+          Фильтры
+          <span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
+        </button>
+      </div>
+    </div>
  </div>
 </template>

@@ -55,9 +71,15 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {ref} from "vue";
 import {useIntersectionObserver} from '@vueuse/core';
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import IconFunnel from "@/components/Icons/IconFunnel.vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useRouter} from "vue-router";

+const router = useRouter();
+const haptic = window.Telegram.WebApp.HapticFeedback;
 const yaMetrika = useYaMetrikaStore();
 const settings = useSettingsStore();
+const filtersStore = useProductFiltersStore();
 const bottom = ref(null);

 const emits = defineEmits(['loadMore']);
@@ -128,6 +150,11 @@ useIntersectionObserver(
      rootMargin: '400px 0',
    }
 );
+
+function showFilters() {
+  haptic.impactOccurred('soft');
+  router.push({name: 'filters'});
+}
 </script>

 <style scoped>
--- a/frontend/spa/src/components/MainpageSlider.vue
+++ b/frontend/spa/src/components/MainpageSlider.vue
@@ -1,25 +1,21 @@
 <template>
-  <div
-      v-if="sliders.mainpage_slider.is_enabled && sliders.mainpage_slider.slides.length > 0"
-      class="app-banner"
-      :class="classList"
-  >
+  <div v-if="config.slides.length > 0" class="app-banner" :class="classList">
    <Swiper
        :effect="slideEffect"
        class="select-none"
        :slides-per-view="1"
-        :space-between="sliders.mainpage_slider.space_between"
+        :space-between="config.space_between"
        :pagination="pagination"
        :lazy="true"
        :modules="modules"
        :scrollbar="scrollbar"
-        :free-mode="sliders.mainpage_slider.free_mode"
-        :loop="sliders.mainpage_slider.loop"
+        :free-mode="config.free_mode"
+        :loop="config.loop"
        :autoplay="autoplay"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
-      <SwiperSlide v-for="slide in sliders.mainpage_slider.slides" :key="slide.id">
+      <SwiperSlide v-for="slide in config.slides" :key="slide.id">
        <RouterLink
            v-if="slide?.link?.type === 'category'"
            :to="{name: 'product.categories.show', params: {category_id: slide.link.value.category_id}}"
@@ -48,6 +44,16 @@
      </SwiperSlide>
    </Swiper>
  </div>
+
+  <div v-else>
+    <div role="alert" class="alert alert-warning">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+      </svg>
+      <span>У слайдера не загружены изображения.</span>
+    </div>
+  </div>
 </template>

 <script setup>
@@ -56,11 +62,21 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
-import {EffectCoverflow, EffectCards, EffectCube, EffectFlip, Scrollbar, Autoplay} from 'swiper/modules';
+import {Autoplay, EffectCards, EffectCoverflow, EffectCube, EffectFlip, Scrollbar} from 'swiper/modules';
 import {computed, onMounted} from "vue";
-import {useSlidersStore} from "@/stores/SlidersStore.js";

-const sliders = useSlidersStore();
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+
+  goalName: {
+    type: String,
+    default: null,
+  }
+});
+
 const yaMetrika = useYaMetrikaStore();
 const modules = [
  Autoplay,
@@ -72,15 +88,15 @@ const modules = [
 ];

 const classList = computed(() => {
-  if (sliders.mainpage_slider.effect === 'cards') {
+  if (props.config.effect === 'cards') {
    return ['px-8'];
  }

-  if (sliders.mainpage_slider.effect === 'flip') {
+  if (props.config.effect === 'flip') {
    return ['px-4', 'pb-4', 'pt-4'];
  }

-  if (sliders.mainpage_slider.effect === 'cube') {
+  if (props.config.effect === 'cube') {
    return ['px-4', 'pb-10'];
  }

@@ -91,19 +107,19 @@ const onSwiper = (swiper) => {
  console.log(swiper);
 };
 const onSlideChange = () => {
-  console.log('slide change');
+
 };

 const slideEffect = computed(() => {
-  if (sliders.mainpage_slider.effect === 'slide') {
+  if (props.config.effect === 'slide') {
    return null;
  }

-  return sliders.mainpage_slider.effect;
+  return props.config.effect;
 });

 const pagination = computed(() => {
-  if (sliders.mainpage_slider.pagination) {
+  if (props.config.pagination) {
    return {
      clickable: true, dynamicBullets: false,
    };
@@ -112,7 +128,7 @@ const pagination = computed(() => {
 });

 const scrollbar = computed(() => {
-  if (sliders.mainpage_slider.scrollbar) {
+  if (props.config.scrollbar) {
    return {
      hide: true,
    };
@@ -121,7 +137,7 @@ const scrollbar = computed(() => {
 });

 const autoplay = computed(() => {
-  if (sliders.mainpage_slider.autoplay) {
+  if (props.config.autoplay) {
    return {
      delay: 3000,
      reverseDirection: false,
@@ -132,9 +148,11 @@ const autoplay = computed(() => {
 });

 function sliderClick(slide) {
-  yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
-    banner: slide.title,
-  });
+  if (props.goalName) {
+    yaMetrika.reachGoal(props.goalName, {
+      banner: slide.title,
+    });
+  }
 }

 function openExternalLink(link, slide) {
@@ -150,7 +168,7 @@ function openExternalLink(link, slide) {
 }

 onMounted(() => {
-  console.debug('[Mainpage Slider] Status: ', sliders.mainpage_slider);
+  console.debug('[Mainpage Slider] Init with config: ', props.config);
 });
 </script>

--- a/frontend/spa/src/main.js
+++ b/frontend/spa/src/main.js
@@ -16,7 +16,7 @@ import 'swiper/element/bundle';
 import 'swiper/css/bundle';
 import AppLoading from "@/AppLoading.vue";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
-import {useSlidersStore} from "@/stores/SlidersStore.js";
+import {useBlocksStore} from "@/stores/BlocksStore.js";
 register();

 const pinia = createPinia();
@@ -27,23 +27,24 @@ app
    .use(VueTelegramPlugin);

 const settings = useSettingsStore();
-useSlidersStore().fetchMainpageSlider();
+const blocks = useBlocksStore();

 const appLoading = createApp(AppLoading);
 appLoading.mount('#app');

 settings.load()
    .then(() => window.Telegram.WebApp.lockOrientation())
-    .then(async () => {
-        console.debug('Load default filters for the main page');
-        const filtersStore = useProductFiltersStore();
-        filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
-    })
    .then(() => {
        if (settings.app_enabled === false) {
            throw new Error('App disabled (maintenance mode)');
        }
    })
+    .then(() => blocks.processBlocks(settings.mainpage_blocks))
+    .then(async () => {
+        console.debug('Load default filters for the main page');
+        const filtersStore = useProductFiltersStore();
+        filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
+    })
    .then(() => {
        console.debug('[Init] Set theme attributes');
        document.documentElement.setAttribute('data-theme', settings.theme[window.Telegram.WebApp.colorScheme]);
@@ -57,11 +58,6 @@ settings.load()
            document.documentElement.style.setProperty(key, settings.theme.variables[key]);
        }
    })
-    .then(() => {
-        console.debug('[Init] Load front page categories and products.');
-        const categoriesStore = useCategoriesStore();
-        categoriesStore.fetchTopCategories();
-    })
    .then(() => new AppMetaInitializer(settings).init())
    .then(() => { appLoading.unmount(); app.mount('#app'); })
    .then(() => window.Telegram.WebApp.ready())
--- a/frontend/spa/src/stores/BlocksStore.js
+++ b/frontend/spa/src/stores/BlocksStore.js
@@ -0,0 +1,32 @@
+import {defineStore} from "pinia";
+import {processBlock} from "@/utils/ftch.js";
+
+export const useBlocksStore = defineStore('blocks', {
+    state: () => ({
+        blocks: [],
+    }),
+
+    actions: {
+        async processBlocks(rawBlocks) {
+            const results = await Promise.allSettled(
+                rawBlocks.map(block => {
+                    console.debug('[Blocks Store]: Process block ', block);
+                    return processBlock(block)
+                        .then(response => response);
+                })
+            );
+
+            this.blocks = results
+                .map(r => {
+                    if (r.status === 'fulfilled') {
+                        return r.value.data;
+                    } else {
+                        return {
+                            is_enabled: true,
+                            type: 'error',
+                        };
+                    }
+                });
+        }
+    },
+});
--- a/frontend/spa/src/stores/CategoriesStore.js
+++ b/frontend/spa/src/stores/CategoriesStore.js
@@ -25,20 +25,6 @@ export const useCategoriesStore = defineStore('categories', {
            }
        },

-        async fetchTopCategories() {
-            try {
-                this.isLoading = true;
-                const response = await ftch('categoriesList', {
-                    forMainPage: true,
-                });
-                this.topCategories = response.data;
-            } catch (error) {
-                console.error(error);
-            } finally {
-                this.isLoading = false;
-            }
-        },
-
        async findCategoryById(id, list = []) {
            if (! id) return null;

--- a/frontend/spa/src/stores/SettingsStore.js
+++ b/frontend/spa/src/stores/SettingsStore.js
@@ -24,10 +24,11 @@ export const useSettingsStore = defineStore('settings', {
            }
        },
        texts: {
-            no_more_products: 'Нет товаров',
-            empty_cart: 'Корзина пуста',
-            order_created_success: 'Заказ успешно оформлен.',
+            text_no_more_products: 'Нет товаров',
+            text_empty_cart: 'Корзина пуста',
+            text_order_created_success: 'Заказ успешно оформлен.',
        },
+        mainpage_blocks: [],
    }),

    actions: {
@@ -51,6 +52,7 @@ export const useSettingsStore = defineStore('settings', {
            this.feature_vouchers = settings.feature_vouchers;
            this.currency_code = settings.currency_code;
            this.texts = settings.texts;
+            this.mainpage_blocks = settings.mainpage_blocks;
        }
    }
 });
--- a/frontend/spa/src/stores/SlidersStore.js
+++ b/frontend/spa/src/stores/SlidersStore.js
@@ -1,26 +0,0 @@
-import {defineStore} from "pinia";
-import {fetchBanner} from "@/utils/ftch.js";
-
-export const useSlidersStore = defineStore('sliders', {
-    state: () => ({
-        mainpage_slider: {
-            is_enabled: false,
-            space_between: 30,
-            autoplay: false,
-            effect: 'cube', // null, flip, cards, cube
-            pagination: false,
-            scrollbar: false,
-            free_mode: false,
-            loop: false,
-            slides: [],
-        },
-    }),
-
-    actions: {
-        async fetchMainpageSlider() {
-            console.debug('[Sliders Store] Fetch mainpage slider from server.');
-            const response = await fetchBanner();
-            this.mainpage_slider = Object.assign({}, this.mainpage_slider, response.data);
-        }
-    },
-});
--- a/frontend/spa/src/style.css
+++ b/frontend/spa/src/style.css
@@ -4,8 +4,6 @@
 }

 html, body, #app {
-    width: 100%;
-    height: 100%;
    overflow-x: hidden;
 }

@@ -58,7 +56,12 @@ html {
 }

 .telecart-main-section {
-    padding-top: calc(var(--tg-content-safe-area-inset-top, 0rem) + var(--tg-safe-area-inset-top, 0rem) + var(--tc-navbar-min-height));
+    padding-top: calc(
+            var(--tg-content-safe-area-inset-top, 0rem)
+            + var(--tg-safe-area-inset-top, 0rem)
+            + var(--tc-navbar-min-height)
+            + 1rem
+    );
 }

 .swiper-pagination-bullets {
--- a/frontend/spa/src/utils/ftch.js
+++ b/frontend/spa/src/utils/ftch.js
@@ -16,7 +16,7 @@ export const apiFetch = ofetch.create({
            options.headers = {
                ...options.headers,
                'X-Telegram-InitData': encoded,
-            }
+            };
        }
    },
 });
@@ -24,7 +24,7 @@ export const apiFetch = ofetch.create({
 async function ftch(action, query = null, json = null) {
    const options = {
        method: json ? 'POST' : 'GET',
-    }
+    };
    if (query) options.query = query;
    if (json) options.body = json;

@@ -92,8 +92,8 @@ export async function setVoucher(voucher) {
    });
 }

-export async function fetchBanner() {
-    return await ftch('banner');
+export async function processBlock(block) {
+    return await ftch('processBlock', null, block);
 }

 export default ftch;
--- a/frontend/spa/src/views/Cart.vue
+++ b/frontend/spa/src/views/Cart.vue
@@ -125,7 +125,7 @@
        class="text-center rounded-2xl"
    >
      <div class="text-5xl mb-4">🛒</div>
-      <p class="text-lg mb-3">{{ settings.texts.empty_cart }}</p>
+      <p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
      <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
    </div>
  </div>
--- a/frontend/spa/src/views/CategoriesList.vue
+++ b/frontend/spa/src/views/CategoriesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5 pb-20">
    <h2 class="text-3xl mb-5">Категории</h2>

    <div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">
--- a/frontend/spa/src/views/Filters.vue
+++ b/frontend/spa/src/views/Filters.vue
@@ -79,7 +79,7 @@ const applyFilters = async () => {
  yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_APPLY);
  await nextTick();
  router.back();
-}
+};

 const resetFilters = async () => {
  filtersStore.applied = filtersStore.default;
@@ -89,7 +89,7 @@ const resetFilters = async () => {
  await nextTick();
  window.scrollTo(0, 0);
  router.back();
-}
+};

 onMounted(async () => {
  console.debug('Filters: OnMounted');
--- a/frontend/spa/src/views/Home.vue
+++ b/frontend/spa/src/views/Home.vue
@@ -1,47 +1,18 @@
 <template>
  <div ref="goodsRef" class="pb-20">
-    <CategoriesInline/>
-
-    <div class="overflow-hidden">
-      <MainpageSlider/>
-    </div>
-
-    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
-      <div class="flex justify-center">
-        <button
-            @click="showFilters"
-            class="btn shadow-xl relative"
-            :class="{'btn-accent' : filtersStore.isFiltersChanged}"
-        >
-          <IconFunnel/>
-          Фильтры
-          <span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
-        </button>
-      </div>
-    </div>
-
-    <ProductsList
-        :products="products"
-        :hasMore="hasMore"
-        :isLoading="isLoading"
-        :isLoadingMore="isLoadingMore"
-        @loadMore="onLoadMore"
-    />
+    <MainPage/>
  </div>
 </template>

 <script setup>
-import ProductsList from "@/components/ProductsList.vue";
-import CategoriesInline from "../components/CategoriesInline.vue";
-import {onActivated, onMounted, ref, toRaw} from "vue";
-import IconFunnel from "@/components/Icons/IconFunnel.vue";
+import {onActivated, onMounted} from "vue";
 import {useRouter} from "vue-router";
-import ftch from "@/utils/ftch.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
-import MainpageSlider from "@/components/MainpageSlider.vue";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
+import MainPage from "@/components/MainPage/MainPage.vue";
+import {useBlocksStore} from "@/stores/BlocksStore.js";

 defineOptions({
  name: 'Home'
@@ -52,79 +23,10 @@ const filtersStore = useProductFiltersStore();
 const yaMetrika = useYaMetrikaStore();
 const haptic = window.Telegram.WebApp.HapticFeedback;
 const settings = useSettingsStore();
-
-const products = ref([]);
-const hasMore = ref(false);
-const isLoading = ref(false);
-const isLoadingMore = ref(false);
-const page = ref(1);
-const perPage = 20;
-
-function showFilters() {
-  haptic.impactOccurred('soft');
-  router.push({name: 'filters'});
-}
-
-async function fetchProducts() {
-  try {
-    isLoading.value = true;
-    console.debug('Home: Load products for Main Page.');
-    console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
-    const response = await ftch('products', null, toRaw({
-      page: page.value,
-      perPage: perPage,
-      filters: filtersStore.applied,
-    }));
-    products.value = response.data;
-    hasMore.value = response.meta.hasMore;
-    console.debug('Home: Products for main page loaded.');
-
-    yaMetrika.dataLayerPush({
-      ecommerce: {
-        currencyCode: settings.currency_code,
-        impressions: products.value.map((product, index) => {
-          return {
-            id: product.id,
-            name: product.name,
-            price: product.final_price_numeric,
-            brand: product.manufacturer_name,
-            category: product.category_name,
-            list: 'Главная страница',
-            position: index,
-            discount: product.price_numeric - product.final_price_numeric,
-            quantity: product.product_quantity,
-          };
-        }),
-      },
-    });
-  } catch (error) {
-    console.error(error);
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-async function onLoadMore() {
-  try {
-    console.debug('Home: onLoadMore');
-    if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
-    isLoadingMore.value = true;
-    page.value++;
-    console.debug('Home: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
-    const response = await ftch('products', null, toRaw({
-      page: page.value,
-      filters: filtersStore.applied,
-    }));
-    products.value.push(...response.data);
-    hasMore.value = response.meta.hasMore;
-  } catch (error) {
-    console.error(error);
-  } finally {
-    isLoadingMore.value = false;
-  }
-}
+const blocks = useBlocksStore();

 onActivated(() => {
+  console.debug("[Home] Home Activated");
  yaMetrika.pushHit('/', {
    title: 'Главная страница',
  });
@@ -134,8 +36,6 @@ onActivated(() => {
 onMounted(async () => {
  window.document.title = 'Главная страница';
  console.debug("[Home] Home Mounted");
-  console.debug("[Home] Scroll top");
-  await fetchProducts();
  window.scrollTo(0, 0);
 });
 </script>
--- a/frontend/spa/src/views/OrderCreated.vue
+++ b/frontend/spa/src/views/OrderCreated.vue
@@ -8,7 +8,7 @@
      </div>

      <p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
-      <p class="text-center mb-4">{{ settings.texts.order_created_success }}</p>
+      <p class="text-center mb-4">{{ settings.texts.text_order_created_success }}</p>

      <ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
        <li class="list-row flex justify-between">