upd

builder.config.json

@@ -0,0 +1,6 @@
+{
+  "command": "bun dev",
+  "serverUrl": "http://localhost:3000",
+  "authenticateProxy": false,
+  "commitMode": "commits"
+}

src/app/(main)/about/page.tsx

@@ -2,6 +2,6 @@ import AboutMain from "@/components/pages/AboutPage/AboutMain";
 import { InProcess } from "@/components/pages/InProcess";
 
 export default function AboutPage() {
-  return <InProcess />;
-  // return <AboutMain />;
+  // return <InProcess />;
+  return <AboutMain />;
 }

src/app/(main)/web/page.tsx

@@ -2,6 +2,6 @@ import { InProcess } from "@/components/pages/InProcess";
 import WebMain from "@/components/pages/WebPage/WebMain";
 
 export default function WebPage() {
-  return <InProcess />;
-  // return <WebMain />;
+  // return <InProcess />;
+  return <WebMain />;
 }

src/components/pages/MainPage/Integrations/IntegrationsDesktop.tsx

@@ -49,7 +49,7 @@ export function IntegrationsDesktop() {
             href="/blog/graff.estate-na-wow-fest-2024"
             mainSrc="/img/pages/home/integrations/upside.jpg"
             title="Офис продаж ЖК «Upside Towers» для Upside Development"
-            linkTitle="Лучший офис продаж по версии WOW AWARDS 2023"
+            linkTitle="Лучший офис продаж по версии WOW AWARDS 2024"
             linkSrc="/img/pages/home/awards/wow_awards.png"
             className="w-[30vw] aspect-[576/354]"
           />
@@ -77,7 +77,7 @@ export function IntegrationsDesktop() {
           <IntegrationItem
             mainSrc="/img/pages/home/integrations/masharov.jpg"
             linkSrc="/img/pages/home/awards/wow_awards.png"
-            linkTitle="Лучший офис продаж по версии WOW AWARDS 2023"
+            linkTitle="Лучший офис продаж по версии WOW AWARDS 2024"
             title="Офис продаж Авторского квартала Машаров"
             className="w-[21.111vw] aspect-[448/354]"
           />
@@ -97,7 +97,7 @@ export function IntegrationsDesktop() {
             title="Офис продаж ЖК «Мираполис»"
             mainSrc="/img/pages/home/integrations/mirapolis.jpg"
             linkSrc="/img/pages/home/awards/wow_awards.png"
-            linkTitle="Лучший офис продаж по версии WOW AWARDS 2023"
+            linkTitle="Лучший офис продаж по версии WOW AWARDS 2024"
             className="w-[46.389vw] aspect-[812/354]"
           />
           {/* hidden links for SEO */}
@@ -105,10 +105,10 @@ export function IntegrationsDesktop() {
             <Link href={`/blog/${slug}`} key={slug} className="hidden" />
           ))}
           <IntegrationItem
-            title="Офисы продаж Паритет девелопмент"
+            title="Офисы продаж «Паритет»"
             mainSrc="/img/pages/home/integrations/paritet.jpg"
             linkSrc="/img/pages/home/awards/wow_awards.png"
-            linkTitle="Лучший офис продаж по версии WOW AWARDS 2023"
+            linkTitle="Лучший офис продаж по версии WOW AWARDS 2024"
             className="w-[30vw] aspect-[576/354]"
           />
           <VideoLink

src/components/pages/MainPage/Integrations/IntegrationsMini.tsx

@@ -25,7 +25,7 @@ export function IntegrationsMini() {
           className="aspect-[340/228]"
         />
         <IntegrationItem
-          title="Офис продаж Авторского кварталла Машаров"
+          title="Офис продаж Авторского квартала Машаров"
           mainSrc="/img/pages/home/integrations/masharov.jpg"
           className="aspect-[340/228]"
         />
@@ -40,7 +40,7 @@ export function IntegrationsMini() {
           <Link href={`/blog/${slug}`} key={slug} className="hidden" />
         ))}
         <IntegrationItem
-          title="Офисы продаж Паритет девелопмент"
+          title="Офисы продаж «Паритет»"
           mainSrc="/img/pages/home/integrations/paritet.jpg"
           className="aspect-[340/228]"
         />

src/components/pages/MainPage/Map/Slider.tsx

@@ -34,9 +34,13 @@ export function Slider({ mapPoint }: { mapPoint?: IMapProject[] }) {
     setBuffering(true);
   }, [current, cityPoint]);
 
+  useEffect(() => {
+    console.log(mapPoint);
+  }, [mapPoint]);
+
   return (
     <AnimatePresence mode="popLayout">
-      {cityPoint && mapPoint && mapPoint.length > 0 && (
+      {cityPoint && (
         <motion.div
           onViewportEnter={handleOnViewportFeatureEnter}
           viewport={{ margin: "-10% 0% 0% 0%", once: true }}
@@ -48,7 +52,7 @@ export function Slider({ mapPoint }: { mapPoint?: IMapProject[] }) {
           className="max-lg:hidden absolute top-[calc(93.98/731.98*100%)] group left-[calc(698/1432.4*100%)] rounded-[1.667vw] overflow-hidden w-[calc(341/1333.4*100%)] flex flex-col bg-[#37393B99] backdrop-blur-xs"
         >
           <AnimatePresence mode="popLayout">
-            {current < mapPoint.length && mapPoint.length ? (
+            {mapPoint && mapPoint.length > 0 && current < mapPoint.length ? (
               <motion.div
                 key={mapPoint[current].id}
                 initial={{ opacity: 0 }}
@@ -126,10 +130,10 @@ export function Slider({ mapPoint }: { mapPoint?: IMapProject[] }) {
                 animate={{ x: -sliderOffset + "vw" }}
                 transition={{ bounce: "none" }}
                 className={`flex flex-nowrap items-center relative gap-[0.278vw]${
-                  mapPoint.length < 6 ? " justify-center" : ""
+                  mapPoint && mapPoint.length < 6 ? " justify-center" : ""
                 }`}
               >
-                {mapPoint.map(({ company: { id, mapIcon, title } }, index) => (
+                {mapPoint?.map(({ company: { id, mapIcon, title } }, index) => (
                   <button
                     onClick={() => setCurrent(index)}
                     key={index}
@@ -163,26 +167,30 @@ export function Slider({ mapPoint }: { mapPoint?: IMapProject[] }) {
                 </OpenFormModalWrapper>
               </motion.div>
             </div>
-            <button
-              className="p-[0.556vw] absolute cursor-pointer disabled:hidden right-0 top-0 translate-y-[calc(3.889vw/2+1.667vw-50%)]"
-              disabled={
-                sliderOffset ===
-                (3.889 + 0.278) * Math.trunc(mapPoint.length / 5) * 5
-              }
-              onClick={() =>
-                setSliderOffset((prev) => prev + 5 * (3.889 + 0.278))
-              }
-            >
-              <div className="text-white lg:size-[1.111vw] size-4">
-                <ArrowRightIcon />
-              </div>
-            </button>
+            {mapPoint && (
+              <button
+                className="p-[0.556vw] absolute cursor-pointer disabled:hidden right-0 top-0 translate-y-[calc(3.889vw/2+1.667vw-50%)]"
+                disabled={
+                  sliderOffset ===
+                  (3.889 + 0.278) * Math.trunc(mapPoint.length / 5) * 5
+                }
+                onClick={() =>
+                  setSliderOffset((prev) => prev + 5 * (3.889 + 0.278))
+                }
+              >
+                <div className="text-white lg:size-[1.111vw] size-4">
+                  <ArrowRightIcon />
+                </div>
+              </button>
+            )}
             <p className="btnl text-nowrap font-medium select-none">
               Проекты в{cityPoint.title.startsWith("В") ? "о" : ""} 
               {prepositionCity(cityPoint.title)}
             </p>
           </div>
-          <ItemActions item={mapPoint[current]} />
+          {mapPoint && mapPoint.length > 0 && (
+            <ItemActions item={mapPoint[current]} />
+          )}
         </motion.div>
       )}
     </AnimatePresence>

src/components/pages/MainPage/Streaming/Streaming.tsx

@@ -112,7 +112,7 @@ export function Streaming() {
         className="lg:apect-[1400/640] max-h-dvh md:max-lg:aspect-[736/480] aspect-[340/600]"
       >
         <p className="absolute font-medium md:bottom-6 md:left-6 bottom-4 left-4 lg:max-w-[40%] md:max-lg:max-w-[80%] accent">
-          Graff.estate stream доступен на&nbsp;любых устройствах,
+          GRAFF.estate Stream доступен на&nbsp;любых устройствах,
           для&nbsp;демонстрации нужен только интернет
         </p>
       </VideoPlayer>

src/components/pages/PrimePage/DesktopPresentation/3DReelsCard.tsx

@@ -8,11 +8,14 @@ export function ThreeDReelsCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 10),
         bottom: slide > 10 ? "0vw" : undefined,
       }}
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] w-[13.611vw] h-[36.447vh] flex flex-col justify-between absolute bg-[#37393B99] right-[27.847vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] w-[13.611vw] h-[36.447vh] flex flex-col justify-between absolute bg-[#37393B99] right-[27.847vw] cursor-pointer${
+        slide <= 10 ? " pointer-events-none" : ""
+      }`}
       onClick={() =>
         setModal(
           <PrimeModal

src/components/pages/PrimePage/DesktopPresentation/AnaliticsCard.tsx

@@ -8,6 +8,7 @@ export function AnaliticsCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 11),
         bottom: slide > 11 ? "21.842vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function AnaliticsCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] absolute bg-[#37393B99] right-[1.667vw] w-[15.486vw] h-[28.816vh] flex flex-col justify-between cursor-pointer"
+      className={`p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] absolute bg-[#37393B99] right-[1.667vw] w-[15.486vw] h-[28.816vh] flex flex-col justify-between cursor-pointer${
+        slide <= 11 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/analyse.png"

src/components/pages/PrimePage/DesktopPresentation/ArchVisCard.tsx

@@ -8,6 +8,7 @@ export function ArchVisCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 11),
         bottom: slide > 11 ? "26.316vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function ArchVisCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="w-[15.486vw] h-[29.211vh] -translate-y-[1.389vw] p-[1.389vw] rounded-[1.389vw] bg-[#37393B99] flex flex-col justify-between absolute bg-[length:9.979vw]  bg-[url(/img/pages/prime/architecture.png)] bg-no-repeat bg-center cursor-pointer"
+      className={`w-[15.486vw] h-[29.211vh] -translate-y-[1.389vw] p-[1.389vw] rounded-[1.389vw] bg-[#37393B99] flex flex-col justify-between absolute bg-[length:9.979vw]  bg-[url(/img/pages/prime/architecture.png)] bg-no-repeat bg-center cursor-pointer${
+        slide <= 11 ? " pointer-events-none" : ""
+      }`}
     >
       <p className="px-[0.833vw] py-[0.486vw] rounded-[1.181vw] btns font-medium bg-[#37393B99] self-end">
         {slide === 12

src/components/pages/PrimePage/DesktopPresentation/AvatarCard.tsx

@@ -8,6 +8,7 @@ export function AvatarCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 13),
         bottom: slide > 13 ? "56.711vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function AvatarCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-between items-center absolute bg-[#37393B99] w-[8.75vw] h-[20.132vh] right-[17.778vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-between items-center absolute bg-[#37393B99] w-[8.75vw] h-[20.132vh] right-[17.778vw] cursor-pointer${
+        slide <= 13 ? " pointer-events-none" : ""
+      }`}
     >
       <img src="/img/pages/prime/avatar.png" alt="" />
       <p className="btns font-medium">Аватар клиента</p>

src/components/pages/PrimePage/DesktopPresentation/DesignCard.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { useModalStore } from '@/stores/useModalStore';
-import { motion } from 'framer-motion';
-import { PrimeModal } from '../modals/PrimeModal';
-import { categoryDescription } from '@/consts/categories';
+import { useModalStore } from "@/stores/useModalStore";
+import { motion } from "framer-motion";
+import { PrimeModal } from "../modals/PrimeModal";
+import { categoryDescription } from "@/consts/categories";
 
 /* eslint-disable @next/next/no-img-element */
 export function DesignCard({ slide }: { slide: number }) {
@@ -15,36 +15,36 @@ export function DesignCard({ slide }: { slide: number }) {
         setModal(
           <PrimeModal
             src={`/img/pages/prime/designInterior${
-              slide === 11 ? '1' : slide === 12 ? '2' : slide === 13 ? '3' : '4'
+              slide === 11 ? "1" : slide === 12 ? "2" : slide === 13 ? "3" : "4"
             }.jpg`}
             packages={
               slide === 11
-                ? ['Стандарт']
+                ? ["Стандарт"]
                 : slide === 12
-                ? ['Комфорт+', 'Стандарт']
+                ? ["Комфорт+", "Стандарт"]
                 : slide === 13
-                ? ['Бизнес', 'Комфорт+', 'Стандарт']
-                : ['Премиум', 'Бизнес', 'Комфорт+', 'Стандарт']
+                ? ["Бизнес", "Комфорт+", "Стандарт"]
+                : ["Премиум", "Бизнес", "Комфорт+", "Стандарт"]
             }
             title={
               slide === 11
-                ? `Чистовая отделка ( WhiteBox )`
+                ? `Чистовая отделка ( WhiteBox )`
                 : slide === 12
-                ? 'В квартирах типовая мебель ( WhiteBox+ )'
+                ? "В квартирах типовая мебель ( WhiteBox+ )"
                 : `Дизайн по референсам заказчика (${
-                    slide === 13 ? '1 стиль' : '3 стиля'
+                    slide === 13 ? "1 стиль" : "3 стиля"
                   })`
             }
             text={
-              categoryDescription['Дизайн интерьеров'].find(
+              categoryDescription["Дизайн интерьеров"].find(
                 (item) =>
                   item.title ===
                   (slide === 11
                     ? `WhiteBox`
                     : slide === 12
-                    ? 'WhiteBox +'
+                    ? "WhiteBox +"
                     : `Уникальный дизайн интерьеров${
-                        slide === 13 ? '' : ' (3 стиля)'
+                        slide === 13 ? "" : " (3 стиля)"
                       }`)
               )!.text1
             }
@@ -52,44 +52,47 @@ export function DesignCard({ slide }: { slide: number }) {
           />
         )
       }
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 10),
-        bottom: slide > 10 ? '0vw' : undefined,
+        bottom: slide > 10 ? "0vw" : undefined,
       }}
-      transition={{ bounce: 'none' }}
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] backdrop-blur-[47.6px] w-[15.278vw] h-[24.737vh] flex flex-col justify-between cursor-pointer"
+      transition={{ bounce: "none" }}
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] backdrop-blur-[47.6px] w-[15.278vw] h-[24.737vh] flex flex-col justify-between cursor-pointer${
+        slide <= 10 ? " pointer-events-none" : ""
+      }`}
     >
       <div className="relative">
         <img
           src="/img/pages/prime/designInterior1.jpg"
-          width={'100%'}
+          width={"100%"}
           alt="дизайн"
           className={`rounded-[0.556vw] absolute w-[12.5vw] aspect-[180/104] transition-opacity duration-300 ${
-            slide === 11 ? 'opacity-100' : 'opacity-0'
+            slide === 11 ? "opacity-100" : "opacity-0"
           }`}
         />
         <img
           src="/img/pages/prime/designInterior2.jpg"
-          width={'100%'}
+          width={"100%"}
           alt="дизайн"
           className={`rounded-[0.556vw] absolute w-[12.5vw] aspect-[180/104] transition-opacity duration-300 ${
-            slide === 12 ? 'opacity-100' : 'opacity-0'
+            slide === 12 ? "opacity-100" : "opacity-0"
           }`}
         />
         <img
           src="/img/pages/prime/designInterior3.jpg"
-          width={'100%'}
+          width={"100%"}
           alt="дизайн"
           className={`rounded-[0.556vw] absolute w-[12.5vw] aspect-[180/104] transition-opacity duration-300 ${
-            slide === 13 ? 'opacity-100' : 'opacity-0'
+            slide === 13 ? "opacity-100" : "opacity-0"
           }`}
         />
         <img
           src="/img/pages/prime/designInterior4.jpg"
-          width={'100%'}
+          width={"100%"}
           alt="дизайн"
           className={`rounded-[0.556vw] absolute w-[12.5vw] aspect-[180/104] transition-opacity duration-300 ${
-            slide === 14 ? 'opacity-100' : 'opacity-0'
+            slide === 14 ? "opacity-100" : "opacity-0"
           }`}
         />
       </div>
@@ -97,9 +100,9 @@ export function DesignCard({ slide }: { slide: number }) {
         {slide === 11
           ? `Чистовая отделка ( WhiteBox )`
           : slide === 12
-          ? 'В квартирах типовая мебель ( WhiteBox+ )'
+          ? "В квартирах типовая мебель ( WhiteBox+ )"
           : `Дизайн по референсам заказчика (${
-              slide === 13 ? '1 стиль' : '3 стиля'
+              slide === 13 ? "1 стиль" : "3 стиля"
             })`}
       </p>
     </motion.div>

src/components/pages/PrimePage/DesktopPresentation/EngineCard.tsx

@@ -8,6 +8,7 @@ export function EngineCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 11),
         bottom: slide > 11 ? "21.842vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function EngineCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="w-[9.236vw] h-[33.289vh] -translate-y-[1.389vw] p-[1.389vw] rounded-[1.389vw] absolute bg-[#37393B99] right-[17.778vw] flex flex-col justify-between cursor-pointer"
+      className={`w-[9.236vw] h-[33.289vh] -translate-y-[1.389vw] p-[1.389vw] rounded-[1.389vw] absolute bg-[#37393B99] right-[17.778vw] flex flex-col justify-between cursor-pointer${
+        slide <= 11 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/ruble.png"

src/components/pages/PrimePage/DesktopPresentation/EnvironmentCard.tsx

@@ -10,6 +10,7 @@ export function EnvironmentCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 10),
         bottom: slide > 10 ? "0vw" : undefined,
@@ -27,7 +28,9 @@ export function EnvironmentCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[url(/img/pages/prime/summer.jpg)] bg-cover bg-center flex items-end w-[23.681vw] h-[41.053vh] left-[17.708vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[url(/img/pages/prime/summer.jpg)] bg-cover bg-center flex items-end w-[23.681vw] h-[41.053vh] left-[17.708vw] cursor-pointer${
+        slide <= 10 ? " pointer-events-none" : ""
+      }`}
     >
       <p className="btns max-w-2/3 font-medium">
         Детальная проработка ЖК и ближайшего благоустойства

src/components/pages/PrimePage/DesktopPresentation/EquipmentCard.tsx

@@ -8,6 +8,7 @@ export function EquipmentCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 10),
         bottom: slide > 10 ? "0vw" : undefined,
@@ -43,7 +44,9 @@ export function EquipmentCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="right-[11.458vw] p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] w-[15.556vw] h-[20.263vh] bg-[#37393B99] before:z-[1] before:absolute before:inset-0 before:bg-gradient-to-t before:from-[#37393B99] overflow-hidden backdrop-blur-xs bg-cover bg-[position:calc(8/225*100%)_calc(15/225*100%)] flex items-end absolute cursor-pointer"
+      className={`right-[11.458vw] p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] w-[15.556vw] h-[20.263vh] bg-[#37393B99] before:z-[1] before:absolute before:inset-0 before:bg-gradient-to-t before:from-[#37393B99] overflow-hidden backdrop-blur-xs bg-cover bg-[position:calc(8/225*100%)_calc(15/225*100%)] flex items-end absolute cursor-pointer${
+        slide <= 10 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/wallPanel.png"

src/components/pages/PrimePage/DesktopPresentation/ExcursionVRCard.tsx

@@ -21,11 +21,14 @@ export function ExcursionVRCard({ slide }: { slide: number }) {
           />
         )
       }
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 12),
         bottom: slide > 12 ? "42.632vh" : "93.684vh",
       }}
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-between absolute bg-[#37393B99] w-[10.347vw] h-[16.842vh] left-[17.708vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-between absolute bg-[#37393B99] w-[10.347vw] h-[16.842vh] left-[17.708vw] cursor-pointer${
+        slide <= 11 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/ruble.png"

src/components/pages/PrimePage/DesktopPresentation/ExtraInterestPointsCard.tsx

@@ -8,6 +8,7 @@ export function ExtraInterestPointsCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 12),
         bottom: slide > 12 ? "15.597vw" : "27.362vw",
@@ -23,7 +24,9 @@ export function ExtraInterestPointsCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] flex flex-col justify-end absolute w-[15vw] h-[25vh] left-[42.222vw] bg-[#37393B99] bg-[url(/img/pages/prime/wheel.png)] bg-contain bg-no-repeat bg-right-bottom before:absolute before:inset-0 before:bg-gradient-to-t before:from-[#37393B99] overflow-hidden cursor-pointer"
+      className={`p-[1.389vw] -translate-y-[1.389vw] rounded-[1.389vw] flex flex-col justify-end absolute w-[15vw] h-[25vh] left-[42.222vw] bg-[#37393B99] bg-[url(/img/pages/prime/wheel.png)] bg-contain bg-no-repeat bg-right-bottom before:absolute before:inset-0 before:bg-gradient-to-t before:from-[#37393B99] overflow-hidden cursor-pointer${
+        slide <= 12 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/ruble.png"

src/components/pages/PrimePage/DesktopPresentation/FinanceToolCard.tsx

@@ -8,6 +8,7 @@ export function FinanceToolCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 12),
         bottom: slide > 12 ? "42.632vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function FinanceToolCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute bg-[#37393B99] w-[12.5vw] h-[23.684vh] left-[28.889vw] bg-[url(/img/pages/prime/finance.png)] bg-[length:12.083vw] overflow-hidden bg-no-repeat bg-[position:1.944vw_1.944vw] before:absolute before:w-[12.083vw] before:h-[12.083vw] before:-bottom-[22px] before:-right-[22px] before:bg-[linear-gradient(#27282A00,#27282A)] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute bg-[#37393B99] w-[12.5vw] h-[23.684vh] left-[28.889vw] bg-[url(/img/pages/prime/finance.png)] bg-[length:12.083vw] overflow-hidden bg-no-repeat bg-[position:1.944vw_1.944vw] before:absolute before:w-[12.083vw] before:h-[12.083vw] before:-bottom-[22px] before:-right-[22px] before:bg-[linear-gradient(#27282A00,#27282A)] cursor-pointer${
+        slide <= 12 ? " pointer-events-none" : ""
+      }`}
     >
       <p className="btns font-medium z-[1]">
         Финансовые инсументы{" "}

src/components/pages/PrimePage/DesktopPresentation/InteractiveWindow.tsx

@@ -8,6 +8,7 @@ export function InteractiveWindowCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 13),
         bottom: slide > 13 ? "57.105vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function InteractiveWindowCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute bg-[#37393B99] w-[15.486vw] h-[36.316vh] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute bg-[#37393B99] w-[15.486vw] h-[36.316vh] cursor-pointer${
+        slide <= 13 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/interactiveWindow.png"

src/components/pages/PrimePage/DesktopPresentation/InterierConfiguratorCard.tsx

@@ -9,6 +9,7 @@ export function InterierConfiguratorCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 11),
         bottom: slide > 11 ? "38.026vh" : "93.684vh",
@@ -24,7 +25,9 @@ export function InterierConfiguratorCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] w-[13.542vw] h-[17.105vh] flex flex-col justify-between backdrop-blur-[47.6px] right-[27.847vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] w-[13.542vw] h-[17.105vh] flex flex-col justify-between backdrop-blur-[47.6px] right-[27.847vw] cursor-pointer${
+        slide <= 11 ? " pointer-events-none" : ""
+      }`}
     >
       <img
         src="/img/pages/prime/ruble.png"

src/components/pages/PrimePage/DesktopPresentation/PackageTitle.tsx

@@ -4,7 +4,7 @@ import { AnimatePresence, motion } from "framer-motion";
 export function PackageTitle({ slide }: { slide: number }) {
   return (
     <motion.div
-      animate={{ opacity: +(slide > 10) }}
+      style={{ opacity: +(slide > 10) }}
       className="absolute space-y-[2.639vw] left-1/2 !-translate-x-1/2 overflow-hidden top-[calc(100px-1.389vw)]"
     >
       <Title headerLevel={1} className="text-center">

src/components/pages/PrimePage/DesktopPresentation/ScenarioCard.tsx

@@ -8,6 +8,7 @@ export function ScenarioCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 13),
         bottom: slide > 13 ? "78.421vh" : "93.684vh",
@@ -23,7 +24,9 @@ export function ScenarioCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex items-end gap-4 absolute bg-[#37393B99] w-[15.764vw] h-[15.395vh] right-[1.667vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex items-end gap-4 absolute bg-[#37393B99] w-[15.764vw] h-[15.395vh] right-[1.667vw] cursor-pointer${
+        slide <= 13 ? " pointer-events-none" : ""
+      }`}
     >
       <p className="btns font-medium">Сценарии проживания</p>
       <img

src/components/pages/PrimePage/DesktopPresentation/SeasonsCard.tsx

@@ -7,6 +7,7 @@ export function SeasonsCard({ slide }: { slide: number }) {
 
   return (
     <motion.div
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 12),
         bottom: slide > 12 ? "52.237vh" : "93.684vh",
@@ -22,7 +23,9 @@ export function SeasonsCard({ slide }: { slide: number }) {
           />
         )
       }
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute w-[15.486vw] h-[24.605vh] bg-[url(/img/pages/prime/autumn.jpg)] bg-cover bg-no-repeat bg-center right-[1.667vw] cursor-pointer"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] flex flex-col justify-end absolute w-[15.486vw] h-[24.605vh] bg-[url(/img/pages/prime/autumn.jpg)] bg-cover bg-no-repeat bg-center right-[1.667vw] cursor-pointer${
+        slide <= 12 ? " pointer-events-none" : ""
+      }`}
     >
       <p className="btns font-medium">Сезонность</p>
     </motion.div>

src/components/pages/PrimePage/DesktopPresentation/StreamingCard.tsx

@@ -13,18 +13,21 @@ export function StreamingCard({ slide }: { slide: number }) {
         setModal(
           <PrimeModal
             categoryTitle="Удаленная демонстрация"
-            title="Graff.estate stream"
+            title="GRAFF.estate Stream"
             text="GRAFF.estate разворачивает «облако» и стримит 3D-сцену на устройство клиента (PC, мобильный), менеджер ведёт экскурсию в режиме реального времени."
             packages={["Премиум"]}
             src="/videos/pages/home/streaming.mp4"
           />
         )
       }
+      initial={{ opacity: 0 }}
       animate={{
         opacity: +(slide > 10),
         bottom: slide > 10 ? "0vw" : undefined,
       }}
-      className="p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] bg-[#37393B99] backdrop-blur-xs absolute right-[1.667vw] w-[8.958vw] h-[20.263vh] flex flex-col justify-between"
+      className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] bg-[#37393B99] backdrop-blur-xs absolute right-[1.667vw] w-[8.958vw] h-[20.263vh] flex flex-col justify-between${
+        slide <= 10 ? " pointer-events-none" : ""
+      }`}
     >
       <img src="/img/pages/prime/ruble.png" className="w-[0.833vw]" alt="" />
       <div className="w-[3.333vw] aspect-square rounded-[1.111vw] bg-[#37393B99] relative self-center">
@@ -33,7 +36,7 @@ export function StreamingCard({ slide }: { slide: number }) {
           <GraffIcon />
         </div>
       </div>
-      <p className="btns font-medium">Graff.estate stream</p>
+      <p className="btns font-medium">GRAFF.estate Stream</p>
     </motion.div>
   );
 }

src/components/pages/PrimePage/modals/PrimeModal.tsx

@@ -23,7 +23,7 @@ export function PrimeModal({
 
   return (
     <div className="flex items-center gap-[11.458vw] absolute inset-0 z-10 pl-[1.667vw] py-[1.389vw] before:inset-0 before:absolute before:bg-[#0F101199]">
-      <div className="flex flex-col gap-y-[0.417vw] z-[1]">
+      <div className="flex flex-col gap-y-[0.417vw] z-[1] opacity-0 pointer-events-none">
         <button
           onClick={() => setModal(null)}
           className="w-[4.444vw] aspect-square rounded-[0.556vw] bg-white cursor-pointer"

src/components/pages/WebPage/WebDemo.tsx

@@ -231,6 +231,7 @@ export default function WebDemo() {
 
       <motion.div
         ref={demoRef}
+        initial={{ width: "80vw" }}
         animate={{
           width: demoActive ? "100vw" : isMobile ? "100%" : "80vw",
         }}

src/components/slides/VideoLayerMain.tsx

@@ -112,7 +112,7 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue<number> }) {
                 style={{ opacity }}
                 className="absolute left-[1.667vw] top-[1.667vw] z-10 max-w-[34.097vw] heading2 font-medium"
               >
-                Graff.estate легко встраивается в существующую цепочку продаж,
+                GRAFF.estate легко встраивается в существующую цепочку продаж,
                 собирает данные о пользователе и его поведении
               </motion.p>
             )}

src/components/slides/VideoLayerPrime.tsx

@@ -186,7 +186,7 @@ export function VideoLayerPrime({ scroll }: { scroll: MotionValue<number> }) {
                   style={{ opacity }}
                   className="absolute left-[1.667vw] top-[1.667vw] z-10 max-w-[34.097vw] heading2 font-medium"
                 >
-                  Graff.estate легко встраивается в существующую цепочку продаж,
+                  GRAFF.estate легко встраивается в существующую цепочку продаж,
                   собирает данные о пользователе и его поведении
                 </motion.p>
               )}
@@ -221,6 +221,7 @@ export function VideoLayerPrime({ scroll }: { scroll: MotionValue<number> }) {
                   top,
                 }}
                 className="object-bottom object-cover origin-top absolute left-1/2 bg-black/50 -translate-x-1/2 ![rotate:x_4deg] flex justify-center items-center"
+                initial={{ opacity: 0 }}
                 animate={{
                   opacity: currentBuffering ? 1 : 0,
                 }}