119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import { useMediaQueries } from "@/hooks/useMediaQueries";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useRef } from "react";
|
||
|
||
export default function ContentSlideCards({
|
||
active = false,
|
||
id,
|
||
index,
|
||
}: {
|
||
active?: boolean;
|
||
id: number;
|
||
index?: number;
|
||
}) {
|
||
const CardsRef = useRef(null);
|
||
|
||
const { isLg, isMd } = useMediaQueries();
|
||
|
||
const cardsSize =
|
||
(isLg && (active ? "23.063vw" : "15.882vw")) ||
|
||
(isMd && (active ? "40vw" : "25vw")) ||
|
||
"75vw";
|
||
|
||
return (
|
||
<motion.div
|
||
// key={id}
|
||
initial={{
|
||
maxWidth: isLg
|
||
? index === 1
|
||
? "48.125vw"
|
||
: "23.611vw"
|
||
: isMd
|
||
? index === 1
|
||
? "54.688vw"
|
||
: "31.25vw"
|
||
: "94.444vw",
|
||
}}
|
||
animate={{
|
||
maxWidth: isLg
|
||
? index === 2
|
||
? "48.125vw"
|
||
: "23.611vw"
|
||
: isMd
|
||
? index === 2
|
||
? "54.688vw"
|
||
: "31.25vw"
|
||
: "94.444vw",
|
||
}}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="lg:h-[37.361vw] md:h-[68.448vw] h-[151.111vw] relative flex items-center justify-center flex-shrink-0 snap-center w-full select-none pointer-events-none"
|
||
>
|
||
<AnimatePresence>
|
||
{active && (
|
||
<motion.div
|
||
ref={CardsRef}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="absolute inset-0 w-full h-full z-[4]"
|
||
>
|
||
<motion.div
|
||
initial={{ x: "-4.167vw", y: "4.167vw" }}
|
||
animate={{ x: 0, y: 0 }}
|
||
exit={{ x: "-4.167vw", y: "4.167vw" }}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="lg:w-[15.403vw] md:w-[18.229vw] w-[41vw] flex flex-col lg:gap-[0.694vw] gap-2 lg:p-[1.389vw] p-4 bg-[#37393B99] backdrop-blur-[5px] rounded-[1.111vw] absolute lg:right-[5.25vw] lg:top-[2.625vw] right-0 top-0
|
||
max-md:top-[15vw] max-md:right-[5vw] max-md:rounded-[4.444vw] md:max-lg:p-[2.083vw] md:max-lg:right-[2.083vw] md:max-lg:top-[10vw]"
|
||
>
|
||
<span className="headline2">
|
||
Premium visual experience by 360°
|
||
</span>
|
||
<p className="text2 text-[#FFFFFF60]">
|
||
Crystal‑clear imagery that pulls you into the project
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<motion.img
|
||
key="card_top"
|
||
animate={{
|
||
translateX: active ? "-3.819vw" : "-0.347vw",
|
||
translateY: active ? "-3.819vw" : "-0.347vw",
|
||
width: cardsSize,
|
||
}}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="absolute z-[3] lg:rounded-[0.417vw] rounded-2xl"
|
||
src="/img/pages/web/content/card_top.webp"
|
||
alt=""
|
||
/>
|
||
<motion.img
|
||
key="card_md"
|
||
animate={{
|
||
translateX: "0px",
|
||
translateY: "0px",
|
||
width: cardsSize,
|
||
}}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="absolute z-[2] lg:rounded-[0.417vw] rounded-2xl"
|
||
src="/img/pages/web/content/card_md.webp"
|
||
alt=""
|
||
/>
|
||
<motion.img
|
||
key="card_bt"
|
||
animate={{
|
||
translateX: active ? "3.819vw" : "0.347vw",
|
||
translateY: active ? "3.819vw" : "0.347vw",
|
||
width: cardsSize,
|
||
}}
|
||
transition={{ duration: 0.5, type: "just" }}
|
||
className="absolute z-[1] lg:rounded-[0.417vw] rounded-2xl"
|
||
src="/img/pages/web/content/card_bt.png"
|
||
alt=""
|
||
/>
|
||
</motion.div>
|
||
);
|
||
}
|