diff --git a/public/img/pages/prime/seasons.png b/public/img/pages/prime/seasons.png new file mode 100644 index 00000000..58bb6ba3 Binary files /dev/null and b/public/img/pages/prime/seasons.png differ diff --git a/src/components/pages/MainPage/Map/Slider.tsx b/src/components/pages/MainPage/Map/Slider.tsx index dabee95e..6a802630 100644 --- a/src/components/pages/MainPage/Map/Slider.tsx +++ b/src/components/pages/MainPage/Map/Slider.tsx @@ -80,13 +80,6 @@ export function Slider({ mapPoint }: { mapPoint?: IMapProject[] }) { }`} >
- {/* */} Загружаем видео... diff --git a/src/components/pages/PrimePage/DesktopPresentation/3DReelsCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/3DReelsCard.tsx index 99ea4283..d5737fce 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/3DReelsCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/3DReelsCard.tsx @@ -1,7 +1,11 @@ /* eslint-disable @next/next/no-img-element */ +import { useModalStore } from '@/stores/useModalStore'; import { motion } from 'framer-motion'; +import { PrimeModal } from '../modals/PrimeModal'; export function ThreeDReelsCard({ slide }: { slide: number }) { + const { setModal } = useModalStore(); + return ( 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]" + onClick={() => + setModal( + + ) + } >

{slide === 11 diff --git a/src/components/pages/PrimePage/DesktopPresentation/ArchVisCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/ArchVisCard.tsx index 68ccc6c2..5d96c465 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/ArchVisCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/ArchVisCard.tsx @@ -1,13 +1,28 @@ /* eslint-disable @next/next/no-img-element */ +import { useModalStore } from '@/stores/useModalStore'; import { motion } from 'framer-motion'; +import { PrimeModal } from '../modals/PrimeModal'; export function ArchVisCard({ slide }: { slide: number }) { + const { setModal } = useModalStore(); + return ( 11), bottom: slide > 11 ? '26.316vh' : '93.684vh', }} + onClick={() => + setModal( + + ) + } 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" >

diff --git a/src/components/pages/PrimePage/DesktopPresentation/DesignCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/DesignCard.tsx index 80c55a4b..810b6a48 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/DesignCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/DesignCard.tsx @@ -1,15 +1,63 @@ +'use client'; + +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 }) { + const { setModal } = useModalStore(); + return ( + setModal( + + item.title === + (slide === 11 + ? `WhiteBox` + : slide === 12 + ? 'WhiteBox +' + : `Уникальный дизайн интерьеров${ + slide === 13 ? '' : ' (3 стиля)' + }`) + )!.text1 + } + categoryTitle="Дизайн интерьеров" + /> + ) + } animate={{ opacity: +(slide > 10), 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" + 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" >

10), bottom: slide > 10 ? '0vw' : undefined, }} + onClick={() => + setModal( + + ) + } 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]" >

diff --git a/src/components/pages/PrimePage/DesktopPresentation/EquipmentCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/EquipmentCard.tsx index 76c279a8..99f71a26 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/EquipmentCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/EquipmentCard.tsx @@ -1,12 +1,48 @@ +/* eslint-disable @next/next/no-img-element */ +import { useModalStore } from '@/stores/useModalStore'; import { motion } from 'framer-motion'; +import { PrimeModal } from '../modals/PrimeModal'; export function EquipmentCard({ slide }: { slide: number }) { + const { setModal } = useModalStore(); + return ( 10), bottom: slide > 10 ? '0vw' : undefined, }} + onClick={() => + setModal( + + ) + } 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" > 11 ? 'opacity-100' : 'opacity-0' }`} - alt="" + alt="brand tablet" />

{slide === 11 diff --git a/src/components/pages/PrimePage/DesktopPresentation/ExcursionVRCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/ExcursionVRCard.tsx index 2254b398..70f2e2a6 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/ExcursionVRCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/ExcursionVRCard.tsx @@ -1,9 +1,25 @@ +'use client'; + /* eslint-disable @next/next/no-img-element */ +import { useModalStore } from '@/stores/useModalStore'; import { motion } from 'framer-motion'; +import { PrimeModal } from '../modals/PrimeModal'; export function ExcursionVRCard({ slide }: { slide: number }) { + const { setModal } = useModalStore(); + return ( + setModal( + + ) + } animate={{ opacity: +(slide > 12), bottom: slide > 12 ? '42.632vh' : '93.684vh', diff --git a/src/components/pages/PrimePage/DesktopPresentation/InterierConfiguratorCard.tsx b/src/components/pages/PrimePage/DesktopPresentation/InterierConfiguratorCard.tsx index 5b335820..f067ef4c 100644 --- a/src/components/pages/PrimePage/DesktopPresentation/InterierConfiguratorCard.tsx +++ b/src/components/pages/PrimePage/DesktopPresentation/InterierConfiguratorCard.tsx @@ -9,6 +9,7 @@ export function InterierConfiguratorCard({ slide }: { slide: number }) { opacity: +(slide > 11), bottom: slide > 11 ? '38.026vh' : '93.684vh', }} + // onClick={() => setModal()} 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]" > + setModal( + + ) + } animate={{ opacity: +(slide > 10), bottom: slide > 10 ? '0vw' : undefined, diff --git a/src/components/pages/PrimePage/PrimePage.tsx b/src/components/pages/PrimePage/PrimePage.tsx index 72b508ce..e1088c47 100644 --- a/src/components/pages/PrimePage/PrimePage.tsx +++ b/src/components/pages/PrimePage/PrimePage.tsx @@ -74,7 +74,9 @@ export function PrimeDesktopPage() { + + @@ -91,7 +93,9 @@ export function PrimeDesktopPage() { + +

diff --git a/src/components/pages/PrimePage/modals/PrimeModal.tsx b/src/components/pages/PrimePage/modals/PrimeModal.tsx new file mode 100644 index 00000000..597a7e6b --- /dev/null +++ b/src/components/pages/PrimePage/modals/PrimeModal.tsx @@ -0,0 +1,110 @@ +/* eslint-disable @next/next/no-img-element */ +import { useModalStore } from '@/stores/useModalStore'; +import CloseIcon from '../../../../../public/icons/close.svg'; +import { categoryDescription } from '@/consts/categories'; +import { useRef } from 'react'; + +export function PrimeModal({ + src, + title, + text, + packages, + categoryTitle, +}: { + packages: string[]; + src: string; + title: string; + text: string; + categoryTitle: string; +}) { + const { setModal } = useModalStore(); + + const ref = useRef(null); + + return ( +
+
+
+
+
+ {packages.map((pack) => ( +

+ {pack} +

+ ))} +
+
+ {src.endsWith('mp4') ? ( + categoryDescription[categoryTitle].find( + (item) => item.title === title + )?.type === 'videoScreen' ? ( +
+
+ ) : ( +
+
+ ) + ) : ( +
+ )} +
+

{title}

+

{text}

+
+
+
+ +
+ ); +} diff --git a/src/components/slides/VideoLayerMain.tsx b/src/components/slides/VideoLayerMain.tsx index 429017f3..8eb688d8 100644 --- a/src/components/slides/VideoLayerMain.tsx +++ b/src/components/slides/VideoLayerMain.tsx @@ -1,3 +1,4 @@ +import LoaderIcon from '../../../public/icons/loader.svg'; import { videos } from '@/consts/presentation/videos'; import { motion, @@ -74,6 +75,10 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue }) { setSlide(Math.min(Math.trunc(value * videos.length), videos.length - 1)) ); + const [currentBuffering, setCurrentBuffering] = useState(false); + + useEffect(() => setCurrentBuffering(true), [slide]); + return ( }) { )} setCurrentBuffering(true)} + onPlaying={() => setCurrentBuffering(false)} src={ isViewportEntered ? `/videos/pages/home/presentation/${src}.mp4` @@ -120,6 +127,21 @@ export function VideoLayerMain({ scroll }: { scroll: MotionValue }) { slide > index ? ' opacity-0' : '' }`} /> + + + Загружаем видео... + }) { ['3.602vw', '4.022vw', '4.022vw', '2.122vw', '10.855vw', '4.022vw'] ); + const [currentBuffering, setCurrentBuffering] = useState(false); + + useEffect(() => { + setCurrentBuffering(true); + }, [slide]); + return ( }) { }} viewport={{ margin: '-10% 0% 0% 0%', once: true }} onViewportEnter={handleOnViewportFeatureEnter} - className='absolute overflow-hidden h-[40.556vw] bg-[url(/img/pages/home/presentation/touch_screen.png)] bg-no-repeat bg-[length:48.333vw] bg-top' + className="absolute overflow-hidden h-[40.556vw] bg-[url(/img/pages/home/presentation/touch_screen.png)] bg-no-repeat bg-[length:48.333vw] bg-top" > {!!videoRefs.length && primeVideos.map(({ src }, index) => @@ -166,7 +173,7 @@ export function VideoLayerPrime({ scroll }: { scroll: MotionValue }) { {index === slide && slide > 2 && ( Graff.estate легко встраивается в существующую цепочку продаж, собирает данные о пользователе и его поведении @@ -189,13 +196,30 @@ export function VideoLayerPrime({ scroll }: { scroll: MotionValue }) { height: videoHeight, top, }} + onWaiting={() => setCurrentBuffering(true)} + onPlaying={() => setCurrentBuffering(false)} className={`absolute w-[39.822vw] h-[19vw] origin-top object-bottom object-cover top-[3.602vw] !rotate-x-4 left-1/2 -translate-x-1/2 transition-opacity${ slide > index && slide < primeVideos.length ? ' opacity-0' : '' }`} /> -
+ + + Загружаем видео... + +
) : (