imgs upd

src/components/Devices.tsx

@@ -55,6 +55,7 @@ function DesktopDevice({
     <motion.div
       ref={root}
       className="py-10 border-b border-[#3D425C] flex justify-between items-start relative [clip-path:polygon(0%_-50%,100%_-50%,100%_100%,-50%_100%)]"
+      style={{ maxHeight: 112 + descriptionHeight + 21 }}
       animate={{
         height: hovered
           ? (root.current?.clientHeight ?? 0) + descriptionHeight + 24
@@ -89,7 +90,7 @@ function DesktopDevice({
           <motion.img
             src={img}
             alt={title}
-            className="bottom-0 right-[calc(144/1552*100%)] w-[calc(560/1552*100%)] absolute"
+            className="bottom-0 right-[calc(144/1552*100%)] w-[calc(560/1552*100%)] max-w-[560px] absolute"
             initial={{ opacity: 0, y: 500 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 100 }}

src/components/Promotion.tsx

@@ -64,13 +64,13 @@ function DesktopPromotionFeature({
 
   const [expanded, setExpanded] = useState(false);
 
+  const inView = useInView(ref);
+
   useEffect(
     () => setExpanded(hash.slice(1) === hashes.get(number)),
     [hash, number],
   );
 
-  const inView = useInView(ref);
-
   useEffect(() => {
     if (!inView) setExpanded(false);
   }, [inView]);
@@ -110,7 +110,7 @@ function DesktopPromotionFeature({
           transition={{ duration: 1 }}
           animate={{
             translateX: expanded
-              ? (images.length - 1) * width * 0.15 + (images.length - 2) * 8
+              ? (images.length - 1) * width * 0.15 + (images.length - 1) * 8
               : 0,
           }}
         >
@@ -121,7 +121,7 @@ function DesktopPromotionFeature({
                 src={image}
                 alt={title}
                 transition={{ duration: 0.5 }}
-                className="object-cover h-full pointer-events-none aspect-video"
+                className="object-cover h-full pointer-events-none"
                 animate={{
                   maxHeight:
                     expanded && index === 0 ? 0.265 * width : 0.0875 * width,
@@ -155,12 +155,12 @@ function PromotionFeature({
 
   const ref = useRef<HTMLDivElement>(null);
 
+  const inView = useInView(ref);
+
   useEffect(() => {
     setExpanded(hash.slice(1) === hashes.get(number));
   }, [hash, number]);
 
-  const inView = useInView(ref);
-
   useEffect(() => {
     if (!inView) setExpanded(false);
   }, [inView]);

src/consts/promotionFeatures.ts

@@ -15,24 +15,25 @@ export const promotionFeatures: IPromotionFeature[] = [
     description:
       'Дает возможность посетителям самостоятельно искать, фильтровать, сравнивать и рассматривать 3D модели продуктов.',
     title: 'Интерактивный каталог продукции',
-    images: [
-      '/images/promotion/devices/1.jpg',
-      '/images/promotion/devices/2.jpg',
-    ],
+    images: ['/images/promotion/catalog/1.jpg'],
   },
   {
     description:
       'Комплекс сочетающий в себя физический макет и трехмерный интерактивный контентом. Сочетание физического макета и виртуального контента создает эффект присутствия и погружения. Посетители могут лучше прочувствовать замысел и идею проекта.',
     title: '3D интерактивные макеты',
-    images: ['/images/promotion/catalog/1.jpg'],
+    images: [
+      '/images/promotion/templates/1.jpg',
+      '/images/promotion/templates/2.jpg',
+    ],
   },
   {
     description:
       'Дают возможность удаленно демонстрировать экспонаты, проводить презентации, организовывать виртуальные туры. Это повышает доступность и географию охвата мероприятия.',
     title: 'Приложения с\xa0виртуальной и дополненной реальностью',
     images: [
-      '/images/promotion/templates/1.jpg',
-      '/images/promotion/templates/2.jpg',
+      '/images/promotion/arvr/1.jpg',
+      '/images/promotion/arvr/2.jpg',
+      '/images/promotion/arvr/3.jpg',
     ],
   },
   {