upd
This commit is contained in:
+96
-85
@@ -104,7 +104,7 @@ function App() {
|
||||
<div className="space-y-32">
|
||||
<div className="space-y-8">
|
||||
<Title>
|
||||
Эффективность инстумента
|
||||
Эффективность инструмента
|
||||
<br />
|
||||
продаж в цифрах
|
||||
</Title>
|
||||
@@ -119,7 +119,7 @@ function App() {
|
||||
<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 ">
|
||||
<span className="text-gradient font-gilroy text-8xl">
|
||||
18%
|
||||
</span>
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@ function App() {
|
||||
<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 ">
|
||||
<span className="text-gradient font-gilroy text-8xl">
|
||||
12%
|
||||
</span>
|
||||
{/* <span className="text-gradient text-2xl font-bold">раз</span> */}
|
||||
@@ -148,7 +148,7 @@ function App() {
|
||||
<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 ">
|
||||
<span className="text-gradient font-gilroy text-8xl">
|
||||
2
|
||||
</span>
|
||||
<span className="text-gradient text-2xl font-bold">
|
||||
@@ -165,13 +165,15 @@ function App() {
|
||||
<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 className="text-gradient font-gilroy text-8xl">
|
||||
4
|
||||
</span>
|
||||
<span className="text-gradient text-2xl font-bold">
|
||||
раз
|
||||
</span>
|
||||
</div>
|
||||
<p className="sm:text-lg">
|
||||
что-то на умном
|
||||
<br />в две строчки
|
||||
сокращает время на подготовку рекламных материалов
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -550,62 +552,51 @@ function App() {
|
||||
|
||||
<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="lg:grid grid-cols-2 items-center">
|
||||
<div className="space-y-14">
|
||||
<Title>
|
||||
Покажите все преимущества вашего жилого комплекса клиенту
|
||||
<br />
|
||||
из любой точки мира
|
||||
</Title>
|
||||
<div className="w-3/4 space-y-4">
|
||||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||||
Высокий уровень графики и полное погружение покупателя в
|
||||
процесс выбора квартиры.
|
||||
</p>
|
||||
<p className="2xl:text-2xl sm:text-xl text-lg">
|
||||
Местоположение и устройство значения не имеют. Нужен только
|
||||
интернет.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="https://stream.graff.tech/"
|
||||
target="_blank"
|
||||
className="flex items-center px-6 py-3 space-x-4 w-fit border border-[#BC75FF] rounded-full"
|
||||
>
|
||||
<span className="2xl:text-xl text-lg">Узнать больше</span>
|
||||
|
||||
<div className="grid lg:grid-cols-2 lg:gap-4 items-center">
|
||||
<div className="relative z-10 space-y-16">
|
||||
<div className="space-y-14">
|
||||
<Title>
|
||||
Покажите все преимущества вашего жилого комплекса клиенту{" "}
|
||||
<br className="2xl:block hidden" />
|
||||
из любой точки мира
|
||||
</Title>
|
||||
<div className="2xl:text-2xl sm:text-xl text-lg space-y-4">
|
||||
<p>
|
||||
Высокий уровень графики и полное погружение
|
||||
<br />
|
||||
покупателя в процесс выбора квартиры.
|
||||
</p>
|
||||
<p>
|
||||
Местоположение и устройство значения не имеют.
|
||||
<br />
|
||||
Нужен только интернет.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<a
|
||||
href="https://stream.graff.tech"
|
||||
target="_blank"
|
||||
className="w-fit text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full cursor-pointer"
|
||||
<svg
|
||||
width="9"
|
||||
height="16"
|
||||
viewBox="0 0 9 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<path
|
||||
d="M1.00002 15L8 7.99998L1.00002 1"
|
||||
stroke="#F2F2F2"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Map />
|
||||
|
||||
{/* <div className="lg:absolute xl:top-2 lg:top-[335px] right-4 2xl:w-full lg:w-[52%] w-full flex lg:justify-end">
|
||||
<img src="/images/devices.png" alt="" className="" />
|
||||
</div> */}
|
||||
<div className="lg:-translate-x-[10%] -translate-x-[5%] lg:block flex flex-col items-center lg:pt-0 pt-[40%] lg:pb-0 pb-[20%]">
|
||||
<Map />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -637,34 +628,37 @@ function App() {
|
||||
<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">
|
||||
{/* <ComplexCard
|
||||
image="/images/cards/1.jpg"
|
||||
name="ЖК «Life Резиденция»"
|
||||
location="Россия, Тюмень."
|
||||
/> */}
|
||||
<ComplexCard
|
||||
image="/images/cards/5.jpg"
|
||||
name="ЖК «Айвазовский»"
|
||||
location="Россия, Тюмень."
|
||||
src="/videos/Ivazowsky.mp4"
|
||||
video="/videos/Ivazowsky.mp4"
|
||||
logo="/images/company_logos/Enko/Normal.svg"
|
||||
platforms={["touchscreen", "vr"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/2.jpg"
|
||||
name="МФК «Re:volution towers»"
|
||||
location="Россия, Екатеринбург."
|
||||
src="/videos/RE_Volution_Towers.mp4"
|
||||
video="/videos/RE_Volution_Towers.mp4"
|
||||
logo={"/images/company_logos/NKS/Normal.svg"}
|
||||
platforms={["touchscreen"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/4.jpg"
|
||||
name="ЖК «Авторский квартал Машаров»"
|
||||
location="Россия, Тюмень."
|
||||
src="/videos/Masharov.mp4"
|
||||
video="/videos/Masharov.mp4"
|
||||
logo={"/images/company_logos/Sibintel/Normal.svg"}
|
||||
platforms={["touchscreen"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/8.jpg"
|
||||
name="ЖК «Уральский»"
|
||||
location="Россия, Екатеринбург."
|
||||
src="/videos/Uralsky.mp4"
|
||||
video="/videos/Uralsky.mp4"
|
||||
logo={"/images/company_logos/Efes/Normal.svg"}
|
||||
platforms={["touchscreen", "vr"]}
|
||||
/>
|
||||
|
||||
{isShowComplexCards && (
|
||||
@@ -673,49 +667,51 @@ function App() {
|
||||
image="/images/cards/3.jpg"
|
||||
name="Iskan Abu Dhabi"
|
||||
location="ОАЭ, Абу-Даби."
|
||||
src="/videos/Iskan_Abu_Dhabi.mp4"
|
||||
video="/videos/Iskan_Abu_Dhabi.mp4"
|
||||
logo={"/images/company_logos/AbuDhabi/Normal.svg"}
|
||||
platforms={["touchscreen"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/6.jpg"
|
||||
name="ЖК «Графика»"
|
||||
location="Россия, Санкт-Петербург."
|
||||
src="/videos/Grafika.mp4"
|
||||
video="/videos/Grafika.mp4"
|
||||
logo={"/images/company_logos/Mavis/Normal.svg"}
|
||||
platforms={["touchscreen", "vr"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/7.jpg"
|
||||
name="ЖК «4you»"
|
||||
location="Россия, Екатеринбург."
|
||||
src="/videos/4you.mp4"
|
||||
video="/videos/4you.mp4"
|
||||
logo={"/images/company_logos/Atlas/Normal.svg"}
|
||||
platforms={["touchscreen"]}
|
||||
/>
|
||||
|
||||
<ComplexCard
|
||||
image="/images/cards/9.jpg"
|
||||
name="ЖК «Новая Атмосфера»"
|
||||
location="Россия, Брянск."
|
||||
src="/videos/Novaya_Atmosfera.mp4"
|
||||
video="/videos/Novaya_Atmosfera.mp4"
|
||||
logo={"/images/company_logos/Atmosphere/Normal.svg"}
|
||||
platforms={["touchscreen", "vr"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/10.jpg"
|
||||
name="ЖК «Тринити»"
|
||||
location="Россия, Екатеринбург."
|
||||
src="/videos/Trinity.mp4"
|
||||
video="/videos/Trinity.mp4"
|
||||
logo={"/images/company_logos/NKS/Normal.svg"}
|
||||
platforms={["touchscreen", "vr", "mobile"]}
|
||||
/>
|
||||
<ComplexCard
|
||||
image="/images/cards/11.jpg"
|
||||
name="ЖК «Дом на Опалихинской»"
|
||||
location="Россия, Екатеринбург."
|
||||
src="/videos/Dom_na_Opal.mp4"
|
||||
video="/videos/Dom_na_Opal.mp4"
|
||||
logo={"/images/company_logos/Mayak/Normal.svg"}
|
||||
platforms={["mobile"]}
|
||||
/>
|
||||
{/* <ComplexCard
|
||||
image="/images/cards/12.jpg"
|
||||
name="ЖК «Свой Круг»"
|
||||
location="Россия, Екатеринбург."
|
||||
/> */}
|
||||
{/* <ComplexCard
|
||||
image="/images/cards/13.jpg"
|
||||
name="ЖК «Александровский»"
|
||||
location="Россия, Нижний Тагил."
|
||||
/> */}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -746,6 +742,21 @@ function App() {
|
||||
</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>Нам доверяют</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/logos.svg')" }}
|
||||
/>
|
||||
</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">
|
||||
|
||||
@@ -6,17 +6,26 @@ interface IRelevantExpCard {
|
||||
image: string;
|
||||
name: string;
|
||||
location: string;
|
||||
src?: string;
|
||||
video?: string;
|
||||
logo: string;
|
||||
platforms: string[]; // touchscreen, vr, mobile
|
||||
}
|
||||
|
||||
function RelevantExpCard({ image, name, location, src }: IRelevantExpCard) {
|
||||
function RelevantExpCard({
|
||||
image,
|
||||
name,
|
||||
location,
|
||||
video,
|
||||
logo,
|
||||
platforms,
|
||||
}: IRelevantExpCard) {
|
||||
const [modalComponent, setModalComponent] = useModalStore((state) => [
|
||||
state.component,
|
||||
state.setComponent,
|
||||
]);
|
||||
|
||||
function handleClick() {
|
||||
if (src) {
|
||||
if (video) {
|
||||
setModalComponent(
|
||||
<video
|
||||
muted={true}
|
||||
@@ -25,7 +34,7 @@ function RelevantExpCard({ image, name, location, src }: IRelevantExpCard) {
|
||||
controls={true}
|
||||
className="aspect-video w-full max-h-screen"
|
||||
>
|
||||
<source src={src} type="video/mp4" />
|
||||
<source src={video} type="video/mp4" />
|
||||
</video>
|
||||
);
|
||||
}
|
||||
@@ -38,9 +47,97 @@ function RelevantExpCard({ image, name, location, src }: IRelevantExpCard) {
|
||||
style={{ backgroundImage: `url('${image}')` }}
|
||||
>
|
||||
<div
|
||||
className="bg-black bg-opacity-25 absolute top-0 left-0 w-full h-full flex justify-center items-center cursor cursor-pointer group"
|
||||
className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40 flex justify-center items-center cursor cursor-pointer group"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-full flex justify-between">
|
||||
<div className="sm:p-6 p-3">
|
||||
<img src={logo} alt="" className="sm:w-auto w-16" />
|
||||
</div>
|
||||
|
||||
<div className="flex sm:space-x-2 space-x-1 sm:p-6 p-3">
|
||||
{platforms.map((platform, index) => (
|
||||
<div key={index}>
|
||||
{platform === "touchscreen" && (
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="40" height="40" rx="20" fill="#22222A" />
|
||||
<g clipPath="url(#clip0_1735_27047)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 12V27.9999C8 29.1044 8.89543 29.9999 10 29.9999L30 29.9998C31.1046 29.9998 32 29.1044 32 27.9998V12C32 10.8954 31.1046 10 30 10H10C8.89543 10 8 10.8954 8 12ZM9.99969 12V28L16.4493 28C16.1261 27.0838 16.0086 26.0419 16.0134 24.9999C16.0159 24.4477 16.4611 23.9999 17.0134 23.9999C17.5656 23.9999 18.0134 24.4477 18.0134 24.9999V19C18.0134 18.4477 18.4611 18 19.0134 18C19.5656 18 20.0134 18.4477 20.0134 19V23.2222C20.0134 22.6699 20.4611 22.2222 21.0134 22.2222C21.5656 22.2222 22.0134 22.6699 22.0134 23.2222V24C22.0134 23.4477 22.4611 23 23.0134 23C23.5656 23 24.0134 23.4477 24.0134 24V25.2222C24.0134 24.6699 24.4611 24.2222 25.0134 24.2222C25.5656 24.2222 26.0134 24.6699 26.0134 25.2222V27.2777C26.0134 27.531 25.9917 27.7719 25.9496 28.0001L29.9997 28.0001L29.9997 12H9.99969ZM20.4393 14.2099C19.7636 14.0084 19.053 13.9512 18.3542 14.0417C17.6554 14.1321 16.9819 14.3685 16.3788 14.7373C15.7756 15.1061 15.2556 15.5997 14.8561 16.1877C14.4564 16.7759 14.187 17.4443 14.0688 18.1487C13.9505 18.8531 13.9866 19.5742 14.1743 20.2629C14.3195 20.7958 14.8692 21.11 15.402 20.9648C15.9349 20.8196 16.2491 20.27 16.1039 19.7371C15.9923 19.3274 15.9708 18.8986 16.0412 18.4798C16.1115 18.061 16.2717 17.6629 16.5103 17.3118C16.7488 16.9607 17.06 16.665 17.4222 16.4436C17.7843 16.2221 18.1896 16.0797 18.6109 16.0251C19.0323 15.9706 19.4606 16.0051 19.8676 16.1265C20.2746 16.2479 20.6516 16.4536 20.973 16.7308C21.2945 17.008 21.5531 17.3505 21.7308 17.736C21.9084 18.1216 22.0007 18.5408 22.0007 18.9655C22.0007 19.5178 22.4484 19.9655 23.0007 19.9655C23.5529 19.9655 24.0007 19.5178 24.0007 18.9655C24.0007 18.251 23.8454 17.5463 23.5472 16.8991C23.2491 16.252 22.8157 15.6789 22.2792 15.2162C21.7427 14.7536 21.1151 14.4115 20.4393 14.2099Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1735_27047">
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
transform="translate(8 8)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
{platform === "vr" && (
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="40" height="40" rx="20" fill="#22222A" />
|
||||
<path
|
||||
d="M12 24.3312V20.0004C12 17.7914 13.7908 16.0005 15.9999 16.0004L23.9999 16.0001C26.209 16.0001 28 17.791 28 20.0001V24.3312C28 25.8051 26.8051 27 25.3312 27C24.828 27 24.3281 26.9187 23.8509 26.7592L22.2187 26.2137C20.7787 25.7325 19.2213 25.7325 17.7813 26.2137L16.1491 26.7592C15.6719 26.9187 15.172 27 14.6688 27C13.1949 27 12 25.8051 12 24.3312Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
<path
|
||||
d="M15.7236 12.5528C15.893 12.214 16.2393 12 16.618 12H23.382C23.7607 12 24.107 12.214 24.2764 12.5528L24.6382 13.2764C24.8044 13.6088 24.5627 14 24.191 14H15.809C15.4373 14 15.1956 13.6088 15.3618 13.2764L15.7236 12.5528Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
<path
|
||||
d="M8.55279 24.2764C8.214 24.107 8 23.7607 8 23.382L8 20.618C8 20.2393 8.214 19.893 8.55279 19.7236L9.27639 19.3618C9.60884 19.1956 10 19.4373 10 19.809L10 24.191C10 24.5627 9.60884 24.8044 9.27639 24.6382L8.55279 24.2764Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
<path
|
||||
d="M31.4472 24.2764C31.786 24.107 32 23.7607 32 23.382L32 20.618C32 20.2393 31.786 19.893 31.4472 19.7236L30.7236 19.3618C30.3912 19.1956 30 19.4373 30 19.809L30 24.191C30 24.5627 30.3912 24.8044 30.7236 24.6382L31.4472 24.2764Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
{platform === "mobile" && (
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="40" height="40" rx="20" fill="#22222A" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.1667 10H25.8333C26.4777 10 27 10.4975 27 11.1111V28.8889C27 29.5025 26.4777 30 25.8333 30H14.1667C13.5223 30 13 29.5025 13 28.8889V11.1111C13 10.4975 13.5223 10 14.1667 10ZM20 29C19.4477 29 19 28.5523 19 28C19 27.4477 19.4477 27 20 27C20.5523 27 21 27.4477 21 28C21 28.5523 20.5523 29 20 29ZM25 12L15 12L15 26L25 26V12Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
className="group-hover:scale-125 transition-transform"
|
||||
width="64"
|
||||
@@ -56,6 +153,7 @@ function RelevantExpCard({ image, name, location, src }: IRelevantExpCard) {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-2">
|
||||
<p className="font-gilroy 2xl:text-4xl sm:text-3xl text-2xl">{name}</p>
|
||||
<p className="text-[#ABABBA] 2xl:text-xl sm:text-lg text-base">
|
||||
|
||||
@@ -26,7 +26,7 @@ function FeatureSliderItem({ title, text, video }: IFeatureSliderItem) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative group aspect-video border border-[#454554] backdrop-blur-lg overflow-hidden"
|
||||
className="relative group aspect-video border-2 border-[#131317] backdrop-blur-lg overflow-hidden"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface IFeatureSliderItem {
|
||||
title: string;
|
||||
text: string;
|
||||
handleHover: () => void;
|
||||
}
|
||||
|
||||
function FeatureSliderItem({ title, text, handleHover }: IFeatureSliderItem) {
|
||||
return (
|
||||
<div
|
||||
className="relative group border border-[#454554] h-1/2 bg-[#2E2E381A] hover:bg-[#2E2E3880] transition-colors duration-300 overflow-hidden backdrop-blur-lg"
|
||||
onMouseEnter={handleHover}
|
||||
>
|
||||
<div className="absolute top-0 xl:p-6 p-3.5 group-hover:opacity-0 transition-all duration-300">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.60278 21.9944L22 2M22 2L21.8896 22M22 2H2"
|
||||
stroke="#D9D9D9"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute top-[64%] xl:p-6 p-3.5 space-y-4 group-hover:top-0 transition-all duration-300">
|
||||
<div className="font-gilroy font-medium uppercase 2xl:text-2xl xl:text-xl tracking-wider">
|
||||
{title}
|
||||
</div>
|
||||
<div className="2xl:text-xl xl:text-lg">{text}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeatureSliderItem;
|
||||
@@ -1,96 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import FeatureSliderItem from "./FeatureSliderItemOld";
|
||||
import { useInView } from "framer-motion";
|
||||
|
||||
function FeatureSlider() {
|
||||
const [selectedItem, setSelectedItem] = useState<string>("");
|
||||
const featureSliderRef = useRef(null);
|
||||
const featureSliderItemRef = useRef<HTMLDivElement>(null);
|
||||
const featureSliderInView = useInView(featureSliderRef);
|
||||
|
||||
useEffect(() => {
|
||||
if (featureSliderInView) {
|
||||
setSelectedItem("/videos/features/virtual_tour.mp4");
|
||||
} else {
|
||||
setSelectedItem("");
|
||||
}
|
||||
}, [featureSliderInView]);
|
||||
|
||||
useEffect(() => {
|
||||
if (featureSliderItemRef.current) {
|
||||
featureSliderItemRef.current.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<video muted autoplay loop playsinline class="absolute fade-in">
|
||||
<source src="${selectedItem}" type="video/mp4" />
|
||||
</video>`
|
||||
);
|
||||
|
||||
if (featureSliderItemRef.current.children.length > 1) {
|
||||
setTimeout(() => {
|
||||
featureSliderItemRef.current?.firstElementChild?.remove();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}, [selectedItem]);
|
||||
|
||||
return (
|
||||
<div ref={featureSliderRef} className="lg:grid grid-cols-2 hidden">
|
||||
<div className="aspect-video">
|
||||
<FeatureSliderItem
|
||||
title="Виртуальный тур по жилому комплексу"
|
||||
text="Клиент лично оценит угол инсоляции, малые архитектурные формы и ландшафт, перемещаясь по комплексу с помощью тапа."
|
||||
handleHover={() => setSelectedItem("/videos/features/virtual_tour.mp4")}
|
||||
/>
|
||||
<FeatureSliderItem
|
||||
title="Вся инфрастуктура на одном экране"
|
||||
text="Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти."
|
||||
handleHover={() => setSelectedItem("/videos/features/nks_infra.mp4")}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={featureSliderItemRef}
|
||||
className="relative aspect-video border border-[#454554] bg-black"
|
||||
></div>
|
||||
<div className="aspect-video">
|
||||
<FeatureSliderItem
|
||||
title="Конфигуратор интерьера"
|
||||
text="Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали."
|
||||
handleHover={() => setSelectedItem("/videos/features/uralsky.mp4")}
|
||||
/>
|
||||
<FeatureSliderItem
|
||||
title="Параметрический поиск квартир"
|
||||
text="Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов."
|
||||
handleHover={() => setSelectedItem("/videos/features/parametric.mp4")}
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-video">
|
||||
<FeatureSliderItem
|
||||
title="Любой рендер за несколько секунд"
|
||||
text="Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации."
|
||||
handleHover={() => setSelectedItem("/videos/features/render.mp4")}
|
||||
/>
|
||||
<FeatureSliderItem
|
||||
title="Формирование вишлиста"
|
||||
text="Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру."
|
||||
handleHover={() => setSelectedItem("/videos/features/wish.mp4")}
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-video">
|
||||
<FeatureSliderItem
|
||||
title="Интеграция с CRM - системой"
|
||||
text="Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир."
|
||||
handleHover={() => setSelectedItem("/videos/features/integra_crm.mp4")}
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-video">
|
||||
<FeatureSliderItem
|
||||
title="Отправка коммерческого предложения"
|
||||
text="Коммерческое предложение с выбранными квартирами может быть отправлено клиенту на почту или распечатано и отдано лично в руки."
|
||||
handleHover={() => setSelectedItem("/videos/features/send.mp4")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeatureSlider;
|
||||
+12199
-14139
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user