From 4dc43ff56e3ea230851fd0bd9b620cbb8509d8e3 Mon Sep 17 00:00:00 2001 From: zojgame Date: Mon, 19 Feb 2024 18:01:21 +0500 Subject: [PATCH] main page + clients page fixes --- .../ClientsPage/ClientsPageCarousel.tsx | 6 +- .../ClientsPage/ZoomInLetterModal.tsx | 48 ++++++++++-- client/src/components/Header/Header.tsx | 2 +- client/src/components/MainPage/Question.tsx | 4 +- .../components/MainPage/Slider/Context.tsx | 3 + .../MainPage/{ => Slider}/Slider.tsx | 40 ++++++++-- .../MainPage/Slider/slides/FirstSlide.tsx | 70 ++++++++++++++++++ .../{ => Slider}/slides/SecondSlide.tsx | 27 +++++-- .../{ => Slider}/slides/ThirdSlide.tsx | 27 ++++--- .../components/MainPage/slides/FirstSlide.tsx | 73 ------------------- .../components/SwiperPaginationBullets.tsx | 37 ++++++++++ client/src/components/Wrapper.tsx | 14 ++++ client/src/icons/ArrowCarouselIcon.tsx | 11 ++- client/src/icons/CrossIcon.tsx | 15 +++- client/src/index.css | 4 +- client/src/pages/MainPage/MainPage.tsx | 4 +- client/tailwind.config.js | 8 +- 17 files changed, 270 insertions(+), 123 deletions(-) create mode 100644 client/src/components/MainPage/Slider/Context.tsx rename client/src/components/MainPage/{ => Slider}/Slider.tsx (54%) create mode 100644 client/src/components/MainPage/Slider/slides/FirstSlide.tsx rename client/src/components/MainPage/{ => Slider}/slides/SecondSlide.tsx (71%) rename client/src/components/MainPage/{ => Slider}/slides/ThirdSlide.tsx (73%) delete mode 100644 client/src/components/MainPage/slides/FirstSlide.tsx create mode 100644 client/src/components/SwiperPaginationBullets.tsx diff --git a/client/src/components/ClientsPage/ClientsPageCarousel.tsx b/client/src/components/ClientsPage/ClientsPageCarousel.tsx index 315071b..44de474 100644 --- a/client/src/components/ClientsPage/ClientsPageCarousel.tsx +++ b/client/src/components/ClientsPage/ClientsPageCarousel.tsx @@ -13,7 +13,7 @@ const ClientsPageCarousel = () => { const defaultOffset = isOddCount ? 300 : 0; const { setModal } = useStore(); - const [letters, setLetters] = useState(thanksgivingLetters); + const [letters] = useState(thanksgivingLetters); const [currentImage, setCurrentImage] = useState(middleLetter); const [offset, setOffset] = useState(IMAGE_WIDTH); @@ -53,7 +53,7 @@ const ClientsPageCarousel = () => {
{ className="absolute left-1/4 top-1/3 bg-[#e8e8e8] w-10 h-10 rounded-full" onClick={handleOnLeftButtonClick} > - {" "} + {" "}
+
); }; diff --git a/client/src/components/MainPage/Slider/slides/FirstSlide.tsx b/client/src/components/MainPage/Slider/slides/FirstSlide.tsx new file mode 100644 index 0000000..c81da52 --- /dev/null +++ b/client/src/components/MainPage/Slider/slides/FirstSlide.tsx @@ -0,0 +1,70 @@ +import { useEffect, useRef, useContext } from "react"; +import gsap from "gsap"; +import { SliderContext } from "../Context"; + +const FirstSlide = () => { + const firstImageRef = useRef(null); + const secondImageRef = useRef(null); + const currentContext = useContext(SliderContext); + + useEffect(() => { + if (!firstImageRef.current || !secondImageRef.current) return; + + if (currentContext === 1) { + gsap.fromTo( + firstImageRef.current, + { transform: "scale(2.0)" }, + { + transform: "scale(1.6)", + duration: 1.5, + scrollTrigger: { + trigger: firstImageRef.current, + start: "10% bottom", + }, + } + ); + gsap.fromTo( + secondImageRef.current, + { transform: "scale(2.0)", left: "5%", top: "25%" }, + { + transform: "scale(1.5)", + left: "-0%", + top: "30%", + duration: 2.2, + scrollTrigger: { + trigger: firstImageRef.current, + start: "10% bottom", + }, + } + ); + } + }, [currentContext]); + + return ( +
+

+ Технологии расширенной +
реальности для вашего бизнеса +

+ image + image +

+ Мы приглашаем вас в мир +
удивительного будущего с
технологиями виртуальной
и + смешанной реальности +

+
+ ); +}; + +export default FirstSlide; diff --git a/client/src/components/MainPage/slides/SecondSlide.tsx b/client/src/components/MainPage/Slider/slides/SecondSlide.tsx similarity index 71% rename from client/src/components/MainPage/slides/SecondSlide.tsx rename to client/src/components/MainPage/Slider/slides/SecondSlide.tsx index 9ee6f9e..e664725 100644 --- a/client/src/components/MainPage/slides/SecondSlide.tsx +++ b/client/src/components/MainPage/Slider/slides/SecondSlide.tsx @@ -1,16 +1,27 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useContext } from "react"; import { gsap } from "gsap"; +import { SliderContext } from "../Context"; const SecondSlide = () => { const firstImageRef = useRef(null); + const currentSlider = useContext(SliderContext); + useEffect(() => { - if (firstImageRef.current) - gsap.to(firstImageRef.current, { - left: "151%", - top: "18%", - duration: 1.5, - }); - }, []); + if (!firstImageRef.current) return; + if (currentSlider === 2) + gsap.fromTo( + firstImageRef.current, + { + left: "167%", + top: "2%", + }, + { + left: "151%", + top: "18%", + duration: 2.0, + } + ); + }, [currentSlider]); return (
diff --git a/client/src/components/MainPage/slides/ThirdSlide.tsx b/client/src/components/MainPage/Slider/slides/ThirdSlide.tsx similarity index 73% rename from client/src/components/MainPage/slides/ThirdSlide.tsx rename to client/src/components/MainPage/Slider/slides/ThirdSlide.tsx index 54f83f6..52c3764 100644 --- a/client/src/components/MainPage/slides/ThirdSlide.tsx +++ b/client/src/components/MainPage/Slider/slides/ThirdSlide.tsx @@ -1,19 +1,24 @@ -import { useRef, useEffect } from "react"; +import { useRef, useEffect, useContext } from "react"; import { gsap } from "gsap"; +import { SliderContext } from "../Context"; const ThirdSlide = () => { + const currentSlider = useContext(SliderContext); + const firstImageRef = useRef(null); useEffect(() => { - if (firstImageRef.current) - gsap.fromTo( - firstImageRef.current, - { - transform: "scale(1.15)", - }, - { transform: "scale(1)", duration: 1.5 } - ); - }, []); + if (!firstImageRef.current) return; + + gsap.fromTo( + firstImageRef.current, + { + transform: "scale(1.15)", + }, + { transform: "scale(1)", duration: 2 } + ); + }, [currentSlider]); + return (

@@ -27,7 +32,7 @@ const ThirdSlide = () => { /> image diff --git a/client/src/components/MainPage/slides/FirstSlide.tsx b/client/src/components/MainPage/slides/FirstSlide.tsx deleted file mode 100644 index f7aba1c..0000000 --- a/client/src/components/MainPage/slides/FirstSlide.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useRef } from "react"; - -const FirstSlide = () => { - const firstImageRef = useRef(null); - const secondImageRef = useRef(null); - - // useEffect(() => { - // if (firstImageRef.current) { - // console.log("imageRef.current", firstImageRef.current); - // gsap.fromTo( - // firstImageRef.current, - // { transform: "scale(2.0)" }, - // { - // transform: "scale(1.6)", - // duration: 1.5, - // scrollTrigger: { - // trigger: firstImageRef.current, - // start: "10% bottom", - // }, - // } - // ); - // gsap.fromTo( - // secondImageRef.current, - // { transform: "scale(2.0)", left: "5%" }, - // { - // transform: "scale(1.6)", - // left: "-5%", - // duration: 2.2, - // scrollTrigger: { - // trigger: firstImageRef.current, - // start: "10% bottom", - // }, - // } - // ); - // } - // }, []); - return ( -

-

- Технологии расширенной -
реальности для вашего бизнеса -

- - {/* */} - image - {/* */} - image -

- Мы приглашаем вас в мир -
удивительного будущего с
технологиями виртуальной
и - смешанной реальности -

-
- ); -}; - -export default FirstSlide; diff --git a/client/src/components/SwiperPaginationBullets.tsx b/client/src/components/SwiperPaginationBullets.tsx new file mode 100644 index 0000000..06c7216 --- /dev/null +++ b/client/src/components/SwiperPaginationBullets.tsx @@ -0,0 +1,37 @@ +type SwiperPaginationBulletsProps = { + className?: string; + currentBullet: number; + bulletCount: number; + handleOnBulletSwitch: (updatedBullet: number) => void; +}; + +const SwiperPaginationBullets = ({ + className, + currentBullet, + bulletCount, + handleOnBulletSwitch, +}: SwiperPaginationBulletsProps) => { + const bullets = Array.from({ length: bulletCount }, (_, index) => { + return { id: index + 1 }; + }); + + return ( +
+ {bullets.map((bullet) => ( +
handleOnBulletSwitch(bullet.id)} + > +
+
+ ))} +
+ ); +}; + +export default SwiperPaginationBullets; diff --git a/client/src/components/Wrapper.tsx b/client/src/components/Wrapper.tsx index cba2e5e..4db6fbd 100644 --- a/client/src/components/Wrapper.tsx +++ b/client/src/components/Wrapper.tsx @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import Header from "./Header/Header"; import Footer from "./Footer/Footer"; import { Outlet } from "react-router-dom"; @@ -6,6 +7,19 @@ import useStore from "../store/store"; const Wrapper = () => { const { modal } = useStore(); + + useEffect(() => { + const body = document.body; + if (!body) return; + + if (!modal) { + body.style.overflow = "visible"; + return; + } + + body.style.overflow = "hidden"; + }, [modal]); + return ( <> {modal} diff --git a/client/src/icons/ArrowCarouselIcon.tsx b/client/src/icons/ArrowCarouselIcon.tsx index 4275e3d..8297869 100644 --- a/client/src/icons/ArrowCarouselIcon.tsx +++ b/client/src/icons/ArrowCarouselIcon.tsx @@ -1,12 +1,17 @@ type ArrowCarouselIconProps = { isLeft?: boolean; className?: string; + color?: string; }; -const ArrowCarouselIcon = ({ isLeft, className }: ArrowCarouselIconProps) => { +const ArrowCarouselIcon = ({ + isLeft, + className, + color = "#000", +}: ArrowCarouselIconProps) => { return ( { > { +type CrossIconProps = { + color?: string; + className?: string; +}; + +const CrossIcon = ({ color, className }: CrossIconProps) => { return ( { version="1.1" xmlns="http://www.w3.org/2000/svg" > - + { return ( -
+
diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 1c0071e..e1653f4 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -2,9 +2,11 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { - // extend: {animation: { - // 'spin-slow': 'spin 3s linear infinite', - // }}, + extend: { + backgroundImage: { + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + }, + }, }, plugins: [], };