diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index ce485998..404223e1 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -47,7 +47,7 @@ export function Header() {
- -
+ + {Products.map((product, index) => ( ))} -
+ )} diff --git a/src/components/Layout/ProductsList.tsx b/src/components/Layout/ProductsList.tsx index ded6a34d..17218616 100644 --- a/src/components/Layout/ProductsList.tsx +++ b/src/components/Layout/ProductsList.tsx @@ -1,32 +1,28 @@ 'use client'; import { useModalStore } from '@/stores/useModalStore'; -import { useEffect, useState } from 'react'; import { ChevronDownIcon } from '../icons/ChevronDownIcon'; import { ChevronUpIcon } from '../icons/ChevronUpIcon'; import { ModalWithProducts } from './ModalWithProducts'; export function ProductsList() { - const { setModal, modal } = useModalStore(); - const [show, setShow] = useState(false); - - useEffect(() => { - setShow(!!modal); - }, [modal]); + const { setModal, modal, name } = useModalStore(); return ( ); } diff --git a/src/components/Layout/VideoModal.tsx b/src/components/Layout/VideoModal.tsx index 44f05ba8..d6c4ca47 100644 --- a/src/components/Layout/VideoModal.tsx +++ b/src/components/Layout/VideoModal.tsx @@ -9,20 +9,19 @@ export function VideoModal({ link }: VideoModalProps) { const { setModal } = useModalStore(); const handleOnCloseClick = () => { - setModal(null); - console.log('aboba'); + setModal(null, ''); }; return ( -
+
-
); diff --git a/src/components/pages/MainPage/Availables/AvailableItem.tsx b/src/components/pages/MainPage/Availables/AvailableItem.tsx index 8a1962e0..93830baa 100644 --- a/src/components/pages/MainPage/Availables/AvailableItem.tsx +++ b/src/components/pages/MainPage/Availables/AvailableItem.tsx @@ -1,48 +1,17 @@ -import { motion } from 'framer-motion'; -import { forwardRef } from 'react'; - export interface IAvailable { title: string; text: string; img: string; } -export const AvailableItem = forwardRef( - ({ img, text, title }, ref) => ( -
- - {!!ref && ( - <> -

{title}

-

{text}

- - )} - +export function AvailableItem({ text, title, img }: IAvailable) { + return ( +
+

{title}

+

{text}

- ), -); - -AvailableItem.displayName = 'AvailableItem'; + ); +} diff --git a/src/components/pages/MainPage/Availables/AvailablesSlider.tsx b/src/components/pages/MainPage/Availables/AvailablesSlider.tsx index f09a9ef7..74cd75e0 100644 --- a/src/components/pages/MainPage/Availables/AvailablesSlider.tsx +++ b/src/components/pages/MainPage/Availables/AvailablesSlider.tsx @@ -20,8 +20,9 @@ export function AvailablesSlider({ availables }: { availables: IAvailable[] }) { slides={availables} title="Функциональные возможности" alignItems="end" - className="relative" - slideBaseSizes={['31.6vw', '17.6vw']} + className="min-h-[44vw] justify-between" + slideSizes={['31.6vw', '17.6vw', '64.3vw', '35.5vw']} + childClassName="flex justify-stretch container h-full w-full" controlsPosition="top" />
diff --git a/src/components/pages/MainPage/Integrations/IntegrationItem.tsx b/src/components/pages/MainPage/Integrations/IntegrationItem.tsx index d430dfc0..7372dd03 100644 --- a/src/components/pages/MainPage/Integrations/IntegrationItem.tsx +++ b/src/components/pages/MainPage/Integrations/IntegrationItem.tsx @@ -1,6 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion'; import Image from 'next/image'; -import { forwardRef } from 'react'; export interface IIntegration { img: string; @@ -9,66 +7,26 @@ export interface IIntegration { company: string; } -export const IntegrationItem = forwardRef< - HTMLDivElement, - IIntegration & { index: number } ->(({ img, title, year, company, index }, ref) => { - // const transitionStyles: Map = new Map([ - // ['entering', { minWidth: '48vw', minHeight: '48vw' }], - // ['entered', { minWidth: '48vw', minHeight: '48vw' }], - // ['exiting', { minWidth: '31.6vw', minHeight: '31.8vw' }], - // ['exited', { minWidth: '31.6vw', minHeight: '31.8vw' }], - // ]); - +export function IntegrationItem({ img, title, year, company }: IIntegration) { return ( - // console.log('enter')} - // onEntering={() => console.log('entering')} - // onEntered={() => console.log('entered')} - // onExit={() => console.log('exit')} - // onExiting={() => console.log('exiting')} - // onExited={() => console.log('exited')} - // > - // {state => ( - console.log('exit')}> - 3 ? '456' : '')} - initial={{ minWidth: '31.6vw', minHeight: '31.8vw' }} - transition={{ duration: 0.5, type: 'just', delay: 0.5 }} - animate={!!ref && { minWidth: '48vw', minHeight: '48vw' }} - // exit={{ minWidth: '31.6vw', minHeight: '31.8vw' }} - className={'flex flex-col relative transition-all pointer-events-none'} - // style={{ - // transition: 'all 0.5s ease-out', - // ...transitionStyles.get(state), - // }} - > + <> +
{''} -
-
-

{title}

-

{year}

-
-

{company}

+
+
+
+

{title}

+

{year}

- - - // )} - // +

{company}

+
+ ); -}); - -IntegrationItem.displayName = 'IntegrationItem'; +} diff --git a/src/components/pages/MainPage/Integrations/IntegrationsSlider.tsx b/src/components/pages/MainPage/Integrations/IntegrationsSlider.tsx index 18e9374a..e52fbe77 100644 --- a/src/components/pages/MainPage/Integrations/IntegrationsSlider.tsx +++ b/src/components/pages/MainPage/Integrations/IntegrationsSlider.tsx @@ -13,8 +13,9 @@ export function IntegrationsSlider({ slides={integrations} SlideElement={IntegrationItem} title="Интеграции в офисы продаж" - className="pt-[120px] pb-14 border-b border-[#3D425C] min-h-[calc(48vw+248px)] " - slideBaseSizes={['31.6vw', '31.8vw']} + className="pt-[120px] pb-14 border-b border-[#3D425C] min-h-[calc(48vw+250px)]" + childClassName="flex flex-col" + slideSizes={['31.6vw', '31.8vw', '48vw', '48vw']} controlsPosition="bottom" /> ); diff --git a/src/components/pages/MainPage/Showreel.tsx b/src/components/pages/MainPage/Showreel.tsx index d6853c51..8a47da37 100644 --- a/src/components/pages/MainPage/Showreel.tsx +++ b/src/components/pages/MainPage/Showreel.tsx @@ -1,13 +1,12 @@ 'use client'; -import { LoadingIcon } from '@/components/icons/LoadingIcon'; import { PlayIcon } from '@/components/icons/PlayIcon'; import { VideoModal } from '@/components/Layout/VideoModal'; import { ClassNameWrapper } from '@/hocs/ClassNameWrapper'; import { useModalStore } from '@/stores/useModalStore'; export function Showreel() { - const { modal, setModal } = useModalStore(); + const { setModal } = useModalStore(); return (
@@ -15,23 +14,15 @@ export function Showreel() {
-
-
- - } - /> - - Загружаем шоурил... -
-
); } diff --git a/src/components/pages/MainPage/Technology.tsx b/src/components/pages/MainPage/Technology.tsx index 605ea509..20287bed 100644 --- a/src/components/pages/MainPage/Technology.tsx +++ b/src/components/pages/MainPage/Technology.tsx @@ -32,7 +32,7 @@ export function Technology() { презентовать объект покупателю из любой точки мира

-

diff --git a/src/stores/useModalStore.ts b/src/stores/useModalStore.ts index 2a730792..6fe63e08 100644 --- a/src/stores/useModalStore.ts +++ b/src/stores/useModalStore.ts @@ -3,10 +3,12 @@ import { create } from 'zustand'; interface IModalState { modal: ReactNode | null; - setModal: (modal: ReactNode) => void; + setModal: (modal: ReactNode, modalName: string) => void; + name: string; } export const useModalStore = create(set => ({ modal: null, - setModal: modal => set({ modal }), + name: '', + setModal: (modal: ReactNode, name: string) => set({ modal, name }), })); diff --git a/src/ui/SliderWithScaling.tsx b/src/ui/SliderWithScaling.tsx index 0da267ba..caadb606 100644 --- a/src/ui/SliderWithScaling.tsx +++ b/src/ui/SliderWithScaling.tsx @@ -1,44 +1,40 @@ 'use client'; import { useWindowWidth } from '@/hooks/useWindowWidth'; -import { - ForwardRefExoticComponent, - RefAttributes, - useEffect, - useReducer, - useRef, - useState, -} from 'react'; +import { motion } from 'framer-motion'; +import { ReactNode, useEffect, useReducer, useState } from 'react'; import { useSwipeable } from 'react-swipeable'; import { SliderControls } from './SliderControls'; -export function SliderWithScaling({ +export function SliderWithScaling({ slides, SlideElement, className = '', + childClassName = '', alignItems = 'start', title, - slideBaseSizes: [minWidth, minHeight], + slideSizes: [minWidth, minHeight, minWidthScaled, minHeightScaled], controlsPosition, }: { slides: T[]; - SlideElement: ForwardRefExoticComponent< - T & { index: number } & RefAttributes - >; + SlideElement: (_: T) => ReactNode; className?: string; + childClassName?: string; alignItems?: 'start' | 'center' | 'end'; title: string; - slideBaseSizes: [string, string]; + slideSizes: [string, string, string, string]; controlsPosition: 'top' | 'bottom'; }) { const width = useWindowWidth(); const baseoffset = (-width / 1600) * 507 + 8; - const itemRef = useRef(null); - const [slide, setSlide] = useState(0); const [sliderOffset, setSliderOffset] = useState(baseoffset); + const [currentSliding, setCurrentSliding] = useState< + 'prev' | 'next' | null + >(); + const [order, dispatch] = useReducer( (state: typeof slides, action: 'prev' | 'next') => { switch (action) { @@ -58,17 +54,19 @@ export function SliderWithScaling({ ); const nextSlide = () => { + setCurrentSliding('next'); dispatch('next'); }; + const prevSlide = () => { + setCurrentSliding('prev'); + dispatch('prev'); + }; + useEffect(() => { setSliderOffset(baseoffset); }, [baseoffset, order, slide]); - const prevSlide = () => { - dispatch('prev'); - }; - const handlers = useSwipeable({ onSwipedLeft: nextSlide, onSwipedRight: prevSlide, @@ -89,19 +87,36 @@ export function SliderWithScaling({ style={{ transform: `translateX(${sliderOffset}px)`, transitionDuration: `${sliderOffset !== 0 && sliderOffset !== 2 * baseoffset ? 1 : 0}s`, - // transitionDelay: `${sliderOffset !== 0 && sliderOffset !== 2 * baseoffset ? 1 : 0}s`, }} > - {order.map((slide, index) => { - return ( - - ); - })} + {order.map((slide, index) => ( + 3 ? '456' : '')} + initial={ + currentSliding === 'next' && index === 0 + ? { minWidth: minWidthScaled, minHeight: minHeightScaled } + : index === 3 + ? { minWidth, minHeight } + : {} + } + transition={{ duration: 1, type: 'just' }} + animate={ + index === 1 + ? { + minWidth: minWidthScaled, + minHeight: minHeightScaled, + } + : { + minWidth, + minHeight, + transition: { duration: index === 3 ? 0.0001 : 1 }, + } + } + className={'pointer-events-none ' + childClassName} + > + + + ))}