diff --git a/public/icons/coin.svg b/public/icons/coin.svg new file mode 100644 index 00000000..44bce8e7 --- /dev/null +++ b/public/icons/coin.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/pages/PrimePageMobile/CartegoryHeader.tsx b/src/components/pages/PrimePageMobile/CartegoryHeader.tsx index 98e943a6..f1d20624 100644 --- a/src/components/pages/PrimePageMobile/CartegoryHeader.tsx +++ b/src/components/pages/PrimePageMobile/CartegoryHeader.tsx @@ -1,15 +1,27 @@ import { categories } from '@/consts/categories'; import QuestionIcon from '../../../../public/icons/question.svg'; +import { useState } from 'react'; +import CategoryModal from './CategoryModal'; +import { AnimatePresence } from 'framer-motion'; function CartegoryHeader({ titleCategory, }: { titleCategory: keyof typeof categories; }) { + const [openModal, setOpenModal] = useState(false); return ( -
+

{titleCategory}

- + setOpenModal(true)} /> + + {openModal && ( + + )} +
); } diff --git a/src/components/pages/PrimePageMobile/CategoryCounter.tsx b/src/components/pages/PrimePageMobile/CategoryCounter.tsx index ad2c473a..7e3794f5 100644 --- a/src/components/pages/PrimePageMobile/CategoryCounter.tsx +++ b/src/components/pages/PrimePageMobile/CategoryCounter.tsx @@ -71,10 +71,14 @@ function CategoryCounter({ }`} {...(titleCategory === 'Детальная проработка окружения' && { style: { - background: `no-repeat center/cover url(/img/pages/prime/mobile/details/details${detailsImage.replace( + backgroundImage: `url(/img/pages/prime/mobile/details/details${detailsImage.replace( ' ', '_' )}.png)`, + backgroundSize: 'cover', + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + transition: 'background-image 0.5s ease-in-out', }, })} > @@ -86,7 +90,7 @@ function CategoryCounter({
>; +}) { + return ( + +
+

+ {titleCategory} +

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

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

+

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

+

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

+
+
+ Премиум +
+
+ Опция +
+
+
+
+ + ); +} + +export default CategoryModal; diff --git a/src/components/pages/PrimePageMobile/ImageSwitcher.tsx b/src/components/pages/PrimePageMobile/ImageSwitcher.tsx index 9130211d..22cf3c47 100644 --- a/src/components/pages/PrimePageMobile/ImageSwitcher.tsx +++ b/src/components/pages/PrimePageMobile/ImageSwitcher.tsx @@ -25,7 +25,7 @@ export default function ImageSwitcher({ varaints }: { varaints: Design[] }) { return (
{varaints.map((item, index) => {