Animated Card

1import Image, { StaticImageData } from "next/image";
2 
3const AnimatedCard = ({
4  imgSrc,
5  title,
6 
7  aboutProduct,
8}: {
9  imgSrc: StaticImageData | string;
10  title: string;
11 
12  aboutProduct: string;
13}) => {
14  return (
15    <div className="md:w-80 border rounded-2xl shadow-lg border-white dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900 overflow-hidden transition-transform duration-300 hover:scale-105">
16      <div className="p-5 flex flex-col items-center">
17        <Image
18          className="w-32 h-32 object-contain mb-4"
19          src={imgSrc}
20          alt={`${title} logo`}
21          width={128}
22          height={128}
23        />
24        <div className="text-center space-y-1">
25          <div className="text-2xl font-bold tracking-tight text-foreground">{title}</div>
26 
27          <p className="text-sm text-muted-foreground mt-2">{aboutProduct}</p>
28        </div>
29      </div>
30    </div>
31  );
32};
33 
34export default AnimatedCard;