diff --git a/public/images/reviews/1.png b/public/images/reviews/1.png new file mode 100644 index 0000000..668b592 Binary files /dev/null and b/public/images/reviews/1.png differ diff --git a/public/images/reviews/2.png b/public/images/reviews/2.png new file mode 100644 index 0000000..1608cf0 Binary files /dev/null and b/public/images/reviews/2.png differ diff --git a/public/images/reviews/avatars/1.png b/public/images/reviews/avatars/1.png new file mode 100644 index 0000000..bd07571 Binary files /dev/null and b/public/images/reviews/avatars/1.png differ diff --git a/public/images/reviews/avatars/2.png b/public/images/reviews/avatars/2.png new file mode 100644 index 0000000..5dde57d Binary files /dev/null and b/public/images/reviews/avatars/2.png differ diff --git a/public/images/reviews/avatars/3.png b/public/images/reviews/avatars/3.png new file mode 100644 index 0000000..65a5e90 Binary files /dev/null and b/public/images/reviews/avatars/3.png differ diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx index 64bf2a3..ff340fe 100644 --- a/src/components/Reviews.tsx +++ b/src/components/Reviews.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-img-element */ // import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react"; // import { useSwipeable } from "react-swipeable"; // import { motion } from "framer-motion"; @@ -5,7 +6,7 @@ // import ArrowLeftIcon from "./icons/ArrowLeftIcon"; // import ArrowRightIcon from "./icons/ArrowRightIcon"; // import { Video } from "../types/Video"; -import { createRef, useEffect, useState } from "react"; +import { createRef, useEffect, useLayoutEffect, useState } from "react"; import { useInView } from "react-intersection-observer"; import { useSwipeable } from "react-swipeable"; import { Video } from "../types/Video"; @@ -13,30 +14,70 @@ import ArrowLeftIcon from "./icons/ArrowLeftIcon"; import ArrowRightIcon from "./icons/ArrowRightIcon"; import { Transition } from "react-transition-group"; -const VIDEOS: Video[] = [ +type Review = { + id: string; + avatar: string; + name: string; + position: string; + desc: string; + video: string; + poster: string; +}; + +const REVIEWS: Review[] = [ { id: "1", - value: "/videos/histories/1.mp4", - title: "", - desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", - poster: "", + avatar: "/images/reviews/avatars/1.png", + name: "Егор бобров", + position: "Коммерческий директор авторского квартала «Машаров»", + desc: "Эффективность инструмента была подтверждена буквально в первый день после его внедрения. Например, один из клиентов, посетив офис и увидев свою будущую квартиру с помощью интерактивной панели, сразу решил купить недвижимость в этом проекте, отказавшись от других вариантов", + poster: "/images/reviews/1.png", + video: "", }, { id: "2", - value: "/videos/histories/2.mp4", - title: "", - desc: "Graff.estate на выставке 100+ TechnoBuild", - poster: "", + avatar: "/images/reviews/avatars/2.png", + name: "Олег Бондорев", + position: "Ведущий менеджер компании «ЭНКО»", + desc: "Клиенты особенно ценят возможность легко выбрать квартиру с помощью 3D-модель жилого комплекса. Так же инструмент продаж позволяет клиенту увидеть расположение дома, в какое время свет будет попадать в окна, даже зайти в лифт и холл, а также оценить инфраструктуру района и «прочувствовать» его, прогулявшись по двору", + poster: "/images/reviews/1.png", + video: "", }, { id: "3", - value: "/videos/histories/3.mp4", - title: "", - desc: "Интерактивная инсталляция graff.estate для ЖК DNS City в г.Владивосток", - poster: "", + avatar: "/images/reviews/avatars/3.png", + name: "Алина Веселова", + position: "Ведущий специалист отдела продаж", + desc: "Одним из преимуществ инструмента является возможность посмотреть 3D-модель квартиры с готовым дизайнерским ремонтом и оценить видовые характеристиками, изменяя время суток (день или ночь). Это важно для клиента, так как позволяет реалистично представить, как будет выглядеть будущее жилье.", + poster: "/images/reviews/2.png", + video: "", }, ]; +// const REVIEWS: Video[] = [ +// { +// id: "1", +// value: "/images/reviews/1.png", +// title: "", +// desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", +// poster: "", +// }, +// { +// id: "2", +// value: "/images/reviews/2.png", +// title: "", +// desc: "Graff.estate на выставке 100+ TechnoBuild", +// poster: "", +// }, +// { +// id: "3", +// value: "/videos/histories/3.mp4", +// title: "", +// desc: "Интерактивная инсталляция graff.estate для ЖК DNS City в г.Владивосток", +// poster: "", +// }, +// ]; + // const Reviews = () => { // const [isViewportEntered, setIsViewportEntered] = useState(false); @@ -208,9 +249,8 @@ const VIDEOS: Video[] = [ // }; function Reviews() { const [selectedVideoIndex, setSelectedVideoIndex] = useState(0); - const videoRefs = VIDEOS.map(() => createRef()); + const videoRefs = REVIEWS.map(() => createRef()); const [videoWidth, setVideoWidth] = useState(0); - const [videoHeigth, setVideoHeigth] = useState(0); const { ref, inView } = useInView(); const [isEntered, setIsEntered] = useState(false); const handlers = useSwipeable({ @@ -219,13 +259,12 @@ function Reviews() { trackMouse: true, }); - function handleEnded() { - if (selectedVideoIndex === VIDEOS.length - 1) { - setSelectedVideoIndex(0); - } else { - setSelectedVideoIndex((prev) => prev + 1); + useEffect(() => { + if (videoRefs[0].current) { + const width = videoRefs[0].current.clientWidth; + setVideoWidth(width); } - } + }, [videoRefs]); function prev() { if (selectedVideoIndex === 0) return; @@ -233,7 +272,7 @@ function Reviews() { } function next() { - if (selectedVideoIndex === VIDEOS.length - 1) return; + if (selectedVideoIndex === REVIEWS.length - 1) return; setSelectedVideoIndex((prev) => prev + 1); } @@ -248,7 +287,7 @@ function Reviews() { ref={ref} className="container mx-auto 2xl:max-w-screen-2xl mb-[120px]" > -
+

@@ -257,7 +296,7 @@ function Reviews() {

клиентов

- {VIDEOS.map((item, index) => ( + {REVIEWS.map((item, index) => ( - {item.title ? ( + {item.name ? (

- {item.title} + {item.name}

) : ( <> @@ -304,10 +343,11 @@ function Reviews() { clipPath: `rect(auto auto auto 0)`, }} > - {VIDEOS.map((video, index) => ( + {REVIEWS.map((video, index) => (
{video.title} - setTimeout(() => { - setVideoWidth(videoRefs[0].current!.clientWidth); - setVideoHeigth(videoRefs[0].current!.clientHeight); - }, 200) - } /> - {/*
))}
- {VIDEOS.map((item, index) => ( + {REVIEWS.map((item, index) => ( - {item.title ? ( + {item.name ? (

- {item.title} + {item.name}

) : ( <> @@ -371,7 +390,7 @@ function Reviews() { ))}
- {VIDEOS.map((video, index) => ( + {REVIEWS.map((video, index) => (