Refactoring
This commit is contained in:
@@ -4,7 +4,7 @@ import ProjectCard from "@components/ProjectCard";
|
|||||||
import { IProject } from "../types/IProject";
|
import { IProject } from "../types/IProject";
|
||||||
import { SortedProject } from "../types/SortedProject";
|
import { SortedProject } from "../types/SortedProject";
|
||||||
import LabelCard from "@components/LabelCart";
|
import LabelCard from "@components/LabelCart";
|
||||||
import { getTime, getYear } from "date-fns";
|
import { getYear } from "date-fns";
|
||||||
|
|
||||||
interface IProjectsProps {
|
interface IProjectsProps {
|
||||||
projects: IProject[];
|
projects: IProject[];
|
||||||
|
|||||||
+23
-655
@@ -4,682 +4,50 @@
|
|||||||
|
|
||||||
import "react-rangeslider/lib/index.css";
|
import "react-rangeslider/lib/index.css";
|
||||||
import "../components/RangeSlider.css";
|
import "../components/RangeSlider.css";
|
||||||
import { useState } from "react";
|
|
||||||
import FeatureItem from "@components/FeatureItem";
|
|
||||||
import StreamButton from "@components/StreamButton";
|
|
||||||
import ExampleCard from "@components/ExampleCard";
|
|
||||||
import FeatureVideoViewBox from "@components/FeatureVideoViewBox";
|
|
||||||
import Button from "@components/Button";
|
|
||||||
import Calc from "@components/Calc";
|
|
||||||
import Heading2 from "@components/Headings/Heading2";
|
|
||||||
import VideoSliderMobile from "@components/VideoSliderMobile";
|
|
||||||
import FeedbackForm from "@components/FeedbackForm";
|
|
||||||
import useModalStore from "@stores/useModalStore";
|
|
||||||
import FeedbackModal from "@components/modals/FeedbackModal";
|
|
||||||
import ModalContainer from "@components/ModalContainer";
|
import ModalContainer from "@components/ModalContainer";
|
||||||
import MailIcon from "@components/icons/MailIcon";
|
|
||||||
import PhoneIcon from "@components/icons/PhoneIcon";
|
|
||||||
import VKIcon from "@components/icons/VKIcon";
|
|
||||||
import YouTubeIcon from "@components/icons/YouTubeIcon";
|
|
||||||
import TelegramIcon from "@components/icons/TelegramIcon";
|
|
||||||
import Winners from "@components/Winners";
|
import Winners from "@components/Winners";
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import Reviews from "@components/Reviews";
|
import Reviews from "@components/Reviews";
|
||||||
import Histories from "@components/Histories";
|
import Histories from "@components/Histories";
|
||||||
import Projects from "../Projects/Projects";
|
import Projects from "../Projects/Projects";
|
||||||
import Clients from "@components/Clients";
|
import Clients from "@components/Clients";
|
||||||
import { videosFeatures } from "../consts/videoFeatures";
|
import Examples from "@components/Examples/Examples";
|
||||||
|
import Showreel from "@components/Showreel";
|
||||||
|
import Stats from "@components/Stats";
|
||||||
|
import Features from "@components/Features/Features";
|
||||||
|
import Stream from "@components/Stream/Stream";
|
||||||
|
import AnalyzeUsers from "@components/AnalyzeUsers";
|
||||||
|
import ExcursionVR from "@components/ExcursionVR";
|
||||||
|
import EffeciencyCalculator from "@components/EffeciencyCalculator/EffeciencyCalculator";
|
||||||
|
import ContactUs from "@components/ContactUs";
|
||||||
|
import Footer from "@components/Footer";
|
||||||
|
import Header from "@components/Header";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [selectedVideo, setSelectedVideo] = useState<string>(
|
|
||||||
"/videos/features/virtual_tour.mp4"
|
|
||||||
);
|
|
||||||
|
|
||||||
const [setModal] = useModalStore((state) => [state.setModal]);
|
|
||||||
|
|
||||||
const [isBuffering, setIsBuffering] = useState(true);
|
|
||||||
const [isViewportEntered, setIsViewportEntered] = useState(false);
|
|
||||||
|
|
||||||
const handleOnViewportFeatureEnter = () => {
|
|
||||||
if (isViewportEntered) return;
|
|
||||||
|
|
||||||
setIsViewportEntered(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
|
<div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
|
||||||
<div className="relative container mx-auto 2xl:max-w-screen-2xl">
|
<Header />
|
||||||
<div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="/images/Logo.svg"
|
|
||||||
alt=""
|
|
||||||
className="sm:block hidden max-h-fit"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="/images/LogoMobile.svg"
|
|
||||||
alt=""
|
|
||||||
className="sm:hidden block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex sm:gap-8 gap-2">
|
|
||||||
<Button onClick={() => setModal(<FeedbackModal />)}>
|
|
||||||
<span className="sm:inline hidden">Оставить заявку</span>
|
|
||||||
<span className="sm:hidden inline">Связаться</span>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* <div className="flex gap-1">
|
<Showreel />
|
||||||
<button className="px-3 border-gradient rounded-full font-gilroy font-medium h-10 flex items-center justify-center w-12">
|
|
||||||
<span className="absolute">RU</span>
|
|
||||||
</button>
|
|
||||||
<button className="px-3 rounded-full font-gilroy font-medium leading-none h-10 flex items-center justify-center w-12">
|
|
||||||
<span className="absolute">EN</span>
|
|
||||||
</button>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col 2xl:gap-14 gap-6 2xl:mb-[120px] xl:mb-20 sm:mb-12 mb-8">
|
|
||||||
<h1 className="max-w-[1255px] font-gilroy 2xl:text-8xl sm:text-[64px] text-[40px] leading-none text-gradient font-medium">
|
|
||||||
Интерактивный инструмент
|
|
||||||
<br />
|
|
||||||
продаж{" "}
|
|
||||||
<span className="text-gradient-none">для застройщиков</span>
|
|
||||||
</h1>
|
|
||||||
<p className="xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]">
|
|
||||||
Помогаем девелоперам эффективно демонстрировать свой объект.
|
|
||||||
Продавать больше и быстрее.
|
|
||||||
</p>
|
|
||||||
<div className="absolute top-20 right-0 blur-[10px] -z-10">
|
|
||||||
<img src="/images/blendings/1.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative aspect-video w-full 2xl:mb-[200px] sm:mb-[120px] mb-20 overflow-x-clip">
|
|
||||||
<video
|
|
||||||
src="/videos/showreel_1080p_4000k_h264.mp4"
|
|
||||||
muted
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
playsInline
|
|
||||||
className="absolute aspect-video w-full"
|
|
||||||
onPlaying={() => setIsBuffering(false)}
|
|
||||||
onWaiting={() => setIsBuffering(true)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={`absolute aspect-video w-full h-full flex justify-center items-center bg-black bg-opacity-50 transition-opacity ${
|
|
||||||
isBuffering ? "opacity-100" : "opacity-0"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex gap-4 items-center">
|
|
||||||
<span>
|
|
||||||
<svg
|
|
||||||
className="animate-spin h-5 w-5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
className="opacity-25"
|
|
||||||
cx="12"
|
|
||||||
cy="12"
|
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"
|
|
||||||
></circle>
|
|
||||||
<path
|
|
||||||
className="opacity-75"
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span className="font-gilroy">Загружаем шоурил...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative container mx-auto 2xl:max-w-screen-2xl">
|
<div className="relative container mx-auto 2xl:max-w-screen-2xl">
|
||||||
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
<Stats />
|
||||||
<Heading2>
|
<Examples />
|
||||||
Продавайте недвижимость
|
<Features />
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">
|
|
||||||
проще и{" "}
|
|
||||||
<span className="relative">
|
|
||||||
<span style={{ WebkitTextFillColor: "#52587A" }}>
|
|
||||||
быстрее
|
|
||||||
</span>
|
|
||||||
<span className="absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white"></span>
|
|
||||||
</span>{" "}
|
|
||||||
дороже
|
|
||||||
</span>
|
|
||||||
</Heading2>
|
|
||||||
|
|
||||||
<div className="relative xl:flex items-center gap-4 xl:max-h-[400px]">
|
|
||||||
<p className="2xl:text-2xl sm:text-xl font-gilroy min-w-fit">
|
|
||||||
Мы собрали статистику{" "}
|
|
||||||
<span className="text-gradient font-semibold">за 13 лет</span>{" "}
|
|
||||||
работы
|
|
||||||
<br />
|
|
||||||
с застройщиками,{" "}
|
|
||||||
<span className="text-gradient font-semibold">
|
|
||||||
реализовав 31 проект
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="2xl:ml-6 xl:ml-[14px] relative 2xl:-top-8 xl:-top-4 -z-10">
|
|
||||||
<img src="/images/Map.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium w-fit leading-none">
|
|
||||||
Graff.estate
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-0 gap-3">
|
|
||||||
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
|
||||||
<p className="2xl:text-base text-sm">На</p>
|
|
||||||
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
|
||||||
18
|
|
||||||
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
|
||||||
%
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
увеличивает конверсию из консультации в бронирование
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
|
||||||
<p className="2xl:text-base text-sm">На</p>
|
|
||||||
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
|
||||||
12
|
|
||||||
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
|
||||||
%
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
увеличивает конверсию из бронирования в продажу
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
|
||||||
<p className="2xl:text-base text-sm">До</p>
|
|
||||||
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
|
||||||
2
|
|
||||||
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
|
||||||
раз
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
сокращает время
|
|
||||||
<br />
|
|
||||||
реализации проекта
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
|
||||||
<p className="2xl:text-base text-sm">До</p>
|
|
||||||
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
|
||||||
4
|
|
||||||
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
|
||||||
раз
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
сокращает время на подготовку рекламных материалов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
|
||||||
<div>
|
|
||||||
<ExampleCard
|
|
||||||
title="ЖК «Upside Towers»"
|
|
||||||
company="Upside Development"
|
|
||||||
image="/images/examples/5.jpg"
|
|
||||||
/>
|
|
||||||
<ExampleCard
|
|
||||||
title="ЖК «Life Резиденция»"
|
|
||||||
company="ГК Паритет Девелопмент"
|
|
||||||
image="/images/examples/1.jpg"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ExampleCard
|
|
||||||
title="ЖК «Айвазовский City»"
|
|
||||||
company="ЭНКО"
|
|
||||||
image="/images/examples/3.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="2xl:mt-[220px] xl:mt-40 sm:mt-[104px]">
|
|
||||||
<ExampleCard
|
|
||||||
title="Авторский квартал Машаров"
|
|
||||||
company="Сибинтел Девелопмент"
|
|
||||||
image="/images/examples/2.jpg"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ExampleCard
|
|
||||||
title="ЖК «Сюжеты»"
|
|
||||||
company="Fortis Development"
|
|
||||||
image="/images/examples/4.jpg"
|
|
||||||
className="xl:mb-[0px] sm:mb-[0px] mb-[0px]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] scale-150 -z-10 blur-[44px]">
|
|
||||||
<img src="/images/blendings/2.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20"
|
|
||||||
viewport={{ margin: "-10%" }}
|
|
||||||
onViewportEnter={handleOnViewportFeatureEnter}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-20">
|
|
||||||
<div className="xl:flex flex-col grid sm:grid-cols-2 xl:gap-8 gap-3">
|
|
||||||
<Heading2>
|
|
||||||
Функциональные
|
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">возможности</span>
|
|
||||||
</Heading2>
|
|
||||||
<p className="xl:w-2/3 xl:text-base text-sm">
|
|
||||||
Интерактивная презентация увлекает покупателей и предоставляет
|
|
||||||
актуальную информацию о жилом комплексе, отвечая на все
|
|
||||||
вопросы и показывая важные особенности и преимущества объекта
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pr-6 xl:block hidden">
|
|
||||||
{videosFeatures.map((video) => (
|
|
||||||
<FeatureItem
|
|
||||||
key={video.id}
|
|
||||||
title={video.title}
|
|
||||||
desc={video.desc}
|
|
||||||
video={video.value}
|
|
||||||
handleHoverStart={(video) => setSelectedVideo(video)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FeatureVideoViewBox
|
|
||||||
isViewportEntered={isViewportEntered}
|
|
||||||
selectedVideo={selectedVideo}
|
|
||||||
videos={videosFeatures}
|
|
||||||
/>
|
|
||||||
<VideoSliderMobile
|
|
||||||
isViewportEntered={isViewportEntered}
|
|
||||||
videos={videosFeatures}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
<Histories />
|
<Histories />
|
||||||
|
<Stream />
|
||||||
<div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
<AnalyzeUsers />
|
||||||
<div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
|
<ExcursionVR />
|
||||||
<div className="flex flex-col gap-8 justify-between">
|
<EffeciencyCalculator />
|
||||||
<Heading2>
|
|
||||||
Graff.estate stream —
|
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">
|
|
||||||
удаленная
|
|
||||||
<br />
|
|
||||||
демонстрация
|
|
||||||
<br />
|
|
||||||
жилого комплекса
|
|
||||||
</span>
|
|
||||||
</Heading2>
|
|
||||||
<a
|
|
||||||
href="https://stream.graff.tech"
|
|
||||||
target="_blank"
|
|
||||||
className="w-fit sm:inline-block hidden"
|
|
||||||
>
|
|
||||||
<Button>Узнать больше</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col xl:gap-16 gap-6">
|
|
||||||
<div className="grid xl:grid-cols-2 xl:gap-4 gap-2">
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
Высокий уровень графики и полное погружение покупателя в
|
|
||||||
процесс выбора квартиры
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
Местоположение и устройство значения не имеют. Нужен только
|
|
||||||
интернет
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="xl:grid grid-cols-2 gap-4">
|
|
||||||
<img src="/images/Datamining.jpg" alt="" className="w-full" />
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://stream.graff.tech"
|
|
||||||
target="_blank"
|
|
||||||
className="w-fit sm:hidden inline-block"
|
|
||||||
>
|
|
||||||
<Button>Узнать больше</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-[#3D425C]">
|
|
||||||
<StreamButton
|
|
||||||
icon="/icons/Revolution.svg"
|
|
||||||
title="МФК «Re:volution towers»"
|
|
||||||
location="Россия, Екатеринбург"
|
|
||||||
background="/images/stream/nks.jpg"
|
|
||||||
link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
|
|
||||||
/>
|
|
||||||
<StreamButton
|
|
||||||
icon="/icons/Residence.svg"
|
|
||||||
title="ЖК «Life Резиденция»"
|
|
||||||
location="Россия, Тюмень"
|
|
||||||
background="/images/stream/liferes.jpg"
|
|
||||||
link="https://stream.graff.tech/?build=lifeResidence&location=a1"
|
|
||||||
/>
|
|
||||||
<StreamButton
|
|
||||||
icon="/icons/Aivaz.svg"
|
|
||||||
title="ЖК «Айвазовский City»"
|
|
||||||
location="Россия, Тюмень"
|
|
||||||
background="/images/stream/aivaz.jpg"
|
|
||||||
link="https://stream.graff.tech/?build=IvazowskyDev&location=a1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute -top-36 left-0 -z-10 blur-[20px]">
|
|
||||||
<img src="/images/blendings/3.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<div className="flex flex-col xl:gap-8 sm:gap-6 gap-4">
|
|
||||||
<Heading2>
|
|
||||||
Анализируем
|
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">
|
|
||||||
поведение
|
|
||||||
<br />
|
|
||||||
пользователей
|
|
||||||
</span>
|
|
||||||
</Heading2>
|
|
||||||
<p className="xl:w-2/3 2xl:text-base text-sm">
|
|
||||||
Система внутренней аналитики программы собирает информацию о
|
|
||||||
поведении пользователя и эффективности работы менеджеров для
|
|
||||||
создания отчета, содержащего необходимые метрики
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="sm:block hidden xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
|
|
||||||
<p className="xl:w-4/5 2xl:text-xl font-gilroy font-medium 2xl:leading-[120%]">
|
|
||||||
Полученный отчет позволяет сделать процесс демонстрации
|
|
||||||
жилого комплекса еще эффективнее
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="w-full 2xl:min-h-[600px] xl:min-h-[500px] min-h-[384px] bg-cover bg-center bg-no-repeat"
|
|
||||||
style={{ backgroundImage: "url('/images/Analysis.jpg')" }}
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div className="sm:hidden block xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
|
|
||||||
<p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium leading-[120%]">
|
|
||||||
Полученный отчет позволяет сделать процесс демонстрации
|
|
||||||
жилого комплекса еще эффективнее
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<div className="flex flex-col gap-8">
|
|
||||||
<Heading2>
|
|
||||||
Экскурсия
|
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">
|
|
||||||
в виртуальной
|
|
||||||
<br />
|
|
||||||
реальности
|
|
||||||
</span>
|
|
||||||
</Heading2>
|
|
||||||
<Button
|
|
||||||
className="sm:block hidden"
|
|
||||||
onClick={() => setModal(<FeedbackModal />)}
|
|
||||||
>
|
|
||||||
Записаться в шоу-рум
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="xl:block hidden pb-8 border-b border-[#3D425C]">
|
|
||||||
<p className="font-gilroy 2xl:text-xl 2xl:leading-[120%]">
|
|
||||||
Клиент полностью погружается в воссозданную реальность,
|
|
||||||
чувствует удобство и уровень комфорта
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-10">
|
|
||||||
<div className="grid xl:grid-cols-2 xl:gap-4 gap-6">
|
|
||||||
<p className="2xl:text-base text-sm">
|
|
||||||
Достаточно надеть шлем виртуальной реальности, чтобы
|
|
||||||
прогуляться, оценить и ощутить пространство
|
|
||||||
</p>
|
|
||||||
<img
|
|
||||||
src="/images/VR.png"
|
|
||||||
alt=""
|
|
||||||
className="sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<video
|
|
||||||
src="/videos/vr.mp4"
|
|
||||||
muted
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
playsInline
|
|
||||||
className="xl:block hidden"
|
|
||||||
></video>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-full sm:mt-8 mt-4 flex flex-col sm:gap-12 gap-8">
|
|
||||||
<video
|
|
||||||
src="/videos/vr.mp4"
|
|
||||||
muted
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
playsInline
|
|
||||||
className="xl:hidden block"
|
|
||||||
></video>
|
|
||||||
<div className="xl:hidden flex border-b border-[#3D425C] sm:pb-10 pb-6 flex-col gap-8">
|
|
||||||
<p className="font-gilroy font-medium leading-[120%] xl:hidden block">
|
|
||||||
Клиент полностью погружается
|
|
||||||
<br />
|
|
||||||
в воссозданную реальность, чувствует
|
|
||||||
<br />
|
|
||||||
удобство и уровень комфорта
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
className="sm:hidden inline-block"
|
|
||||||
onClick={() => setModal(<FeedbackModal />)}
|
|
||||||
>
|
|
||||||
Записаться в шоу-рум
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute -top-[50%] left-[16%] blur-[20px] -z-10">
|
|
||||||
<img src="/images/blendings/4.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative flex flex-col 2xl:gap-16 xl:gap-10 sm:gap-12 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
|
||||||
<div className="flex flex-col sm:gap-8 gap-6">
|
|
||||||
<Heading2>
|
|
||||||
Оцените эффективность <br className="xl:hidden block" />
|
|
||||||
интерактивного
|
|
||||||
<br />
|
|
||||||
<span className="text-gradient-none">инструмента продаж</span>
|
|
||||||
</Heading2>
|
|
||||||
<div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-2">
|
|
||||||
<p className="xl:w-2/3 2xl:text-base text-sm">
|
|
||||||
Мы изучили отраслевую аналитику на рынке продаж новых квартир
|
|
||||||
и на основе данных собрали калькулятор эффективности продукта
|
|
||||||
</p>
|
|
||||||
<p className="xl:w-2/3 2xl:text-base text-sm">
|
|
||||||
При использовании проектного финансирования, главное — это
|
|
||||||
время. Быстрее наполняются эскроу-счета — меньше процент за
|
|
||||||
использование заемных денег
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Calc />
|
|
||||||
|
|
||||||
<div className="absolute -top-16 right-0 blur-[18px] -z-10">
|
|
||||||
<img src="/images/blendings/5.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Winners />
|
<Winners />
|
||||||
<Reviews />
|
{/* <Reviews /> */}
|
||||||
<Projects />
|
<Projects />
|
||||||
<Clients />
|
<Clients />
|
||||||
|
<ContactUs />
|
||||||
<div className="relative overflow-hidden pb-[50px]">
|
|
||||||
<div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
|
|
||||||
<div className="col-span-1">
|
|
||||||
<div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
|
|
||||||
<p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
|
|
||||||
Свяжитесь
|
|
||||||
<br />с нами
|
|
||||||
</p>
|
|
||||||
<p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
|
|
||||||
Хотите увеличить конверсию?
|
|
||||||
<br />
|
|
||||||
Давайте обсудим детали!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="lg:col-span-3">
|
|
||||||
<FeedbackForm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-[104px] relative">
|
|
||||||
<div className="relative grid lg:grid-cols-4 gap-4">
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<p className="2xl:text-xl font-gilroy font-semibold">
|
|
||||||
Горячая линия
|
|
||||||
</p>
|
|
||||||
<div className="w-full h-px bg-[#3D425C]"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2 2xl:pr-4 xl:pr-2">
|
|
||||||
<a
|
|
||||||
href="mailto:info@graff.tech"
|
|
||||||
className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
|
|
||||||
>
|
|
||||||
<span>Написать</span>
|
|
||||||
<MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="tel:88007700067"
|
|
||||||
className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
|
|
||||||
>
|
|
||||||
<span>Позвонить</span>
|
|
||||||
<PhoneIcon className="lg:w-8 lg:h-8 w-6 h-6" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sm:col-span-2 flex sm:justify-end lg:mt-0 mt-10">
|
|
||||||
<div className="lg:w-auto sm:w-1/2 w-full flex justify-between 2xl:gap-8 lg:gap-6 gap-4">
|
|
||||||
<p className="2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1">
|
|
||||||
Социальные
|
|
||||||
<br />
|
|
||||||
сети
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-2 h-fit">
|
|
||||||
<a
|
|
||||||
href="https://www.youtube.com/@GRAFFtech"
|
|
||||||
target="_blank"
|
|
||||||
className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
|
|
||||||
>
|
|
||||||
<YouTubeIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://vk.com/graff.interactive"
|
|
||||||
target="_blank"
|
|
||||||
className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
|
|
||||||
>
|
|
||||||
<VKIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://t.me/GRAFFinteractive"
|
|
||||||
target="_blank"
|
|
||||||
className="border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 hover:opacity-100 transition-all"
|
|
||||||
>
|
|
||||||
<TelegramIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="absolute top-[65%] left-[26%] -z-10 blur-[10px]">
|
|
||||||
<img src="/images/blendings/7.svg" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className=" border-t border-[#3D425C] text-sm">
|
<Footer />
|
||||||
<div className="container mx-auto xl:px-8 max-w-[1600px]">
|
|
||||||
<div className="grid lg:grid-cols-4">
|
|
||||||
<div className="sm:col-span-2 lg:order-none order-last py-6 xl:px-0 px-6 flex sm:flex-row flex-col sm:gap-6 gap-4 lg:border-t-0 border-t border-[#3D425C]">
|
|
||||||
<div>
|
|
||||||
<img src="/images/Logo.svg" alt="" className="max-h-fit" />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col sm:gap-1 gap-4">
|
|
||||||
<p className="flex sm:flex-row flex-col sm:gap-4 gap-1">
|
|
||||||
<a href="https://graff.tech/privacypolicy" target="_blank">
|
|
||||||
Политика конфиденциальности
|
|
||||||
</a>
|
|
||||||
{/* <a href="https://graff.estate" className="">
|
|
||||||
graff.estate
|
|
||||||
</a> */}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-[#C5C7CE]">
|
|
||||||
© 2023 GRAFF interactive. Все права защищены.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-1 lg:border-l sm:border-b-0 border-b border-[#3D425C] xl:px-8 sm:px-6 px-4 py-6 flex flex-col justify-center">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="text-[#EBEBEB] flex flex-col gap-1">
|
|
||||||
<a href="mailto:info@graff.tech">info@graff.tech</a>
|
|
||||||
<a href="tel:88007700067">8 800 770 00 67</a>
|
|
||||||
</div>
|
|
||||||
<div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
|
|
||||||
RU
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-1 sm:border-l border-[#3D425C] xl:pl-8 xl:pr-0 sm:px-6 px-4 py-6 flex flex-col justify-center">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="text-[#EBEBEB] flex flex-col gap-1">
|
|
||||||
<a href="mailto:waseem@graff.tech">waseem@graff.tech</a>
|
|
||||||
<a href="tel:+971509388902">+971 50 938 8902</a>
|
|
||||||
</div>
|
|
||||||
<div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
|
|
||||||
UAE
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ModalContainer />
|
<ModalContainer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import Heading2 from "./Headings/Heading2";
|
||||||
|
|
||||||
|
const AnalyzeUsers = () => {
|
||||||
|
return (
|
||||||
|
<div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<div className="flex flex-col xl:gap-8 sm:gap-6 gap-4">
|
||||||
|
<Heading2>
|
||||||
|
Анализируем
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">
|
||||||
|
поведение
|
||||||
|
<br />
|
||||||
|
пользователей
|
||||||
|
</span>
|
||||||
|
</Heading2>
|
||||||
|
<p className="xl:w-2/3 2xl:text-base text-sm">
|
||||||
|
Система внутренней аналитики программы собирает информацию о
|
||||||
|
поведении пользователя и эффективности работы менеджеров для
|
||||||
|
создания отчета, содержащего необходимые метрики
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="sm:block hidden xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
|
||||||
|
<p className="xl:w-4/5 2xl:text-xl font-gilroy font-medium 2xl:leading-[120%]">
|
||||||
|
Полученный отчет позволяет сделать процесс демонстрации
|
||||||
|
жилого комплекса еще эффективнее
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="w-full 2xl:min-h-[600px] xl:min-h-[500px] min-h-[384px] bg-cover bg-center bg-no-repeat"
|
||||||
|
style={{ backgroundImage: "url('/images/Analysis.jpg')" }}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className="sm:hidden block xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
|
||||||
|
<p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium leading-[120%]">
|
||||||
|
Полученный отчет позволяет сделать процесс демонстрации
|
||||||
|
жилого комплекса еще эффективнее
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AnalyzeUsers;
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import FeedbackForm from "./FeedbackForm";
|
||||||
|
import MailIcon from "./icons/MailIcon";
|
||||||
|
import PhoneIcon from "./icons/PhoneIcon";
|
||||||
|
import TelegramIcon from "./icons/TelegramIcon";
|
||||||
|
import VKIcon from "./icons/VKIcon";
|
||||||
|
import YouTubeIcon from "./icons/YouTubeIcon";
|
||||||
|
|
||||||
|
const ContactUs = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden pb-[50px]">
|
||||||
|
<div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
|
||||||
|
<div className="col-span-1">
|
||||||
|
<div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
|
||||||
|
<p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
|
||||||
|
Свяжитесь
|
||||||
|
<br />с нами
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
|
||||||
|
Хотите увеличить конверсию?
|
||||||
|
<br />
|
||||||
|
Давайте обсудим детали!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
<FeedbackForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-[104px] relative">
|
||||||
|
<div className="relative grid lg:grid-cols-4 gap-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<p className="2xl:text-xl font-gilroy font-semibold">
|
||||||
|
Горячая линия
|
||||||
|
</p>
|
||||||
|
<div className="w-full h-px bg-[#3D425C]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2 2xl:pr-4 xl:pr-2">
|
||||||
|
<a
|
||||||
|
href="mailto:info@graff.tech"
|
||||||
|
className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
|
||||||
|
>
|
||||||
|
<span>Написать</span>
|
||||||
|
<MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="tel:88007700067"
|
||||||
|
className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
|
||||||
|
>
|
||||||
|
<span>Позвонить</span>
|
||||||
|
<PhoneIcon className="lg:w-8 lg:h-8 w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2 flex sm:justify-end lg:mt-0 mt-10">
|
||||||
|
<div className="lg:w-auto sm:w-1/2 w-full flex justify-between 2xl:gap-8 lg:gap-6 gap-4">
|
||||||
|
<p className="2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1">
|
||||||
|
Социальные
|
||||||
|
<br />
|
||||||
|
сети
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2 h-fit">
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/@GRAFFtech"
|
||||||
|
target="_blank"
|
||||||
|
className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
|
||||||
|
>
|
||||||
|
<YouTubeIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://vk.com/graff.interactive"
|
||||||
|
target="_blank"
|
||||||
|
className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
|
||||||
|
>
|
||||||
|
<VKIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://t.me/GRAFFinteractive"
|
||||||
|
target="_blank"
|
||||||
|
className="border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 hover:opacity-100 transition-all"
|
||||||
|
>
|
||||||
|
<TelegramIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-[65%] left-[26%] -z-10 blur-[10px]">
|
||||||
|
<img src="/images/blendings/7.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactUs;
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
import { ChangeEvent, FormEvent, useState } from "react";
|
import { ChangeEvent, FormEvent, useState } from "react";
|
||||||
import AsteriskIcon from "./icons/AsteriskIcon";
|
import AsteriskIcon from "../icons/AsteriskIcon";
|
||||||
import InputMask from "react-input-mask";
|
import InputMask from "react-input-mask";
|
||||||
import "./ContactsForm.css";
|
import "./ContactsForm.css";
|
||||||
import Button from "./Button";
|
import Button from "../Button";
|
||||||
import SendIcon from "./icons/SendIcon";
|
import SendIcon from "../icons/SendIcon";
|
||||||
import LoaderIcon from "./icons/LoaderIcon";
|
import LoaderIcon from "../icons/LoaderIcon";
|
||||||
import api from "../utils/api";
|
import api from "../../utils/api";
|
||||||
import CheckGradientIcon from "./icons/CheckGradientIcon";
|
import CheckGradientIcon from "../icons/CheckGradientIcon";
|
||||||
import useModalStore from "../stores/useModalStore";
|
import useModalStore from "../../stores/useModalStore";
|
||||||
import Close2Icon from "./icons/Close2Icon";
|
import Close2Icon from "../icons/Close2Icon";
|
||||||
|
|
||||||
function ContactsForm() {
|
function ContactsForm() {
|
||||||
const [name, setName] = useState<string>("");
|
const [name, setName] = useState<string>("");
|
||||||
@@ -1,12 +1,12 @@
|
|||||||
/* eslint-disable react-hooks/exhaustive-deps */
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
import Slider from "react-rangeslider";
|
import Slider from "react-rangeslider";
|
||||||
import Button from "./Button";
|
import Button from "../Button";
|
||||||
import CalcSelect from "./CalcSelect";
|
import CalcSelect from "./CalcSelect";
|
||||||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
import ArrowRightIcon from "../icons/ArrowRightIcon";
|
||||||
import regionsData from "../assets/regionsData.json";
|
import regionsData from "../../assets/regionsData.json";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import CloseIcon from "./icons/CloseIcon";
|
import CloseIcon from "../icons/CloseIcon";
|
||||||
import api from "../utils/api";
|
import api from "../../utils/api";
|
||||||
|
|
||||||
interface Region {
|
interface Region {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
import ChevronDown from "./icons/ChevronDown";
|
import ChevronDown from "../icons/ChevronDown";
|
||||||
import CheckIcon from "./icons/CheckIcon";
|
import CheckIcon from "../icons/CheckIcon";
|
||||||
import { useOnClickOutside } from "usehooks-ts";
|
import { useOnClickOutside } from "usehooks-ts";
|
||||||
|
|
||||||
interface CalcSelectProps {
|
interface CalcSelectProps {
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
import Calc from "@components/EffeciencyCalculator/Calc";
|
||||||
|
import Heading2 from "@components/Headings/Heading2";
|
||||||
|
|
||||||
|
const EffeciencyCalculator = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col 2xl:gap-16 xl:gap-10 sm:gap-12 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<div className="flex flex-col sm:gap-8 gap-6">
|
||||||
|
<Heading2>
|
||||||
|
Оцените эффективность <br className="xl:hidden block" />
|
||||||
|
интерактивного
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">инструмента продаж</span>
|
||||||
|
</Heading2>
|
||||||
|
<div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-2">
|
||||||
|
<p className="xl:w-2/3 2xl:text-base text-sm">
|
||||||
|
Мы изучили отраслевую аналитику на рынке продаж новых квартир и на
|
||||||
|
основе данных собрали калькулятор эффективности продукта
|
||||||
|
</p>
|
||||||
|
<p className="xl:w-2/3 2xl:text-base text-sm">
|
||||||
|
При использовании проектного финансирования, главное — это время.
|
||||||
|
Быстрее наполняются эскроу-счета — меньше процент за использование
|
||||||
|
заемных денег
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Calc />
|
||||||
|
|
||||||
|
<div className="absolute -top-16 right-0 blur-[18px] -z-10">
|
||||||
|
<img src="/images/blendings/5.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EffeciencyCalculator;
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import ExampleCard from "./ExampleCard";
|
||||||
|
|
||||||
|
const Examples = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<div>
|
||||||
|
<ExampleCard
|
||||||
|
title="ЖК «Upside Towers»"
|
||||||
|
company="Upside Development"
|
||||||
|
image="/images/examples/5.jpg"
|
||||||
|
/>
|
||||||
|
<ExampleCard
|
||||||
|
title="ЖК «Life Резиденция»"
|
||||||
|
company="ГК Паритет Девелопмент"
|
||||||
|
image="/images/examples/1.jpg"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ExampleCard
|
||||||
|
title="ЖК «Айвазовский City»"
|
||||||
|
company="ЭНКО"
|
||||||
|
image="/images/examples/3.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="2xl:mt-[220px] xl:mt-40 sm:mt-[104px]">
|
||||||
|
<ExampleCard
|
||||||
|
title="Авторский квартал Машаров"
|
||||||
|
company="Сибинтел Девелопмент"
|
||||||
|
image="/images/examples/2.jpg"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ExampleCard
|
||||||
|
title="ЖК «Сюжеты»"
|
||||||
|
company="Fortis Development"
|
||||||
|
image="/images/examples/4.jpg"
|
||||||
|
className="xl:mb-[0px] sm:mb-[0px] mb-[0px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] scale-150 -z-10 blur-[44px]">
|
||||||
|
<img src="/images/blendings/2.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Examples;
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import useModalStore from "@stores/useModalStore";
|
||||||
|
import Button from "./Button";
|
||||||
|
import Heading2 from "./Headings/Heading2";
|
||||||
|
import FeedbackModal from "./modals/FeedbackModal";
|
||||||
|
|
||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
const ExcursionVR = () => {
|
||||||
|
const [setModal] = useModalStore((state) => [state.setModal]);
|
||||||
|
|
||||||
|
const handleBtnClick = () => setModal(<FeedbackModal />);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<div className="flex flex-col gap-8">
|
||||||
|
<Heading2>
|
||||||
|
Экскурсия
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">
|
||||||
|
в виртуальной
|
||||||
|
<br />
|
||||||
|
реальности
|
||||||
|
</span>
|
||||||
|
</Heading2>
|
||||||
|
<Button className="sm:block hidden" onClick={handleBtnClick}>
|
||||||
|
Записаться в шоу-рум
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="xl:block hidden pb-8 border-b border-[#3D425C]">
|
||||||
|
<p className="font-gilroy 2xl:text-xl 2xl:leading-[120%]">
|
||||||
|
Клиент полностью погружается в воссозданную реальность, чувствует
|
||||||
|
удобство и уровень комфорта
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-10">
|
||||||
|
<div className="grid xl:grid-cols-2 xl:gap-4 gap-6">
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
Достаточно надеть шлем виртуальной реальности, чтобы прогуляться,
|
||||||
|
оценить и ощутить пространство
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
src="/images/VR.png"
|
||||||
|
alt=""
|
||||||
|
className="sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<video
|
||||||
|
src="/videos/vr.mp4"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
playsInline
|
||||||
|
className="xl:block hidden"
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-full sm:mt-8 mt-4 flex flex-col sm:gap-12 gap-8">
|
||||||
|
<video
|
||||||
|
src="/videos/vr.mp4"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
playsInline
|
||||||
|
className="xl:hidden block"
|
||||||
|
></video>
|
||||||
|
<div className="xl:hidden flex border-b border-[#3D425C] sm:pb-10 pb-6 flex-col gap-8">
|
||||||
|
<p className="font-gilroy font-medium leading-[120%] xl:hidden block">
|
||||||
|
Клиент полностью погружается
|
||||||
|
<br />
|
||||||
|
в воссозданную реальность, чувствует
|
||||||
|
<br />
|
||||||
|
удобство и уровень комфорта
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
className="sm:hidden inline-block"
|
||||||
|
onClick={() => setModal(<FeedbackModal />)}
|
||||||
|
>
|
||||||
|
Записаться в шоу-рум
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -top-[50%] left-[16%] blur-[20px] -z-10">
|
||||||
|
<img src="/images/blendings/4.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExcursionVR;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import ArrowIcon from "./icons/ArrowIcon";
|
import ArrowIcon from "../icons/ArrowIcon";
|
||||||
|
|
||||||
interface FeatureItemProps {
|
interface FeatureItemProps {
|
||||||
title: string;
|
title: string;
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { Video } from "../types/Video";
|
import { Video } from "../../types/Video";
|
||||||
|
|
||||||
interface FeatureVideoViewBoxProps {
|
interface FeatureVideoViewBoxProps {
|
||||||
selectedVideo: string;
|
selectedVideo: string;
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import FeatureItem from "@components/Features/FeatureItem";
|
||||||
|
import FeatureVideoViewBox from "@components/Features/FeatureVideoViewBox";
|
||||||
|
import Heading2 from "@components/Headings/Heading2";
|
||||||
|
import VideoSliderMobile from "@components/Features/VideoSliderMobile";
|
||||||
|
import { videosFeatures } from "../../consts/videoFeatures";
|
||||||
|
|
||||||
|
const Features = () => {
|
||||||
|
const [selectedVideo, setSelectedVideo] = useState<string>(
|
||||||
|
"/videos/features/virtual_tour.mp4"
|
||||||
|
);
|
||||||
|
const [isViewportEntered, setIsViewportEntered] = useState(false);
|
||||||
|
|
||||||
|
const handleOnViewportFeatureEnter = () => {
|
||||||
|
if (isViewportEntered) return;
|
||||||
|
|
||||||
|
setIsViewportEntered(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20"
|
||||||
|
viewport={{ margin: "-10%" }}
|
||||||
|
onViewportEnter={handleOnViewportFeatureEnter}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-20">
|
||||||
|
<div className="xl:flex flex-col grid sm:grid-cols-2 xl:gap-8 gap-3">
|
||||||
|
<Heading2>
|
||||||
|
Функциональные
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">возможности</span>
|
||||||
|
</Heading2>
|
||||||
|
<p className="xl:w-2/3 xl:text-base text-sm">
|
||||||
|
Интерактивная презентация увлекает покупателей и предоставляет
|
||||||
|
актуальную информацию о жилом комплексе, отвечая на все вопросы
|
||||||
|
и показывая важные особенности и преимущества объекта
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pr-6 xl:block hidden">
|
||||||
|
{videosFeatures.map((video) => (
|
||||||
|
<FeatureItem
|
||||||
|
key={video.id}
|
||||||
|
title={video.title}
|
||||||
|
desc={video.desc}
|
||||||
|
video={video.value}
|
||||||
|
handleHoverStart={(video) => setSelectedVideo(video)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<FeatureVideoViewBox
|
||||||
|
isViewportEntered={isViewportEntered}
|
||||||
|
selectedVideo={selectedVideo}
|
||||||
|
videos={videosFeatures}
|
||||||
|
/>
|
||||||
|
<VideoSliderMobile
|
||||||
|
isViewportEntered={isViewportEntered}
|
||||||
|
videos={videosFeatures}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Features;
|
||||||
+3
-3
@@ -2,10 +2,10 @@
|
|||||||
/* eslint-disable react-hooks/exhaustive-deps */
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
import ArrowLeftIcon from "../icons/ArrowLeftIcon";
|
||||||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
import ArrowRightIcon from "../icons/ArrowRightIcon";
|
||||||
import { useSwipeable } from "react-swipeable";
|
import { useSwipeable } from "react-swipeable";
|
||||||
import { Video } from "../types/Video";
|
import { Video } from "../../types/Video";
|
||||||
|
|
||||||
interface IVideoSliderMobile {
|
interface IVideoSliderMobile {
|
||||||
isViewportEntered: boolean;
|
isViewportEntered: boolean;
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div className=" border-t border-[#3D425C] text-sm">
|
||||||
|
<div className="container mx-auto xl:px-8 max-w-[1600px]">
|
||||||
|
<div className="grid lg:grid-cols-4">
|
||||||
|
<div className="sm:col-span-2 lg:order-none order-last py-6 xl:px-0 px-6 flex sm:flex-row flex-col sm:gap-6 gap-4 lg:border-t-0 border-t border-[#3D425C]">
|
||||||
|
<div>
|
||||||
|
<img src="/images/Logo.svg" alt="" className="max-h-fit" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col sm:gap-1 gap-4">
|
||||||
|
<p className="flex sm:flex-row flex-col sm:gap-4 gap-1">
|
||||||
|
<a href="https://graff.tech/privacypolicy" target="_blank">
|
||||||
|
Политика конфиденциальности
|
||||||
|
</a>
|
||||||
|
{/* <a href="https://graff.estate" className="">
|
||||||
|
graff.estate
|
||||||
|
</a> */}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-[#C5C7CE]">
|
||||||
|
© 2023 GRAFF interactive. Все права защищены.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-1 lg:border-l sm:border-b-0 border-b border-[#3D425C] xl:px-8 sm:px-6 px-4 py-6 flex flex-col justify-center">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="text-[#EBEBEB] flex flex-col gap-1">
|
||||||
|
<a href="mailto:info@graff.tech">info@graff.tech</a>
|
||||||
|
<a href="tel:88007700067">8 800 770 00 67</a>
|
||||||
|
</div>
|
||||||
|
<div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
|
||||||
|
RU
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-1 sm:border-l border-[#3D425C] xl:pl-8 xl:pr-0 sm:px-6 px-4 py-6 flex flex-col justify-center">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="text-[#EBEBEB] flex flex-col gap-1">
|
||||||
|
<a href="mailto:waseem@graff.tech">waseem@graff.tech</a>
|
||||||
|
<a href="tel:+971509388902">+971 50 938 8902</a>
|
||||||
|
</div>
|
||||||
|
<div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
|
||||||
|
UAE
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
/* eslint-disable react/jsx-no-undef */
|
||||||
|
|
||||||
|
import useModalStore from "@stores/useModalStore";
|
||||||
|
import Button from "./Button";
|
||||||
|
import FeedbackModal from "./modals/FeedbackModal";
|
||||||
|
|
||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
const Header = () => {
|
||||||
|
const [setModal] = useModalStore((state) => [state.setModal]);
|
||||||
|
const handleOnBtnClick = () => setModal(<FeedbackModal />);
|
||||||
|
return (
|
||||||
|
<div className="relative container mx-auto 2xl:max-w-screen-2xl">
|
||||||
|
<div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src="/images/Logo.svg"
|
||||||
|
alt=""
|
||||||
|
className="sm:block hidden max-h-fit"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/images/LogoMobile.svg"
|
||||||
|
alt=""
|
||||||
|
className="sm:hidden block"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex sm:gap-8 gap-2">
|
||||||
|
<Button onClick={handleOnBtnClick}>
|
||||||
|
<span className="sm:inline hidden">Оставить заявку</span>
|
||||||
|
<span className="sm:hidden inline">Связаться</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* <div className="flex gap-1">
|
||||||
|
<button className="px-3 border-gradient rounded-full font-gilroy font-medium h-10 flex items-center justify-center w-12">
|
||||||
|
<span className="absolute">RU</span>
|
||||||
|
</button>
|
||||||
|
<button className="px-3 rounded-full font-gilroy font-medium leading-none h-10 flex items-center justify-center w-12">
|
||||||
|
<span className="absolute">EN</span>
|
||||||
|
</button>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import LoadingIcon from "./icons/LoadingIcon";
|
||||||
|
|
||||||
|
const Showreel = () => {
|
||||||
|
const [isBuffering, setIsBuffering] = useState(true);
|
||||||
|
|
||||||
|
const handleOnPlaying = () => setIsBuffering(false);
|
||||||
|
const handleOnWaiting = () => setIsBuffering(true);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="container mx-auto 2xl:max-w-screen-2xl flex flex-col 2xl:gap-14 gap-6 2xl:mb-[120px] xl:mb-20 sm:mb-12 mb-8">
|
||||||
|
<h1 className="max-w-[1255px] font-gilroy 2xl:text-8xl sm:text-[64px] text-[40px] leading-none text-gradient font-medium">
|
||||||
|
Интерактивный инструмент
|
||||||
|
<br />
|
||||||
|
продаж <span className="text-gradient-none">для застройщиков</span>
|
||||||
|
</h1>
|
||||||
|
<p className="xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]">
|
||||||
|
Помогаем девелоперам эффективно демонстрировать свой объект. Продавать
|
||||||
|
больше и быстрее.
|
||||||
|
</p>
|
||||||
|
<div className="absolute top-20 right-0 blur-[10px] -z-10">
|
||||||
|
<img src="/images/blendings/1.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative aspect-video w-full 2xl:mb-[200px] sm:mb-[120px] mb-20 overflow-x-clip">
|
||||||
|
<video
|
||||||
|
src="/videos/showreel_1080p_4000k_h264.mp4"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
playsInline
|
||||||
|
className="absolute aspect-video w-full"
|
||||||
|
onPlaying={handleOnPlaying}
|
||||||
|
onWaiting={handleOnWaiting}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`absolute aspect-video w-full h-full flex justify-center items-center bg-black bg-opacity-50 transition-opacity ${
|
||||||
|
isBuffering ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex gap-4 items-center">
|
||||||
|
<span>
|
||||||
|
<LoadingIcon className="animate-spin h-5 w-5" />
|
||||||
|
</span>
|
||||||
|
<span className="font-gilroy">Загружаем шоурил...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Showreel;
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
import Heading2 from "./Headings/Heading2";
|
||||||
|
|
||||||
|
const Stats = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<Heading2>
|
||||||
|
Продавайте недвижимость
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">
|
||||||
|
проще и{" "}
|
||||||
|
<span className="relative">
|
||||||
|
<span style={{ WebkitTextFillColor: "#52587A" }}>быстрее</span>
|
||||||
|
<span className="absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white"></span>
|
||||||
|
</span>{" "}
|
||||||
|
дороже
|
||||||
|
</span>
|
||||||
|
</Heading2>
|
||||||
|
|
||||||
|
<div className="relative xl:flex items-center gap-4 xl:max-h-[400px]">
|
||||||
|
<p className="2xl:text-2xl sm:text-xl font-gilroy min-w-fit">
|
||||||
|
Мы собрали статистику{" "}
|
||||||
|
<span className="text-gradient font-semibold">за 13 лет</span> работы
|
||||||
|
<br />
|
||||||
|
с застройщиками,{" "}
|
||||||
|
<span className="text-gradient font-semibold">
|
||||||
|
реализовав 31 проект
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="2xl:ml-6 xl:ml-[14px] relative 2xl:-top-8 xl:-top-4 -z-10">
|
||||||
|
<img src="/images/Map.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium w-fit leading-none">
|
||||||
|
Graff.estate
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-0 gap-3">
|
||||||
|
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
||||||
|
<p className="2xl:text-base text-sm">На</p>
|
||||||
|
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
||||||
|
18
|
||||||
|
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
увеличивает конверсию из консультации в бронирование
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
||||||
|
<p className="2xl:text-base text-sm">На</p>
|
||||||
|
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
||||||
|
12
|
||||||
|
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
||||||
|
%
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
увеличивает конверсию из бронирования в продажу
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
||||||
|
<p className="2xl:text-base text-sm">До</p>
|
||||||
|
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
||||||
|
2
|
||||||
|
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
||||||
|
раз
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
сокращает время
|
||||||
|
<br />
|
||||||
|
реализации проекта
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
|
||||||
|
<p className="2xl:text-base text-sm">До</p>
|
||||||
|
<p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
|
||||||
|
4
|
||||||
|
<span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
|
||||||
|
раз
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
сокращает время на подготовку рекламных материалов
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stats;
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
import Button from "../Button";
|
||||||
|
import Heading2 from "../Headings/Heading2";
|
||||||
|
import StreamButton from "./StreamButton";
|
||||||
|
|
||||||
|
const Stream = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
|
||||||
|
<div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
|
||||||
|
<div className="flex flex-col gap-8 justify-between">
|
||||||
|
<Heading2>
|
||||||
|
Graff.estate stream —
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient-none">
|
||||||
|
удаленная
|
||||||
|
<br />
|
||||||
|
демонстрация
|
||||||
|
<br />
|
||||||
|
жилого комплекса
|
||||||
|
</span>
|
||||||
|
</Heading2>
|
||||||
|
<a
|
||||||
|
href="https://stream.graff.tech"
|
||||||
|
target="_blank"
|
||||||
|
className="w-fit sm:inline-block hidden"
|
||||||
|
>
|
||||||
|
<Button>Узнать больше</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col xl:gap-16 gap-6">
|
||||||
|
<div className="grid xl:grid-cols-2 xl:gap-4 gap-2">
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
Высокий уровень графики и полное погружение покупателя в процесс
|
||||||
|
выбора квартиры
|
||||||
|
</p>
|
||||||
|
<p className="2xl:text-base text-sm">
|
||||||
|
Местоположение и устройство значения не имеют. Нужен только
|
||||||
|
интернет
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="xl:grid grid-cols-2 gap-4">
|
||||||
|
<img src="/images/Datamining.jpg" alt="" className="w-full" />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://stream.graff.tech"
|
||||||
|
target="_blank"
|
||||||
|
className="w-fit sm:hidden inline-block"
|
||||||
|
>
|
||||||
|
<Button>Узнать больше</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-[#3D425C]">
|
||||||
|
<StreamButton
|
||||||
|
icon="/icons/Revolution.svg"
|
||||||
|
title="МФК «Re:volution towers»"
|
||||||
|
location="Россия, Екатеринбург"
|
||||||
|
background="/images/stream/nks.jpg"
|
||||||
|
link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
|
||||||
|
/>
|
||||||
|
<StreamButton
|
||||||
|
icon="/icons/Residence.svg"
|
||||||
|
title="ЖК «Life Резиденция»"
|
||||||
|
location="Россия, Тюмень"
|
||||||
|
background="/images/stream/liferes.jpg"
|
||||||
|
link="https://stream.graff.tech/?build=lifeResidence&location=a1"
|
||||||
|
/>
|
||||||
|
<StreamButton
|
||||||
|
icon="/icons/Aivaz.svg"
|
||||||
|
title="ЖК «Айвазовский City»"
|
||||||
|
location="Россия, Тюмень"
|
||||||
|
background="/images/stream/aivaz.jpg"
|
||||||
|
link="https://stream.graff.tech/?build=IvazowskyDev&location=a1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -top-36 left-0 -z-10 blur-[20px]">
|
||||||
|
<img src="/images/blendings/3.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stream;
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import Button from "./Button";
|
import Button from "../Button";
|
||||||
import ArrowIcon from "./icons/ArrowIcon";
|
import ArrowIcon from "../icons/ArrowIcon";
|
||||||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
import ArrowRightIcon from "../icons/ArrowRightIcon";
|
||||||
|
|
||||||
interface StreamButton {
|
interface StreamButton {
|
||||||
icon: string;
|
icon: string;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { IIconProps } from "../../types/IconProps";
|
||||||
|
|
||||||
|
const LoadingIcon = ({ className }: IIconProps) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
className={`${className}`}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
></circle>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadingIcon;
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import ContactsForm from "../ContactsForm";
|
import ContactsForm from "../ContactsForm/ContactsForm";
|
||||||
|
|
||||||
function FeedbackModal() {
|
function FeedbackModal() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
interface IIconProps {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { IIconProps };
|
||||||
Reference in New Issue
Block a user