Merge branch 'master' of http://192.168.1.163:3000/mikhail_lanskikh/graff.estate-nextjs-updated

src/components/pages/PrimePageMobile/CartegoryHeader.tsx

@@ -13,7 +13,9 @@ function CartegoryHeader({
   return (
     <div className='flex gap-3 items-center py-1.75 relative'>
       <p className='heading2'>{titleCategory}</p>
-      <QuestionIcon className='w-4 h-4' onClick={() => setOpenModal(true)} />
+      <div className='w-10 h-4' onClick={() => setOpenModal(true)}>
+        <QuestionIcon className='w-4 h-4' />
+      </div>
       <AnimatePresence>
         {openModal && (
           <CategoryModal

src/components/pages/PrimePageMobile/CategoryCounter.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { categories } from '@/consts/categories';
 import PlusIcon from '../../../../public/icons/plus.svg';
-import { imagesCategories } from '@/consts/categories';
+import { imagesCategories } from '@/consts/imageOfCategories';
 import { useUnit } from 'effector-react';
 import {
   $configurationStore,
@@ -83,11 +83,11 @@ function CategoryCounter({
               })}
             >
               {typeof item === 'object' && 'name' in item && (
-                <p className="mt-auto btns">{item.name}</p>
+                <p className='mt-auto btns'>{item.name}</p>
               )}
             </div>
-            <div className="w-full rounded-b-2xl bg-[#37393B99] px-1 py-2">
-              <div className="flex justify-between items-center">
+            <div className='w-full rounded-b-2xl bg-[#37393B99] px-1 py-2'>
+              <div className='flex justify-between items-center'>
                 <div
                   className={`px-3 py-2 ${
                     itemFromState === 0 || itemFromState === 250
@@ -97,17 +97,17 @@ function CategoryCounter({
                   onClick={() => handleDecrement(index)}
                 >
                   <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
+                    width='16'
+                    height='16'
+                    viewBox='0 0 16 16'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
                   >
                     <path
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                      d="M2 7.3335L7.33335 7.3335L8.66669 7.3335L14 7.3335L14 8.66683L8.66666 8.66684H7.33333L2 8.66683L2 7.3335Z"
-                      fill="currentColor"
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M2 7.3335L7.33335 7.3335L8.66669 7.3335L14 7.3335L14 8.66683L8.66666 8.66684H7.33333L2 8.66683L2 7.3335Z'
+                      fill='currentColor'
                     />
                   </svg>
                 </div>
@@ -137,7 +137,7 @@ function CategoryCounter({
                   }`}
                   onClick={() => handleIncrement(index)}
                 >
-                  <PlusIcon className="w-5 h-5" />
+                  <PlusIcon className='w-5 h-5' />
                 </div>
               </div>
             </div>

src/components/pages/PrimePageMobile/CategoryModal.tsx

@@ -1,7 +1,29 @@
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion, PanInfo } from 'framer-motion';
 import Close from '../../../../public/icons/close.svg';
 import Coin from '../../../../public/icons/coin.svg';
-import { categories } from '@/consts/categories';
+import { categories, categoryDescription } from '@/consts/categories';
+import { useState } from 'react';
+
+const variantsAnimations = {
+  enter: (direction: number) => {
+    return {
+      x: direction > 0 ? 300 : -300,
+      opacity: 0,
+    };
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.2 },
+  },
+  exit: (direction: number) => {
+    return {
+      x: direction < 0 ? 300 : -300,
+      opacity: 0,
+      transition: { duration: 0.1 },
+    };
+  },
+};
 
 function CategoryModal({
   titleCategory,
@@ -10,58 +32,95 @@ function CategoryModal({
   titleCategory: keyof typeof categories;
   setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
+  const description = categoryDescription[titleCategory];
+  const [[page, direction], setPage] = useState([0, 0]);
+
+  const paginate = (newDirection: number) => {
+    if (
+      (newDirection > 0 && page < description.length - 1) ||
+      (newDirection < 0 && page > 0)
+    ) {
+      setPage([page + newDirection, newDirection]);
+    }
+  };
+  function onDragEnd(
+    event: MouseEvent | TouchEvent | PointerEvent,
+    { offset, velocity }: PanInfo
+  ) {
+    const swipe = Math.abs(offset.x) * velocity.x;
+    const swipeThreshold = 100;
+
+    if (swipe < -swipeThreshold) {
+      paginate(1);
+    } else if (swipe > swipeThreshold) {
+      paginate(-1);
+    }
+  }
+
   return (
-    <motion.div
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.9 }}
-      transition={{ duration: 0.3, ease: 'easeOut' }}
-      className="fixed inset-0 w-full h-full bg-[#0F1011] z-[1000] px-2.5 py-4 flex flex-col gap-5"
-    >
-      <div className="h-12 flex justify-between items-center">
-        <h1
-          className={`${
-            titleCategory === 'Детальная проработка окружения'
-              ? 'text-[24px]'
-              : 'line1'
-          } leading-[0.85] tracking-[-0.04em]`}
-        >
+    <div className='fixed inset-0 bg-[#0F1011] z-[1000] px-2.5 py-4 flex flex-col gap-5 h-full w-full'>
+      <div className='h-12 flex justify-between items-center'>
+        <h1 className={`text-[20px] leading-[0.85] tracking-[-0.04em] w-fit`}>
           {titleCategory}
         </h1>
-        <div
-          className="w-12 h-12 bg-[#37393B99] rounded-2xl flex items-center justify-center"
+        <button
+          className='w-12 h-12 bg-[#37393B99] rounded-2xl flex items-center justify-center'
           onClick={() => setOpenModal(false)}
         >
-          <Close className="w-5 h-5" />
-        </div>
+          <Close className='w-5 h-5' />
+        </button>
       </div>
-      <div>
-        <div className="bg-no-repeat bg-cover bg-[url(/img/pages/prime/wallPanel.png)] w-[340px] h-[228px]"></div>
-        <div className="w-full bg-[#37393B99] rounded-2xl px-5 py-6 flex flex-col gap-3">
-          <h2 className="font-medium text-[20px] leading-[24px] tracking-[-0.02em]">
-            Аватар клиента
-          </h2>
-          <p className="font-normal text-[14px] leading-[135%] tracking-[0em]">
-            Покупатель создаёт свою виртуальную фигурку, которая двигается по
-            3D-сцене от первого или третьего лица. Это усиливает эффект
-            вовлечения, потому что человек видит «себя» в будущем жилье.
-          </p>
-          <p className="font-normal text-[14px] leading-[135%] tracking-[0em]">
-            «Войдя» в роль внутри 3D-презентации, покупатель ощущает реальное
-            присутствие и меньше сомневается, подходит ли ему такой формат
-            пространства
-          </p>
-          <div className="mt-[32px] flex gap-2">
-            <div className="btns w-fit px-3 py-[7px] rounded-[17px] bg-gradient-to-r from-[#6078F2] via-[#7583f3] to-[#C868F5]">
-              Премиум
-            </div>
-            <div className="btns w-fit px-3 py-[7px] rounded-[17px] bg-[#37393B99] flex gap-1 items-center">
-              <Coin className="w-4 h-4" /> Опция
+      <AnimatePresence custom={direction}>
+        <motion.div
+          key={page}
+          initial='enter'
+          animate='center'
+          exit='exit'
+          custom={direction}
+          drag='x'
+          dragConstraints={{ left: 0, right: 0 }}
+          dragElastic={0.1}
+          onDragEnd={onDragEnd}
+          variants={variantsAnimations}
+          className='absolute top-20 left-1/2 -translate-x-1/2 h-full w-full flex flex-col justify-top items-center'
+        >
+          <div
+            className={`bg-no-repeat w-[94.444vw] h-[30vh] ${description[page].content}`}
+          ></div>
+          <div className='bg-[#37393B99] rounded-2xl px-5 py-6 flex flex-col gap-3 w-[95%]'>
+            <h2 className='font-medium text-[20px] leading-[24px] tracking-[-0.02em]'>
+              {description[page].title}
+            </h2>
+            <p className='font-normal text-[14px] leading-[135%] tracking-[0em]'>
+              {description[page].text1}
+            </p>
+            <p className='font-normal text-[14px] leading-[135%] tracking-[0em]'>
+              {description[page].text2}
+            </p>
+            <div className='mt-[32px] flex gap-2'>
+              <div className='btns w-fit px-3 py-[7px] rounded-[17px] bg-gradient-to-r from-[#6078F2] via-[#7583f3] to-[#C868F5]'>
+                {description[page].package}
+              </div>
+              {description[page].isOption && (
+                <div className='btns w-fit px-3 py-[7px] rounded-[17px] bg-[#37393B99] flex gap-1 items-center'>
+                  <Coin className='w-4 h-4' /> Опция
+                </div>
+              )}
             </div>
           </div>
+        </motion.div>
+        <div className='absolute w-full flex justify-center gap-0.5 bottom-4'>
+          {description.map((item, index) => (
+            <div
+              className={`w-2 h-2 rounded-full ${
+                index === page ? 'bg-white' : 'bg-[#37393B99]'
+              }`}
+              key={index}
+            ></div>
+          ))}
         </div>
-      </div>
-    </motion.div>
+      </AnimatePresence>
+    </div>
   );
 }
 

src/components/pages/PrimePageMobile/CheckboxGroup.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 'use client';
 import CheckboxItem from '../../../ui/CheckboxItem';
-import { imagesCategories } from '@/consts/categories';
+import { imagesCategories } from '@/consts/imageOfCategories';
 import Switch from '../../../../public/icons/switch.svg';
 import { OptionTitles } from '@/types/IConfigurator';
 
@@ -10,7 +10,7 @@ export function CheckboxGroup<
   V extends OptionTitles[T]
 >({ titleCategory, variants }: { titleCategory: T; variants: V }) {
   return (
-    <div className="flex gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory">
+    <div className='flex gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory'>
       {variants.map((variantItem, index) => {
         const imageData = imagesCategories[titleCategory][index];
 
@@ -21,7 +21,7 @@ export function CheckboxGroup<
             item={variantItem}
             className={imageData.className}
           >
-            <div className="relative w-full h-full">
+            <div className='relative w-full h-full'>
               {imageData.source.map((imageItem, index) => (
                 <img
                   src={`/img/pages/prime/${imageItem}`}
@@ -31,8 +31,8 @@ export function CheckboxGroup<
                 />
               ))}
               {imageData.source.length === 2 && (
-                <div className="w-7.75 h-7.75 bg-[#FF4517] rounded-full relative left-1/2 -translate-x-1/2 flex items-center justify-center top-9">
-                  <Switch className="w-4 h-4" />
+                <div className='w-7.75 h-7.75 bg-[#FF4517] rounded-full relative left-1/2 -translate-x-1/2 flex items-center justify-center top-9'>
+                  <Switch className='w-4 h-4' />
                 </div>
               )}
             </div>

src/components/pages/PrimePageMobile/ImageSwitcher.tsx

@@ -4,7 +4,7 @@ import {
 } from '@/stores/configurator-store/configurationStore';
 import { Design } from '@/types/IConfigurator';
 import { useUnit } from 'effector-react';
-import { imagesCategories } from '@/consts/categories';
+import { imagesCategories } from '@/consts/imageOfCategories';
 import { useState } from 'react';
 
 export default function ImageSwitcher({ varaints }: { varaints: Design[] }) {

src/consts/categories.ts

@@ -18,22 +18,6 @@ interface Categories {
   'Удаленная демонстрация': number;
 }
 
-export type SourceImageCategory = {
-  className: string;
-  source: string[];
-  childrenClassName: string;
-};
-
-export interface ImagesCategories {
-  Оборудование: SourceImageCategory[];
-  'Детальная проработка окружения': SourceImageCategory[];
-  'Дизайн интерьеров': SourceImageCategory[];
-  'Рекламные материалы': SourceImageCategory[];
-  Опции: SourceImageCategory[];
-  Сезонность: SourceImageCategory[];
-  'Удаленная демонстрация': SourceImageCategory[];
-}
-
 export const categories: Categories = {
   Оборудование: [
     'Настенная панель',
@@ -69,163 +53,252 @@ export const categories: Categories = {
   'Удаленная демонстрация': 0,
 };
 
-export const imagesCategories: ImagesCategories = {
+interface CategoryDescription {
+  [key: string]: {
+    title: string;
+    content: string;
+    text1: string;
+    text2: string;
+    package: string;
+    isOption: boolean;
+  }[];
+}
+
+export const categoryDescription: CategoryDescription = {
   Оборудование: [
     {
-      className:
-        'bg-no-repeat bg-cover bg-[left_4px_top_2px] bg-[url(/img/pages/prime/wallPanel.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Настенная панель',
+      content: 'bg-[url(/img/pages/prime/wallPanel.png)] bg-center bg-cover',
+      text1:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      text2:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      package: 'Стандарт',
+      isOption: true,
     },
     {
-      className:
-        'bg-no-repeat bg-cover bg-[left_6px_top_6px] bg-[url(/img/pages/prime/brandTablet800.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Брендированный стол 800 нит',
+      content:
+        'bg-[url(/img/pages/prime/brandTablet800.png)] bg-contain bg-center',
+      text1:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      text2:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      package: 'Комфорт +',
+      isOption: true,
     },
     {
-      className:
-        'bg-no-repeat bg-cover bg-[left_6px_top_6px] bg-[url(/img/pages/prime/brandTablet800.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Брендированный стол 2500 нит',
+      content:
+        'bg-[url(/img/pages/prime/brandTablet800.png)] bg-contain bg-center',
+      text1:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      text2:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed vitae mauris vel justo auctor gravida. Curabitur vehicula, orci nec cursus volutpat, libero mauris feugiat elit, a tempor libero turpis nec nisi.',
+      package: 'Бизнес',
+      isOption: false,
     },
   ],
   'Детальная проработка окружения': [
     {
-      className: '',
-      source: [],
-      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+      title: 'Детальная проработка ЖК и бижайшего благоустойства',
+      content:
+        'bg-[url(/img/pages/prime/details/details500.jpg)] rounded-2xl bg-cover bg-center',
+      text1:
+        'Когда клиент видит подробно отображённый район, он не тратит время на отдельный поиск инфографики и фотографий, а воспринимает всё в единой картине. Такое комплексное представление локации повышает доверие и ускоряет осознание удобств будущего проживания.',
+      text2:
+        'Мы можем проработать детально как только ближайшие к ЖК здания, так и весь район.',
+      package: 'Стандарт',
+      isOption: false,
     },
   ],
   'Дизайн интерьеров': [
     {
-      className: '',
-      source: [],
-      childrenClassName:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior1.jpg)]',
+      title: 'White Box',
+      content:
+        'bg-[url(/img/pages/prime/designInterior1.jpg)] rounded-2xl bg-cover',
+      text1: 'White Box — это квартиры без интерьеров',
+      text2: '',
+      package: 'Стандарт',
+      isOption: false,
     },
     {
-      className: '',
-      source: [],
-      childrenClassName:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior2.jpg)]',
+      title: 'WhiteBox +',
+      content:
+        'bg-[url(/img/pages/prime/designInterior2.jpg)] rounded-2xl bg-cover',
+      text1: 'White Box + — в квартирах типовая мебель',
+      text2: '',
+      package: 'Комфорт +',
+      isOption: false,
     },
     {
-      className: '',
-      source: [],
-      childrenClassName:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior3.jpg)]',
+      title: 'Уникальный дизайн интерьеров',
+      content:
+        'bg-[url(/img/pages/prime/designInterior3.jpg)] rounded-2xl bg-cover',
+      text1:
+        'Уникальный дизайн интерьеров — это когда квартира «оживает» мебелью и декором, проще эмоционально «зацепить» потенциального покупателя.',
+      text2:
+        'Дизайн интерьеров по референсам от заказчика 1 стиль для каждой типовой квартиры',
+      package: 'Бизнес',
+      isOption: false,
     },
     {
-      className: '',
-      source: [],
-      childrenClassName:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior4.jpg)]',
-    },
-  ],
-  'Рекламные материалы': [
-    {
-      className:
-        'bg-no-repeat bg-contain bg-[top_8px_center] bg-[url(/img/pages/prime/architecture.png)]',
-      source: [''],
-      childrenClassName: '',
-    },
-    {
-      className:
-        'bg-no-repeat bg-[length:57px_112px] bg-center bg-[url(/img/pages/prime/phone.png)]',
-      source: [''],
-      childrenClassName: '',
+      title: 'Уникальный дизайн интерьеров (3 стиля)',
+      content:
+        'bg-[url(/img/pages/prime/designInterior4.jpg)] rounded-2xl bg-cover',
+      text1:
+        'Уникальный дизайн интерьеров — это когда квартира «оживает» мебелью и декором, проще эмоционально «зацепить» потенциального покупателя.',
+      text2:
+        'Уникальный дизайн интерьеров, 3 стиля для каждой типовой квартиры',
+      package: 'Премиум',
+      isOption: false,
     },
   ],
   Опции: [
     {
-      className: '',
-      source: ['scenario.png'],
-      childrenClassName: 'w-34 h-19.25 top-1/2 -translate-y-1/2',
+      title: 'Сценарии проживания',
+      content:
+        'bg-[url(/img/pages/prime/scenarioModal.jpg)] bg-center rounded-2xl bbg-contain',
+      text1:
+        'Сценарии проживания — это уже не просто «стены и планировка», а история жизни в новом месте. Такой приём отлично работает на эмоциональном уровне и помогает клиенту представить себя внутри проекта.',
+      text2:
+        'Включаются заранее смоделированные сцены с персонажами, отображающими разные повседневные сценарии (семья, одиночный житель).',
+      package: 'Премиум',
+      isOption: false,
     },
     {
-      className: '',
-      source: ['avatar.png'],
-      childrenClassName: 'w-20 h-20 top-2.5 rounded-full',
+      title: 'Аватар клиента',
+      content:
+        'bg-[url(/img/pages/prime/avatar.png)] bg-center rounded-2xl bg-contain',
+      text1:
+        'Аватар клиента — ещё один шаг к полной цифровой симуляции. «Войдя» в роль внутри 3D-презентации, покупатель ощущает реальное присутствие и меньше сомневается, подходит ли ему такой формат пространства.',
+      text2: '',
+      package: 'Комфорт +',
+      isOption: false,
     },
     {
-      className: '',
-      source: ['configuratorInterier1.jpg', 'configuratorInterier2.jpg'],
-      childrenClassName:
-        'w-16 h-16 mt-5 rounded-full [&:nth-child(1)]:translate-x-[-100%] [&:nth-child(2)]:translate-x-[0%]',
+      title: 'Конфигуратор интерьера',
+      content:
+        'bg-[url(/img/pages/prime/configuratorInterior.png)] bg-center rounded-2xl bg-cover',
+      text1:
+        'Конфигуратор интерьера убирает лишние сомнения: клиент видит сразу несколько вариантов отделки и выбирает тот, что ближе к его вкусам — что часто ускоряет заключение договора.',
+      text2:
+        'Несколько пресетов материалов и текстур «переключаются» в UI, показывая, как меняется внешний вид квартиры.',
+      package: 'Комфорт +',
+      isOption: true,
     },
     {
-      className:
-        'bg-no-repeat bg-[length:109px_58px] bg-[top_29px_left_21px] bg-[url(/img/pages/prime/vr.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Экскурсия в VR',
+      content:
+        'bg-[url(/img/pages/prime/vrvr.png)] rounded-2xl bg-cover bg-center',
+      text1:
+        'VR-экскурсия — современный формат, мгновенно завоёвывающий внимание. Покупатель ощущает себя в ещё не построенном доме, и это формирует уверенность, что «это именно то».',
+      text2:
+        'Система рендерит сцену с учётом положения головы и контроллеров, имитируя настоящую прогулку.',
+      package: 'Бизнес',
+      isOption: true,
     },
     {
-      className:
-        'bg-no-repeat bg-[24px_35px] bg-[url(/img/pages/prime/black.png),_url(/img/pages/prime/finance.png)] bg-no-repeat bg-contain',
-      source: [],
-      childrenClassName: '',
+      title: 'Финансовые инсументы (ипотека, рассрочка)',
+      content: 'bg-[url(/img/pages/prime/finance.png)] rounded-2xl bg-top',
+      text1:
+        'Финансовые инструменты превращают продажу в единый процесс: все расчёты на месте, клиент не уходит «подумать» и не ищет сторонние калькуляторы, а значит, высок шанс, что сделка состоится быстрее.',
+      text2:
+        'Клиент вводит параметры (срок ипотеки, сумму, первоначальный взнос), а система моментально выводит график или общую стоимость.',
+      package: 'Бизнес',
+      isOption: false,
     },
     {
-      className:
-        'bg-[left_36px_top_1px] bg-no-repeat bg-contain bg-[url(/img/pages/prime/interactiveWindow.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Интерактивное окно',
+      content:
+        'bg-[url(/img/pages/prime/interactiveWindow.png)] rounded-2xl bg-center bg-contain',
+      text1:
+        'Интерактивное окно выделяется среди стандартных экспозиций: клиенты подходят, «заглядывают» в виртуальный вид, и это запоминается надолго, усиливая эмоциональную связь с проектом.',
+      text2:
+        'Встроенный экран с интерактивным слоем реагирует на положение головы, подстраивая под нужный ракурс изображение на экране',
+      package: 'Премиум',
+      isOption: false,
     },
     {
-      className: '',
-      source: [
-        'moduleEngineer1.jpg',
-        'moduleEngineer2.jpg',
-        'moduleEngineer3.jpg',
-      ],
-      childrenClassName: 'w-14 h-14 rounded-full top-8',
+      title: 'Модуль инженерных систем',
+      content:
+        'bg-[url(/img/pages/prime/moduleEngineerModal.png)] rounded-2xl bg-center',
+      text1:
+        'Модуль инженерных систем говорит о серьёзности подхода застройщика: если он готов показать инженерную «начинку», значит, скрывать нечего. Это особенно важно для клиентов, которые ценят технологичность.',
+      text2:
+        'Загружаются BIM-данные или 3D-модели коммуникаций, которые в приложении можно «подсветить» в разрезе.',
+      package: 'Комфорт +',
+      isOption: true,
     },
     {
-      className:
-        'bg-no-repeat bg-[length:254px_254px] bg-[url(/img/pages/prime/black.png),_url(/img/pages/prime/wheel.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Дополнительные точки интереса',
+      content:
+        'bg-[url(/img/pages/prime/wheel.png)] rounded-2xl bg-[length:250px] bg-top',
+      text1:
+        'Покупатель имеет возможность оценить всю инфраструктуру ЖК. Это помогает закрывать сделку, особенно если комплекс богат опциями для досуга.',
+      text2:
+        'При нажатии на поинт происходит подлет к точке интереса с возможностью перейти в 3D тур',
+      package: 'Премиум',
+      isOption: true,
     },
     {
-      className:
-        'bg-[left_20px_top_1px] bg-no-repeat bg-[length:140px_100px] bg-[url(/img/pages/prime/analyse.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Аналитика поведения пользователя во время презентации',
+      content: 'bg-[url(/img/pages/prime/analyse.png)] rounded-2xl bg-cover',
+      text1:
+        'Речевая аналитика позволяет совершенствовать отдел продаж, выявляя «болевые» точки общения, улучшать скрипты и грамотно обучать персонал, что приводит к росту конверсии.',
+      text2:
+        'Микрофон записывает разговор, ИИ распознаёт речь, выделяя ключевые слова и создавая статистику.',
+      package: 'Комфорт +',
+      isOption: false,
     },
   ],
   Сезонность: [
     {
-      className:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/summer.jpg)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Сезонность',
+      content: 'bg-[url(/img/pages/prime/summer.jpg)] rounded-2xl bg-cover',
+      text1:
+        'Сезонность даёт дополнительную глубину презентации: покупатель видит, как жилой комплекс выглядит осенью под золотыми листьями или зимой, украшенной гирляндами.',
+      text2:
+        'Это вызывает эмоцию «тёплого дома» в любую погоду, что помогает отстроиться от конкурентов. Переключение готовых наборов текстур и освещения для каждого сезона в движке.',
+      package: 'Стандарт',
+      isOption: false,
+    },
+  ],
+  'Рекламные материалы': [
+    {
+      title: 'Архитектурная визуализация',
+      content:
+        'bg-[url(/img/pages/home/calculator/implemetation_period.png)] rounded-2xl bg-contain bg-center',
+      text1:
+        'Архитектурная визуализация — это «классика» рекламы в недвижимости. Красивые рендеры перекликаются с интерактивной презентацией, формируя единый облик проекта и повышая его узнаваемость.',
+      text2:
+        'Делаются детальные рендеры нужных ракурсов (фасады, дворы, виды) с высоким разрешением и проработанной постобработкой.',
+      package: 'Комфорт +',
+      isOption: false,
     },
     {
-      className:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/winter.jpg)]',
-      source: [],
-      childrenClassName: '',
-    },
-    {
-      className:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/spring.jpg)]',
-      source: [],
-      childrenClassName: '',
-    },
-    {
-      className:
-        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/autumn.jpg)]',
-      source: [],
-      childrenClassName: '',
+      title: '3D-рилс',
+      content:
+        'bg-[url(/img/pages/prime/phonaModal.png)] rounded-2xl bg-center bg-contain',
+      text1:
+        '3D-рилс — это быстрый путь в Instagram, TikTok и остальные соцсети. Наглядная мини-презентация ЖК в динамике, которую можно оперативно выпустить в ленту и зацепить потенциальных клиентов.',
+      text2:
+        'Программа генерирует мини-видео по выбранным камерам/ракурсам, накладывает музыку и тексты.',
+      package: 'Стандарт',
+      isOption: false,
     },
   ],
   'Удаленная демонстрация': [
     {
-      className:
-        'bg-no-repeat bg-[length:298px_169px] h-[219px] bg-center bg-[url(/img/pages/home/motivation/remote_demo.png)]',
-      source: [],
-      childrenClassName: '',
+      title: 'Удаленная демонстрация',
+      content:
+        'bg-[url(/img/pages/home/motivation/remote_demo.png)] rounded-2xl bg-cover',
+      text1:
+        'GRAFF.estate разворачивает «облако» и стримит 3D-сцену на устройство клиента (PC, мобильный), менеджер ведёт экскурсию в режиме реального времени.',
+      text2:
+        'Количество сессий определяет, сколько менеджеров могут одновременно проводить виртуальные показы. Это особенно ценно для крупных застройщиков или в периоды повышенного спроса.',
+      package: 'Премиум',
+      isOption: true,
     },
   ],
 };

src/consts/imageOfCategories.ts

@@ -0,0 +1,175 @@
+export type SourceImageCategory = {
+  className: string;
+  source: string[];
+  childrenClassName: string;
+};
+export interface ImagesCategories {
+  Оборудование: SourceImageCategory[];
+  'Детальная проработка окружения': SourceImageCategory[];
+  'Дизайн интерьеров': SourceImageCategory[];
+  'Рекламные материалы': SourceImageCategory[];
+  Опции: SourceImageCategory[];
+  Сезонность: SourceImageCategory[];
+  'Удаленная демонстрация': SourceImageCategory[];
+}
+
+export const imagesCategories: ImagesCategories = {
+  Оборудование: [
+    {
+      className:
+        'bg-no-repeat bg-cover bg-[left_4px_top_2px] bg-[url(/img/pages/prime/wallPanel.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-cover bg-[left_6px_top_6px] bg-[url(/img/pages/prime/brandTablet800.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-cover bg-[left_6px_top_6px] bg-[url(/img/pages/prime/brandTablet800.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+  ],
+  'Детальная проработка окружения': [
+    {
+      className: '',
+      source: [],
+      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+    },
+  ],
+  'Дизайн интерьеров': [
+    {
+      className: '',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior1.jpg)]',
+    },
+    {
+      className: '',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior2.jpg)]',
+    },
+    {
+      className: '',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior3.jpg)]',
+    },
+    {
+      className: '',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/designInterior4.jpg)]',
+    },
+  ],
+  'Рекламные материалы': [
+    {
+      className:
+        'bg-no-repeat bg-contain bg-[top_8px_center] bg-[url(/img/pages/prime/architecture.png)]',
+      source: [''],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-[length:57px_112px] bg-center bg-[url(/img/pages/prime/phone.png)]',
+      source: [''],
+      childrenClassName: '',
+    },
+  ],
+  Опции: [
+    {
+      className: '',
+      source: ['scenario.png'],
+      childrenClassName: 'w-34 h-19.25 top-1/2 -translate-y-1/2',
+    },
+    {
+      className: '',
+      source: ['avatar.png'],
+      childrenClassName: 'w-20 h-20 top-2.5 rounded-full',
+    },
+    {
+      className: '',
+      source: ['configuratorInterier1.jpg', 'configuratorInterier2.jpg'],
+      childrenClassName:
+        'w-16 h-16 mt-5 rounded-full [&:nth-child(1)]:translate-x-[-100%] [&:nth-child(2)]:translate-x-[0%]',
+    },
+    {
+      className:
+        'bg-no-repeat bg-[length:109px_58px] bg-[top_29px_left_21px] bg-[url(/img/pages/prime/vr.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-[24px_35px] bg-[url(/img/pages/prime/black.png),_url(/img/pages/prime/finance.png)] bg-no-repeat bg-contain',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-[left_36px_top_1px] bg-no-repeat bg-contain bg-[url(/img/pages/prime/interactiveWindow.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className: '',
+      source: [
+        'moduleEngineer1.jpg',
+        'moduleEngineer2.jpg',
+        'moduleEngineer3.jpg',
+      ],
+      childrenClassName: 'w-14 h-14 rounded-full top-8',
+    },
+    {
+      className:
+        'bg-no-repeat bg-[length:254px_254px] bg-[url(/img/pages/prime/black.png),_url(/img/pages/prime/wheel.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-[left_20px_top_1px] bg-no-repeat bg-[length:140px_100px] bg-[url(/img/pages/prime/analyse.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+  ],
+  Сезонность: [
+    {
+      className:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/summer.jpg)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/winter.jpg)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/spring.jpg)]',
+      source: [],
+      childrenClassName: '',
+    },
+    {
+      className:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/autumn.jpg)]',
+      source: [],
+      childrenClassName: '',
+    },
+  ],
+  'Удаленная демонстрация': [
+    {
+      className:
+        'bg-no-repeat bg-[length:298px_169px] h-[219px] bg-center bg-[url(/img/pages/home/motivation/remote_demo.png)]',
+      source: [],
+      childrenClassName: '',
+    },
+  ],
+};