1342 lines
58 KiB
TypeScript
1342 lines
58 KiB
TypeScript
import "./App.css";
|
||
import { Trans, useTranslation } from "react-i18next";
|
||
import { FormEvent, useEffect, useRef, useState } from "react";
|
||
import PieChart from "./components/PieChart/PieChart";
|
||
import Calc from "./components/Calc";
|
||
import { motion } from "framer-motion";
|
||
import InputMask from "react-input-mask";
|
||
import api from "./utils/api";
|
||
import ComplexCard from "./components/ComplexCard";
|
||
import Title from "./components/Title";
|
||
import FeatureCardMobile from "./components/FeatureCardMobile";
|
||
import Modal from "./components/Modal";
|
||
import Slider from "./components/Slider/Slider";
|
||
import FeatureSlider from "./components/FeatureSlider";
|
||
import useModalStore from "./store/modal";
|
||
import FeedbackForm from "./components/FeedbackForm";
|
||
import Map from "./components/Map";
|
||
import FeedbackFormSuccess from "./components/FeedbackFormSuccess";
|
||
import StreamCard2 from "./components/StreamCard2";
|
||
import { useParams } from "react-router-dom";
|
||
|
||
function App() {
|
||
const params = useParams();
|
||
const [fullname, setFullname] = useState<string>("");
|
||
const [email, setEmail] = useState<string>("");
|
||
const [phone, setPhone] = useState<string>("");
|
||
const [request, setRequest] = useState<string>("");
|
||
const [isShowComplexCards, setIsShowComplexCards] = useState<boolean>(false);
|
||
const [setModalComponent] = useModalStore((state) => [state.setComponent]);
|
||
const videoRef = useRef<HTMLVideoElement>(null);
|
||
const [showreelIsLoaded, setShowreelIsLoaded] = useState<boolean>(false);
|
||
const [videoBuffering, setVideoBuffering] = useState<boolean>(true);
|
||
|
||
const smiles = ["ヽ(°□° )ノ", "ヽ( °□°)ノ"];
|
||
const [smileIndex, setSmileIndex] = useState<number>(0);
|
||
|
||
setTimeout(() => {
|
||
if (smileIndex === 0) {
|
||
setSmileIndex(1);
|
||
} else {
|
||
setSmileIndex(0);
|
||
}
|
||
}, 100);
|
||
|
||
const { t, i18n } = useTranslation();
|
||
|
||
function changeLanguage(lng: string) {
|
||
i18n.changeLanguage(lng);
|
||
}
|
||
|
||
async function handleSubmitSendMail(e: FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
|
||
const result: any = await api
|
||
.post("mail", {
|
||
json: {
|
||
fullname,
|
||
email,
|
||
phone,
|
||
request,
|
||
},
|
||
})
|
||
.json();
|
||
|
||
if (result.ok) {
|
||
setFullname("");
|
||
setEmail("");
|
||
setPhone("");
|
||
setRequest("");
|
||
|
||
setModalComponent(<FeedbackFormSuccess />);
|
||
} else {
|
||
alert("Error sending, please try again later.");
|
||
}
|
||
}
|
||
|
||
function videoLoadedData() {
|
||
setShowreelIsLoaded(true);
|
||
}
|
||
|
||
function videoWaiting() {
|
||
setVideoBuffering(true);
|
||
}
|
||
|
||
function videoPlaying() {
|
||
setVideoBuffering(false);
|
||
}
|
||
|
||
useEffect(() => {
|
||
document.title = t("title");
|
||
}, [changeLanguage]);
|
||
|
||
useEffect(() => {
|
||
if (window.location.hash === "#feedback") {
|
||
setModalComponent(<FeedbackForm />);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div>
|
||
<div className="relative lg:container mx-auto px-4 lg:py-8 py-4 xl:max-w-screen-2xl overflow-hidden">
|
||
<div className="absolute top-0 right-0 sm:translate-x-0 sm:translate-y-0 translate-x-[40%] translate-y-[40%]">
|
||
<img src="/images/shapes/1.svg" alt="" />
|
||
</div>
|
||
|
||
<div className="relative 2xl:space-y-44 xl:space-y-40 sm:space-y-36 space-y-20 2xl:mb-44 xl:mb-40 sm:mb-36 mb-20">
|
||
<div className="flex justify-between">
|
||
<div className="">
|
||
<a href="/">
|
||
<img src="/logo.svg" alt="" />
|
||
</a>
|
||
</div>
|
||
<div className="flex sm:space-x-4 space-x-2">
|
||
<button
|
||
onClick={() => setModalComponent(<FeedbackForm />)}
|
||
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">
|
||
<Trans i18nKey="contactUs" />
|
||
</span>
|
||
<span className="sm:hidden block">
|
||
<Trans i18nKey="contactUsMobile" />
|
||
</span>
|
||
</button>
|
||
|
||
<div className="flex space-x-1">
|
||
<button
|
||
onClick={() => changeLanguage("ru")}
|
||
className="p-2 bg-[#23242A] bg-opacity-50 hover:bg-opacity-100 transition-colors rounded-full"
|
||
>
|
||
RU
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => changeLanguage("en")}
|
||
className="p-2 bg-[#23242A] bg-opacity-50 hover:bg-opacity-100 transition-colors rounded-full"
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-8">
|
||
<h1 className="font-gilroy font-medium 2xl:text-8xl xl:text-7xl lg:text-6xl text-4xl text-gradient">
|
||
<Trans i18nKey="interactiveSalesToolHeading" />
|
||
</h1>
|
||
<p className="2xl:text-xl lg:text-lg">
|
||
<Trans i18nKey="interactiveSalesToolText" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative xl:space-y-48 lg:space-y-40 sm:space-y-28 space-y-20 overflow-hidden">
|
||
<div className="px-4">
|
||
<div className="relative aspect-video w-full 2xl:rounded-2xl xl:rounded-xl lg:rounded-lg rounded overflow-hidden">
|
||
<video
|
||
ref={videoRef}
|
||
onWaiting={videoWaiting}
|
||
onPlaying={videoPlaying}
|
||
onLoadedData={videoLoadedData}
|
||
muted
|
||
autoPlay
|
||
loop
|
||
playsInline
|
||
className="w-full"
|
||
>
|
||
<source src="/videos/showreel_1080p_4000k_h264.mp4" />
|
||
</video>
|
||
{videoBuffering && (
|
||
<div className="absolute top-0 left-0 sm:p-8 p-4">
|
||
<svg
|
||
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
|
||
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>
|
||
</div>
|
||
)}
|
||
|
||
{!showreelIsLoaded && (
|
||
<div className="absolute top-0 left-0 w-full h-full bg-[#121317] flex flex-col justify-center items-center">
|
||
<div className="absolute lg:left-32 sm:left-8 left-4 lg:bottom-32 bottom-auto lg:top-auto sm:top-8 top-4">
|
||
<div className="sm:space-y-8">
|
||
<img src="/logo2.svg" alt="" className="sm:block hidden" />
|
||
<p className="lg:text-xl uppercase font-gilroy text-gradient font-medium tracking-wider">
|
||
<Trans i18nKey={"preloaderText1"}>Загружаем шоурил</Trans>{" "}
|
||
<span>{smiles[smileIndex]}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="absolute lg:w-[100px] lg:h-[100px] w-[50px] h-[50px] lg:right-32 lg:bottom-32 sm:right-12 sm:bottom-4 right-6 bottom-0 rounded-full flex justify-center items-center">
|
||
<div className="absolute w-[150%] h-[150%] border border-[#BC75FF] rounded-full animate-ping-0"></div>
|
||
<div className="absolute w-[300%] h-[300%] border border-[#BC75FF] rounded-full animate-ping-1 opacity-0"></div>
|
||
<div className="absolute w-[600%] h-[600%] border border-[#BC75FF] rounded-full animate-ping-2 opacity-0"></div>
|
||
<div className="absolute w-[1200%] h-[1200%] border border-[#BC75FF] rounded-full animate-ping-3 opacity-0"></div>
|
||
<div className="absolute w-[2000%] h-[2000%] border border-[#BC75FF] rounded-full animate-ping-4 opacity-0"></div>
|
||
<div className="absolute w-[2800%] h-[2800%] border border-[#BC75FF] rounded-full animate-ping-5 opacity-0"></div>
|
||
<div className="absolute animate-custom">
|
||
<svg
|
||
viewBox="0 0 100 100"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className=""
|
||
>
|
||
<g filter="url(#filter0_b_1936_29973)">
|
||
<circle
|
||
cx="50"
|
||
cy="50"
|
||
r="50"
|
||
transform="matrix(-1 0 0 1 100 0)"
|
||
fill="url(#paint0_linear_1936_29973)"
|
||
/>
|
||
<circle
|
||
cx="50"
|
||
cy="50"
|
||
r="49"
|
||
transform="matrix(-1 0 0 1 100 0)"
|
||
stroke="url(#paint1_linear_1936_29973)"
|
||
strokeWidth="2"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<filter
|
||
id="filter0_b_1936_29973"
|
||
x="-24"
|
||
y="-24"
|
||
width="148"
|
||
height="148"
|
||
filterUnits="userSpaceOnUse"
|
||
colorInterpolationFilters="sRGB"
|
||
>
|
||
<feFlood
|
||
floodOpacity="0"
|
||
result="BackgroundImageFix"
|
||
/>
|
||
<feGaussianBlur
|
||
in="BackgroundImageFix"
|
||
stdDeviation="12"
|
||
/>
|
||
<feComposite
|
||
in2="SourceAlpha"
|
||
operator="in"
|
||
result="effect1_backgroundBlur_1936_29973"
|
||
/>
|
||
<feBlend
|
||
mode="normal"
|
||
in="SourceGraphic"
|
||
in2="effect1_backgroundBlur_1936_29973"
|
||
result="shape"
|
||
/>
|
||
</filter>
|
||
<linearGradient
|
||
id="paint0_linear_1936_29973"
|
||
x1="100"
|
||
y1="-2.98023e-06"
|
||
x2="2.98023e-06"
|
||
y2="100"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop offset="0.21875" stopColor="#BC75FF" />
|
||
<stop offset="0.695817" stopColor="#798FFF" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint1_linear_1936_29973"
|
||
x1="100"
|
||
y1="-2.98023e-06"
|
||
x2="2.98023e-06"
|
||
y2="100"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop offset="0.21875" stopColor="#BC75FF" />
|
||
<stop offset="0.695817" stopColor="#798FFF" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<div className="absolute flex justify-center items-center lg:text-xl sm:text-lg font-gilroy animate-pulse text-black font-medium">
|
||
<Trans i18nKey={"preloaderText2"}>Загрузка</Trans>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</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>
|
||
<Trans i18nKey="efficiencySalesToolHeading" />
|
||
</Title>
|
||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||
<Trans i18nKey="efficiencySalesToolDesc" />
|
||
</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">
|
||
<Trans i18nKey="efficiencySalesToolPreText1">На</Trans>
|
||
</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy text-8xl">
|
||
18%
|
||
</span>
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolText1">
|
||
увеличивает конверсию
|
||
<br />
|
||
из консультации в бронирование
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolPreText1">На</Trans>
|
||
</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy text-8xl">
|
||
12%
|
||
</span>
|
||
{/* <span className="text-gradient text-2xl font-bold">раз</span> */}
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolText2">
|
||
увеличивает конверсию
|
||
<br />
|
||
из бронирования в продажу
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolPreText2">До</Trans>
|
||
</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy text-8xl">
|
||
2
|
||
</span>
|
||
<span className="text-gradient text-2xl font-bold">
|
||
<Trans i18nKey="efficiencySalesToolTextSub">раз</Trans>
|
||
</span>
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolText3">
|
||
сокращает время
|
||
<br />
|
||
реализации проекта
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t-2 pt-8 border-[#454554]">
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolPreText2">До</Trans>
|
||
</p>
|
||
<div className="space-x-2 pt-4">
|
||
<span className="text-gradient font-gilroy text-8xl">
|
||
4
|
||
</span>
|
||
<span className="text-gradient text-2xl font-bold">
|
||
<Trans i18nKey="efficiencySalesToolTextSub">раз</Trans>
|
||
</span>
|
||
</div>
|
||
<p className="sm:text-lg">
|
||
<Trans i18nKey="efficiencySalesToolText4">
|
||
сокращает время на подготовку рекламных материалов
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setModalComponent(<FeedbackForm />)}
|
||
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"
|
||
>
|
||
<Trans i18nKey="orderSolution" />
|
||
</button>
|
||
</div>
|
||
<div className="h-full min-h-[520px] rounded overflow-hidden">
|
||
<Slider />
|
||
</div>
|
||
<button
|
||
onClick={() => setModalComponent(<FeedbackForm />)}
|
||
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"
|
||
>
|
||
<Trans i18nKey="orderSolution" />
|
||
</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>
|
||
<Trans i18nKey="functionalities" />
|
||
</Title>
|
||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||
<Trans i18nKey="functionalitiesDesc" />
|
||
</p>
|
||
</div>
|
||
<div className="lg:flex hidden absolute w-full h-full top-[-64px] left-0 justify-center items-center">
|
||
<img src="/images/shapes/2.svg" alt="" />
|
||
</div>
|
||
|
||
<FeatureSlider />
|
||
|
||
<div className="relative lg:hidden block">
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="virtualTourTitle" />}
|
||
text={<Trans i18nKey="virtualTourDesc" />}
|
||
src="/videos/features/virtual_tour.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="allInfrastructureTitle" />}
|
||
text={<Trans i18nKey="allInfrastructureDesc" />}
|
||
src="/videos/features/nks_infra.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="interiorConfiguratorTitle" />}
|
||
text={<Trans i18nKey="interiorConfiguratorDesc" />}
|
||
src="/videos/features/uralsky.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="parametricApartmentSearchTitle" />}
|
||
text={<Trans i18nKey="parametricApartmentSearchDesc" />}
|
||
src="/videos/features/parametric.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="integrationCrmTitle" />}
|
||
text={<Trans i18nKey="integrationCrmDesc" />}
|
||
src="/videos/features/integra_crm.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="anyRenderTitle" />}
|
||
text={<Trans i18nKey="anyRenderDesc" />}
|
||
src="/videos/features/render.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="wishlistFormationTitle" />}
|
||
text={<Trans i18nKey="wishlistFormationDesc" />}
|
||
src="/videos/features/wish.mp4"
|
||
/>
|
||
<FeatureCardMobile
|
||
title={<Trans i18nKey="sendingOfferTitle" />}
|
||
text={<Trans i18nKey="sendingOfferDesc" />}
|
||
src="/videos/features/send.mp4"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="relative grid lg:grid-cols-3 lg:gap-8 lg:gap-y-0 gap-y-12 ">
|
||
<div className="lg:space-y-16 space-y-8 lg:order-first order-last">
|
||
<Title>
|
||
<Trans i18nKey="virtualRealityTourHeading" />
|
||
</Title>
|
||
<div className="2xl:text-2xl sm:text-xl text-lg space-y-4">
|
||
<p>
|
||
<Trans i18nKey="virtualRealityTourText" />
|
||
</p>
|
||
<p>
|
||
<Trans i18nKey="virtualRealityTourText2" />
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setModalComponent(<FeedbackForm />)}
|
||
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"
|
||
>
|
||
<Trans i18nKey="virtualRealityTourBtn" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="col-span-2 flex flex-col items-center justify-center h-full">
|
||
<div className="relative">
|
||
<video
|
||
muted
|
||
autoPlay
|
||
playsInline
|
||
loop
|
||
src="/videos/vr.mp4"
|
||
className="vr-mask absolute top-[17%] left-0 w-full"
|
||
></video>
|
||
<img
|
||
src="/images/vr-helmet-2.png"
|
||
alt=""
|
||
className="relative"
|
||
/>
|
||
</div>
|
||
</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
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
className="space-y-8"
|
||
>
|
||
<Title>
|
||
<Trans i18nKey="analyzingUserBehaviorHeading" />
|
||
</Title>
|
||
<div className="2xl:text-2xl sm:text-xl text-lg space-y-4">
|
||
<p>
|
||
<Trans i18nKey="analyzingUserBehaviorText" />
|
||
</p>
|
||
<p>
|
||
<Trans i18nKey="analyzingUserBehaviorText2" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-3 gap-4">
|
||
<div className="sm:col-span-2 space-y-4">
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard1Title">
|
||
Конверсия менеджеров в брони
|
||
</Trans>
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard1Text1">
|
||
К. Н. Федоров
|
||
</Trans>
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "100%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"
|
||
></motion.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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard1Text2">
|
||
И. Ф. Яковлева
|
||
</Trans>
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "80%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] h-10 rounded"
|
||
></motion.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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard1Text3">
|
||
А. М. Ташева
|
||
</Trans>
|
||
</span>
|
||
<div className="w-[45%]">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "83px" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[83px] h-10 rounded"
|
||
></motion.div>
|
||
</div>
|
||
<span className="w-[15%] text-right">20%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Title">
|
||
Популярные типы квартир
|
||
</Trans>
|
||
, %
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Text">
|
||
Студии
|
||
</Trans>
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Text2">
|
||
1-к. квартиры
|
||
</Trans>
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Text3">
|
||
2-к. квартиры
|
||
</Trans>
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Text4">
|
||
3-к. квартиры
|
||
</Trans>
|
||
</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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard2Text5">
|
||
4-к. квартиры
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard3Title">
|
||
Воронка продаж
|
||
</Trans>
|
||
</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">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "100%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-full h-10 rounded flex justify-center items-center"
|
||
>
|
||
<Trans i18nKey="analyzingUserBehaviorCard3Text">
|
||
Сеансы
|
||
</Trans>
|
||
</motion.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">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "90%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[90%] h-10 rounded flex justify-center items-center whitespace-nowrap"
|
||
>
|
||
<Trans i18nKey="analyzingUserBehaviorCard3Text2">
|
||
В избранное
|
||
</Trans>
|
||
</motion.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">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "50%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[50%] h-10 rounded flex justify-center items-center"
|
||
>
|
||
<Trans i18nKey="analyzingUserBehaviorCard3Text3">
|
||
Брони
|
||
</Trans>
|
||
</motion.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">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: "35%" }}
|
||
className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[35%] h-10 rounded flex justify-center items-center"
|
||
>
|
||
<Trans i18nKey="analyzingUserBehaviorCard3Text4">
|
||
Продажи
|
||
</Trans>
|
||
</motion.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">
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard4TitleSub">
|
||
минут
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
<Trans i18nKey="analyzingUserBehaviorCard4Text">
|
||
Среднее время сеанса
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard5Text">
|
||
Коммерческих предложений сформировано
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard6Text">
|
||
Конверсия из сеанса в бронь
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
// initial={{ opacity: 0 }}
|
||
// whileInView={{ opacity: 1 }}
|
||
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">
|
||
<Trans i18nKey="analyzingUserBehaviorCard7Title">
|
||
132,1
|
||
</Trans>
|
||
</p>
|
||
<p className="text-xl font-medium">
|
||
<Trans i18nKey="analyzingUserBehaviorCard7TitleSub">
|
||
млн. р.
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
<p className="2xl:text-xl sm:text-base text-sm">
|
||
<Trans i18nKey="analyzingUserBehaviorCard7Text">
|
||
Получено через Graff.estate
|
||
</Trans>
|
||
</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="lg:grid grid-cols-2">
|
||
<div className="space-y-14">
|
||
<Title>
|
||
{/* <Trans i18nKey="showAllAdvantagesHeading"> */}
|
||
Graff.estate stream
|
||
<br />—{" "}
|
||
<Trans i18nKey="remoteDemoHeading">
|
||
удаленная демонстрация жилого комплекса
|
||
</Trans>
|
||
{/* </Trans> */}
|
||
</Title>
|
||
|
||
<div className="w-3/4 space-y-4">
|
||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||
<Trans i18nKey="showAllAdvantagesText">
|
||
Высокий уровень графики и полное погружение покупателя в
|
||
процесс выбора квартиры.
|
||
</Trans>
|
||
</p>
|
||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||
<Trans i18nKey="showAllAdvantagesText2">
|
||
Местоположение и устройство значения не имеют. Нужен
|
||
только интернет.
|
||
</Trans>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="relative w-[150%] lg:-translate-x-[27%] -translate-x-[21%] -translate-y-[5%]">
|
||
<Map />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative h-fit bg-[#131317] lg:border-l-2 lg:border-t-0 border-t-2 border-[#2E3038] lg:pl-8 lg:space-y-8 space-y-4 lg:pt-0 pt-8">
|
||
<p className="uppercase tracking-wider lg:text-2xl sm:text-xl">
|
||
<Trans i18nKey="availableDemonstrationsHeading">
|
||
Демонстрация технологии
|
||
</Trans>
|
||
</p>
|
||
|
||
<div className="lg:space-y-8 space-y-4">
|
||
<StreamCard2
|
||
image={"/images/stream/nksJukovaDev.jpg"}
|
||
icon={"/images/icons/stream/nksJukovaDev.svg"}
|
||
name={
|
||
<Trans i18nKey={"residentialСomplex1"}>
|
||
МФК «Revolution towers»
|
||
</Trans>
|
||
}
|
||
location={
|
||
<Trans i18nKey={"city1"}>Россия, Екатеринбург</Trans>
|
||
}
|
||
build={"nksJukovaDev"}
|
||
/>
|
||
<StreamCard2
|
||
image={"/images/stream/Ivazowsky.jpg"}
|
||
icon={"/images/icons/stream/Ivazowsky.svg"}
|
||
name={
|
||
<Trans i18nKey={"residentialСomplex2"}>
|
||
ЖК «Айвазовский City»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey={"city2"}>Россия, Тюмень</Trans>}
|
||
build={"Ivazowsky"}
|
||
/>
|
||
<StreamCard2
|
||
image={"/images/stream/lifeResidence.jpg"}
|
||
icon={"/images/icons/stream/lifeResidence.svg"}
|
||
name={
|
||
<Trans i18nKey={"residentialСomplex3"}>
|
||
ЖК «Life Резиденция»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey={"city2"}>Россия, Тюмень</Trans>}
|
||
build={"lifeResidence"}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-center lg:translate-x-0 lg:translate-y-0 -translate-x-[7%] translate-y-[10%]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{i18n.language === "ru" && (
|
||
<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 sm:text-xl text-lg space-y-4">
|
||
<p>
|
||
Мы изучили отраслевую аналитику на рынке продаж новых
|
||
квартир и на основе данных собрали калькулятор эффективности
|
||
продукта.
|
||
</p>
|
||
<p>
|
||
При использовании проектного финансирования, главное — это
|
||
время. Быстрее наполняются эскроу-счета — меньше процент за
|
||
использование заемных денег.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Calc />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="space-y-20">
|
||
<Title>
|
||
<Trans i18nKey="implementedProjectsHeading">
|
||
Реализованные проекты
|
||
</Trans>
|
||
</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">
|
||
<ComplexCard
|
||
image="/images/cards/2.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex1">
|
||
МФК «Re:volution towers»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey="city1">Россия, Екатеринбург</Trans>}
|
||
video="/videos/RE_Volution_Towers.mp4"
|
||
logo={"/images/company_logos/NKS/Normal.svg"}
|
||
platforms={["touchscreen"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/5.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex2">
|
||
ЖК «Айвазовский»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey="city2">Россия, Тюмень</Trans>}
|
||
video="/videos/Ivazowsky.mp4"
|
||
logo="/images/company_logos/Enko/Normal.svg"
|
||
platforms={["touchscreen", "vr"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/4.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex4">
|
||
ЖК «Авторский квартал Машаров»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey="city2">Россия, Тюмень</Trans>}
|
||
video="/videos/Masharov.mp4"
|
||
logo={"/images/company_logos/Sibintel/Normal.svg"}
|
||
platforms={["touchscreen"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/8.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex5">ЖК «Уральский»</Trans>
|
||
}
|
||
location={<Trans i18nKey="city1">Россия, Екатеринбург</Trans>}
|
||
video="/videos/Uralsky.mp4"
|
||
logo={"/images/company_logos/Efes/Normal.svg"}
|
||
platforms={["touchscreen", "vr"]}
|
||
/>
|
||
|
||
{isShowComplexCards && (
|
||
<>
|
||
<ComplexCard
|
||
image="/images/cards/3.jpg"
|
||
name="Iskan Abu Dhabi"
|
||
location={<Trans i18nKey="city5">ОАЭ, Абу-Даби</Trans>}
|
||
video="/videos/Iskan_Abu_Dhabi.mp4"
|
||
logo={"/images/company_logos/AbuDhabi/Normal.svg"}
|
||
platforms={["touchscreen"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/6.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex7">
|
||
ЖК «Графика»
|
||
</Trans>
|
||
}
|
||
location={
|
||
<Trans i18nKey="city3">Россия, Санкт-Петербург</Trans>
|
||
}
|
||
video="/videos/Grafika.mp4"
|
||
logo={"/images/company_logos/Mavis/Normal.svg"}
|
||
platforms={["touchscreen", "vr"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/7.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex8">ЖК «4you»</Trans>
|
||
}
|
||
location={
|
||
<Trans i18nKey="city1">Россия, Екатеринбург</Trans>
|
||
}
|
||
video="/videos/4you.mp4"
|
||
logo={"/images/company_logos/Atlas/Normal.svg"}
|
||
platforms={["touchscreen"]}
|
||
/>
|
||
|
||
<ComplexCard
|
||
image="/images/cards/9.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex9">
|
||
ЖК «Новая Атмосфера»
|
||
</Trans>
|
||
}
|
||
location={<Trans i18nKey="city4">Россия, Брянск</Trans>}
|
||
video="/videos/Novaya_Atmosfera.mp4"
|
||
logo={"/images/company_logos/Atmosphere/Normal.svg"}
|
||
platforms={["touchscreen", "vr"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/10.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex10">
|
||
ЖК «Тринити»
|
||
</Trans>
|
||
}
|
||
location={
|
||
<Trans i18nKey="city1">Россия, Екатеринбург</Trans>
|
||
}
|
||
video="/videos/Trinity.mp4"
|
||
logo={"/images/company_logos/NKS/Normal.svg"}
|
||
platforms={["touchscreen", "vr", "mobile"]}
|
||
/>
|
||
<ComplexCard
|
||
image="/images/cards/11.jpg"
|
||
name={
|
||
<Trans i18nKey="residentialСomplex11">
|
||
ЖК «Дом на Опалихинской»
|
||
</Trans>
|
||
}
|
||
location={
|
||
<Trans i18nKey="city1">Россия, Екатеринбург</Trans>
|
||
}
|
||
video="/videos/Dom_na_Opal.mp4"
|
||
logo={"/images/company_logos/Mayak/Normal.svg"}
|
||
platforms={["mobile"]}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
{!isShowComplexCards && (
|
||
<button
|
||
className="flex items-center self-center space-x-3 2xl:text-2xl xl:text-xl"
|
||
onClick={() => setIsShowComplexCards(true)}
|
||
>
|
||
<span>
|
||
<Trans i18nKey="implementedProjectsBtn">
|
||
Показать больше
|
||
</Trans>
|
||
</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="relative lg:block hidden">
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="mb-48">
|
||
<Title>
|
||
<Trans i18nKey="weAreTrustedHeading">Нам доверяют</Trans>
|
||
</Title>
|
||
<motion.div
|
||
initial={{ backgroundPositionX: "0%" }}
|
||
animate={{ backgroundPositionX: "10000%" }}
|
||
transition={{
|
||
repeat: Infinity,
|
||
ease: "linear",
|
||
duration: 2400,
|
||
}}
|
||
className="absolute top-32 left-0 h-[200px] w-full bg-repeat-x"
|
||
style={{
|
||
backgroundImage: `url('/images/${
|
||
i18n.language === "ru" ? "logos" : "logos_en"
|
||
}.svg')`,
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t-2 border-[#212431] 2xl:pt-28 lg:pt-20 pt-12 pb-8">
|
||
<div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
|
||
<div className="space-y-16">
|
||
<div className="grid sm:grid-cols-2 gap-8">
|
||
<div className="space-y-12">
|
||
<Title>
|
||
<Trans i18nKey={"contactUsHeading"}>Свяжитесь с нами</Trans>
|
||
</Title>
|
||
|
||
<p className="2xl:text-4xl lg:text-3xl text-2xl">
|
||
<Trans i18nKey={"contactUsDesc"}>
|
||
Хотите увеличить конверсию?
|
||
<br />
|
||
Давайте обсудим детали!
|
||
</Trans>
|
||
</p>
|
||
|
||
<div className="sm:block hidden">
|
||
<img src="/images/shapes/5.svg" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<form
|
||
onSubmit={handleSubmitSendMail}
|
||
className="xl:space-y-12 lg:space-y-10 space-y-8"
|
||
>
|
||
<div className="xl:space-y-8 lg:space-y-6 space-y-4">
|
||
<div className="space-y-2">
|
||
<p className="text-xl text-[#8088A7]">
|
||
<Trans i18nKey={"contactUsLabelName"}>Имя*</Trans>
|
||
</p>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={fullname}
|
||
onChange={(e) => setFullname(e.target.value)}
|
||
className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<p className="text-xl text-[#8088A7]">Email*</p>
|
||
<input
|
||
required
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<p className="text-xl text-[#8088A7]">
|
||
<Trans i18nKey={"contactUsLabelPhone"}>Телефон</Trans>
|
||
</p>
|
||
<InputMask
|
||
mask={"+999999999999999"}
|
||
maskChar={null}
|
||
type="text"
|
||
value={phone}
|
||
onChange={(e) => setPhone(e.target.value)}
|
||
className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<p className="text-xl text-[#8088A7]">
|
||
<Trans i18nKey={"contactUsLabelRequest"}>
|
||
Ваш запрос
|
||
</Trans>
|
||
</p>
|
||
<textarea
|
||
value={request}
|
||
onChange={(e) => setRequest(e.target.value)}
|
||
className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full h-52 resize-none"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="2xl:text-xl sm:text-base text-sm flex items-center space-x-4">
|
||
<div>
|
||
<input
|
||
required
|
||
type="checkbox"
|
||
defaultChecked={true}
|
||
className="absolute opacity-0 h-10 w-10 cursor-pointer"
|
||
/>
|
||
<div className="bg-[#212431] rounded-lg h-10 w-10 p-1">
|
||
<svg
|
||
width="32"
|
||
height="32"
|
||
viewBox="0 0 32 32"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="hidden"
|
||
>
|
||
<path
|
||
d="M6.6665 14.6667L13.3332 21.3334L25.3332 10.6667"
|
||
stroke="#F2F2F2"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span className="text-[#8088A7] text-opacity-50">
|
||
<Trans i18nKey="contactUsCheckboxText1">
|
||
Я согласен с
|
||
</Trans>
|
||
</span>{" "}
|
||
<a
|
||
href="https://graff.tech/privacypolicy"
|
||
target="_blank"
|
||
>
|
||
<Trans i18nKey="contactUsCheckboxText2">
|
||
политикой конфиденциальности
|
||
</Trans>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className="2xl:text-3xl sm:text-2xl text-lg w-full px-8 py-4 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] rounded-full opacity-95 hover:opacity-100 transition-opacity"
|
||
>
|
||
<Trans i18nKey="contactUsBtn">Отправить заявку</Trans>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div className="h-0.5 bg-[#212431]"></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-[#8088A7]">
|
||
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-[#8088A7]">
|
||
<Trans i18nKey="feedbackTitle2">Телефон</Trans>
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl">
|
||
<Trans i18nKey="phoneСountryСode">8</Trans> 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-[#8088A7]">
|
||
<Trans i18nKey="feedbackTitle1">Сайт</Trans>
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl">
|
||
<a href="https://graff.tech" target="_blank">
|
||
graff.tech
|
||
</a>
|
||
</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<p className="2xl:text-xl sm:text-lg text-[#8088A7]">
|
||
<Trans i18nKey="feedbackTitle3">Социальные сети</Trans>
|
||
</p>
|
||
<p className="2xl:text-3xl sm:text-2xl text-xl space-x-4">
|
||
<a
|
||
href="https://www.youtube.com/@GRAFFtech"
|
||
target="_blank"
|
||
>
|
||
YouTube
|
||
</a>
|
||
<a
|
||
href="https://vk.com/graff.interactive"
|
||
target="_blank"
|
||
>
|
||
VK
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="h-0.5 bg-[#212431]"></div>
|
||
|
||
<div className="flex sm:flex-row flex-col flex-wrap sm:items-center gap-12 items-start text-[#C5C7CE] 2xl:text-xl">
|
||
<div className="flex items-center space-x-12">
|
||
<img src="/logo.svg" alt="" />
|
||
<a href="https://graff.tech/privacypolicy" target="_blank">
|
||
<Trans i18nKey="footerText1">
|
||
Политика конфиденциальности
|
||
</Trans>
|
||
</a>
|
||
</div>
|
||
<p>
|
||
© 2023 GRAFF interactive.{" "}
|
||
<Trans i18nKey="footerText2">Все права защищены</Trans>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Modal />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App;
|