diff --git a/package.json b/package.json index 9feed25..419aa8a 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,7 @@ "@react-spring/parallax": "^9.7.2", "@react-three/drei": "^9.62.2", "@react-three/fiber": "^8.12.0", - "axios": "^1.3.5", - "fetch-jsonp": "^1.2.3", + "framer-motion": "^10.11.6", "ky": "^0.33.3", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -21,7 +20,6 @@ "react-range-slider-input": "^3.0.7", "react-responsive-carousel": "^3.2.23", "react-scroll": "^1.8.9", - "react-scroll-parallax": "^3.4.2", "swiper": "^9.2.0", "three": "^0.151.3" }, diff --git a/src/App.tsx b/src/App.tsx index 88cf620..09d7c34 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,46 @@ import "./App.css"; import { Canvas } from "@react-three/fiber"; -import { Suspense } from "react"; +import { Suspense, useEffect, useRef } from "react"; import PieChart from "./components/PieChart/PieChart"; import { Model } from "./components/VRHemlet"; import Calc from "./components/Calc"; import Slider from "./components/Slider/Slider"; import { Parallax, ParallaxLayer } from "@react-spring/parallax"; -// import { Parallax, ParallaxProvider } from "react-scroll-parallax"; +import { motion } from "framer-motion"; // import { OrbitControls, PerspectiveCamera } from "@react-three/drei"; function App() { + const parallaxRef = useRef(null); + + function handleScroll() { + if (parallaxRef.current) { + parallaxRef.current.style.transform = `translateY(${ + window.scrollY * 0.4 + }px)`; + + const opacity = 1 - window.scrollY / 500; + + if (opacity > 0) { + console.log(opacity); + parallaxRef.current.style.opacity = `${opacity}`; + } + } + } + + useEffect(() => { + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + return ( -
-
+
+
@@ -50,568 +78,596 @@ function App() {
-
-
-
-
-

- Эффективность инстумента продаж в цифрах -

-

- Мы собрали статистику за 10 лет работы с застройщиками, реализовав - 21 проект -

-
-
-
-

- 10 -

-

что-то на умном

-
-
-

- 26 + +

+
+
+
+
+

+ Эффективность инстумента продаж в цифрах

- что-то на умном -
в две строчки + Мы собрали статистику за 10 лет работы с застройщиками, + реализовав 21 проект

-
-

- 32% -

-

- что-то на умном -
в две строчки -

+
+
+

+ 10 +

+

что-то на умном

+
+
+

+ 26 +

+

+ что-то на умном +
в две строчки +

+
+
+

+ 32% +

+

+ что-то на умном +
в две строчки +

+
+
+

+ 12% +

+

+ что-то на умном +
в две строчки +

+
-
-

- 12% -

-

- что-то на умном -
в две строчки -

-
-
- -
-
-
-
-
- Функциональные возможности -
-
- Интерактивная презентация увлекает покупателей и предоставляет - актуальную информацию о жилом комплексе, отвечая на все интересующие - вопросы и показывая важные особенности и преимущества объекта +
-
-
- -
-
-
-
- - - - - {/* */} - - {/* +
+
+ Функциональные возможности +
+
+ Интерактивная презентация увлекает покупателей и предоставляет + актуальную информацию о жилом комплексе, отвечая на все + интересующие вопросы и показывая важные особенности и преимущества + объекта +
+
+
+
+ +
+
+
+
+ + + + + {/* */} + + {/* */} - - -
-
-

- Экскурсия в виртуальной реальности -

-

- Клиенту достаточно надеть шлем виртуальной реальности, чтобы - прогуляться, оценить и ощутить пространство. Он полностью - погружается в воссозданную реальность, чувствует удобство и - уровень комфорта -

- + + +
+
+

+ Экскурсия в виртуальной реальности +

+

+ Клиенту достаточно надеть шлем виртуальной реальности, чтобы + прогуляться, оценить и ощутить пространство. Он полностью + погружается в воссозданную реальность, чувствует удобство и + уровень комфорта +

+ +
-
-
-
-
-

- Анализируем -
- поведение -
- пользователей -

-

- Система внутренней аналитики программы собирает информацию о - поведении пользователя и эффективности работы менеджеров для - создания отчета, содержащего необходимые метрики -

-
-
-
-
-

- Конверсия менеджеров в брони -

-
-
- К.Н. Федоров -
- 45% -
-
- И.Ф. Яковлева -
- 30% -
-
- А.М. Ташева -
- 20% -
-
- А.А. Фетисов -
- 5% -
-
-
-
-

- Популярные типы квартир, % -

-
- -
-
- - Студии +
+
+
+

+ Анализируем +
+ поведение +
+ пользователей +

+

+ Система внутренней аналитики программы собирает информацию о + поведении пользователя и эффективности работы менеджеров для + создания отчета, содержащего необходимые метрики +

+
+
+
+
+

+ Конверсия менеджеров в брони +

+
+
+ К.Н. Федоров + + 45%
-
- - 1-к. квартиры +
+ И.Ф. Яковлева + + 30%
-
- - 2-к. квартиры +
+ А.М. Ташева + + 20%
-
- - 3-к. квартиры -
-
- - 4-к. квартиры +
+ А.А. Фетисов + + 5%
-
-
-

Воронка продаж

-
-
-
- Сеансы -
- 100% -
-
-
-
-
- В избранное -
+
+

+ Популярные типы квартир, % +

+
+ +
+
+ + Студии +
+
+ + 1-к. квартиры +
+
+ + 2-к. квартиры +
+
+ + 3-к. квартиры +
+
+ + 4-к. квартиры
- 93,47%
-
-
-
-
- Брони +
+
+

Воронка продаж

+
+
+
+ Сеансы +
+ 100% +
+
+
+
+
+ В избранное +
+ 93,47%
- 45,68% -
-
-
-
-
- Продажи +
+
+
+
+ Брони +
+ 45,68% +
+
+
+
+
+ Продажи +
+
+
+ 29,13%
- 29,13%
-
-
-
-

- Среднее -
- время сеанса, -
мин. -

-

- 12:45 -

+
+
+

+ Среднее +
+ время сеанса, +
мин. +

+

+ 12:45 +

+
+
+

+ Сформировано +
+ коммерческих +
+ предложений, шт +

+

+ 856 +

+
+
+

+ Конверсия +
+ из сеанса +
в продажу, % +

+

+ 12,44 +

+
+
+

+ Продано через +
+ Graff.estate, +
+ млн.руб. +

+

+ 134,5 +

+
-
-

- Сформировано -
- коммерческих -
- предложений, шт -

-

- 856 -

+
+ Полученный отчет позволяет сделать процесс демонстрации жилого + комплекса еще эффективнее
-
-

- Конверсия -
- из сеанса -
в продажу, % -

-

- 12,44 -

-
-
-

- Продано через -
- Graff.estate, -
- млн.руб. -

-

- 134,5 -

-
-
-
- Полученный отчет позволяет сделать процесс демонстрации жилого - комплекса еще эффективнее
-
-
-
-
-
-

- Инструмент продаж поможет вам продавать удаленно -

-
-

- Высокий уровень графики и полное погружение покупателя в - процесс выбора квартиры. -

-

- Покажите все преимущества вашего жилого комплекса клиенту из - любого конца мира. Местоположение и устройство значения не - имеют. Нужен только интернет. +

+
+
+
+

+ Инструмент продаж поможет вам продавать удаленно

+
+

+ Высокий уровень графики и полное погружение покупателя в + процесс выбора квартиры. +

+

+ Покажите все преимущества вашего жилого комплекса клиенту из + любого конца мира. Местоположение и устройство значения не + имеют. Нужен только интернет. +

+
+
-
+
+
+ +
+
+
+
+
+

+ Можем оценить +
+ эффективность +
+ интерактивного +
+ инструмента продаж +

+

+ Изучение отраслевой аналитики рынка продаж новых квартир + позволило разработать калькулятор эффективности продукта и на + основе данных исследований +

+
+ +
+
+

+ Когда девелопер строит жилой комплекс используя проектное + финансирование, главное – это время. Чем быстрее вы наполняете + счета-эксроу, тем меньше процент за использование денег банка. + Сократив время реализации всего проекта, девелопер значительно + экономит на стоимости проектного финансирования. +

+ +
+
+
+
+
+
+
+

+ Релевантный опыт +

+
+
+
MAP
+
+
+
+ +
+
+
+

+ ЖК «Авторский квартал Машаров» +

+

+ Россия, Тюмень +

+
+
+
+ +
+
+ +
+
+
+

+ ЖК «Авторский квартал Машаров» +

+

+ Россия, Тюмень +

+
+
+
+ + {/*
*/} + + + {/*
*/} +
-
- -
-
-
-
-
-

- Можем оценить -
- эффективность -
- интерактивного -
- инструмента продаж -

-

- Изучение отраслевой аналитики рынка продаж новых квартир позволило - разработать калькулятор эффективности продукта и на основе данных - исследований -

-
- -
-
-

- Когда девелопер строит жилой комплекс используя проектное - финансирование, главное – это время. Чем быстрее вы наполняете - счета-эксроу, тем меньше процент за использование денег банка. - Сократив время реализации всего проекта, девелопер значительно - экономит на стоимости проектного финансирования. -

- -
-
-
-
-
-
-
-

- Релевантный опыт -

-
-
-
MAP
-
-
-
- -
-
-
-

- ЖК «Авторский квартал Машаров» -

-

- Россия, Тюмень -

-
-
-
- -
-
- -
-
-
-

- ЖК «Авторский квартал Машаров» -

-

- Россия, Тюмень -

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

- Свяжитесь с нами -

-

- Хотите увеличить конверсию? -
- Давайте обсудим детали! -

-
-
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -
- -
-
-
-
+
+
+
+
-
-

- Email -

-

- info@graff.tech -

+

+ Свяжитесь с нами +

+

+ Хотите увеличить конверсию? +
+ Давайте обсудим детали! +

+
+
+
+
+ + +
+
+ + +
-
-

- Телефон -

-

- 8 800 770 00 76 -

+
+
+ + +
+
+ + +
+
+
+
+ + +
+
-
-
-

- Адрес -

-

- ул. Московская, 47, Екатеринбург -

+
+
+
+
+

+ Email +

+

+ info@graff.tech +

+
+
+

+ Телефон +

+

+ 8 800 770 00 76 +

+
-
-

- Социальные сети -

-

- Telegram - VK - YouTube -

+
+
+

+ Адрес +

+

+ ул. Московская, 47, Екатеринбург +

+
+
+

+ Социальные сети +

+

+ Telegram + VK + YouTube +

+
-
-
-
- - - - Политика конфиденциальности - graff.tech -

© 2023 GRAFF interactive. Все права защищены

+
+
+ + + + Политика конфиденциальности + graff.tech +

© 2023 GRAFF interactive. Все права защищены

+
diff --git a/src/components/Slider/Slide1.tsx b/src/components/Slider/Slide1.tsx index 3d607e2..4462c4a 100644 --- a/src/components/Slider/Slide1.tsx +++ b/src/components/Slider/Slide1.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide1() { return ( -
+

Интеграция @@ -16,7 +17,7 @@ function Slide1() {

-
+ ); } diff --git a/src/components/Slider/Slide2.tsx b/src/components/Slider/Slide2.tsx index 73ca0e7..85c6c8c 100644 --- a/src/components/Slider/Slide2.tsx +++ b/src/components/Slider/Slide2.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide2() { return ( -
+

Вся инфрастуктура @@ -17,7 +18,7 @@ function Slide2() {

-
+ ); } diff --git a/src/components/Slider/Slide3.tsx b/src/components/Slider/Slide3.tsx index a4e9608..c15885f 100644 --- a/src/components/Slider/Slide3.tsx +++ b/src/components/Slider/Slide3.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide3() { return ( -
+

Параметрический @@ -18,7 +19,7 @@ function Slide3() {

-
+ ); } diff --git a/src/components/Slider/Slide4.tsx b/src/components/Slider/Slide4.tsx index ac0f856..04da34d 100644 --- a/src/components/Slider/Slide4.tsx +++ b/src/components/Slider/Slide4.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide4() { return ( -
+

Виртуальный тур @@ -17,7 +18,7 @@ function Slide4() {

-
+ ); } diff --git a/src/components/Slider/Slide5.tsx b/src/components/Slider/Slide5.tsx index b60c3d8..8f23f43 100644 --- a/src/components/Slider/Slide5.tsx +++ b/src/components/Slider/Slide5.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide5() { return ( -
+

Конфигуратор интерьера @@ -16,7 +17,7 @@ function Slide5() {

-
+ ); } diff --git a/src/components/Slider/Slide6.tsx b/src/components/Slider/Slide6.tsx index ce42644..81f77a4 100644 --- a/src/components/Slider/Slide6.tsx +++ b/src/components/Slider/Slide6.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide6() { return ( -
+

Формирование @@ -17,7 +18,7 @@ function Slide6() {

-
+ ); } diff --git a/src/components/Slider/Slide7.tsx b/src/components/Slider/Slide7.tsx index 253ad25..5246aca 100644 --- a/src/components/Slider/Slide7.tsx +++ b/src/components/Slider/Slide7.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide7() { return ( -
+

Любой рендер @@ -17,7 +18,7 @@ function Slide7() {

-
+ ); } diff --git a/src/components/Slider/Slide8.tsx b/src/components/Slider/Slide8.tsx index 2f1371b..6aa1797 100644 --- a/src/components/Slider/Slide8.tsx +++ b/src/components/Slider/Slide8.tsx @@ -1,8 +1,9 @@ import React from "react"; +import SlideContainer from "./SlideContainer"; function Slide8() { return ( -
+

Отправка коммерческого @@ -17,7 +18,7 @@ function Slide8() {

-
+ ); } diff --git a/src/components/Slider/SlideContainer.tsx b/src/components/Slider/SlideContainer.tsx new file mode 100644 index 0000000..5048fe9 --- /dev/null +++ b/src/components/Slider/SlideContainer.tsx @@ -0,0 +1,12 @@ +import React, { ReactNode } from "react"; +import { SwiperSlide } from "swiper/react"; + +interface ISlideContainer { + children: ReactNode; +} + +function SlideContainer({ children }: ISlideContainer) { + return
{children}
; +} + +export default SlideContainer; diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 22003f9..c097a13 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -22,7 +22,7 @@ function Slider() { const [activeIndex, setActiveIndex] = useState(0); return ( -
+