feat: iplement modal for category

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 (
-    <div className='flex gap-3 items-center py-1.75'>
+    <div className='flex gap-3 items-center py-1.75 relative'>
       <p className='heading2'>{titleCategory}</p>
-      <QuestionIcon className='w-4 h-4' />
+      <QuestionIcon className='w-4 h-4' onClick={() => setOpenModal(true)} />
+      <AnimatePresence>
+        {openModal && (
+          <CategoryModal
+            titleCategory={titleCategory}
+            setOpenModal={setOpenModal}
+          />
+        )}
+      </AnimatePresence>
     </div>
   );
 }

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({
               <div className='flex justify-between items-center'>
                 <div
                   className={`px-3 py-2 ${
-                    itemFromState === 0 || itemFromState === 300
+                    itemFromState === 0 || itemFromState === 250
                       ? 'text-[#37393B]'
                       : 'text-white'
                   }`}

src/components/pages/PrimePageMobile/CategoryModal.tsx

@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion';
+import Close from '../../../../public/icons/close.svg';
+import Coin from '../../../../public/icons/coin.svg';
+import { categories } from '@/consts/categories';
+
+function CategoryModal({
+  titleCategory,
+  setOpenModal,
+}: {
+  titleCategory: keyof typeof categories;
+  setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  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]`}
+        >
+          {titleCategory}
+        </h1>
+        <div
+          className='w-12 h-12 bg-[#37393B99] rounded-2xl flex items-center justify-center'
+          onClick={() => setOpenModal(false)}
+        >
+          <Close className='w-5 h-5' />
+        </div>
+      </div>
+      <div>
+        <div className='bg-no-repeat bg-cover bg-[url(/img/pages/prime/mobile/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' /> Опция
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default CategoryModal;

src/components/pages/PrimePageMobile/ImageSwitcher.tsx

@@ -25,7 +25,7 @@ export default function ImageSwitcher({ varaints }: { varaints: Design[] }) {
   return (
     <div className='flex flex-col gap-1'>
       <div
-        className={`w-full h-[354px] bg-[#37393B99] rounded-2xl ${backgroundImage}`}
+        className={`w-full h-[354px] bg-[#37393B99] rounded-2xl ${backgroundImage} transition-all duration-500`}
       ></div>
       <div className='flex gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory'>
         {varaints.map((item, index) => {