58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
import { motion } from "framer-motion";
|
||
import { PrimeModal } from "../modals/PrimeModal";
|
||
import { useModalStore } from "@/stores/useModalStore";
|
||
import SwitchIcon from "@/components/icons/SwitchIcon";
|
||
|
||
export function InterierConfiguratorCard({ slide }: { slide: number }) {
|
||
const { setModal } = useModalStore();
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{
|
||
opacity: +(slide > 11),
|
||
bottom: slide > 11 ? "38.026vh" : "93.684vh",
|
||
}}
|
||
onClick={() =>
|
||
setModal(
|
||
<PrimeModal
|
||
categoryTitle="Опции"
|
||
packages={["Премиум", "Бизнес"]}
|
||
text="Конфигуратор интерьера убирает лишние сомнения: клиент видит сразу несколько вариантов отделки и выбирает тот, что ближе к его вкусам — что часто ускоряет заключение договора."
|
||
title="Конфигуратор интерьера"
|
||
src="/img/pages/prime/configuratorInterior.png"
|
||
/>
|
||
)
|
||
}
|
||
className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] absolute bg-[#37393B99] w-[13.542vw] h-[17.105vh] flex flex-col justify-between backdrop-blur-[47.6px] right-[27.847vw] cursor-pointer${
|
||
slide <= 11 ? " pointer-events-none" : ""
|
||
}`}
|
||
>
|
||
<img
|
||
src="/img/pages/prime/ruble.png"
|
||
className="w-[0.833vw] absolute"
|
||
alt=""
|
||
/>
|
||
<div className="flex relative justify-center">
|
||
<img
|
||
src="/img/pages/prime/configuratorInterier1.jpg"
|
||
alt=""
|
||
className="rounded-full w-[4.444vw] aspect-square"
|
||
/>
|
||
<div className="bg-gradient rounded-full p-[0.538vw] absolute z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||
<div className="text-white lg:size-[1.076vw] size-[1.076vw]">
|
||
<SwitchIcon />
|
||
</div>
|
||
</div>
|
||
<img
|
||
src="/img/pages/prime/configuratorInterier2.jpg"
|
||
alt=""
|
||
className="rounded-full w-[4.444vw] aspect-square"
|
||
/>
|
||
</div>
|
||
<p className="btns font-medium">Конфигуратор интерьера</p>
|
||
</motion.div>
|
||
);
|
||
}
|