49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
import { useModalStore } from "@/stores/useModalStore";
|
||
import { motion } from "framer-motion";
|
||
import { PrimeModal } from "../modals/PrimeModal";
|
||
|
||
export function ThreeDReelsCard({ slide }: { slide: number }) {
|
||
const { setModal } = useModalStore();
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{
|
||
opacity: +(slide > 10),
|
||
bottom: slide > 10 ? "0vw" : undefined,
|
||
}}
|
||
className={`p-[1.389vw] rounded-[1.389vw] -translate-y-[1.389vw] w-[13.611vw] h-[36.447vh] flex flex-col justify-between absolute bg-[#37393B99] right-[27.847vw] cursor-pointer${
|
||
slide <= 10 ? " pointer-events-none" : ""
|
||
}`}
|
||
onClick={() =>
|
||
setModal(
|
||
<PrimeModal
|
||
categoryTitle="Рекламные материалы"
|
||
packages={["Стандарт"]}
|
||
src="/videos/pages/prime/3d_reels.mp4"
|
||
title="3D-рилс"
|
||
text="3D-рилс — это быстрый путь в Instagram, TikTok и остальные соцсети. Наглядная мини-презентация ЖК в динамике, которую можно оперативно выпустить в ленту и зацепить потенциальных клиентов."
|
||
/>
|
||
)
|
||
}
|
||
>
|
||
<p className="btns font-medium px-[0.833vw] py-[0.486vw] rounded-[1.181vw] bg-[#37393B99] backdrop-blur-xs self-end">
|
||
{slide === 11
|
||
? "1 ролик"
|
||
: slide === 12
|
||
? "3 ролика"
|
||
: slide === 13
|
||
? "6 роликов"
|
||
: "12 роликов"}
|
||
</p>
|
||
<img
|
||
src="/img/pages/prime/phone.png"
|
||
className="self-center w-[6.319vw]"
|
||
alt="3d-reels"
|
||
/>
|
||
<p className="btns self-start font-medium">3D-рилс</p>
|
||
</motion.div>
|
||
);
|
||
}
|