914 lines
42 KiB
TypeScript
914 lines
42 KiB
TypeScript
import "./App.css";
|
||
import { Canvas } from "@react-three/fiber";
|
||
import { FormEvent, Suspense, useEffect, useRef, useState } from "react";
|
||
import PieChart from "./components/PieChart/PieChart";
|
||
import { Model } from "./components/VRHemlet";
|
||
import Calc from "./components/Calc";
|
||
import { motion, useInView } from "framer-motion";
|
||
import InputMask from "react-input-mask";
|
||
import api from "./utils/api";
|
||
import FeatureCard from "./components/FeatureCard";
|
||
import RelevantExpCard from "./components/RelevantExpCard";
|
||
import Title from "./components/Title";
|
||
|
||
function App() {
|
||
const parallaxRef = useRef<HTMLDivElement>(null);
|
||
|
||
const [fullname, setFullname] = useState<string>("");
|
||
const [email, setEmail] = useState<string>("");
|
||
const [company, setCompany] = useState<string>("");
|
||
const [phone, setPhone] = useState<string>("");
|
||
|
||
const [mapPosition, setMapPosition] = useState<string>("29% 100%");
|
||
const [mapCity, setMapCity] = useState<string>("Тюмень");
|
||
|
||
const [isShowRelevantExpCards, setIsShowRelevantExpCards] =
|
||
useState<boolean>(false);
|
||
|
||
const helmetRef = useRef(null);
|
||
const helmetInView = useInView(helmetRef);
|
||
// const [helmetIsAnim, setHelmetIsAnim] = useState<boolean>(true);
|
||
|
||
const featureImagesContainer = useRef<HTMLDivElement>(null);
|
||
const featureImages = [
|
||
"https://images.unsplash.com/photo-1682595950157-8d1cc0ef388f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
|
||
"https://images.unsplash.com/photo-1682402178953-f2cb484d4024?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
|
||
"https://plus.unsplash.com/premium_photo-1676648534973-dd205cb63d99?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
|
||
"https://images.unsplash.com/photo-1682353213492-8433d437855a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
|
||
];
|
||
const [selectedFeatureImageIndex, setSelectedFeatureImageIndex] =
|
||
useState<number>(0);
|
||
|
||
useEffect(() => {
|
||
if (featureImagesContainer.current) {
|
||
featureImagesContainer.current.insertAdjacentHTML(
|
||
"beforeend",
|
||
`<div data-index="${selectedFeatureImageIndex}" style="background-image: url('${featureImages[selectedFeatureImageIndex]}')" alt="" class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat fade-in" />`
|
||
);
|
||
|
||
if (featureImagesContainer.current.children.length > 1) {
|
||
setTimeout(() => {
|
||
featureImagesContainer.current?.firstElementChild?.remove();
|
||
}, 1000);
|
||
}
|
||
}
|
||
}, [selectedFeatureImageIndex]);
|
||
|
||
function handleScroll() {
|
||
if (parallaxRef.current) {
|
||
parallaxRef.current.style.transform = `translateY(${
|
||
window.scrollY * 0.4
|
||
}px)`;
|
||
|
||
const opacity = 1 - window.scrollY / 500;
|
||
|
||
if (opacity > 0) {
|
||
parallaxRef.current.style.opacity = `${opacity}`;
|
||
}
|
||
}
|
||
}
|
||
|
||
async function handleSubmitSendMail(e: FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
|
||
await api.post("mail", {
|
||
json: {
|
||
fullname,
|
||
email,
|
||
company,
|
||
phone,
|
||
},
|
||
});
|
||
|
||
setFullname("");
|
||
setEmail("");
|
||
setCompany("");
|
||
setPhone("");
|
||
|
||
alert("Заявка отправлена!");
|
||
}
|
||
|
||
function handleClickComplexCard(city: string) {
|
||
if (city === "Тюмень") {
|
||
setMapPosition("29% 100%");
|
||
} else if (city === "Екатеринбург") {
|
||
setMapPosition("22% 93%");
|
||
} else if (city === "Брянск") {
|
||
setMapPosition("1.5% 48%");
|
||
} else if (city === "Санкт-Петербург") {
|
||
setMapPosition("6% 16%");
|
||
} else if (city === "Нижний Тагил") {
|
||
setMapPosition("19% 77%");
|
||
}
|
||
|
||
setMapCity(city);
|
||
}
|
||
|
||
useEffect(() => {
|
||
window.addEventListener("scroll", handleScroll);
|
||
|
||
return () => {
|
||
window.removeEventListener("scroll", handleScroll);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="bg-[#131317] text-white">
|
||
<div
|
||
ref={parallaxRef}
|
||
className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl"
|
||
>
|
||
<div className="space-y-44 mb-44">
|
||
<div className="flex justify-between">
|
||
<div className="">
|
||
<a href="/">
|
||
<img src="/images/logo.png" alt="" />
|
||
</a>
|
||
</div>
|
||
<div className="flex sm:space-x-8 space-x-2">
|
||
<button className="px-4 py-2 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity">
|
||
<span className="sm:block hidden">Связаться с нами</span>
|
||
<span className="sm:hidden block">Связаться</span>
|
||
</button>
|
||
|
||
{/* <div className="space-x-2">
|
||
<button className="p-2 bg-white bg-opacity-25 hover:bg-opacity-30 text-white rounded-full w-10 h-10 transition-colors">
|
||
RU
|
||
</button>
|
||
<button className="sm:inline-block hidden p-2 hover:bg-white hover:bg-opacity-25 text-white rounded-full w-10 h-10 transition-colors">
|
||
EN
|
||
</button>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-8">
|
||
{/* <div className="h-12 w-0.5 bg-[#23242A]"></div> */}
|
||
<h1 className="font-gilroy font-medium 2xl:text-8xl xl:text-7xl lg:text-6xl text-4xl text-gradient">
|
||
Интерактивный инструмент продаж для застройщиков
|
||
</h1>
|
||
<p className="2xl:text-xl lg:text-lg">
|
||
Помогаем девелоперам эффективно демонстрировать свой объект
|
||
<br />
|
||
Продавать больше и быстрее
|
||
</p>
|
||
{/* <div className="h-24 w-0.5 bg-[#23242A]"></div> */}
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-0 right-0 ">
|
||
<img src="/images/shapes/1.svg" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative xl:space-y-48 lg:space-y-40 sm:space-y-28 space-y-20">
|
||
<div
|
||
className="max-w-screen h-screen bg-cover bg-no-repeat bg-center rounded-xl overflow-hidden"
|
||
style={{ backgroundImage: "url('/images/content.jpg')" }}
|
||
></div>
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="space-y-32">
|
||
<div className="space-y-8">
|
||
<Title>
|
||
Эффективность инстумента
|
||
<br />
|
||
продаж в цифрах
|
||
</Title>
|
||
<p className="2xl:text-xl lg:text-lg">
|
||
Мы собрали статистику за 10 лет работы
|
||
<br />с застройщиками, реализовав 21 проект
|
||
</p>
|
||
</div>
|
||
<div className="grid lg:grid-cols-2 grid-cols-1 gap-8">
|
||
<div className="space-y-20">
|
||
<div className="grid sm:grid-cols-2 gap-6">
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">До</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
|
||
2
|
||
</span>
|
||
<span className="text-gradient text-2xl font-bold">
|
||
раз
|
||
</span>
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
сокращает время
|
||
<br />
|
||
реализации проекта
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">До</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
|
||
26
|
||
</span>
|
||
{/* <span className="text-gradient text-2xl font-bold">раз</span> */}
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
что-то на умном
|
||
<br />в две строчки
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">На</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
|
||
18%
|
||
</span>
|
||
{/* <span className="text-gradient text-2xl font-bold">раз</span> */}
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
что-то на умном
|
||
<br />в две строчки
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">На</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy 2xl:text-8xl sm:text-8xl text-6xl ">
|
||
12%
|
||
</span>
|
||
{/* <span className="text-gradient text-2xl font-bold">раз</span> */}
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
что-то на умном
|
||
<br />в две строчки
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button className="lg:block hidden self-start 2xl:text-xl px-8 py-3 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
|
||
Заказать решение
|
||
</button>
|
||
</div>
|
||
<div
|
||
className="h-full min-h-[520px] rounded bg-cover bg-no-repeat bg-center"
|
||
style={{ backgroundImage: `url('/images/efficiency.jpg')` }}
|
||
></div>
|
||
<button className="lg:hidden block sm:w-fit self-start 2xl:text-xl px-8 py-3 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity">
|
||
Заказать решение
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="relative space-y-16">
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
<Title>Функциональные возможности</Title>
|
||
<div className="2xl:text-xl lg:text-lg">
|
||
Интерактивная презентация увлекает покупателей и предоставляет
|
||
актуальную информацию о жилом комплексе, отвечая на все
|
||
интересующие вопросы и показывая важные особенности и
|
||
преимущества объекта
|
||
</div>
|
||
</div>
|
||
<div className="absolute w-full h-full top-[-64px] left-0 flex justify-center items-center">
|
||
<img src="/images/shapes/2.svg" alt="" />
|
||
</div>
|
||
{/* <div className="h-0.5 bg-[#23242A]"></div> */}
|
||
{/* <Slider /> */}
|
||
<div className="grid lg:grid-cols-2 relative z-50">
|
||
<FeatureCard
|
||
text="Интеграция с CRM - системой"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(0)}
|
||
/>
|
||
<div className="row-span-2 h-full border border-[#454554] backdrop-blur-lg bg-[rgba(46, 46, 56, 0.1)] ">
|
||
{/* <div
|
||
className="w-full h-full bg-cover bg-no-repeat bg-center transition-all"
|
||
style={{
|
||
backgroundImage: `url("${featureImages[selectedFeatureImageIndex]}")`,
|
||
}}
|
||
></div> */}
|
||
<div
|
||
ref={featureImagesContainer}
|
||
className="w-full h-full"
|
||
></div>
|
||
</div>
|
||
<FeatureCard
|
||
text="Параметрический поиск квартир"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(1)}
|
||
/>
|
||
<FeatureCard
|
||
text="Вся инфрастуктура на одном экране"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(2)}
|
||
/>
|
||
<FeatureCard
|
||
text="Любой рендер за несколько секунд"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(3)}
|
||
/>
|
||
<FeatureCard
|
||
text="Виртуальный тур по жилому комплексу"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(2)}
|
||
/>
|
||
<FeatureCard
|
||
text="Формирование вишлиста"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(1)}
|
||
/>
|
||
<FeatureCard
|
||
text="Конфигуратор интерьера"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(0)}
|
||
/>
|
||
<FeatureCard
|
||
text="Отправка коммерческого предложения"
|
||
handleMouseEnter={() => setSelectedFeatureImageIndex(3)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl overflow-hidden">
|
||
<div className="xl:grid grid-cols-2 gap-6 relative">
|
||
<div ref={helmetRef} className="xl:block hidden">
|
||
{helmetInView && (
|
||
<motion.div
|
||
initial={{ opacity: 0, x: "25%" }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.25, duration: 3 }}
|
||
viewport={{ once: true }}
|
||
className=" absolute w-full h-full"
|
||
>
|
||
<Canvas className="min-h-[1024px] w-[600px] -translate-y-80 -translate-x-[30%]">
|
||
<Suspense fallback={null}>
|
||
<ambientLight intensity={0.5} />
|
||
<directionalLight color="white" position={[-3, 1, 5]} />
|
||
<Model />
|
||
{/* <OrbitControls
|
||
enablePan={true}
|
||
enableZoom={true}
|
||
enableRotate={true}
|
||
/> */}
|
||
</Suspense>
|
||
</Canvas>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 2.5, duration: 1 }}
|
||
className="lg:space-y-16 space-y-8"
|
||
>
|
||
<Title>Экскурсия в виртуальной реальности</Title>
|
||
<p className="2xl:text-xl lg:text-lg">
|
||
Клиенту достаточно надеть шлем виртуальной реальности, чтобы
|
||
прогуляться, оценить и ощутить пространство. Он полностью
|
||
погружается в воссозданную реальность, чувствует удобство и
|
||
уровень комфорта
|
||
</p>
|
||
<button className="2xl:text-xl px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] text-white rounded-full opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
|
||
Записаться в шоу-рум
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
|
||
<img src="/images/shapes/3.svg" alt="" />
|
||
</div>
|
||
|
||
<div className="relative grid xl:grid-cols-2 gap-8">
|
||
<div className="space-y-8">
|
||
<Title>Анализируем поведение пользователей</Title>
|
||
<div className="2xl:text-2xl sm:text-xl text-lg space-y-4">
|
||
<p>
|
||
Система внутренней аналитики программы собирает информацию о
|
||
поведении пользователя и эффективности работы менеджеров для
|
||
создания отчета, содержащего необходимые метрики
|
||
</p>
|
||
<p>
|
||
Полученный отчет позволяет сделать процесс демонстрации жилого
|
||
комплекса еще эффективнее.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-3 gap-4">
|
||
<div className="sm:col-span-2 space-y-4">
|
||
<div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
|
||
<p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
|
||
Конверсия менеджеров в брони
|
||
</p>
|
||
<div className="space-y-4">
|
||
<div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
|
||
<span className="w-[40%] whitespace-nowrap">
|
||
К. Н. Федоров
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"></div>
|
||
</div>
|
||
<span className="w-[15%] text-right">45%</span>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
|
||
<span className="w-[40%] whitespace-nowrap">
|
||
И. Ф. Яковлева
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"></div>
|
||
</div>
|
||
<span className="w-[15%] text-right">30%</span>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-4 2xl:text-xl sm:text-base text-sm">
|
||
<span className="w-[40%] whitespace-nowrap">
|
||
А. М. Ташева
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[83px] h-10 rounded"></div>
|
||
</div>
|
||
<span className="w-[15%] text-right">20%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
|
||
<p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
|
||
Популярные типы квартир, %
|
||
</p>
|
||
<div className="flex items-center space-x-10">
|
||
<PieChart />
|
||
|
||
<div className="space-y-2.5">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-4 h-4 bg-[#7A31C3] rounded-full"></div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
Студии
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-4 h-4 bg-[#798FFF] rounded-full"></div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
1-к. квартиры
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-4 h-4 bg-[#D375FF] rounded-full"></div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
2-к. квартиры
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-4 h-4 bg-[#8742F8] rounded-full"></div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
3-к. квартиры
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-4 h-4 bg-[#FB57F4] rounded-full"></div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
4-к. квартиры
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="2xl:p-8 sm:p-6 p-4 space-y-6 bg-[#272730] rounded-lg">
|
||
<p className="2xl:text-xl sm:text-base text-sm uppercase tracking-wider">
|
||
Воронка продаж
|
||
</p>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-5 gap-4 items-center">
|
||
<div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-full h-10 rounded flex justify-center items-center">
|
||
Сеансы
|
||
</div>
|
||
</div>
|
||
<span className="col-span-1 text-right w-full 2xl:text-xl">100%</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-5 gap-4 items-center">
|
||
<div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[90%] h-10 rounded flex justify-center items-center">
|
||
В избранное
|
||
</div>
|
||
</div>
|
||
<span className="col-span-1 text-right w-full 2xl:text-xl">
|
||
93,47%
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-5 gap-4 items-center">
|
||
<div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[50%] h-10 rounded flex justify-center items-center">
|
||
Брони
|
||
</div>
|
||
</div>
|
||
<span className="col-span-1 text-right w-full 2xl:text-xl">
|
||
45,68%
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-5 gap-4 items-center">
|
||
<div className="col-span-4 2xl:text-xl sm:text-base text-sm bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
|
||
<div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[35%] h-10 rounded flex justify-center items-center">
|
||
Продажи
|
||
</div>
|
||
</div>
|
||
<span className="col-span-1 text-right w-full 2xl:text-xl">
|
||
29,13%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-1 grid-cols-2 gap-4 sm:space-y-4">
|
||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
|
||
<div className="font-gilroy text-gradient">
|
||
<p className="sm:text-6xl text-5xl">12</p>
|
||
<p className="text-xl font-medium">минут</p>
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
Среднее время сеанса
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
|
||
<div className="font-gilroy text-gradient">
|
||
<p className="sm:text-6xl text-5xl">856</p>
|
||
{/* <p className="text-xl font-medium">минут</p> */}
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
Коммерческих предложений сформировано
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
|
||
<div className="font-gilroy text-gradient">
|
||
<p className="sm:text-6xl text-5xl">12,41%</p>
|
||
{/* <p className="text-xl font-medium">минут</p> */}
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
Конверсия из сеанса в бронь
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start 2xl:p-8 sm:p-6 p-4 space-y-4">
|
||
<div className="font-gilroy text-gradient">
|
||
<p className="sm:text-6xl text-5xl">132,1</p>
|
||
<p className="text-xl font-medium">млн. р.</p>
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
Получено через Graff.estate
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="absolute -top-8 -left-44 w-full h-full">
|
||
<img src="/images/shapes/4.svg" alt="" />
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-2 lg:gap-4 items-center">
|
||
<div className="space-y-16">
|
||
<div className="space-y-14">
|
||
<p className="font-gilroy xl:text-2xl sm:text-xl uppercase tracking-wider">
|
||
Инструмент продаж поможет вам продавать удаленно
|
||
</p>
|
||
<p className="font-gilroy 2xl:text-5xl sm:text-4xl text-3xl font-medium">
|
||
Покажите все преимущества вашего жилого комплекса клиенту из
|
||
любого конца мира. Местоположение и устройство значения не
|
||
имеют.
|
||
<br />
|
||
Нужен только интернет.
|
||
</p>
|
||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||
Высокий уровень графики и полное погружение покупателя
|
||
<br /> в процесс выбора квартиры.
|
||
</p>
|
||
</div>
|
||
<div className="space-y-8">
|
||
<button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full cursor-pointer">
|
||
<span>Узнать больше</span>
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M9.00002 19L16 12L9.00002 5"
|
||
stroke="#F2F2F2"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<img src="/images/mockup.png" alt="" className="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="lg:space-y-20 space-y-12">
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
<Title>
|
||
Оцените эффективность интерактивного инструмента продаж
|
||
</Title>
|
||
<div className="2xl:text-2xl xl:text-xl text-lg">
|
||
Мы изучили отраслевую аналитику на рынке продаж новых квартир и
|
||
на основе данных собрали калькулятор эффективности продукта.
|
||
<br />
|
||
<br />
|
||
Когда девелопер строит жилой комплекс используя проектное
|
||
финансирование, главное – это время. Чем быстрее вы наполняете
|
||
счета-эксроу, тем меньше процент за использование денег банка.
|
||
Сократив время реализации всего проекта, девелопер значительно
|
||
экономит на стоимости проектного финансирования.
|
||
</div>
|
||
</div>
|
||
<Calc />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="space-y-20">
|
||
<Title>Релевантный опыт</Title>
|
||
<div className="2xl:space-y-10 xl:space-y-8 space-y-6 flex flex-col">
|
||
<div className="grid lg:grid-cols-2 xl:gap-8 gap-4">
|
||
<RelevantExpCard
|
||
image="/images/cards/1.jpg"
|
||
name="ЖК «Life Резиденция»"
|
||
location="Россия, Тюмень."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/2.jpg"
|
||
name="МФК «Re:volution towers»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/3.jpg"
|
||
name="Iskan Abu Dhabi"
|
||
location="ОАЭ, Абу-Даби."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/4.jpg"
|
||
name="ЖК «Авторский квартал Машаров»"
|
||
location="Россия, Тюмень."
|
||
/>
|
||
|
||
{isShowRelevantExpCards && (
|
||
<>
|
||
<RelevantExpCard
|
||
image="/images/cards/5.jpg"
|
||
name="ЖК «Айвазовский»"
|
||
location="Россия, Тюмень."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/6.jpg"
|
||
name="ЖК «Графика»"
|
||
location="Россия, Санкт-Петербург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/7.jpg"
|
||
name="ЖК «4you»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/8.jpg"
|
||
name="ЖК «Уральский»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/9.jpg"
|
||
name="ЖК «Новая Атмосфера»"
|
||
location="Россия, Брянск."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/10.jpg"
|
||
name="ЖК «Тринити»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/11.jpg"
|
||
name="ЖК «Дом на Опалихинской»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/12.jpg"
|
||
name="ЖК «Свой Круг»"
|
||
location="Россия, Екатеринбург."
|
||
/>
|
||
<RelevantExpCard
|
||
image="/images/cards/13.jpg"
|
||
name="ЖК «Александровский»"
|
||
location="Россия, Нижний Тагил."
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
{!isShowRelevantExpCards && (
|
||
<button
|
||
className="flex items-center self-center space-x-3 2xl:text-2xl xl:text-xl"
|
||
onClick={() => setIsShowRelevantExpCards(true)}
|
||
>
|
||
<span>Показать больше</span>
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M19 9.00002L12 16L5 9.00002"
|
||
stroke="#F2F2F2"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-[#23232A]">
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="space-y-16 mt-12 mb-8">
|
||
<div className="space-y-16">
|
||
<div className="space-y-8">
|
||
<p className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl w-1/2 text-gradient">
|
||
Свяжитесь с нами
|
||
</p>
|
||
<p className="font-gilroy 2xl:text-5xl sm:text-2xl text-xl">
|
||
Хотите увеличить конверсию?
|
||
<br />
|
||
Давайте обсудим детали!
|
||
</p>
|
||
</div>
|
||
<form
|
||
className="grid lg:grid-cols-2 2xl:gap-8 xl:gap-6 gap-4"
|
||
onSubmit={handleSubmitSendMail}
|
||
>
|
||
<div className="2xl:space-y-8 xl:space-y-6 space-y-4">
|
||
<div className="space-y-2">
|
||
<label
|
||
htmlFor=""
|
||
className="text-[#D9D9D9] block 2xl:text-xl text-lg"
|
||
>
|
||
Имя Фамилия*
|
||
</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||
value={fullname}
|
||
onChange={(e) => setFullname(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label
|
||
htmlFor=""
|
||
className="text-[#D9D9D9] block 2xl:text-xl text-lg"
|
||
>
|
||
Компания
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||
value={company}
|
||
onChange={(e) => setCompany(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="2xl:space-y-8 xl:space-y-6 space-y-4">
|
||
<div className="space-y-2">
|
||
<label
|
||
htmlFor=""
|
||
className="text-[#D9D9D9] block 2xl:text-xl text-lg"
|
||
>
|
||
Email*
|
||
</label>
|
||
<input
|
||
required
|
||
type="email"
|
||
className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label
|
||
htmlFor=""
|
||
className="text-[#D9D9D9] block 2xl:text-xl text-lg"
|
||
>
|
||
Номер телефона
|
||
</label>
|
||
<InputMask
|
||
maskChar={null}
|
||
mask={"+7 (999) 999-99-99"}
|
||
type="text"
|
||
className="text-xl p-4 bg-[#454554] outline-none border border-transparent rounded-lg focus:border-[#BC75FF] transition-colors w-full"
|
||
value={phone}
|
||
onChange={(e) => setPhone(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-8">
|
||
<div className="space-x-4">
|
||
<label className="text-xl">
|
||
<input
|
||
type="checkbox"
|
||
name=""
|
||
className="bg-[#454554] hover:bg-[#454554] cursor-pointer
|
||
w-10 h-10 rounded-lg checked:bg-[#454554] checked:hover:bg-[#454554] border-0 focus:ring-offset-0 focus:ring-transparent mr-4"
|
||
/>
|
||
<span className="text-[#ABABBA] text-opacity-50">
|
||
Я согласен с
|
||
</span>{" "}
|
||
<a href="#" className="text-white">
|
||
политикой конфиденциальности
|
||
</a>
|
||
</label>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
className="2xl:text-3xl text-2xl w-full px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] rounded-full opacity-95 hover:opacity-100 transition-opacity"
|
||
>
|
||
Отправить заявку
|
||
</button>
|
||
</div>
|
||
</form>
|
||
<div className="h-0.5 bg-[#23242A]"></div>
|
||
<div className="grid sm:grid-cols-2 gap-8">
|
||
<div className="space-y-8">
|
||
<div className="space-y-2">
|
||
<p className="2xl:text-xl sm:text-lg text-[#73788C]">
|
||
Email
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl">
|
||
info@graff.tech
|
||
</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<p className="2xl:text-xl sm:text-lg text-[#73788C]">
|
||
Телефон
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl">
|
||
8 800 770 00 76
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-8">
|
||
<div className="space-y-2">
|
||
<p className="2xl:text-xl sm:text-lg text-[#73788C]">
|
||
Адрес
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl">
|
||
ул. Московская, 47, Екатеринбург
|
||
</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<p className="2xl:text-xl sm:text-lg text-[#73788C]">
|
||
Социальные сети
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl space-x-4">
|
||
<a href="#telegram">Telegram</a>
|
||
<a href="#vk">VK</a>
|
||
<a href="#youtube">YouTube</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="h-0.5 bg-[#23242A]"></div>
|
||
<div className="flex sm:flex-row flex-col flex-wrap sm:items-center gap-4 items-start justify-between text-[#C5C7CE] 2xl:text-xl">
|
||
<a href="/">
|
||
<img src="/images/logo.png" alt="" />
|
||
</a>
|
||
<a href="#privacy">Политика конфиденциальности</a>
|
||
<a href="#site">graff.tech</a>
|
||
<p>© 2023 GRAFF interactive. Все права защищены</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|