48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import ArrowIcon from "./icons/ArrowIcon";
|
|
|
|
interface FeatureItemProps {
|
|
title: string;
|
|
desc: string;
|
|
video: string;
|
|
handleHoverStart?: (video: string) => void;
|
|
handleHoverEnd?: () => void;
|
|
}
|
|
|
|
function FeatureItem({
|
|
title,
|
|
desc,
|
|
video,
|
|
handleHoverStart,
|
|
handleHoverEnd,
|
|
}: FeatureItemProps) {
|
|
return (
|
|
<div
|
|
className="group relative"
|
|
onMouseEnter={() => handleHoverStart && handleHoverStart(video)}
|
|
onMouseLeave={() => handleHoverEnd && handleHoverEnd()}
|
|
>
|
|
<div className="relative border-b border-[#3D425C] py-16 flex justify-between items-center h-36 cursor-default overflow-hidden ">
|
|
<div className="overflow-hidden py-2">
|
|
<p className="group-hover:opacity-0 group-hover:-translate-y-[125%] transition-all 2xl:text-[32px] xl:text-2xl text-xl font-gilroy font-medium leading-none duration-300">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
|
|
<p className="group-hover:opacity-100 group-hover:translate-y-0 opacity-0 translate-y-[100%] absolute transition-all w-4/5 duration-300 2xl:text-base text-sm">
|
|
{desc}
|
|
</p>
|
|
|
|
<div className="group-hover:opacity-100 opacity-0 blur-[10px] absolute -top-[100%] left-0 transition-opacity duration-300">
|
|
<img src="/images/blendings/8.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="group-hover:opacity-0 group-hover:translate-x-[100%] transition-all absolute top-[50%] right-0 -translate-y-[50%] mt-0.5 duration-300">
|
|
<ArrowIcon />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FeatureItem;
|