700 lines
33 KiB
TypeScript
700 lines
33 KiB
TypeScript
/* eslint-disable no-irregular-whitespace */
|
||
import "./App.css";
|
||
import BlendingHeader from "./components/blendings/BlendingHeader";
|
||
import FeatureItem from "./components/FeatureItem";
|
||
// import BlendVR from "./components/blendings/BlendVR";
|
||
import BlendStream from "./components/blendings/BlendStream";
|
||
import StreamButton from "./components/StreamButton";
|
||
import "react-rangeslider/lib/index.css";
|
||
import "./components/RangeSlider.css";
|
||
import { useEffect, useState } from "react";
|
||
import ProjectCard from "./components/ProjectCard";
|
||
// import MoreProjectButton from "./components/MoreProjectButton";
|
||
import ExampleCard from "./components/ExampleCard";
|
||
import FeatureVideoViewBox from "./components/FeatureVideoViewBox";
|
||
import Button from "./components/Button";
|
||
import Calc from "./components/Calc";
|
||
import BlendingCalc from "./components/blendings/BlendingCalc";
|
||
import BlendingClients from "./components/blendings/BlendingClients";
|
||
import Heading2 from "./components/Headings/Heading2";
|
||
// import PlayIcon from "./components/icons/PlayIcon";
|
||
import VideoSliderMobile from "./components/VideoSliderMobile";
|
||
// import { isMobile } from "react-device-detect";
|
||
import IProject from "./types/IProject";
|
||
import api from "./utils/api";
|
||
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 FeedbackForm from "./components/FeedbackForm";
|
||
|
||
function App() {
|
||
const [selectedVideo, setSelectedVideo] = useState<string>(
|
||
"https://graff.estate/videos/features/virtual_tour.mp4"
|
||
);
|
||
// const [isShowProjects, setIsShowProjects] = useState<boolean>(false);
|
||
|
||
const [projects, setProjects] = useState<IProject[]>([]);
|
||
|
||
async function getProjects() {
|
||
try {
|
||
const projects: IProject[] = await api.get("projects").json();
|
||
|
||
setProjects(projects);
|
||
} catch (error) {
|
||
if (error instanceof Error) {
|
||
alert(`Error: ${error.message}`);
|
||
}
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
getProjects();
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
|
||
<div className="relative conatiner 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>
|
||
<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 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 style={{ WebkitTextFillColor: "#fff" }}>
|
||
для застройщиков
|
||
</span>
|
||
</h1>
|
||
<p className="xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]">
|
||
Помогаем девелоперам эффективно демонстрировать свой объект.
|
||
Продавать больше и быстрее.
|
||
</p>
|
||
<div className="absolute -z-10 top-0 right-0 opacity-90 blur-[10px]">
|
||
<BlendingHeader />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<video
|
||
src="https://graff.estate/videos/showreel_1080p_4000k_h264.mp4"
|
||
muted
|
||
autoPlay
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
className="aspect-video"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="grid xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
|
||
<div className="col-span-full">
|
||
<Heading2>
|
||
Помогаем <br className="sm:hidden" /> продавать{" "}
|
||
<br className="2xl:hidden" />{" "}
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
проще <br className="sm:hidden" /> и{" "}
|
||
<span
|
||
style={{ WebkitTextFillColor: "#52587A" }}
|
||
className="relative custom-line-through"
|
||
>
|
||
быстрее
|
||
</span>{" "}
|
||
<br className="sm:hidden" />
|
||
дороже
|
||
</span>
|
||
</Heading2>
|
||
</div>
|
||
<div className="relative flex items-center gap-4 col-span-full h-[400px]">
|
||
<p className="2xl:text-2xl text-sm font-gilroy font-medium min-w-[496px] ">
|
||
Мы собрали статистику{" "}
|
||
<span className="text-gradient font-semibold">за 13 лет</span>{" "}
|
||
работы
|
||
<br />
|
||
с застройщиками,{" "}
|
||
<span className="text-gradient font-semibold">
|
||
реализовав 31 проект
|
||
</span>
|
||
</p>
|
||
|
||
<div className="">
|
||
<img
|
||
src="/images/Map.png"
|
||
alt=""
|
||
className="relative top-8 -z-10"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-gradient font-gilroy font-medium text-5xl w-fit">
|
||
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="sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="2xl:mt-[220px] xl:mt-40 sm:mt-[104px]">
|
||
<ExampleCard
|
||
title="ЖК «Life Резиденция»"
|
||
company="ГК Паритет Девелопмент"
|
||
image="/images/Aivaz1.jpg"
|
||
/>
|
||
|
||
<ExampleCard
|
||
title="ЖК «Айвазовский City»"
|
||
company="ЭНКО"
|
||
image="/images/Aivaz3.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<ExampleCard
|
||
title="Авторский квартал Машаров"
|
||
company="Сибинтел Девелопмент"
|
||
image="/images/Aivaz2.jpg"
|
||
/>
|
||
|
||
<ExampleCard
|
||
title="ЖК «Сюжеты»"
|
||
company="Fortis Development"
|
||
image="/images/Aivaz4.jpg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<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 style={{ WebkitTextFillColor: "#fff" }}>
|
||
возможности
|
||
</span>
|
||
</Heading2>
|
||
<p className="xl:w-2/3 xl:text-base text-sm">
|
||
Интерактивная презентация увлекает покупателей и предоставляет
|
||
актуальную информацию о жилом комплексе, отвечая на все
|
||
вопросы и показывая важные особенности и преимущества объекта
|
||
</p>
|
||
</div>
|
||
|
||
<div className="pr-6 xl:block hidden">
|
||
<FeatureItem
|
||
title="Виртуальный тур по жилому комплексу"
|
||
desc="Клиент лично оценит угол инсоляции, малые архитектурные формы и ландшафт, перемещаясь по комплексу с помощью тапа."
|
||
video="https://graff.estate/videos/features/virtual_tour.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Вся инфрастуктура на одном экране"
|
||
desc="Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти."
|
||
video="https://graff.estate/videos/features/nks_infra.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Конфигуратор интерьера"
|
||
desc="Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали."
|
||
video="https://graff.estate/videos/features/uralsky.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Параметрический поиск квартир"
|
||
desc="Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов."
|
||
video="https://graff.estate/videos/features/parametric.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Любой рендер за несколько секунд"
|
||
desc="Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации."
|
||
video="https://graff.estate/videos/features/render.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Формирование вишлиста"
|
||
desc="Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру."
|
||
video="https://graff.estate/videos/features/wish.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Интеграция с CRM-системой"
|
||
desc="Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир."
|
||
video="https://graff.estate/videos/features/integra_crm.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Отправка коммерческого предложения"
|
||
desc="Коммерческое предложение с выбранными квартирами может быть отправлено клиенту на почту или распечатано и отдано лично в руки."
|
||
video="https://graff.estate/videos/features/send.mp4"
|
||
handleHoverStart={(video) => setSelectedVideo(video)}
|
||
/>
|
||
<FeatureItem
|
||
title="Интерактивная инсоляция"
|
||
desc="Функция позволяет в режиме реального времени увидеть уровень освещенности выбранной квартиры, а если вы изучаете экстерьер жилого комплекса – функция покажет архитектурную подсветку."
|
||
video=""
|
||
/>
|
||
<FeatureItem
|
||
title="Подбор квартир на генплане"
|
||
desc="Сделать генплан удобным инструментом выбора квартиры поможет подсветка выбранных квартир прямо на фасаде Жилого комплекса."
|
||
video=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="aspect-video sticky top-[25%] xl:block hidden">
|
||
<FeatureVideoViewBox video={selectedVideo} />
|
||
</div>
|
||
|
||
<VideoSliderMobile />
|
||
</div>
|
||
|
||
<div className="relative 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="grid grid-cols-2 gap-4 mb-16">
|
||
<div className="flex flex-col gap-8">
|
||
<Heading2>
|
||
Graff.estate stream —
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
удаленная
|
||
<br />
|
||
демонстрация
|
||
<br />
|
||
жилого комплекса
|
||
</span>
|
||
</Heading2>
|
||
<Button>Узнать больше</Button>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="flex flex-col gap-12">
|
||
<p>
|
||
Высокий уровень графики и полное погружение покупателя в
|
||
процесс выбора квартиры
|
||
</p>
|
||
<img src="/images/Datamining.jpg" alt="" />
|
||
</div>
|
||
<div className="">
|
||
<p>
|
||
Местоположение и устройство значения не имеют. Нужен только
|
||
интернет
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* <div className="grid grid-cols-4 mb-16">
|
||
<Heading2 className="col-span-3">
|
||
Graff.estate stream —{" "}
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
удаленная демонстрация жилого комплекса
|
||
</span>
|
||
</Heading2>
|
||
|
||
<p>
|
||
Высокий уровень графики и полное
|
||
<br />
|
||
погружение покупателя в процесс
|
||
<br />
|
||
выбора квартиры
|
||
</p>
|
||
</div>
|
||
|
||
<div className="relative mb-[120px]">
|
||
<img src="/images/Stream.jpg" alt="" />
|
||
|
||
<div className="absolute bottom-10 left-10">
|
||
<p className="flex flex-col gap-4 text-2xl font-gilroy font-medium">
|
||
<span>
|
||
Местоположение и устройство
|
||
<br />
|
||
значения не имеют
|
||
</span>
|
||
<span>Нужен только интернет</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between mb-16">
|
||
<p className="text-5xl font-gilroy font-medium">
|
||
Демонстрация технологии
|
||
</p>
|
||
<Button icon={<ArrowRightIcon />}>Узнать больше</Button>
|
||
</div> */}
|
||
|
||
<div>
|
||
<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=Ivazowsky&location=a1"
|
||
/>
|
||
</div>
|
||
|
||
<div className="absolute -bottom-[2%] -right-[30%] -z-10 blur-[18px]">
|
||
<BlendStream />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 xl:gap-4 gap-3 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="flex flex-col justify-between">
|
||
<div className="flex flex-col gap-8">
|
||
<Heading2>
|
||
Анализируем
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
поведение
|
||
<br />
|
||
пользователей
|
||
</span>
|
||
</Heading2>
|
||
<p className="xl:w-2/3 2xl:text-base text-sm">
|
||
Система внутренней аналитики программы собирает информацию о
|
||
поведении пользователя и эффективности работы менеджеров для
|
||
создания отчета, содержащего необходимые метрики
|
||
</p>
|
||
</div>
|
||
<div className="pb-8 border-b border-[#3D425C] -mt-0.5">
|
||
<p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium">
|
||
Полученный отчет позволяет сделать процесс демонстрации
|
||
жилого комплекса еще эффективнее
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<img src="/images/Analysis.jpg" alt="" className="w-full" />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="flex flex-col justify-between">
|
||
<div className="flex flex-col gap-8">
|
||
<Heading2>
|
||
Экскурсия{" "}
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
в виртуальной реальности
|
||
</span>
|
||
</Heading2>
|
||
<Button>Записаться в шоу-рум</Button>
|
||
</div>
|
||
<p className="font-gilroy text-2xl">
|
||
Клиент полностью погружается в воссозданную реальность,
|
||
чувствует удобство и уровень комфорта
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-10">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<p>
|
||
Достаточно надеть шлем виртуальной реальности, чтобы
|
||
прогуляться, оценить и ощутить пространство
|
||
</p>
|
||
<img
|
||
src="/images/VR.png"
|
||
alt=""
|
||
className="px-6 pt-8 pb-5 border-t border-[#3D425C]"
|
||
/>
|
||
</div>
|
||
<img src="/images/VR2.jpg" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<div className="flex flex-col gap-8">
|
||
<Heading2>
|
||
Оцените эффективность интерактивного
|
||
<br />
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
инструмента продаж
|
||
</span>
|
||
</Heading2>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<p className="2xl:w-2/3 w-1/2 2xl:text-base text-sm">
|
||
Мы изучили отраслевую аналитику на рынке продаж новых квартир
|
||
и на основе данных собрали калькулятор эффективности продукта
|
||
</p>
|
||
<p className="2xl:w-2/3 w-1/2 2xl:text-base text-sm">
|
||
При использовании проектного финансирования, главное — это
|
||
время. Быстрее наполняются эскроу-счета — меньше процент за
|
||
использование заемных денег
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Calc />
|
||
|
||
<div className="absolute right-0 top-0 blur-[18px] -z-10">
|
||
<BlendingCalc />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<Heading2>Проекты</Heading2>
|
||
<div className="grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
|
||
{projects.map((project, index) => (
|
||
<ProjectCard key={index} {...project} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
|
||
<Heading2>
|
||
Наши клиенты{" "}
|
||
<span style={{ WebkitTextFillColor: "#fff" }}>
|
||
в девелопменте
|
||
</span>
|
||
</Heading2>
|
||
<img
|
||
src="/images/clients-logos.png"
|
||
alt=""
|
||
className="sm:block hidden"
|
||
/>
|
||
<img
|
||
src="/images/clients-logos-mobile.png"
|
||
alt=""
|
||
className="sm:hidden block"
|
||
/>
|
||
<div className="absolute top-0 right-0 blur-[34px]">
|
||
<BlendingClients />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:mt-40 sm:mt-[120px] mt-[88px]">
|
||
<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>
|
||
|
||
<div className="mt-[104px] relative">
|
||
<div className="absolute flex justify-center items-center w-full -top-8 left-32 blur-md">
|
||
<img src="/images/shapes/shape-2.svg" alt="" className="" />
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<div className="mt-[50px] relative 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="#" className="">
|
||
Политика конфиденциальности
|
||
</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 App;
|