diff --git a/public/img/pages/prime/configuratorInterior.png b/public/img/pages/prime/configuratorInterior.png new file mode 100644 index 00000000..d52af6f6 Binary files /dev/null and b/public/img/pages/prime/configuratorInterior.png differ diff --git a/public/img/pages/prime/moduleEngineerModal.png b/public/img/pages/prime/moduleEngineerModal.png new file mode 100644 index 00000000..5fff2f08 Binary files /dev/null and b/public/img/pages/prime/moduleEngineerModal.png differ diff --git a/public/img/pages/prime/phonaModal.png b/public/img/pages/prime/phonaModal.png new file mode 100644 index 00000000..58507191 Binary files /dev/null and b/public/img/pages/prime/phonaModal.png differ diff --git a/public/img/pages/prime/scenarioModal.jpg b/public/img/pages/prime/scenarioModal.jpg new file mode 100644 index 00000000..87fb1bb9 Binary files /dev/null and b/public/img/pages/prime/scenarioModal.jpg differ diff --git a/public/img/pages/prime/vrvr.png b/public/img/pages/prime/vrvr.png new file mode 100644 index 00000000..d51863a1 Binary files /dev/null and b/public/img/pages/prime/vrvr.png differ diff --git a/src/components/pages/PrimePageMobile/CartegoryHeader.tsx b/src/components/pages/PrimePageMobile/CartegoryHeader.tsx index f1d20624..89a4b95f 100644 --- a/src/components/pages/PrimePageMobile/CartegoryHeader.tsx +++ b/src/components/pages/PrimePageMobile/CartegoryHeader.tsx @@ -13,7 +13,9 @@ function CartegoryHeader({ return (

{titleCategory}

- setOpenModal(true)} /> +
setOpenModal(true)}> + +
{openModal && ( {typeof item === 'object' && 'name' in item && ( -

{item.name}

+

{item.name}

)}
-
-
+
+
handleDecrement(index)} >
@@ -137,7 +137,7 @@ function CategoryCounter({ }`} onClick={() => handleIncrement(index)} > - +
diff --git a/src/components/pages/PrimePageMobile/CategoryModal.tsx b/src/components/pages/PrimePageMobile/CategoryModal.tsx index 15c2d677..b3f37281 100644 --- a/src/components/pages/PrimePageMobile/CategoryModal.tsx +++ b/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>; }) { + 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 ( - -
-

+
+
+

{titleCategory}

-
setOpenModal(false)} > - -
+ +
-
-
-
-

- Аватар клиента -

-

- Покупатель создаёт свою виртуальную фигурку, которая двигается по - 3D-сцене от первого или третьего лица. Это усиливает эффект - вовлечения, потому что человек видит «себя» в будущем жилье. -

-

- «Войдя» в роль внутри 3D-презентации, покупатель ощущает реальное - присутствие и меньше сомневается, подходит ли ему такой формат - пространства -

-
-
- Премиум -
-
- Опция + + +
+
+

+ {description[page].title} +

+

+ {description[page].text1} +

+

+ {description[page].text2} +

+
+
+ {description[page].package} +
+ {description[page].isOption && ( +
+ Опция +
+ )}
+
+
+ {description.map((item, index) => ( +
+ ))}
-
- + +
); } diff --git a/src/components/pages/PrimePageMobile/CheckboxGroup.tsx b/src/components/pages/PrimePageMobile/CheckboxGroup.tsx index 7c4e9494..e68b314f 100644 --- a/src/components/pages/PrimePageMobile/CheckboxGroup.tsx +++ b/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 ( -
+
{variants.map((variantItem, index) => { const imageData = imagesCategories[titleCategory][index]; @@ -21,7 +21,7 @@ export function CheckboxGroup< item={variantItem} className={imageData.className} > -
+
{imageData.source.map((imageItem, index) => ( ))} {imageData.source.length === 2 && ( -
- +
+
)}
diff --git a/src/components/pages/PrimePageMobile/ImageSwitcher.tsx b/src/components/pages/PrimePageMobile/ImageSwitcher.tsx index 22cf3c47..38f2f07f 100644 --- a/src/components/pages/PrimePageMobile/ImageSwitcher.tsx +++ b/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[] }) { diff --git a/src/consts/categories.ts b/src/consts/categories.ts index 16f8d0ee..bbd20aa8 100644 --- a/src/consts/categories.ts +++ b/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, }, ], }; diff --git a/src/consts/imageOfCategories.ts b/src/consts/imageOfCategories.ts new file mode 100644 index 00000000..723db73c --- /dev/null +++ b/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: '', + }, + ], +};